사례 02 Unity 에디터 · AI 협업 재직 중

DXCenter LG에너지솔루션 디지털트윈 에디터

비개발자(콘텐츠 제작자)가 코드 수정 없이 디지털트윈 콘텐츠를 제작·검수·배포할 수 있는 Unity 에디터 확장 저작도구. LG에너지솔루션 PRI 교육·시각화 시스템.

code test-customwindow_rims
기술 구성
Unity 6 LTS URP · WebGL UI Toolkit
Simulation Tooling / Digital Twin

디지털트윈 제작 시스템과 에디터 아키텍처가 핵심인 프로젝트입니다.

내 역할

에디터 아키텍처, 9개 EditorWindow, DXEditorWindowBase, 데이터 매핑 흐름을 직접 만들었습니다.

문제

비개발자가 코드 수정 없이 디지털트윈 콘텐츠를 제작, 검수, 배포할 수 있는 저작 환경이 필요했습니다.

결과

9개 에디터 창과 43개 C# 파일 구조로 Site, Floor, Equipment, Part 단위 제작 흐름을 실제 운영 가능한 수준으로 묶었습니다.

왜 중요한가

개발자 의존도를 줄이고 콘텐츠팀이 직접 다룰 수 있는 제작 시스템을 만든 툴링 사례입니다.

Before / After
  • Before 씬, 데이터, UI 수정이 개발자 코드 변경과 수동 설정에 묶여 있었습니다.
  • After 콘텐츠 제작자가 Site, Floor, Equipment, Part 단위로 직접 편집하고 검수할 수 있게 했습니다.
  • 결과 제작과 검수 경로가 EditorWindow 중심으로 바뀌고 배포 전 확인 지점도 더 분명해졌습니다.
운영 안전장치
  • DXEditorWindowBase로 씬 컨텍스트 자동 감지, Undo, Play Mode 보호를 공통 처리했습니다.
  • Dummy / Live 서버 전환을 분리해 개발과 운영 모드를 나눌 수 있게 했습니다.
  • Build Settings 자동 동기화와 GameBootstrap 갱신으로 수동 누락을 줄였습니다.
DXCenter 커스텀 에디터 — 9개 EditorWindow 통합 패널

DXCenter 커스텀 에디터

9개 EditorWindow 통합 패널 — DXEditorWindowBase 추상 클래스로 씬 컨텍스트 자동 감지, Undo 지원, Play Mode 보호. Site 단위 (건물→층→장비→파트) 4단계 콘텐츠 구조.

lock
비공개 내부 시스템

LG에너지솔루션 PRI 관련 내부용 시스템으로 외부 공개 링크 없음. 위 스크린샷은 사내 검토용으로 공유된 자료.

문제 정의

비개발자가 만들 수 있는 디지털트윈 저작도구

LG에너지솔루션 PRI 교육·시각화 시스템 — 콘텐츠 제작자(비개발자)가 코드 수정 없이 디지털트윈 콘텐츠를 제작·검수·배포할 수 있어야 했다.

핵심 제약: (1) 비개발자가 직관적으로 조작할 수 있는 UX, (2) Editor 작업이 Runtime/WebGL 모두에서 안정 동작, (3) 콘텐츠 구조가 확장 가능 (건물 → 층 → 장비 → 파트), (4) Dummy/Live 서버 모드 전환 자유.

해결: Unity 에디터 확장 전체를 설계·구현했습니다. 9개 커스텀 EditorWindow + DXEditorWindowBase 추상 클래스 + 5가지 아키텍처 패턴으로 제작 흐름을 만들고, AI 협업은 구현 보조에 활용했습니다.

apps

9

커스텀 에디터 창

architecture

5

구조 패턴

code

43

C# 파일 (에디터 23 + 런타임 20)

groups

3

Claude CLI 3개 (역할 분리 워크플로)

5가지 구조 패턴

디지털트윈 저작도구를 구성한 5가지 패턴

database

ScriptableObject as Data

콘텐츠 데이터를 ScriptableObject로 직렬화. GameBootstrap SO 자동 업데이트로 현장 전환 시 참조 자동 갱신.

hub

Service Locator

에디터/런타임 모듈 간 의존성을 Service Locator로 분리. 에디터에서 더미 서비스, 런타임에서 라이브 서비스 주입.

bolt

EventBus Pub/Sub

EditorWindow 간 통신을 이벤트 기반으로. AssetManager가 추가하면 EquipmentManager가 자동 인지.

extension

Strategy (IStateEffect)

상태 효과 4종 (Alpha / Blink / ColorChange / Highlight)을 Strategy 패턴으로 교체 가능하게.

undo

Command (Undo/Redo)

