디자인 못하는 개발자가 Claude Design으로 운동 앱 UI 만들어본 솔직 후기

디자인 감각 없는 개발자가 Claude Design으로 앱 화면을 10분 만에 뽑아봤습니다.

처음엔 그냥 시안 수준이겠거니 했는데, 실제로 나온 결과물 보고 좀 충격이었어요. 단순한 와이어프레임이 아니라 그대로 개발 들어가도 될 정도의 완성도라서요. 

오늘은 Claude Design 처음 써보시는 분들을 위해 제가 직접 운동 기록 앱 만들어본 과정 그대로 정리해보려고 합니다.

Claude Design이 뭔가요?

Anthropic에서 만든 AI 기반 UI 생성 도구입니다. 한마디로 정리하면, 자연어로 "이런 화면 만들어줘" 하면 진짜 화면이 나옵니다.

웹이든 앱이든 상관없고, 컴포넌트 단위로 수정도 됩니다. 프로토타이핑 용도로도 충분히 쓸만하고요. Figma처럼 처음부터 픽셀 단위로 그릴 필요 없이, 말로 설명하면 끝나는 게 가장 큰 차이점입니다.

실제로 운동 앱 만들어봤습니다

워낙 가이드 글들이 많은데, 백문이 불여일견이라 직접 해봤어요. 주제는 평소에 만들고 싶었던 운동 기록 앱으로 정했습니다.

디자인 프로젝트 생성

Claude -> 디자인 -> New prototype 생성

 

프롬프트 입력

 

모던한 다크모드 운동 기록 앱 디자인 만들어줘.
iOS 스타일 기반으로 카드 UI 사용.
하단 탭바 포함하고, 오늘의 운동 / 통계 / 프로필 탭 구성.
메인 화면에는 이번 주 운동 횟수와 최근 운동 기록 리스트.
색감은 검정 베이스에 포인트 컬러로 라임그린.

 

작업 시작

완성

10분도 되지 않아 아래와 같이 운동 앱 

디자인 파일

결과물을 개발자 관점에서 뜯어봤습니다

디자이너는 아니지만 프론트엔드 작업 좀 해봤다고, 나름 분석해봤습니다.

Spacing이 의외로 정확합니다. 8pt 그리드 시스템 거의 그대로 따라가고 있어요. 카드 사이 간격, 패딩 값이 일관성 있게 잡혀있어서 그대로 CSS로 옮기기 편합니다.

타이포그래피 위계가 잘 잡혀있습니다. 헤더, 서브헤더, 본문, 캡션이 사이즈와 weight로 명확히 구분돼요. 이거 사람이 직접 짜도 많이 헷갈리는 부분인데 자동으로 처리되는 게 신기했습니다.

컴포넌트 일관성도 합격점입니다. 카드 컴포넌트가 화면 안에서 같은 스타일로 반복되고, 버튼 스타일도 통일돼있습니다. 디자인 시스템 의식하고 만든 티가 나요.

다만 접근성 측면은 좀 아쉽습니다. 다크모드에서 텍스트 명도 대비가 WCAG 기준 미달인 곳이 보여요. 이런 부분은 확실히 사람 손이 한 번 거쳐야 합니다.

장점과 단점

며칠 써보면서 정리한 솔직한 평가입니다.

장점

시안 뽑는 속도가 비교 불가입니다. 회의 시작 전에 "이런 느낌 어때요" 하면서 즉석에서 보여줄 수 있어요. 비개발자, 비디자이너도 충분히 쓸 수 있어서 PM이나 기획자분들도 활용도가 높을 것 같고요. 무엇보다 아이디어 검증 속도가 빨라집니다. 머릿속에만 있던 걸 30분이면 눈으로 볼 수 있으니까요.

단점

세밀한 픽셀 단위 수정은 한계가 있습니다. "여기 살짝만 옮겨줘" 같은 요청은 잘 안 먹혀요. 디자인 시스템 일관성도 화면이 많아질수록 깨질 수 있습니다. 그리고 결정적으로, 실서비스 출시 수준까지는 추가 보정이 꼭 필요해요. 80%까지 끌어올려주는 도구지 100%를 책임져주는 도구는 아닙니다.

다른 AI 디자인 툴과 비교

툴강점약점

Claude Design	자연어 UX 이해도 높음, 디자인 감각 좋음	세부 수정 어려움
Vercel v0	코드 생성 품질 우수, 바로 배포 가능	디자인 다양성 부족
Figma AI	기존 워크플로우 그대로 사용	AI 자유도 낮음
ChatGPT	범용성	UI 전문성 떨어짐
Google Stitch	Google 생태계 통합	아직 초기 단계

각자 강점이 달라서 용도별로 골라 쓰면 좋습니다. 저는 시안 단계에서는 Claude Design, 실제 코드까지 가야 할 때는 v0를 섞어 쓰고 있어요.

개발자 관점에서 보는 변화

이 도구들 쓰면서 느낀 건데, 직무 경계가 진짜 빠르게 무너지고 있습니다.

예전엔 MVP 만들려면 기획자가 와이어프레임 그리고, 디자이너가 시안 만들고, 프론트가 구현하고 이런 흐름이었잖아요. 이제는 PM 한 명이 Claude Design으로 시안 뽑고, Claude Code로 코드 만들고, 개발자가 백엔드만 붙이면 끝나는 구조가 가능합니다.

디자이너분들 일자리 걱정하시는 분들도 계신데, 제 생각은 좀 다릅니다. 시안 양산은 AI가 하더라도, 디자인 시스템 설계, 브랜드 일관성, 사용자 리서치 같은 상위 영역은 오히려 더 중요해질 거예요. AI가 뽑아준 80%를 100%로 끌어올리는 게 디자이너의 새로운 역할이 되는 거죠.

프론트엔드도 비슷합니다. 단순 마크업 작업은 점점 줄어들고, 인터랙션 설계나 성능 최적화 같은 깊이 있는 영역으로 옮겨갈 것 같습니다.

마치며

처음엔 신기한 장난감 정도로 생각했는데, 며칠 써보니까 진짜 작업 도구로 쓸만합니다. 특히 사이드 프로젝트 하시는 분들이나, 빠르게 아이디어 검증해야 하는 분들한테 강추드려요.

다만 이거 하나로 모든 디자인이 해결된다는 건 환상이고, 결국 사람의 눈과 감각이 마지막을 책임진다는 게 결론입니다.

다음 글에서는 Claude Design으로 만든 시안을 실제로 코드로 옮기는 과정 정리해볼게요.