프롬프트 한 줄로 화면이 나오는 시대, ‘당근스러운 화면’을 만드는 법
Summary
"그냥 예쁜 UI 말고, 우리 팀 디자인 시스템을 완벽히 이해하는 AI를 만들었습니다"
당근 디자인 시스템 팀이 고민한 AI 시대의 UI 자동화, '의사결정'까지 대신해 주는 Kraft의 진화 과정
단순히 프롬프트로 픽셀을 그리는 것을 넘어, 기업 고유의 디자인 시스템(SEED) 규칙을 엄격히 지키며 즉시 배포 가능한 코드를 만드는 여정을 다룹니다. 어드민에서 에이전트로 진화하며 '어떤 결정을 자동화할 것인가'에 집중한 당근의 프론트엔드 엔지니어링 경험을 공유합니다.
- 01v0나 Bolt가 해결하지 못한 '사내 디자인 시스템 및 패키지 맥락 주입' 문제를 해결
- 02프롬프트와 코드 사이의 'DesignSpec' 중간 표현층을 통한 정밀한 UI 설계 제어
- 03Mastra와 Claude Code를 결합하여 설계는 통제하고 코딩은 위임하는 하이브리드 에이전트 전략
- 04디자인 규칙을 모듈화한 '스킬 시스템'과 11개의 자동 채점기를 통한 품질 보증 프로세스
- 05과거의 수정을 학습하고 다음 세션에 반영하는 크로스세션 디자인 메모리 구현
RECOMMENDATION
사내 디자인 시스템을 운영하며 AI를 활용해 개발 생산성을 극대화하고 싶은 팀이나, 일관성 있는 UI 코드 생성을 위해 LLM 에이전트 아키텍처를 고민하는 엔지니어에게 실질적인 영감을 제공합니다.
The Problem
기존의 범용 AI UI 생성 도구들은 당근마켓의 자체 디자인 시스템인 SEED의 컴포넌트와 토큰 맥락을 이해하지 못해 실제 제품에 즉시 적용 가능한 코드를 생성하기 어려웠으며, 생성 결과가 일회성에 그치고 품질이 일정하지 않은 한계가 있었다.
The Solution
디자인 시스템의 규칙을 지능적으로 적용하기 위해 Kraft를 어드민에서 CLI, 에이전트 형태로 고도화했으며, 프롬프트와 코드 사이에 'DesignSpec'이라는 중간 표현층을 두고 Mastra와 Claude Code를 결합한 하이브리드 에이전트 아키텍처를 도입했다.
The Result
디자인 시스템 가이드라인 준수 여부를 자동으로 검증하는 11개의 채점 시스템과 과거 결정을 기억하는 크로스세션 메모리를 통해, 단순 생성을 넘어 사내 표준을 준수하는 일관성 있는 UI 코드를 반복적으로 생산하고 검증할 수 있는 체계를 구축했다.
Trade-off
초기 멀티 에이전트 구조 도입 시 에이전트 간 통신 오버헤드와 맥락 손실 문제가 발생하여 하네스 패턴으로 선회했으며, 에이전트 루프가 복잡해짐에 따라 단순 생성 대비 처리 비용과 시간이 증가할 수 있는 구조적 특성을 가지고 있다.
Key Concepts
More from 당근
View all posts from 당근
당근의 인증은 어떻게 달라져 왔을까요?
OAuth 2.0OIDCSSO1주 전Laying the Rails Beyond WebView: Why Karrot Chose Lynx
LynxWebViewPerformance2주 전웹뷰 다음의 레일을 깔다: 당근이 Lynx를 선택한 이유
LynxReactQuickJS2주 전실험을 더 편하게 설계할 수 있게: 당근 실험플랫폼 이야기
AB TestingData PlatformLLM Agent3주 전프론트엔드와 백엔드를 한 팀으로 합치면 어떤 일이 일어날까?
Team TopologyCross FunctionalAI Coding1개월 전