에디터 모든 작업을 Command로 캡슐화. Unity Editor의 Undo 시스템과 통합.

layers

DXEditorWindowBase

9개 EditorWindow의 공통 기반 추상 클래스. 씬 컨텍스트 자동 감지, Undo 지원, Play Mode 보호 자동.

DXCenter 에디터 전체 화면
통합 패널 전체 구조
DXCenter 에디터 중간 영역 확대
실제 제작·검수 흐름이 모이는 중간 작업 영역
DXCenter 에디터 우측 패널 확대
운영 데이터와 상태 편집이 집중되는 우측 패널

AI 협업 흐름

AI 협업을 역할별로 나눠 사용한 방식

구현, 검토, 기록 역할을 나눠 AI 협업을 보조적으로 사용했습니다.

01
supervised_user_circle

CLI 1 · 감독관

설계 / 검토
  • · 설계 검증
  • · 코드 리뷰
  • · 아키텍처 판단
  • · 패턴 일관성 점검
02
code

CLI 2 · 개발자

구현 담당
  • · 실제 코드 구현
  • · 단위 테스트 작성
  • · 빌드 검증
  • · 감독관 피드백 반영
03
person

CLI 3 · 고객저작자

UX 검수 (비개발자)
  • · 비개발자 관점 워크플로우 테스트
  • · UX 검증
  • · 직관성 평가
  • · 실수 가능 지점 발굴
CLAUDE.md 관리

방법론을 코드와 함께 버전 관리

아키텍처 패턴, 코딩 컨벤션, 금지 패턴, 실수 이력까지 CLAUDE.md에 체계적으로 관리. 매 세션마다 3 CLI가 같은 컨텍스트로 시작.

# CLAUDE.md
## 아키텍처 패턴
- ScriptableObject as Data
- Service Locator
- EventBus Pub/Sub
- Strategy (IStateEffect)
- Command (Undo/Redo)
## 금지 패턴
- DontDestroyOnLoad in Editor
- Play Mode 변경 손실
## 실수 이력
- ...

구현 세부

DXCenter 구현 세부 화면
콘텐츠 구조, 상태 효과, 더미·라이브 전환, 빌드 흐름이 하나의 에디터 안에서 이어집니다.

Site 4단계 콘텐츠 구조

1
Site (현장)
2
Building (건물)
3
Floor (층)
4
Equipment → Part (장비 → 파트)

콘텐츠 제작자가 트리 구조로 직관적 탐색·편집. 각 노드마다 메타데이터·3D 모델·교육 콘텐츠 연결.

call_split

Editor/Runtime asmdef 분리

Editor 전용 코드와 Runtime 코드를 asmdef로 완전 분리. 빌드 사이즈 최적화.

swap_horiz

Dummy ↔ Live 전환

서버 의존성 없이 에디터에서 더미 데이터로 작업. 클릭 한 번으로 라이브 모드.

cloud_upload

WebGL 원클릭 빌드

Build Settings 자동 동기화 + WebGL 압축 최적화 + 자동 배포 파이프라인. 콘텐츠 제작자가 빌드 과정을 알 필요 없음.

auto_fix_high

State Effect 4종 (Strategy)

Alpha
Blink
ColorChange
Highlight

프로젝트 의미

통합 협업 환경 구축

DXCenter 도입 후 콘텐츠 제작 절차 표준화. 기획자·제작자·검수자가 같은 도구에서 작업하면서 실수가 크게 줄었음. 비개발자도 직관적으로 사용 가능한 워크플로우.

패턴 일관성과 비개발자 사용성을 함께 검토하면서 에디터 구조를 다듬은 사례입니다.

프로젝트 요약
콘텐츠 제작 절차 표준화

기획·제작·검수 통합 워크플로우

checklist
QA · 검수 흐름

검수 관점 사전 확인

verified
AI 협업 방식

3 CLI 기반 역할 분리

groups

EditorWindow 9종

DXCenterMainPanel, AssetManagerWindow, CameraEditorWindow, DataMappingWindow, EquipmentManagerWindow, NavigationEditorWindow, StateEffectWindow, UIEditorWindow, ProjectWizard까지 하나의 저작 흐름으로 묶었습니다.

Runtime 코어 20파일

GameBootstrap, FloorBootstrap, SceneAutoLoader, EventBus, ServiceLocator, DXCameraController, NavigationController, BuildingSelectUI, FloorSceneUI 같은 런타임 코어를 Editor 구조와 분리해 유지했습니다.

Data Mapping 흐름

protocol, endpoint URL, topic/path, Object/UI 매핑 규칙, display format, normalize toggle까지 DataMappingWindow 안에서 설정하고 CSV 파이프라인과 연결했습니다.

다른 사례