에디터 아키텍처, 9개 EditorWindow, DXEditorWindowBase, 데이터 매핑 흐름을 직접 만들었습니다.
DXCenter LG에너지솔루션 디지털트윈 에디터
비개발자(콘텐츠 제작자)가 코드 수정 없이 디지털트윈 콘텐츠를 제작·검수·배포할 수 있는 Unity 에디터 확장 저작도구. LG에너지솔루션 PRI 교육·시각화 시스템.
디지털트윈 제작 시스템과 에디터 아키텍처가 핵심인 프로젝트입니다.
비개발자가 코드 수정 없이 디지털트윈 콘텐츠를 제작, 검수, 배포할 수 있는 저작 환경이 필요했습니다.
9개 에디터 창과 43개 C# 파일 구조로 Site, Floor, Equipment, Part 단위 제작 흐름을 실제 운영 가능한 수준으로 묶었습니다.
개발자 의존도를 줄이고 콘텐츠팀이 직접 다룰 수 있는 제작 시스템을 만든 툴링 사례입니다.
- Before 씬, 데이터, UI 수정이 개발자 코드 변경과 수동 설정에 묶여 있었습니다.
- After 콘텐츠 제작자가 Site, Floor, Equipment, Part 단위로 직접 편집하고 검수할 수 있게 했습니다.
- 결과 제작과 검수 경로가 EditorWindow 중심으로 바뀌고 배포 전 확인 지점도 더 분명해졌습니다.
- DXEditorWindowBase로 씬 컨텍스트 자동 감지, Undo, Play Mode 보호를 공통 처리했습니다.
- Dummy / Live 서버 전환을 분리해 개발과 운영 모드를 나눌 수 있게 했습니다.
- Build Settings 자동 동기화와 GameBootstrap 갱신으로 수동 누락을 줄였습니다.
DXCenter 커스텀 에디터
9개 EditorWindow 통합 패널 — DXEditorWindowBase 추상 클래스로 씬 컨텍스트 자동 감지, Undo 지원, Play Mode 보호. Site 단위 (건물→층→장비→파트) 4단계 콘텐츠 구조.
LG에너지솔루션 PRI 관련 내부용 시스템으로 외부 공개 링크 없음. 위 스크린샷은 사내 검토용으로 공유된 자료.
문제 정의
비개발자가 만들 수 있는 디지털트윈 저작도구
LG에너지솔루션 PRI 교육·시각화 시스템 — 콘텐츠 제작자(비개발자)가 코드 수정 없이 디지털트윈 콘텐츠를 제작·검수·배포할 수 있어야 했다.
핵심 제약: (1) 비개발자가 직관적으로 조작할 수 있는 UX, (2) Editor 작업이 Runtime/WebGL 모두에서 안정 동작, (3) 콘텐츠 구조가 확장 가능 (건물 → 층 → 장비 → 파트), (4) Dummy/Live 서버 모드 전환 자유.
해결: Unity 에디터 확장 전체를 설계·구현했습니다. 9개 커스텀 EditorWindow + DXEditorWindowBase 추상 클래스 + 5가지 아키텍처 패턴으로 제작 흐름을 만들고, AI 협업은 구현 보조에 활용했습니다.
9
커스텀 에디터 창
5
구조 패턴
43
C# 파일 (에디터 23 + 런타임 20)
3
Claude CLI 3개 (역할 분리 워크플로)
5가지 구조 패턴
디지털트윈 저작도구를 구성한 5가지 패턴
ScriptableObject as Data
콘텐츠 데이터를 ScriptableObject로 직렬화. GameBootstrap SO 자동 업데이트로 현장 전환 시 참조 자동 갱신.
Service Locator
에디터/런타임 모듈 간 의존성을 Service Locator로 분리. 에디터에서 더미 서비스, 런타임에서 라이브 서비스 주입.
EventBus Pub/Sub
EditorWindow 간 통신을 이벤트 기반으로. AssetManager가 추가하면 EquipmentManager가 자동 인지.
Strategy (IStateEffect)
상태 효과 4종 (Alpha / Blink / ColorChange / Highlight)을 Strategy 패턴으로 교체 가능하게.
Command (Undo/Redo)
에디터 모든 작업을 Command로 캡슐화. Unity Editor의 Undo 시스템과 통합.
DXEditorWindowBase
9개 EditorWindow의 공통 기반 추상 클래스. 씬 컨텍스트 자동 감지, Undo 지원, Play Mode 보호 자동.
AI 협업 흐름
AI 협업을 역할별로 나눠 사용한 방식
구현, 검토, 기록 역할을 나눠 AI 협업을 보조적으로 사용했습니다.
CLI 1 · 감독관
- · 설계 검증
- · 코드 리뷰
- · 아키텍처 판단
- · 패턴 일관성 점검
CLI 2 · 개발자
- · 실제 코드 구현
- · 단위 테스트 작성
- · 빌드 검증
- · 감독관 피드백 반영
CLI 3 · 고객저작자
- · 비개발자 관점 워크플로우 테스트
- · UX 검증
- · 직관성 평가
- · 실수 가능 지점 발굴
방법론을 코드와 함께 버전 관리
아키텍처 패턴, 코딩 컨벤션, 금지 패턴, 실수 이력까지 CLAUDE.md에 체계적으로 관리. 매 세션마다 3 CLI가 같은 컨텍스트로 시작.
구현 세부
Site 4단계 콘텐츠 구조
콘텐츠 제작자가 트리 구조로 직관적 탐색·편집. 각 노드마다 메타데이터·3D 모델·교육 콘텐츠 연결.
Editor/Runtime asmdef 분리
Editor 전용 코드와 Runtime 코드를 asmdef로 완전 분리. 빌드 사이즈 최적화.
Dummy ↔ Live 전환
서버 의존성 없이 에디터에서 더미 데이터로 작업. 클릭 한 번으로 라이브 모드.
WebGL 원클릭 빌드
Build Settings 자동 동기화 + WebGL 압축 최적화 + 자동 배포 파이프라인. 콘텐츠 제작자가 빌드 과정을 알 필요 없음.
State Effect 4종 (Strategy)
프로젝트 의미
통합 협업 환경 구축
DXCenter 도입 후 콘텐츠 제작 절차 표준화. 기획자·제작자·검수자가 같은 도구에서 작업하면서 실수가 크게 줄었음. 비개발자도 직관적으로 사용 가능한 워크플로우.
패턴 일관성과 비개발자 사용성을 함께 검토하면서 에디터 구조를 다듬은 사례입니다.
콘텐츠 제작 절차 표준화
기획·제작·검수 통합 워크플로우
QA · 검수 흐름
검수 관점 사전 확인
AI 협업 방식
3 CLI 기반 역할 분리
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 파이프라인과 연결했습니다.