클로드 디자인으로 UI 목업 만들기 — 화면 시안부터 실제 코드까지

코드는 짜는데 앱·웹 화면 시안(UI 목업)만 나오면 손이 멈추는 개발자가 많습니다. 기획 회의에서 말로만 화면을 설명하다 방향이 어긋나고, 시안 없이 개발에 들어가면 재작업이 쌓입니다. 클로드 디자인(Claude Design)을 Max 플랜으로 실무에 붙여 쓰면서 이 UI 목업 흐름을 정리했습니다. 이 순서대로 가면 요구사항 한 문단에서 화면 목업, 그리고 실제 구현 코드까지 손에 잡힙니다.

 

발표 슬라이드 만드는 법은 클로드 디자인 사용법 — 말 한마디로 슬라이드·UI 목업 만들기에서 다뤘고, 그 글에서 예고한 대로 이번은 UI 목업편입니다.

1. 왜 개발자가 UI 목업에 클로드 디자인을 쓰나

클로드 디자인은 Anthropic Labs가 내놓은 별개 웹 앱으로, 2026-04-17 리서치 프리뷰로 공개됐고 Opus 기반입니다. 홈에 UI mockups 템플릿이 있어서 자연어로 앱·웹 화면 목업, 와이어프레임, 코드 프로토타입을 뽑을 수 있습니다.

 

개발자에게 진짜 값어치는 목업 자체가 아니라 목업을 실제 구현 코드까지 잇는 흐름입니다. Figma 시안은 예뻐도 개발자가 다시 코드로 옮겨야 하는데, 클로드 디자인은 만든 목업을 Claude Code 핸드오프로 넘겨 구현 단계로 이어갑니다. 시안에서 멈추지 않는다는 게 이 도구를 쓰는 이유입니다.

 

AI가 뽑는 화면이 뻔한 '싼티' UI로 흐르는 문제는 AI가 만든 '싼티' UI 피하는 법에서 따로 다뤘는데, 클로드 디자인은 디자인 시스템 기능으로 그 편차를 줄이는 쪽입니다.

2. 시작 — UI mockups 고르고 프롬프트 적기

홈에서 UI mockups 템플릿을 고르고, 만들 화면을 자연어로 적습니다. 예를 들면 이렇게요.

할 일 관리 앱 대시보드 화면 — 좌측 사이드바(오늘·예정·완료), 중앙 할 일 리스트(체크박스·우선순위 태그·마감일), 우측 미니 캘린더. 밝고 깔끔한 라이트 톤, 데스크톱 웹.

슬라이드와 달리 UI 목업은 요구사항 폼 없이, 프롬프트를 보내면 바로 화면을 그려줍니다. 그래서 프롬프트 한 줄에 화면 구성(사이드바·리스트·캘린더 같은 영역)과 톤을 구체적으로 담을수록 결과가 정확합니다.

반대로 "할 일 앱 화면"처럼 뭉뚱그리면 밋밋하게 나옵니다. 화면 영역·핵심 액션·톤을 한 줄에 촘촘히 담는 게 요령입니다.

3. 첫 목업 만들기

프롬프트를 보내면 요청한 화면의 목업이 바로 생성됩니다. 위 프롬프트를 넣으면 좌측 사이드바(오늘·예정·완료), 중앙 오늘 할 일 리스트(체크박스·우선순위 태그·마감일), 우측 미니 캘린더와 완료율까지 한 화면으로 잡혀 나옵니다.

첫 결과는 초안으로 보면 됩니다. 완성도보다 레이아웃 골격과 화면 구성이 의도와 맞는지부터 확인하는 게 순서입니다. 방향이 맞으면 다음 단계에서 세부를 손봅니다.

삽질 사례 — 처음엔 첫 목업이 요청과 다르게 밋밋하게 나왔습니다.

원인: 프롬프트에 화면 구성을 안 적어 배치를 모델이 임의로 정했습니다.

해결: 사이드바·리스트·캘린더 같은 영역과 톤을 프롬프트에 다시 적어 재생성하니 방향이 맞았습니다.

4. 대화로 수정 — 레이아웃·컴포넌트·색

