Claude Design과 Claude Code를 활용한 모바일 앱 리디자인 후기

예전에 Claude Code로 만들었던 앱을 리디자인하려고 몇 주 동안 Claude Design을 써봤거든. 디자인 작업을 아예 안 해본 건 아니지만, 그렇다고 프론트엔드 개발자도 아니고 디자인 감각이 뛰어난 것도 아니라서 어디까지 가능한지 진짜 궁금했음.

결과물은 꽤 만족스러운데, 이번에 하면서 얻은 제일 큰 수확은 Claude Design이랑 Claude Code를 효율적으로 같이 쓰는 법을 좀 알게 됐다는 거임.

Claude Design은 디자인 방향성이나 UX를 빠르게 탐색할 때 진짜 좋음.

"내 브랜드랑 앱 테마에 맞춰서 이 화면 디자인 3가지만 보여줘"라거나 "사용자가 직접 개입해서 해결해야 하는 에러 상황을 처리할 수 있는 방법 3가지만 제시해봐" 같은 식으로 시키면 마음에 드는 옵션을 금방 찾을 수 있더라.

근데 디자인 저장소로 쓰기엔 좀 별로임.

위에서 말한 전략대로만 해도 작은 앱 하나 만드는 데 아트보드가 순식간에 100개 넘게 쌓임. 나중에 결정했던 거 다시 확인해볼까 싶어서 기록용으로 다 남겨뒀거든.

완전 실수였음.

결국 Claude Design 웹 앱이 뻗어버려서 다시 들어가는 데 애 좀 먹었다.

교훈 얻었지. 아트보드는 작업하면서 그때그때 정리해야 함.

요즘은 보통 이렇게 함.

• 새 페이지에서 탐색 시작: " '계정 생성 탐색'이라는 새 페이지 만들고 ~에 대한 디자인 5개 보여줘" 이런 식으로.

• 다 끝나면 최종 디자인만 '계정 생성'이라는 새 페이지로 복사함.

• 탐색용 페이지는 삭제.

• 그다음 Claude Design한테 React 소스 코드 검토해서 삭제한 아트보드들에서 나온 불필요한 코드 싹 다 지우라고 시킴.
  마지막 단계가 진짜 중요한데, 디자인 코드가 금방 지저분해지거든. 이 정리 작업만 거쳐도 큰 디자인 탐색 후에 소스 파일 몇 개는 그냥 날아가고, 남은 파일들도 용량이 50~70%는 줄어듦.

Claude Design으로 아이콘 만드는 건 진짜 최악임.

ChatGPT가 훨씬 낫더라. Claude Design이 만든 아이콘은 거의 쓸 수가 없는 수준임.

Claude Code랑 ChatGPT도 PNG 아이콘을 벡터 형식으로 바꾸는 건 잘 못함.

아이콘을 SVG나 SwiftUI 네이티브 벡터 드로잉으로 만들고 싶었는데, Claude Code로는 안 되길래 변환 작업을 반복하려고 커스텀 스킬까지 만들어야 했음. 생각보다 훨씬 고통스러웠다.

스킬이랑 아이콘 링크를 포함해서 더 자세한 내용이랑 예시는 여기 있음.