[커뮤니티 쇼케이스] Claude가 디자인한 UI는 이제 그만. Framer 템플릿으로 시작해서 기능을 얹는 워크플로우를 소개합니다.

Claude가 디자인한 UI는 이제 그만두기로 했습니다. 이제는 Framer 템플릿으로 시작해서 그 위에 기능을 얹는 방식으로 작업합니다. 여기 그 워크플로우를 소개합니다.

작년에 제가 출시한 모든 사이드 프로젝트에는 똑같은 특징이 있었습니다. 바로 'vibe-coded 앱' 같은 느낌이죠. 둥근 카드, 그라데이션 버튼, Inter 폰트, 중앙 정렬된 H1이 있는 히어로 섹션. 다들 아실 겁니다. Claude Code는 기능을 빠르게 출시해주지만, 디자인을 맡겨두면 모든 앱이 똑같은 모습으로 나옵니다.

해결책은 더 나은 프롬프트가 아니었습니다. 더 나은 시작점이 필요했던 거죠.

제가 하는 방식:

1. framer.com/templates나 제가 디자인이 마음에 드는 공개 Framer 사이트를 둘러봅니다. 디자이너들이 거기서 정말 대단한 작업물들을 내놓거든요. 제대로 된 타이포그래피, 레이아웃, 모션까지 말이죠.
2. 사이트를 깔끔한 HTML/CSS/JS 폴더로 내보냅니다 (이걸 위한 도구를 직접 만들었는데, 링크는 맨 아래에 있습니다. 이 글의 핵심은 아니니까요).
3. 그 폴더를 새 리포지토리에 넣습니다. Claude Code를 엽니다.
4. 프롬프트: "이게 디자인 시스템과 페이지 구조야. 모든 스타일, 타이포그래피, 레이아웃을 유지해. 인증, X를 위한 Postgres 스키마, /dashboard 라우트를 연결하고, 가격 책정 섹션을 Stripe 결제로 교체해줘."
5. 이제 Claude는 디자인을 처음부터 발명하는 대신, 이미 설계된 시스템 위에 기능을 구축합니다. 이미 존재하는 간격, 폰트 크기, 컴포넌트 패턴을 그대로 따르는 거죠.

AI 코딩에서 이 방식이 효과적인 이유:

• Claude는 기존 구조를 수정하는 데는 뛰어나지만, 감각을 발명하는 데는 서툽니다. AI의 강점을 활용하는 셈이죠.
• HTML/CSS가 주변 맥락(ambient context)이 됩니다. AI가 bg-blue-500 rounded-lg 같은 걸 제안하는 대신, 이미 있는 스타일과 어울리는 코드를 짜기 시작합니다.
• "뻔해 보이지 않게 만들기" 위해 3시간씩 씨름하는 루프를 건너뛸 수 있습니다. 어차피 잘 안 되기도 하고요.

이 방식이 아닌 것:

• 남의 라이브 프로덕션 사이트를 베끼는 용도가 아닙니다. 본인의 Framer 초안이나 무료 커뮤니티 템플릿을 사용하거나 템플릿을 구매하세요. Framer의 템플릿 마켓플레이스는 저렴하고 라이선스도 명확합니다.
• 진지한 제품을 출시할 때 전문 디자이너를 대체할 수는 없습니다. 하지만 MVP, 내부 도구, 랜딩 페이지, 사이드 프로젝트라면? 디자인에서 코드로 넘어가는 간극을 5분 정도로 줄여줍니다.

도구: letaiworkforme.com - 공개 Framer URL을 붙여넣으면 깔끔한 오프라인 폴더를 얻을 수 있습니다. 무료 미리보기도 가능합니다. 제가 직접 이 워크플로우를 수동으로 하다가 너무 지루해서 만들었습니다.

혹시 필요하신 분이 있다면 제가 사용하는 CLAUDE.md 스타터와 "이 디자인 위에 기능을 얹는" 정확한 프롬프트를 공유해 드릴게요.