피드로 돌아가기
Dev.toFrontend
원문 읽기
Prompt-to-UI 한계 극복을 위한 Structured Data 기반 Design-Code Sync 아키텍처
The 10% nobody in AI design is solving
AI 요약
Context
기존 AI 디자인 도구는 Prompt-to-UI 방식으로 90%의 초안 생성에는 능하나, 세밀한 조정 단계에서 텍스트 기반의 반복적인 수정 루프가 발생하는 Friction 발생. Figma 등 기존 캔버스 기반 도구는 에이전트 레이어를 사후에 결합한 구조로 인해 디자인 파일과 코드 간의 실시간 동기화 효율이 낮음.
Technical Solution
- Design File을 단순 캔버스가 아닌 Queryable Object로 정의하여 모든 노드와 스타일을 구조화된 데이터로 관리
- MCP(Model Context Protocol)를 통해 에이전트가 디자인 요소의 Computed Style에 직접 접근하고 수정하는 구조 설계
- Design Token과 코드(React/Tailwind)를 1:1 매핑하는 snapshot.json 기반의 상태 관리 체계 도입
- 변경 사항 발생 시 전체 재생성이 아닌 Diff 분석을 통해 최소한의 코드만 업데이트하는 /paper-sync 로직 구현
- 디자인 수정 후 에이전트가 변경된 Token 값을 인식하여 코드에 반영하고 결과를 자연어로 피드백하는 Closed-loop 시스템 구축
실천 포인트
- AI 도입 시 단순 Generation 단계보다 조정(Adjustment) 단계의 UX/DX 비용을 우선 분석할 것 - 외부 시스템과의 연동이 잦은 데이터 모델 설계 시, 전용 API 레이어보다 데이터 자체를 구조화된 객체(Structured Data)로 정의하는 방향 검토 - LLM의 결과물 신뢰도를 높이기 위해 전체 코드 재생성 대신 Diff 기반의 부분 업데이트 전략 적용