CLAUDE DESIGN
대화만으로
실제 작동하는 웹·앱 만들기
매니페스트로 기획하고, Claude Design으로 디자인하고, Claude Code로 작동시킨다.
Agenda
오늘의 흐름
Why this talk
왜 이걸 들고 왔냐면
채용 공고를 즐겨 본다
원래 취업시장·채용 공고 보는 걸 좋아하는데, 요즘 디자이너 부문에서 "Claude Design 다룰 줄 아는 사람 우대" 같은 문구가 부쩍 늘어서 눈에 밟혔다.
Figma 주가가 흔들렸다
Anthropic이 Claude Design을 내놓은 직후, 디자인 툴 대장주 Figma 주가가 약 6~7% 하락(2026.04.17). 실적은 오히려 좋았는데도. 그만큼 파급이 크다는 신호라 눈길이 갔다.
직접 써보니 쓸 만했다
여러 AI 툴 조합을 돌려보니 매니페스트 + Claude Design이 기획부터 화면까지 제일 매끄럽고 빨랐다. 우리 연구·프로젝트 결과물도 이걸로 빠르게 만들 수 있겠다 싶어 공유할 만하다고 봤다.
Problem
예쁜 사이트 하나에 세 명이 필요했다
보기 좋은 서비스 하나를 만들려면 보통 기획·디자인·개발이 각자 붙었다. 사람도 시간도 많이 든다.
기획자
요구사항 정리, PRD, 기능 정의, 화면 흐름 설계
디자이너
레이아웃, 컬러·타이포, 컴포넌트, 화면 디자인
개발자
실제 작동하는 웹·앱으로 구현, 동적 요소·백엔드
그리고 그 앞단, 기획이 구조화되어 있지 않으면 이후 모든 단계가 흔들린다.
Overview
세 개의 도구, 하나의 흐름
매니페스트
아이디어를 PRD·기능명세서·유저플로우·와이어프레임으로 구조화
Claude Design
기획 문서를 그대로 넘겨 예쁜 실제 화면을 생성·편집
Claude Code
동적 요소·백엔드를 붙여 실제 작동하는 서비스로
세 도구가 하나의 흐름으로 이어져, 아이디어 한 줄이 반나절도 안 돼 실제 서비스가 된다.
01
매니페스트로 기획하기
에디터 기반 AI 기획 에이전트. 아이디어만 있으면 문서가 순서대로 쌓인다.
What is Manyfast
아이디어를
기획 문서로
에디터 기반의 AI 기획 에이전트. 채팅창에 주제만 적으면 PRD·기능명세서·유저플로우·와이어프레임까지 순서대로 만들어 준다.
코딩·디자인 속도가 빨라져도 초기 기획이 구조화돼 있지 않으면 이후 모든 단계가 흔들린다. 그 비효율을 잡으려고 쓴다.
Planning Flow
주제 하나에서 문서가 순서대로 쌓인다
PRD — 목적·타겟·핵심기능을 잡는 나침반
기능명세서 — 핵심 요구사항으로 분해
Flow & Wireframe
흐름을 그리고, 화면 설계도로
유저플로우 — 단계와 분기를 한눈에
와이어프레임 — 레이아웃·정보 계층 중심 설계도
Export
기획을 통째로 내보내기
02
Claude Design으로
디자인하기
기획의 맥락을 그대로 넘겨, 처음부터 다시 설명하지 않고 화면을 만든다.
Workflow
매니페스트 → Claude Design
Claude Design에 전달
앞서 내보낸 문서를 — 무엇을·왜, 어떤 화면·흐름인지를 한 번에 첨부
디자인 시스템 먼저 적용 (권장)
컴포넌트·스타일을 미리 잡아 통일감 확보
화면 디자인 생성 & 반복
Claude Design에 첨부한 것들, 디자인 시스템 토대로 화면 생성
검증된 디자인 시스템을 먼저
Figma 커뮤니티의 검증된 디자인 시스템을 Create Design System → Upload a .fig로 올리면, 이후 화면이 일관되게 만들어진다.
The Prompt
실제로 넣은 프롬프트 한 장
이 프롬프트 문구 자체도 Claude에게 "써 달라"고 한 걸 그대로 넣었다.
> 첨부한 기능명세서와 유저플로우를 바탕으로 "직장인 점심 커피챗 플랫폼" 모바일 앱 UI를 만들어줘.
· 와이어프레임의 화면 레이아웃/구조를 기본 뼈대로 사용
· 컬러·폰트·컴포넌트 스타일은 Wanted Design System 그대로 적용
· 유저플로우의 주요 5개 화면: 온보딩/로그인 · 홈 대시보드 · 세션 상세 · 매칭·그룹채팅 · 프로필/설정
· 톤은 캐주얼하고 부담 없이, 점심시간에 빠르게 훑어볼 수 있는 가벼운 UI로
Result ①
모바일 앱 첫 초안
기능명세서·유저플로우 + Design System을 그대로 반영
Result ②
데스크톱 웹 버전
앱과 웹을 같은 기획 하나로 제작
03
왜 Claude Design인가
기존 AI 툴과 무엇이 다른가, 그리고 왜 지금 배워둘 만한가.
Why it's better
기존 AI 툴보다 나은 점
기존 AI 툴
— 대개 슬라이드 · HTML까지만
— 고치려면 매번 채팅으로 다시 요청 (그때마다 토큰 소모)
— 결과물이 정적, 재편집·추출이 번거로움
— 요청마다 스타일 다시 설명, 화면마다 제각각
— 코드 결과가 밋밋하고 'AI 티'가 남
— 다른 툴로 이어 작업하기 어려움
Claude Design
＋ 대화만으로 실제 웹·앱·게임·슬라이드까지 제작
＋ 마우스로 클릭·드래그해 그 자리에서 편집 — 채팅·토큰 없이
＋ PPTX·PDF·HTML로 추출 — 안 깨지고 바로 재편집
＋ 디자인 시스템 한 번 지정 → 전 화면 일관되게 재사용
＋ 요구사항·기획 맥락을 그대로 이어받아 자연스럽게
＋ Claude Code 연동으로 가능 작업 폭증
Live Editing
사이트인데 코드 없이 바로 편집된다
완성된 화면을 그 자리에서 고치는 세 가지 방식. 아래 화면들로 살펴보겠습니다.
요소 직접 수정
클릭해서 고친다. Simple(스타일 GUI) · Pro(그림자·필터·transform) · Code(CSS 직접).
코멘트로 수정
고칠 부분을 클릭해 코멘트를 달고 보내면 반영. 여러 개 모아 한 번에 처리도 가능.
슬라이더로 조절
디자인 옆 컨트롤러의 슬라이더·버튼으로 크고 작은 요소를 실시간 변경·비교. 채팅을 통해 무한정 추가 가능.
Claude Code
한쪽의 단점을 다른 쪽이 메꾼다
예쁘게는 Claude Design, 실제로 작동하게는 Claude Code. 둘을 붙이면 동적 요소·백엔드까지 이어진다.
Claude Design
엄청 예쁘게 만들어 준다.
단, 그 자체로는 정적인 화면.
Claude Code
실제 작동하게 만들어 준다.
단, 밋밋하고 AI 티가 난다.
= 동적 요소와 백엔드까지 붙는 실제 서비스
CLAUDE CODE
정적 HTML → 클릭 프로토타입
Claude Design으로 뽑은 정적 화면을 Claude Code에 넘겨, 버튼을 누르면 실제로 화면이 전환되는 반응형 앱으로 만들었다.
8개 화면을 버튼으로 전부 연결 — Claude Code가 먼저 라우트 맵을 그려 컨펌받고 진행
Short Prompt, Big Result
프롬프트는 짧게, 결과는 크게
이 문구도 Claude에게 "써 달라"고 해서 나온 걸 그대로 넣었다. 길게 안 써도 앞단 기획·디자인이 탄탄하면 이렇게 나온다.
짧게 넣은 프롬프트
> 정적 프로토타입 HTML 2개를 클릭 프로토타입으로.
· React + Vite + TS, 반응형 하나로 통합
· 라우팅 + state로만 전환, 서버·DB 없음
· 기존 디자인 최대한 그대로 재사용
· 8개 화면 버튼으로 전부 연결
· 먼저 라우트 맵부터 보여주고 컴펌 후 진행
그래서 나온 결과물
버튼을 누르면 화면이 실제로 전환되고 입력이 반영되는 클릭 프로토타입. 데스크톱·모바일이 하나의 반응형 앱으로.
Wrap-up & Tips
가져갈 것 두 가지
TIP 1 · 순서
기획을 먼저 구조화하면 뒤가 안 흔들린다. 매니페스트를 앞단에 두기.
TIP 2 · 조합
예쁘게는 Claude Design, 실제 작동은 Claude Code. 둘을 붙이는 게 핵심.