Claude Design이란 무엇인가? 요금제, 7가지 제작 방법 및 프롬프트 예시 완벽 가이드 [2026 최신판]

2026년 6월 18일, Claude Design 에 주요 업데이트가 있었습니다.

기능이 늘어나고, 인터페이스도 변경되었습니다.

직접 사용해보면서 확인한 내용을, 화면에서 어디를 클릭할지 순서대로 정리했습니다.

이 글은 "함께 보면서 따라 하는" 학습을 목적으로 합니다.

실제로 [claude.ai/design](//claude.ai/design)을 열어보면서 읽어주세요.

무료로 사용할 수 있나요?

아니요, 사용할 수 없습니다.

Claude Design 은 유료 플랜 전용 기능입니다.

Pro 플랜 ($20/월) 이상이면 사용할 수 있습니다. 추가 요금은 필요 없습니다.

Claude Design 이란?

한국어로 대략적인 지시만 해도 슬라이드, LP, 앱 프로토타입, 제안서 등을 만들 수 있는 AI 도구입니다.

Anthropic이 2026년 4월 17일에 공개했습니다. 이번 업데이트로 기능이 대폭 향상되었습니다.

출력 결과는 "Live HTML"입니다. 정적인 이미지가 아니라, 클릭하고 움직이는 디자인이 생성됩니다.

화면 읽는 방법

[claude.ai/design](//claude.ai/design)에 접속하면 이 화면이 표시됩니다.

상단 탭

"Make something new" 영역

만들고 싶은 종류를 여기서 고릅니다. 7개의 카드가 나열되어 있습니다.

"Designs" 아래에는 과거에 만든 디자인들이 목록으로 표시됩니다.

Claude 가 추가 질문을 할 때 (모든 카드 공통)

카드를 선택하고 프롬프트를 보낸 후, Claude 가 정보가 부족하다고 판단하면 화면 오른쪽에 추가 질문이 표시될 수 있습니다.

질문 내용은 프롬프트에 따라 달라집니다.

필수 항목과 선택 항목이 있습니다.

항목에 답변하고 "Continue"를 누르면 생성이 시작됩니다.

슬라이드 (프레젠테이션 자료) 만드는 방법

세미나 자료, 설명 자료, 피치 덱을 여기서 만듭니다.

Step 1. 홈 화면에서 "Slides" 클릭

"Presentations & pitch decks"라고 적힌 카드를 클릭합니다.

Step 2. 만들고 싶은 슬라이드 내용 입력

클릭하면 이 화면으로 이동합니다.

왼쪽 사이드바에 "What's the presentation about?"가 표시됩니다.

입력 방법은 세 가지 중에서 선택할 수 있습니다:

• Upload a doc: Word 나 PDF 같은 기존 문서로 슬라이드 만들기
• Paste your notes: 메모나 텍스트를 붙여넣어 구조화하기
• Existing deck: 기존 슬라이드 덱을 기반으로 재구축하기

아무것도 첨부하지 않으면, 아래 텍스트 입력란에 한국어로 내용을 입력하고 보내면 됩니다.

프롬프트 예시

1AI 컨설팅 서비스 소개 슬라이드를 만들어주세요.
2대상: PC를 잘 다루지 못하는 개인 사업자, 프리랜서
3시간: 20분 세미나용
4구성: 현재의 고민 → AI로 해결 가능한 것 → 서비스 상세 → 요금 → 신청 방법
5분위기: 친근하게, 전문 용어 없이
6모양: 심플하고 보기 쉬운 흰색 배경

1자기소개 슬라이드를 만들어주세요.
2전직 SE, 현재 AI 활용법 가르치는 중
3실적: Claude Code로 업무 자동화, 월 30만원 시스템 구축
4대상: AI 초보자 개인 사업자
5슬라이드 수: 5~7장, 여백을 넉넉하게 해서 보기 쉽게

1Claude Code 사용법 입문 슬라이드를 만들어주세요.
2청중: 코딩을 한 번도 해본 적 없는 초보자
3시간: 10분
4내용: Claude Code란? → 설치 단계 → 첫 번째 명령어 → 자주 발생하는 실패와 해결책
5톤: 정중하고 부드럽게, 무섭지 않게

Deck options (선택 사항)

• Optimize for Google Slides: Google Fonts만 사용합니다 (Google Slides 에서 열 때 편리).
• Add speaker notes: 각 슬라이드에 자동으로 발표자 노트를 추가합니다.

Step 3. 생성될 때까지 기다리기

몇 분 정도 걸립니다. 왼쪽 패널에서 진행 상황을 확인할 수 있습니다.

완료되면 이런 화면이 됩니다.

Step 4. 오른쪽 상단 버튼으로 조정

생성이 완료되면 오른쪽 상단에 버튼들이 나타납니다.

"Tweaks"를 가장 많이 사용하게 됩니다. "첫 번째 슬라이드 제목을 더 크게"처럼 채팅하듯 입력하면 바로 수정해줍니다.

주의할 점

슬라이드의 시각적 스타일은 먼저 정하세요.

중간에 "모든 색상을 바꿔줘"라고 하면 일관성이 무너지기 쉽습니다.

큰 틀을 먼저 정하고, 세부 사항을 나중에 수정하는 것이 빠릅니다.

프로덕트 프로토타입 (움직이는 프로토타입) 만드는 방법

앱 화면, 서비스 예약 흐름, 웹 서비스 목업 등을 만들 수 있습니다.

완료되면 실제로 클릭해서 조작할 수 있는 상태가 됩니다.

Step 1. 홈 화면에서 "Product prototype" 클릭

"Interactive app mockups"라고 적힌 카드를 클릭합니다.

Step 2. 만들고 싶은 앱 화면 내용 입력

클릭하면 이 화면으로 이동합니다.

슬라이드와 마찬가지로 텍스트 입력란에 한국어로 내용을 입력하고 보내면 됩니다.

프로토타입은 상세하게 적을수록 정확도가 높아집니다. 다음 내용을 포함하면 품질이 좋아집니다:

• 어떤 종류의 앱인지: 예약 시스템, 작업 관리, 결제 화면 등
• 화면 수: 몇 개의 화면으로 구성할지
• 각 화면의 내용: 무엇이 표시되는지
• 조작 흐름: 어디를 누르면 다음 단계로 넘어가는지
• 디바이스 크기: 스마트폰 (390×844px) 용인지, PC 용인지
• 색상/스타일: 다크 테마, 화사한 색 구성 등

프롬프트 예시

1미용실 예약 앱 프로토타입을 만들어주세요.
2스마트폰 화면 (390×844px) 기준.
34개 화면:
41. TOP: 미용실 이름, 메뉴 목록 (컷/염색/트리트먼트)
52. 메뉴 선택: 선택하면 다음으로 진행
63. 날짜/시간 선택: 캘린더와 시간대
74. 확인/완료: 예약 내용과 "예약하기" 버튼
8스타일: 흰 배경, 핑크 악센트, 둥근 디자인
9"예약하기" 버튼을 누르면 "예약이 완료되었습니다!" 화면으로 전환

Step 3. 생성될 때까지 기다리기

몇 분 정도 걸립니다. 완료되면 이런 화면이 됩니다.

실제로 클릭해서 조작할 수 있는 상태입니다. "예약하기" 버튼을 누르면 다음 화면으로 전환됩니다.

Step 4. 오른쪽 상단 버튼으로 조정

생성이 완료되면 오른쪽 상단에 버튼들이 나타납니다.

"Tweaks"를 가장 많이 사용하게 됩니다. "배경색을 흰색으로", "글꼴을 더 크게"처럼 채팅하듯 입력하면 바로 수정해줍니다.

애니메이션을 추가하고 싶다면

Claude Design 은 기본적으로 애니메이션을 추가하지 않습니다.

움직임을 넣고 싶다면 명시적으로 지정하세요.

1버튼에 마우스를 올리면 1.05배로 확대, 200ms 트랜지션.
2카드는 페이지 로드 시 페이드인 + 슬라이드 업, 150ms 간격으로 순서대로 표시.

프로덕트 와이어프레임 (뼈대 설계) 만드는 방법

"화면 구성을 먼저 결정"하고 싶을 때 사용합니다.

디테일한 디자인이 아니라 레이아웃의 뼈대만 만듭니다.

"사용자가 이 순서로 진행한다"는 흐름을 확인하는 데 적합합니다.

Step 1. 홈 화면에서 "Product wireframe" 클릭

"Lo-fi screens & flows"라고 적힌 카드를 클릭합니다.

### Step 2. 만들고 싶은 화면 구성 입력

클릭하면 이 화면으로 이동합니다.

텍스트 입력란에 한국어로 내용을 입력하고 보내면 됩니다. 참고할 화면이 있다면 "Add a screenshot"으로 첨부하면 정확도가 높아집니다.

프롬프트 예시

1컨설팅 서비스 신청 흐름의 와이어프레임을 만들어주세요.
2단계: TOP → 서비스 설명 → 요금 → 신청 폼 → 완료
3각 화면에 무엇을 배치할지만 알 수 있으면 됩니다. 세부 디자인은 불필요합니다.

1세미나 신청 LP의 와이어프레임을 만들어주세요.
2섹션: 히어로 섹션 → 강사 소개 → 내용 → 참가비 → 신청 폼
3스마트폰 화면 기준으로.

Step 3. 생성될 때까지 기다리기

완료되면 이런 화면이 됩니다.

회색 박스로 화면 뼈대가 표시됩니다. "여기에 버튼", "여기에 이미지" 같은 배치를 확인하는 데 사용합니다. 세부 디자인은 Product prototype 또는 Document 로 만듭니다.

Step 4. 오른쪽 상단 버튼으로 조정

생성이 완료되면 오른쪽 상단에 버튼들이 나타납니다.

"Tweaks"에서 "3번째 화면에 요금 표시를 추가해줘"라고 지시하면 추가 수정을 해줍니다.

문서 (LP, 제안서, 문서) 만드는 방법

랜딩 페이지, 제안서, 보고서, 이력서 등을 여기서 만듭니다.

7가지 카드 중에서 가장 활용도가 높습니다.

Step 1. 홈 화면에서 "Document" 클릭

"Resumes, PDFs, etc."라고 적힌 카드를 클릭합니다.

### Step 2. 만들고 싶은 내용 입력

클릭하면 이 화면으로 이동합니다.

Document 카드만의 특징은 "Talk it out"입니다.

생각나는 대로 말하듯이 입력하면 구조를 그대로 읽어서 정리해줍니다.

PDF나 자료가 있다면 "Upload a PDF or notes"로 업로드할 수 있습니다.

프롬프트 예시

1개인 대상 AI 컨설팅 서비스의 LP를 만들어주세요.
2목적: LINE 등록자 증가
3구성:
4- 히어로 섹션: 캐치프레이즈 + 등록 버튼
5- 이런 고민 있지 않으신가요? (3가지)
6- 서비스로 해결할 수 있는 것 (3가지)
7- 요금
8- FAQ (3가지)
9- 최종 CTA: LINE 등록 버튼
10대상: PC를 잘 못 다루는 개인 사업자, 50대 여성
11스타일: 심플하고 따뜻하게, 흰색 + 코랄 악센트

1법인 대상 컨설팅 서비스 제안서를 만들어주세요.
2구성: 현황 과제 → 제안 내용 → 기대 효과 → 요금 → 도입 단계 → 차기 미팅 안내
3스타일: 심플하고 신뢰감 있게, 네이비 x 화이트

1프리랜서 자기소개 자료 (포트폴리오)를 만들어주세요.
2포함할 내용: 프로필, 스킬, 실적, 요금, 연락처
3스타일: 모노톤 + 악센트 컬러 1가지, 모던하고 깔끔하게

Step 3. 생성될 때까지 기다리기

몇 분 정도 걸립니다. 완료되면 이런 화면이 됩니다.

스크롤해서 나머지도 확인할 수 있습니다. LP의 경우 요금, Q&A, 푸터까지 모두 생성됩니다.

Step 4. 오른쪽 상단 버튼으로 조정

생성이 완료되면 오른쪽 상단에 버튼들이 나타납니다.

LP의 문구나 색상을 "Tweaks"에서 지시하기만 하면 바로 수정해줍니다.

애니메이션 만드는 방법

움직이는 배너나 모션 그래픽을 만들 수 있습니다.

Step 1. 홈 화면에서 "Animation" 클릭

"Motion graphics & loops"라고 적힌 카드를 클릭합니다.

Step 2. 만들고 싶은 애니메이션 내용 입력

클릭하면 이 화면으로 이동합니다.

스토리보드나 이미지가 있다면 "Drop a storyboard or images"로 업로드할 수 있습니다.

대본 (텍스트)이 있다면 "Paste a script"로 붙여넣을 수도 있습니다.

프롬프트 예시

1서비스 소개용 애니메이션 배너를 만들어주세요.
2내용: "AI x 시스템화" 텍스트 페이드인 → 서비스명 아래에서 등장 → CTA 버튼 깜빡임
3배경: 다크, 코랄 악센트 라인
4크기: 1200×630px
5루프 재생

1숫자가 올라가는 카운트업 애니메이션을 만들어주세요.
2"3,000명 돌파"라는 텍스트와 함께, 0에서 3,000까지 2초 동안 카운트업.
3페이지 표시와 동시에 시작.

완료되면 이런 화면이 됩니다.

Step 3. 오른쪽 상단 버튼으로 조정

생성이 완료되면 오른쪽 상단에 버튼들이 나타납니다.

다른 카드와 달리 "Edit" 버튼이 없습니다. 애니메이션은 코드 (CSS/JavaScript) 로 작동하기 때문에 요소를 직접 클릭하여 편집할 수 없습니다. "Tweaks"에서 AI에게 지시하는 방식으로만 수정이 가능합니다.

애니메이션을 PDF로 내보내면 움직임이 사라집니다. 움직임을 유지하려면 HTML 형식을 선택하세요.

Blank Canvas (처음부터 만들기) 사용 방법

템플릿도, 질문도 없습니다. 완전히 빈 캔버스에서 시작하고 싶을 때 사용합니다.

"어떤 카드에도 맞지 않는 것"이나 "모든 것을 스스로 결정하고 싶을 때" 선택하세요.

텍스트 입력란에 만들고 싶은 내용을 입력하고 보내면 됩니다.

Start with a File (파일로부터 만들기) 사용 방법

이 카드는 기존 파일을 디자인으로 변환합니다. Word, PDF, PPTX 파일을 Claude 에게 주기만 하면 디자인을 만들어줍니다.

Step 1. "Start with a file" 클릭

"Turn it into a design"이라고 적힌 카드를 클릭합니다. 파일 선택 대화상자가 열립니다.

지원되는 파일 형식은 DOCX, PPTX, XLSX, PDF, JPG, PNG 입니다.

Step 2. 파일을 업로드하고 지시 입력

파일을 선택하면 업로드되고, 큰 텍스트 입력란이 나타납니다. 한국어로 만들고 싶은 내용을 입력하고 "Start project" 버튼을 누릅니다.

다른 카드는 "Send" 버튼이지만, 이 카드는 "Start project"입니다.

프롬프트 예시

1첨부된 Word 제안서를 시각적인 제안 슬라이드로 변환해주세요.
25~7장 구성으로, 심플하고 보기 쉬운 디자인으로 만들어주세요.

1이 손글씨 메모에 적힌 아이디어를 LP 제안서로 변환해주세요.
2대상: AI 초보자 개인 사업자
3목표: 컨설팅 신청

완료되면 이런 화면이 됩니다.

Step 3. 오른쪽 상단 버튼으로 조정

생성 후, 오른쪽 상단의 툴바로 조정할 수 있습니다. "+ Tweaks" 버튼을 누르면 채팅 입력란이 열려 세부 변경을 위한 추가 지시를 할 수 있습니다.

Design Systems [이번 업데이트에서 추가] 사용 방법

홈 화면의 카드 목록 아래에 "Set up design system" 버튼이 있습니다.

브랜드 색상, 폰트, 로고를 한 번 등록해두면 이후 디자인에 자동으로 반영됩니다.

"만들 때마다 색상이 달라지는" 문제를 해결해줍니다.

버튼을 누르면 "Add a design system" 모달이 표시됩니다.

두 가지 등록 방법이 있습니다.

① Create here (초보자용)

필요한 정보를 폼에 입력하기만 하면 설정할 수 있습니다.

등록할 수 있는 것:

• 회사명/브랜드 설명 (텍스트 입력)
• GitHub 리포지토리 URL
• Figma 파일 (.fig 파일 업로드)
• 폰트, 로고, 에셋 파일

코드 없이 사용할 수 있습니다. 처음 사용해본다면 이 방법을 추천합니다.

② Create using Claude Code (BEST FIDELITY)

Claude Code 에 브랜드 정보를 학습시키는 기능입니다.

등록해두면 LP, 홈페이지, 슬라이드를 만들 때마다 "이 색상, 이 폰트로"라고 지정할 필요가 없습니다. 브랜드로 통일된 디자인이 자동으로 출력됩니다.

주로 법인의 개발팀을 위한 기능입니다. React 규칙으로 만들어진 서비스 코드에서 브랜드 정보를 자동으로 읽어옵니다. 개인이 사용할 일은 거의 없습니다.

사용 방법

다음 단계로 처음부터 만들 수 있습니다.

Step 1. Node.js 확인

Step 2. 폴더와 파일 만들기

1Any folder/
2　　└── design-system/
3　　　　　　　├── package.json
4　　　　　　　└── tokens.js

package.json

1{ 
2  "name": "my-design-system", 
3  "version": "1.0.0", 
4  "type": "module" 
5}

tokens.js (색상과 폰트를 브랜드에 맞게 수정)

1export const colors = {
2  primary: "#DA7756",      // 메인 컬러
3  background: "#F5F4F0",   // 배경색
4  text: "#1C1917",         // 본문 텍스트
5  white: "#FFFFFF"
6}
7export const fonts = {
8  heading: "YuGothic",
9  body: "Meiryo"
10}

Step 3. /design-sync 실행

Claude Code 에서 다음 명령어를 실행합니다:

1/design-sync

완료되면 "Design systems" 탭에 브랜드가 등록됩니다. 이후 디자인 생성 시 이 색상과 폰트가 자동으로 사용됩니다.

내보내기 방법

완성된 디자인은 여러 형식으로 내보낼 수 있습니다.

애니메이션이 있는 경우 PDF로 내보내면 움직임이 사라집니다.

움직임을 유지하려면 HTML 형식을 선택하세요.

조정 팁 (Tweaks 패널)

생성 후 "Tweaks" 버튼을 누르면 AI에게 세부 조정을 지시할 수 있습니다.

효과적인 지시 예시:

• "헤더 텍스트를 더 크게"
• "버튼을 더 눈에 띄게"
• "전체적으로 더 심플하게"
• "스마트폰으로 봤을 때 레이아웃 확인해줘"

한 번에 모든 것을 바꾸려고 하지 말고, 하나씩 지시하는 것이 원하는 결과를 얻기 쉽습니다.

이번 업데이트에서 변경된 사항

정리 — 만들고 싶은 것에 따라 카드 선택하기

Claude Design 은 Pro 플랜 ($20/월) 이상에서 사용할 수 있습니다. 무료로는 사용할 수 없습니다.

만들고 싶은 것에 따라 카드를 선택하세요

프롬프트에는 "목적, 구성, 대상, 스타일"의 4가지를 포함하면 정확도가 높아집니다.

처음부터 완벽하게 만들려고 하지 말고, 큰 틀을 만든 후 하나씩 수정해가는 것이 빠릅니다.

이 글이 도움이 되셨다면 "좋아요"를 눌러주시면 기쁘겠습니다.

▼ PC를 잘 못 다루는 분도 시작할 수 있는 Claude 사용법을 LINE으로 받아보세요.

등록하시면 Claude Code 설치 가이드를 선물로 드립니다.

https://utage-system.com/line/open/7AX6UZExr2sX?mtid=k9bP2gwMFMso