Claude Design을 이용한 앱 디자인

AI로 앱 디자인을 해보려고 AI에게 어떤 툴이 좋을지 물어보았다. 

Figma 추천한단다. 

그런데 문득 Claude Design이 떠오랐다. 

AI의 답변을 무시하고 Claude Design을 띄웠다. 

처음 사용하려면 set design system 을 해야 토큰 낭비 안하고 일관성있고 내가 원하는 디자인이 나올 확률이 높단다. 

 

어떻게 design system을 세팅할까 싶어 유튭검색을 해보았다. 

영상 몇개 보았는데 제프 수의 영상이 젤 맘에든다. 

https://youtu.be/VeWf0l4ci6Y?si=f31mdVJl-xzRGUtb

 

영상보고 스텝을 따라가보자. 

 

일단 나처럼 디알못을 위한 Design.md 를 제공하는 레포가 있다고 해서 들어가보았다. 

https://github.com/VoltAgent/awesome-design-md

GitHub - VoltAgent/awesome-design-md: A collection of DESIGN.md files analysis by popular brand design systems. Drop one into yo

 

https://getdesign.md/ 에 가면 더 다양한 회사들의 design.md 파일을 요청할 수 있지만, 가입을 해야하고 또 유료일 것 같다. 

그래서 그냥 레포에 있는 무료로 제공되는 design.md 파일 들 중에 마음에 드는 것을 골랐다. 

 

고르는 기준은 현재 내가 만들고 있는 앱의 기능과 성격, 사용패턴으로 보건대 다크 테마가 어울릴것 같았고 그 외 색감의 느낌이 좋은 것.

 

Spotify의 design.md 파일을 다운 받았다. 

그리고 Claude에거 이 파일과 함께 다음과 같은 메시지를 넣었다. 

"이 디자인 파일에서 독점적이고 라이선스가 있는 콘텐츠를 제거하고, 너의 판단에 따라 대체해줘. 레이아웃 규칙, 간격, 타이포 스케일, 컴포넌트 패턴, 디자인 원칙 등 그 외의 모든 것은 그대로 유지하거나 모바일 앱 디자인에 적합하지 않을 경우 너의 판단에 따라 수정해줘.  이것들은 독점적이지 않으며, 이 파일을 사용하는 핵심 이유이기 때문이야. 그다음 파일 이름을 [My App Name] Design System으로 변경해줘."

 

MyAppDesignSystem.md 파일 생성완료. 

이제 Claude Design 에서 "set design system"해보자 

딱히 입력할 것없고, 만들어놓은  md파일을 맨아래에 [Drag files here or browse] 버튼을 누른뒤 업로드하고 생성하기 버튼을 누르면 끝.

"Create your design system" 하는데 5분정도 걸린다고 팝업창이 뜬다.

...

5분이 넘게 걸린듯한데 시간을 체크하지 않아 정확히 얼마나 걸렸는지 모르겠다. 

이제 세팅된 디자인 세스템의 세션에서 chatGPT를 통해 뽑아둔, 6개의 화면으로 구성된 앱의 AI 디자인 초안을 위한 프롬프트 파일을 Claude Design에 입력하였다. 
입력전 Claude 의 Usage와 디자인 초안 완성후의 Usage 는 아래 사진처럼 57% 소모되었다. (자고 일어나서 실행했기에 0%에서 시작)
이때 사용한 모델은 Opus5(Effort:High) 이다.

 

이 결과로 나온것은 대부분 앱 초안에 사용될 부품이었다. 

색, 폰트, 여백 규격표, 버튼, 휠, 라디오, 타이머 링 같은 컴퍼넌터 UI, 그리고 MVP 초안. 그리고 이 초안은 단순히 디자인만으로 끝난 것이 아니라 실제로 눌러볼 수 있는(동작하는) 초안이었다. 
이들을 이용해 필요한 화면을 더 그리거나 디자인된 컴퍼넌트를 수정하는 등의 작업을 하며 디자인을 진행하면된다고 한다. 

그리고 디자인이 완료되면 HTML로 뽑아서 chatGPT나 Gemini에게 주면서 코딩을 시키거나, 아니면 직접 claude code에게 전달 하여 코딩이 가능한듯 하다. 

 

현제의 결과물로 코딩 AI에게 전달하여 코딩을 진행하려고 할 때 어떤 형식으로 저장해서 전달하는게 좋을 것 같냐고 물어보니, 허락도 안했는데 핸드오프 패키지를 만들고 있다....이좌식이....물어만 보려고 했는데....

 

결과를 보니 폴더를 만들어서 그안에 4개의 파일을 만들어준다. 
README.md — 구현 명세서. 6개 화면을 하나씩, 어디에 무엇이 몇 dp 크기로 어떤 색·폰트로 놓이는지 숫자로 적었습니다. 상태 변수와 화면 전환 규칙이 여기 있습니다. 개발자나 코딩 에이전트가 이 파일만 읽고 만들 수 있게 쓴 문서입니다.
tokens.dart — 색·글자·여백·그림자·모션 값을 Dart 상수로 옮긴 파일. 프로젝트에 복사해 넣고 바로 씁니다. README의 표를 사람이 다시 옮겨 적다가 값이 틀어지는 것을 막는 용도입니다.
copy-table.md — 앱에 들어가는 모든 문구를 한국어·영어로 정리한 표. 개발자가 문구를 임의로 새로 쓰지 않도록 하는 기준입니다.
mvp.html — 눈으로 확인하는 참고본. 브라우저에서 열면 6개 화면이 실제로 눌러집니다. 옮겨 쓸 코드가 아니라, 명세가 애매할 때 "이렇게 움직인다"를 보여주는 용도입니다.

이제 이파일들을 다운받아서 코딩을 시작해야하는데, 준비 작업으로 무엇이 있을까? Flutter에서 개발한다는 전제하에서 어떤 DB, 어떤 상태관리 패키지, 어떤 디자인 아키텍쳐를 사용할지 등을 정해줘야 할 것 같은데...