목업은 대화와 인라인 코멘트로 고칩니다. "상단 통계 위젯을 3열에서 2열로", "완료 버튼을 강조 색으로", "리스트를 카드형으로" 같은 요청을 문장으로 넣으면 해당 부분만 바뀝니다.

 

한 번에 다 바꾸려 하지 말고 한 번에 한두 가지씩 요청하는 편이 결과가 안정적입니다. 인라인 코멘트로 특정 컴포넌트를 콕 집어 수정하면 다른 화면 요소는 그대로 유지됩니다.

5. 목업 → 실제 코드 (Claude Code 핸드오프)

여기가 개발자에게 핵심입니다. 목업이 잡히면 Claude Code 핸드오프로 넘겨 실제 구현으로 이어갑니다. 목업의 레이아웃·컴포넌트 구조를 코드 프로토타입으로 받아, Claude Code에서 React 같은 실제 프레임워크 코드로 구현하는 흐름입니다.

실무 팁 하나. 목업 단계에서 디자인 시스템(코드베이스·디자인 파일을 학습해 색·타이포·컴포넌트를 자동 적용)을 먼저 맞춰두면, 핸드오프한 코드도 그 토큰을 따라 나와 재작업이 줄어듭니다. 시안 따로 코드 따로 두 번 만드는 낭비가 이 지점에서 사라집니다.

6. 내보내기 옵션 정리

목업은 코드 외에도 여러 형식으로 내보낼 수 있습니다.

내보내기	결과물	쓰는 상황
Claude Code (Send)	실제 구현 코드로 이어감	개발 착수
Project HTML	.zip·standalone 정적 웹	웹에 바로 올리기·미리보기
PDF	고정 문서	기획·리뷰 공유
PowerPoint	편집 가능한 슬라이드	발표 자료로 전환
PNG	이미지	문서·메신저에 붙이기

2026-08 기준 리서치 프리뷰라 계정·시점에 따라 화면과 옵션이 다를 수 있습니다.

 

기획 리뷰용으로만 쓸 거면 PDF, 발표로 넘길 거면 PowerPoint면 충분합니다. 반대로 바로 개발에 들어갈 거면 다른 형식은 건너뛰고 Claude Code로 Send 한 번이 낫습니다.

Q&A — 자주 보는 질문 4개

Q. 클로드 디자인을 따로 결제해야 하나요?
아니요. Pro·Max·Team 플랜에 포함된 리서치 프리뷰입니다. 이미 구독 중이면 별도 결제 없이 접근합니다.

Q. 목업만 되고 코드는 안 되나요?
Claude Code 핸드오프로 구현 코드까지 이어집니다. 목업에서 멈추지 않는 게 개발자에게 이 도구를 쓰는 이유입니다.

Q. gstack이나 Impeccable이랑 뭐가 다른가요?
클로드 디자인은 화면 목업·시안 중심의 별개 웹 앱입니다. 코드 생성 파이프라인(gstack)이나 디자인 스킬(Impeccable)과는 역할이 다릅니다.

Q. 디자인 지식이 없어도 되나요?
자연어 요청만으로 화면이 나옵니다. 디자인 시스템 기능이 색·타이포 편차를 줄여줘서 밑그림 없이 시작해도 됩니다.

마무리

정답은 없습니다. 시안만 빠르게 뽑아 기획을 설득할 거면 목업 생성·수정까지만 써도 되고, 개발까지 이어갈 거면 디자인 시스템을 먼저 맞춘 뒤 Claude Code 핸드오프로 넘기는 흐름이 재작업을 가장 줄입니다. 같은 환경이면 위 순서대로 따라가도 무리 없습니다.

관련 글 — AI 활용법

• Impeccable 사용 가이드 — AI가 만든 뻔한 UI, 이제 끝입니다
• Claude Code 활용법 정리 — 망치는 습관 3개와 살리는 습관 7개
• Claude Max 3개월 진하게 써본 후기 — 월 $100 본전 뽑은 사용 패턴 7가지

사용 환경: Windows 11, Claude Design(리서치 프리뷰, Max 플랜), Claude Code