Dash Creator — 전체 아키텍처 설계

작성: CTL (개발팀장) | 2026-04-03 | T3 개발팀
설계 2차 베이스캠프 Dash Creator

1. 핵심 인사이트 — 두 축의 정책

사용자가 "탐조 대시 만들어줘" 한마디로 좋은 대시를 만들려면 LLM이 두 가지 정책을 동시에 알아야 한다.

UX Blueprint Policy
🧭 무엇을, 어떻게
도메인별 필수 정보 구조
인터랙션 패턴
미디어 우선순위

"탐조면 사진 없으면 안 됨"
×
LLM
Context
주입
Design Style Policy
🎨 어떻게 보이게
skin 태그 → 색상/타이포 규칙
컴포넌트 디자인 토큰
레이아웃 템플릿

"자연 도메인 = dark-ocean"
Output
BirdDash.kt 자동 생성 — 품질 보장
사진·위치·탭-확장·dark-ocean 스킨 모두 포함

2. 전체 파이프라인 — 6 Layer

💬
Layer 1
Intent Engine
자연어 → DashIntent (domain, subcategory, features, constraints)
Layer 2a
🧭 UX Blueprint
도메인별 구조 규칙
레이아웃·인터랙션·미디어
Layer 2b
🎨 Design Style
skin 연동 시각 규칙
색상·타이포·컴포넌트
🔌
Layer 3
Data Layer
API Registry · Permission Map · Field Mapping
⚙️
Layer 4
Code Generator
LLM에 Blueprint + Style + Data Context 주입 → 3파일 생성
Layer 5
Validator
Policy 준수 검사 · UX Compliance · 자동 수정 제안
📱
Layer 6
Runtime
DashInstaller · SpaceRepository · SpaceScreen 렌더링

3. Layer 상세 설계

Layer 1 — Intent Engine

사용자 자연어를 구조화된 DashIntent로 변환. LLM이 Blueprint/Style/Data 레이어를 올바르게 선택할 수 있는 기반 정보를 추출.

