Design Studio 아키텍처 개요

Design Studio는 기반에서 채팅 시스템 (chat_sessions + EngineDispatcher)을 재사용하고, 그 위에 디자인 도메인 서비스 세트를 계층으로 추가합니다. 이 페이지는 전체 파이프라인을 제공하며, 개별 구성 요소에 대한 심층 분석은 하위 페이지에서 다룹니다.

모듈 위치

• 렌더러: packages/renderer/src/features/design-studio/components/design-studio/
• 메인 프로세스 서비스: packages/desktop/app/main/services/content/workspace/design/
• 내장 리소스 (git 미포함): resources/design-studio-builtin/ — 내장 리소스 동기화 프로세스 참조
• 내장 리소스 핀: resources/design-studio-builtin.lock.json (git에 포함된 유일한 부분)

데이터 흐름

graph TB
    User["사용자가 새 세션 페이지에서 Skill + DS 선택, 요구 사항 입력"] --> Persona["DesignStudio persona"]
    Persona --> Create["AgentRouter.createSession<br/>kind='design'"]

    Create --> DPS["DesignProjectService<br/>프로젝트 메타데이터 생성"]
    Create --> DPM["DesignProjectMaterializer<br/>Skill / DS를 세션 워크스페이스로 복사"]

    DPS --> ChatSess["chat_sessions 행<br/>(kind='design')"]
    DPM --> Workspace["세션 워크스페이스 디렉토리<br/>(skills + design-system + craft)"]

    ChatSess --> Disp["EngineDispatcher"]
    Disp --> Adapter["Design Backend 어댑터<br/>(per-engine)"]
    Workspace --> Adapter

    Adapter --> Engine["TinyElf / ClaudeSdk / CliRunner"]
    Engine --> Out["AI 출력 artifact"]
    Out --> AS["ArtifactService<br/>artifact 영속화"]
    AS --> ALS["ArtifactLintService<br/>토큰 / 경계 검증"]
    AS --> AES["ArtifactExportService<br/>HTML/PNG/PDF/Deck"]

주요 서비스

서비스	책임
DesignProjectService	Design 프로젝트 메타데이터 CRUD (= chat_sessions[kind='design']): 선택된 Skill, DS, craft 하위 집합.
DesignProjectMaterializer	세션 생성 시 선택된 Skill / DS / craft를 세션별 워크스페이스로 복사하여 엔진에 깔끔한 읽기 전용 뷰 제공.
SkillDiscoveryService	사용자 디렉토리 + builtin 디렉토리에서 skill 매니페스트를 스캔하여 병합 및 중복 제거.
DesignSystemService	위와 동일하지만 디자인 시스템용 — 토큰 표, 컴포넌트 참조, 예시 렌더링.
CraftService	연결 가능한 HTML/CSS/SVG 프래그먼트 제공.
ArtifactService	artifact 파일(산출물) 쓰기/읽기, 특정 메시지와 연결.
ArtifactLintService	artifact 검증: DS 토큰 내 색상, 유효한 폰트 스택, 접근성 기준선 등.
ArtifactExportService	artifact 내보내기 — HTML 인라인, Puppeteer 스크린샷(PNG/JPG/PDF), Deck 다중 페이지 패키징.
DeckExportService	Deck 전용 내보내기 (Reveal.js 스타일 프레젠테이션 패키지).
SkillSymlinker	세션 워크스페이스의 skills를 <userData>/elftia/design-skills/에 심볼릭 링크 — Skill 편집이 실행 중인 세션에 실시간 반영.
TinyElfSkillsParserAdapter	TinyElf 엔진 전용 — Design Skill을 TinyElf가 소비 가능한 도구/컨텍스트 형식으로 변환.
backends/	per-engine 어댑터 디렉토리. 각 엔진은 Design 모드에서 작동하려면 자체 backend를 구현해야 함.
prompts/	내장 시스템 프롬프트 (업스트림 open-design에서 가져옴), Skill 유형별로 분할.
mcp/	Design 모드 전용 MCP 도구 노출.

엔진 적응 (Design Backend)

모든 엔진이 Design 프로젝트를 실행할 수 있는 것은 아닙니다. backends/ 디렉토리 하위의 Backend 어댑터는 레지스트리 방식입니다 — Design 모드를 지원하려는 엔진은 반드시 backend를 명시적으로 등록해야 합니다.

// 간소화된 서명
interface DesignBackend {
  engineType: EngineType;
  prepareSession(ctx, project): Promise<DesignContext>;
  // …
}

등록된 backend가 없는 엔진의 경우, 렌더러의 useDesignStudioGate()가 unavailable을 반환하고, 홈 페이지와 새 세션 패널은 플레이스홀더 UI로 폴백합니다 (반쪽짜리 충돌 없음).

Artifact와 메시지 바인딩

artifact를 생성하는 각 AI 메시지는 artifact ID에 바인딩됩니다 (메시지 메타데이터에 기록):

• 영속화: <userData>/elftia/design-artifacts/<sessionId>/<artifactId>.html
• 렌더러가 artifactId로 읽으며, 단일 메시지에 미리보기 버튼이 있음
• "워크스페이스 열기"는 현재 세션의 최신 artifact에 자동 바인딩; 이전 메시지의 미리보기를 클릭하면 이전 버전을 워크스페이스에 재생

이를 통해 자연스럽게 브랜칭이 지원됩니다: 각 "재생성"은 새 artifact를 생성하며 이전 버전은 손실되지 않습니다.

Chat과의 관계

Design 프로젝트는 본질적으로 chat_sessions 행 + 연결된 테이블 세트입니다. 따라서:

• 동일한 IPC 사용 (chatSessions:* + agents:*)
• 동일한 엔진 디스패치 사용 (EngineDispatcher)
• 동일한 메시지 브랜칭, 첨부 파일, API Key Pool 로직 재사용
• 메인 사이드바에서 kind='design' 아이콘으로 구분되지만, 일반 세션과 동일한 목록

유일한 차이점:

항목	Design	Chat
Persona	반드시 DesignStudio여야 함	임의
Backend	반드시 Design backend를 등록해야 함	임의
워크스페이스	세션 생성 시 materialize	없음
Artifact 서비스	각 산출물 자동 영속화	관여하지 않음

하위 페이지

• 내장 리소스 동기화 프로세스 — resources/design-studio-builtin.lock.json + scripts/sync-design-studio.mjs의 완전한 흐름, 업스트림 최신 커밋으로 업그레이드하는 방법 포함