※ 이 기사는 사람이 작성하고, AI가 리뷰했습니다.

※ 2026/07/24 시점의 정보입니다.

서론

자작 앱을 만들고 싶지만, AI 느낌이 강한 디자인이 되어버린다.

프로페셔널한 디자인으로 앱을 만들고 싶다.

그럴 때 도움이 되는 것이 Claude Design입니다.

Claude Design은 자연어 대화를 통해 디자인, 프로토타입 (Prototype), 슬라이드 등 완성도 높은 비주얼 작품을 제작할 수 있는 도구입니다.

작성된 디자인은 MCP를 사용하여 간단하게 Claude Code로 인계할 수 있습니다.

본 기사에서는 「Claude Design을 사용하여 프로토타입 작성 => Claude Code로 구현」하는 일련의 절차를 소개합니다.

이용하는 애플리케이션

• Claude Design (Claude Desktop에 내장)
• Claude Code

Claude Design 사용해 보기

이번에는 샘플로 가계부 앱을 구현해 보겠습니다.

먼저 하고 싶은 일을 Claude Design에 입력합니다.

Claude Design이 의도를 명확히 하기 위해 몇 가지 질문을 해주므로, 이에 답변합니다.

잠시 기다리면 Claude Design이 여러 가지 샘플 안을 작성해 줍니다.

구체적인 결과물을 제시해 주므로 아이디어를 떠올리기 쉽다는 점이 장점입니다.

작성된 샘플 중에서 마음에 드는 것을 지정합니다.

홈은 1b로
시각화는 1d로

그러자 그것들을 조합한 프로토타입이 작성되었습니다.

Claude Code에 Design을 전달하여 구현시키기

claude design의 mcp server가 필요하므로, 아래 URL의 절차에 따라 설치합니다.

Claude Design 시작하기

• 서버를 추가합니다.

claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp

• /design-login을 실행하여 로그인합니다.

Claude Design의 Share에서 Claude Code를 선택합니다.

이번에는 local Agent를 사용하고, 지시 사항을 입력한 후 Copy Prompt를 선택합니다.

그러면 다음과 같은 프롬프트가 클립보드에 복사됩니다.

Use the claude_design MCP (https://api.anthropic.com/v1/design/mcp, auth via /design-login) to import this project:

Focus on these files (the whole project is readable):
...

실제로 프롬프트를 실행하면, MCP 서버를 이용하여 파일을 취득하고 Claude Code가 구현을 시작합니다.

⏺ claude-design - get_project (MCP)(project_id: "e84c86ed-ffd8-...")
{
"id": "e84c86ed-ffd8-...",
...

취득된 것은 주로 다음과 같은 파일입니다.

家計簿アプリ.dc.html

— 프로토타입 본체 -
_ds/organic-.../

— 디자인 시스템 (CSS 및 번들) -
ios-frame.jsx

— 프리뷰용 iPhone 프레임 -
support.js

— 프로토타입의 동작을 지원하는 스크립트

Claude Sonnet 5로 구현시켜 보았습니다.

특별히 지시를 추가하지 않고도 5분 정도면 작업이 완료되었습니다.

HTML + CSS + Vanilla JS, localStorage를 사용한 샘플 구현입니다.

배포된 앱은 다음과 같이 되었습니다.

버튼 위치가 어긋나 있거나 곳곳에 아쉬운 부분은 있지만,

Claude Design의 결과를 인계하는 데는 성공한 것으로 보입니다.

디자인도 Claude Code로 하면 되지 않을까?

참고로, 「나만의 가계부 앱을 만들고 싶다」라는 프롬프트만으로 구현한 결과를 각각 기재합니다.

단 한 번 시도한 결과이므로, 생성의 편차는 고려되지 않았습니다.

Claude Code Plan + auto implementation(Opus5)

Claude Design(Opus5)

Claude Code의 Plan 모드에서 발생한 대화 내용은 다음과 같습니다.

⏺ User answered Claude's questions:
· 어떤 형태로 만드시겠습니까? (프로토타입의 토대가 되는 구성) → Vite + React + TS (권장)
· 데이터는 어디에 저장하시겠습니까? → localStorage (권장)
...

Claude Code의 대화 이력에서 사용된 것은 dataviz라는 skill뿐이었습니다.

그 외에도 skill을 사용하거나, 프롬프트 (Prompt)를 개선함으로써 향상은 가능할 것으로 보입니다.

Claude Code의 결과도 기능적으로는 나쁘지 않습니다. 오히려 이쪽이 더 보기 편할지도 모른다는 느낌을 받지만, 기능적이고 소박한 인상을 받습니다.

디자인에 신경을 쓰고 싶거나, skill 또는 프롬프트 엔지니어링 (Prompt Engineering)에 익숙하지 않은 경우에는 Claude Design을 이용하는 것이 좋을 것 같습니다.

소감

지금까지 Claude Design + Claude Code를 연계하는 방법을 소개했습니다.

디자이너에게 디자인을 의뢰하고, 그것을 엔지니어에게 구현하도록 하는 것.

그와 유사한 경험을 할 수 있다는 점이 신선했습니다.

이번에는 심플한 이용 방법이었지만, 직접 만든 디자인 테마를 사용하거나 skill을 조합하는 등, 그 외에도 할 수 있는 일은 많아 보입니다.

여러분도 꼭 한번 시도해 보세요!

Discussion