data class DashIntent( val domain: DashDomain, // NATURE, FINANCE, FITNESS, NEWS, ... val subcategory: String, // "birdwatching", "crypto", "running" val requestedFeatures: List<Feature>, val constraints: IntentConstraints // preferredSize, offlineCapable, realtimeRequired )

UX Layer 2a — UX Blueprint Registry

Blueprint = 도메인이 "좋은 UX"가 되기 위해 반드시 지켜야 할 구조 규칙. 코드 생성 전에 LLM의 context에 주입된다.

도메인primaryMedialayoutPattern핵심 interactionriskFields
NATUREREQUIREDMEDIA_LISTtap-expand + large photophoto, location
FITNESSNONESTAT_GRIDprogress ringcurrent_value, goal
FINANCENONESTAT_GRIDsparkline trendprice, change_pct
NEWSPREFERREDHEADLINE_LISTtap-to-openheadline, source
WEATHERPREFERREDHERO_STAThourly swipetemp, condition
MUSICREQUIREDFULL_BLEEDplayback controlsalbum_art, track
CALENDARNONETIMELINEevent taptitle, time

DESIGN Layer 2b — Design Style Registry

기존 DashManifest의 skin 태그와 직접 연결. 도메인별 기본 스킨 자동 선택.

dark-ocean
NATURE · TRAVEL · WEATHER
dark-forest
FITNESS · HEALTH
dark-slate
MUSIC · SOCIAL
dark-gold
FINANCE · FOOD
dark-minimal
NEWS · CALENDAR
light-clean
PRODUCTIVITY

DATA Layer 3 — Data Layer

도메인별 공개 API 지식 내장. 인증 키 불필요 API 우선 선택.

도메인API인증주요 데이터
NATUREiNaturalist불필요species, photo, location, date
WEATHEROpen-Meteo불필요temp, condition, forecast
NEWSHackerNews / RSS불필요title, url, score
FINANCEYahoo Finance불필요price, change, chart
MUSICLast.fm / MediaSession선택track, artist, album_art

GEN Layer 4 — Code Generator

Blueprint + Style + Data가 모두 LLM context에 주입된 상태에서 3개 파일을 동시 생성.

🖼️
{Name}Dash.kt
Compose UI
Blueprint + Style 적용
🔌
{Name}Repository.kt
데이터 레이어
DataConnector 적용
📋
DASH.md
매니페스트
5-Layer 구조

LLM에 주입되는 Policy Context 예시 (NATURE/birdwatching)

=== UX BLUEPRINT === - Images: REQUIRED — never generate without photos - Layout: MEDIA_LIST + tap-to-expand - Expanded: full-width image(180dp) + scientific name + location + date === DESIGN STYLE (dark-ocean) === - BG: #0D1B2A → #1A3040 | Accent: #4FC3F7 - Cards: white 6% alpha, rounded 10dp - Images: 48dp thumb in list → fillMaxWidth 180dp on expand === DATA (iNaturalist) === - GET /observations?iconic_taxa=Aves&lat=&lng=&radius=50 - photo: photos[0].url → /square. → /medium.

Layer 5 — Validator

생성된 코드가 Blueprint·Style 정책을 준수하는지 자동 검사. 위반 시 자동 수정 제안.

PolicyViolation( layer = UX_BLUEPRINT, severity = ERROR, message = "NATURE domain: AsyncImage not found", fix = "Add AsyncImage(model=photoUrl) in CardRow" )

Layer 6 — Runtime 통합

Generated Code
DashInstaller
DASH.md 검증
SpaceRepository
DashPlacement 등록
SpaceScreen
Composable 렌더링

4. 실제 검증 — BirdDash(탐조 대시)

이 아키텍처는 BirdDash 실제 구현을 통해 검증되었다. 오늘(2026-04-03) 서울 GPS 기준 35,430건 iNaturalist 실시간 데이터 + 시민과학자 실제 사진 표시 확인.

정책BirdDash 적용 결과
UX Blueprint: images REQUIRED✅ 48dp 썸네일 + 180dp 확장 사진
UX Blueprint: tap-to-expand✅ AnimatedVisibility 상세 펼침
UX Blueprint: location-aware✅ GPS requestLocationUpdates (최대 6초)
UX Blueprint: manual refresh✅ 헤더 🔄 버튼
Design Style: dark-ocean skin✅ #0D1B2A→#1A3040 + #4FC3F7 액센트
Data: iNaturalist (no key)✅ 서울 35,430건 실시간 조류 데이터
Data: photo URL → HTTPS✅ /square.→/medium. + https:// 강제

5. RPT-024 연계 — 프롬프트 고도화 전략

RPT-024 위젯 생성 프롬프트 고도화 전략은 Dash Creator 아키텍처의 Layer 2a (UX Blueprint)Layer 4 (Code Generator)에 직접 연결된다.

5.1 RPT-024 → Layer 2a: UX Blueprint 기반

RPT-024의 8대 도메인 분류 × 컴포넌트 풀이 UX Blueprint Policy의 규칙 소스다.

RPT-024 산출물Blueprint 적용예시
8대 도메인 분류 체계domain 키 → Blueprint 규칙 선택NATURE → images REQUIRED, tap-to-expand
컴포넌트 풀 (14종)features 목록 → 필수 컴포넌트 지정Finance → area_chart + badge + detail_grid
사이즈 × 컴포넌트 매트릭스size 제약 → 허용 컴포넌트 필터Tiny: icon + number만 허용
S1.5 컴포넌트 자동 선정Blueprint의 suggested_components 필드로 흡수LLM이 도메인×사이즈 기준으로 5개 선정

5.2 RPT-024 → Layer 4: Code Generator 프롬프트 구조

RPT-024 TO-BE 워크플로우(S1~S5)가 Code Generator의 LLM 프롬프트 조합 방식을 정의한다.

RPT-024 단계Generator 프롬프트 레이어
S3: 기반 — widget_prompt.md공통 디자인 시스템 컨텍스트
S3: 추가 — domain_prompts/{category}.md도메인 전문 지식 (Finance=차트패턴·색상규칙, Nature=사진필수 등)
S3: 추가 — 컴포넌트 CSS/SVG 가이드Blueprint에서 선정된 컴포넌트 구현 스펙
S3: 추가 — 현실적 샘플 데이터도메인별 실제 범위 값 (삼성전자 72,000~85,000원)
S5: 품질 검증Layer 5 (Validator) — DOM 파싱 + overflow 검사 + 1회 재생성

5.3 도메인별 프롬프트 파일 구조 (RPT-024 §4.1)

design/domain_prompts/
├── nature.md — 탐조, 식물 (사진필수, 위치기반, GPS, iNaturalist)
├── finance.md — 주가, 환율, 코인 (차트패턴, 등락표기, 거래량)
├── weather.md — 기온, 습도, 미세먼지 (날씨아이콘SVG, 온도커브)
├── health.md — 운동, 수면, 심박수 (프로그레스링, 목표달성)
├── productivity.md— 할일, 캘린더 (체크리스트, 타이머)
├── commute.md — 지하철, 버스 (타임라인, 노선컬러)
├── media.md — 음악, 뉴스 (웨이브폼, 프로그레스바)
├── business.md — 매출, 재고 (바차트, KPI카드)
└── lifestyle.md — 취미, 반려동물 (카운터, AI메시지)

연결 요약 — RPT-024가 정의한 "도메인 분류 × 컴포넌트 풀 × 프롬프트 조합" 3요소가 이 아키텍처에서 Blueprint Registry + Generator 프롬프트 엔진으로 구현된다. RPT-024는 Dash Creator의 프롬프트 레이어 설계 근거 문서다.

6. 구현 우선순위

Phase내용핵심 컴포넌트담당
P1정책 정의UXBlueprintRegistry, StyleRegistryCTL + DD
P2Intent EngineLLM 연동 + DashIntent 파서AIE + CTL
P3Code Generator프롬프트 엔진 + 3-파일 생성CTL + PME
P4ValidatorPolicy compliance 체커QA + CTL
P5Telegram UI"대시 만들어줘" 대화형 플로우CV + CTL

7. 핵심 원칙

Blueprint = 구조 지식 — 도메인을 아는 사람이라면 당연히 알아야 할 것들. "탐조면 사진", "주식이면 숫자".

Style = 시각 지식 — skin 태그로 이미 선언된 것의 구현 규칙. 동일한 컴포넌트가 도메인별로 다른 색/크기로 렌더링.

이 둘이 모두 LLM context에 주입될 때, 사용자가 "탐조 대시" 한마디만 해도 BirdDash 수준의 결과가 자동 생성되는 것이 목표.