프롬프트 한 줄로 화면을 만드는 시대, ‘당근스러운 화면’을 만드는 법

AI UI 도구는 프롬프트 한 줄로 그럴듯한 화면을 만들 수 있지만, SEED 디자인 시스템의 컴포넌트·토큰·레이아웃·카피 규칙까지 맞추지는 못했다. ActionButton, AppBar, BottomSheet 같은 SEED 컴포넌트 대신 범용 Button·Modal이 나오면 당근 앱에 바로 넣을 수 없고, Lovable, v0, Bolt, Figma Make도 자체 컴포넌트나 피그마 캔버스에 묶여 있었다.

Kraft는 이 문제를 해결하기 위해 화면을 그리는 도구가 아니라, 디자인 시스템이 요구하는 결정을 자동화하는 도구로 설계됐다.

• 어드민: 설치 없이 URL만 열어 프롬프트 → 프리뷰 → 배포 → 웹뷰 확인 흐름을 제공했지만, 모든 팀에 같은 에이전트를 쓰는 범용 구조였다.
• CLI: 로컬 프로젝트와 기존 코드를 읽게 하면서 팀별 컨텍스트와 세션 분리를 가능하게 했고, 에디터 프론트엔드와 에이전트 백엔드를 함께 번들링해 npx 한 줄로 실행되게 했다.
• 에이전트: Clarify → Memory Read → Cases → Generate → Verify → Memory Write 루프로 모호한 요구를 구체화하고, SEED 규칙 준수와 필수 상태 처리를 검증한 뒤 메모리를 축적했다.

구현은 Plan / Orchestra 두 모드를 묶은 하네스(Harness) 와 Claude Code(Claude Agent SDK) 위임을 섞었다. 설계는 DesignSpec JSON으로 코드와 분리해 저장하고, 실제 코딩은 로컬 claude 바이너리를 스폰해 파일 수정과 빌드를 맡긴다. 결국 Kraft는 ‘한 번 그려주는 도구’가 아니라, 디자인 시스템의 판단을 반복 가능하게 만드는 장치로 진화했다.