빈 캔버스에서 첫 결과물까지 | Claude Design 완전정복

claude.ai/design에 접속해서 첫 결과물까지 가는 흐름을 짚어요.

주의· 시작 전 — 한도 체크

Claude Design은 한도가 빡빡한 도구예요. Pro 가입자가 30분 안에 위클리 한도를 다 쓸 수도 있어요. 한 사용자 보고로는 "디자인시스템 1개 + 원페이저 2개 + 슬라이드 1개 + 비디오 1개"로 한 주 한도 끝. 한도는 며칠 후 리셋돼요.

이 챕터를 따라하실 거면 무엇을 만들지 미리 정해놓고 들어가세요. 아니면 일단 읽고 넘어가도 돼요. 본인이 진짜 만들 무언가가 생겼을 때 다시 돌아오면 됩니다.

접속하고 첫 프로젝트 만들기

claude.ai/design 접속(Pro / Max / Team / Enterprise) 하면 왼쪽에 New project 패널이 떠요. 시작 타입이 4가지 탭으로 나뉘는데, 만들려는 결과물에 따라 골라요.

Prototype — 인터랙티브 화면·앱·LP. 가장 흔한 시작점
Slide deck — 발표용 멀티 페이지 덱
From template — 회사·본인 라이브러리의 템플릿에서 시작
Other — 자유 시작 (프로젝트 이름과 디자인시스템만 정하고 들어감)

이 챕터는 Prototype 탭으로 진행해요. 가장 흔한 시작점이고, 다음 섹션의 첫 프롬프트(LP) 예시도 Prototype 컨텍스트랑 맞아요. 다른 타입을 골라도 캔버스 흐름·다듬기 4가지는 똑같이 작동하니까 본인 작업에 맞는 걸 골라도 됩니다.

Prototype 탭에서 정해야 할 것:

프로젝트 이름 — 자유 입력
Design system — 이미 등록된 게 있으면 매칭, 없으면 None
Wireframe / High fidelity — 결과물 fidelity 선택. 두 가지 차이:
- Wireframe — 회색조 박스·라인으로 구조만. 정보 위계·레이아웃을 빠르게 검토하고 싶을 때
- High fidelity — 색·타이포·이미지·인터랙션 다 살아있는 폴리시드 시안. 동료·클라이언트에게 보여줄 시각 완성도

이 챕터는 High fidelity로 진행해요. 다음 챕터들(다듬기·디자인시스템·핸드오프)이 다 색·토큰 기반이라 high fidelity 컨텍스트가 자연스러워요. Wireframe은 정보 구조만 빨리 검토할 때 따로 활용.

다 정한 뒤 Create 누르면 캔버스로 들어가요. 기본은 "Only you can see your project by default" — 본인만 보임. 팀 공유는 나중에 Share 메뉴에서 조정.

Claude Design 메인의 New project 패널 — Prototype·Slide deck·From template·Other 4가지 탭이 보이는 화면

캔버스로 들어가면 화면이 두 영역으로 나뉘어요. 왼쪽은 채팅, 오른쪽은 캔버스. 첫 프롬프트를 보내면 캔버스에 결과가 차오르는 데 보통 45~90초 걸리고, 복잡한 요청이면 더 길어져요. 끝나면 작동하는 프로토타입이 그대로 떠요 — 아래는 "코드 없이, 다음 회사를 만든다"라는 SaaS LP가 첫 프롬프트로 나온 결과예요.

Claude Design 캔버스에서 첫 결과물이 완성된 모습 — Layer SaaS LP가 헤드라인·CTA·디자인시스템 토큰과 함께 렌더링되고 우측에 Tweaks 패널이 열려 있는 화면

첫 프롬프트 쓸 때

Claude Design 사용기에서 반복적으로 강조되는 한 가지: 막연한 프롬프트는 막연한 결과. 좋은 첫 프롬프트는 한 문단 안에 청중·콘텐츠 윤곽·시각 톤이 다 들어가요.

예시로 비교하면, "새 제품 출시 랜딩 페이지 만들어줘"는 색·구성·톤 다 평균치로 나와요. 반대로:

비개발자 창업자 대상 SaaS 도구 출시 LP 만들어줘. 히어로 섹션은 짧은 한 줄 카피 + 데모 영상 자리, 그 아래 3개 핵심 기능 카드, 가격표, FAQ 순서. 톤은 차분한 에디토리얼 — 화려한 색 대비 X, 정렬과 여백으로 구분해줘. 폰트는 sans-serif 본문 + serif 헤드라인.

이 정도 구체성이면 첫 시도에 쓸 만한 결과가 나올 확률이 꽤 올라가요. 한도가 빡빡한 도구이니만큼 첫 프롬프트에 시간을 쓰는 게 결과적으로 한도를 아끼는 길이에요.

NOTE· 첫 프롬프트에 담을 것

청중 한 줄
페이지 구조(섹션 순서)
시각 톤(차분한·에디토리얼·화려한·미니멀 등)
콘텐츠 자리 표시(데모 영상 자리, 가격표 등)
가능하면 폰트 결(serif vs sans-serif)

컨텍스트 첨부

채팅 입력창에 이미지·스크린샷·텍스트 자료를 첨부할 수 있어요.

Claude Design 채팅 입력창에서 첨부 버튼 클릭하고 이미지/파일을 붙이는 UI

비슷한 LP 스크린샷 → "이 톤으로"
회사 로고/색 가이드 PNG → "이 색을 그대로 써줘"
기존 페이지의 텍스트 카피 → "이 카피를 그대로 배치"

다음 챕터들에서 다룰 디자인시스템 학습은 더 본격적인 컨텍스트 입력 방식이지만, 가벼운 첨부만으로도 결과가 꽤 달라져요.

결과 받고 한 박자 쉬기

첫 결과가 떴을 때 흔한 실수가 있어요.

70% 정도 만족스러우면 곧바로 채팅으로 수정 요청 보내기 쉬운데, 현재 결과를 유지한 채 다른 버전을 요청하는 게 한도를 아끼는 길이에요. "다른 톤으로 한 버전 더 보여줘"같이 요청하면 Claude가 variation을 보여주고, 그중 좋은 부분만 골라 조합하는 게 한 방향으로 계속 다듬는 것보다 빨라요.

다음 챕터에서 다듬기 방식 4가지를 언제 어떻게 쓰는지 정리해요.