[실증 사례] Craft-K — Webview UI 빌더 IDE 아키텍처 설계 & 메모리 최적화

1. 프로젝트 배경 및 직면 과제 (Challenge)

기존 MFC 기반 C++ 데스크톱 스튜디오는 설치와 업데이트가 번거롭고, 클라우드 협업 환경과 VSCode 생태계에 유연하게 대응하기 어려웠습니다. 이를 모던 웹(React + Craft.js)으로 전환하려 하자 치명적인 성능 문제가 발생했습니다.

1. 캔버스에 수백 개의 컴포넌트를 복제할 때 전체 속성을 Deep Copy하여 메모리가 200MB 이상으로 치솟고 브라우저가 다운됨.
2. 컴포넌트 드래그 생성, 영역 다중 선택(Marquee), 자석 스냅이 동시에 일어날 때 이벤트 충돌과 유령 드래그 발생.
3. 비즈니스 로직이 특정 데스크톱 런타임에 종속되어 테스트 코드를 작성하기 어려운 구조적 한계.

2. BOUNDAXE의 해결 솔루션 (Engineering Solution)

BOUNDAXE는 ‘플랫폼 아키텍처 & 저수준 성능 최적화’ 노하우를 집약하여 문제를 근본적으로 해결했습니다.

• 선별적 복사(Selective Copy) 프로토콜: 캔버스 컴포넌트 복제 시 불필요한 전체 메타데이터 복사를 제거하고, 렌더링 필수 속성만 선택적으로 복제한 후 공통 메타데이터는 글로벌 레지스트리를 참조(Flyweight 패턴)하도록 재설계했습니다.
• Hexagonal Ports & Adapters 도입: project-core 계층을 순수 도메인 로직과 분리하여 VSCode API 및 UI 라이브러리와의 의존성을 100% 역전시켰습니다.
• InteractionManager 상태 머신: 마우스 입력을 IDLE, DRAGGING_CREATE, SELECTING_MARQUEE, TRANSFORMING 상태로 명시적으로 격리 관리하여 제스처 충돌을 0건으로 통제했습니다.

3. 검증된 실측 성과 (Outcomes & Metrics)

• 메모리 99.3% 대폭 절감: 컴포넌트 1,000개 기준 메모리 점유율을 200MB에서 1.4MB로 줄여 대규모 엔터프라이즈 화면에서도 60fps의 부드러운 편집 경험을 달성했습니다.
• 8대 독립 Surface 모드 지원: 단일 코드베이스에서 디자이너용 전체 IDE 모드부터 개발자용 속성 패널 모드까지 유연하게 분기 실행할 수 있는 플랫폼 유연성을 확보했습니다.