# 클로드 디자인 무조건 이렇게 쓰세요 — 내 브랜드 처음부터 끝까지 통째로 만드는 법

> 브랜드 세팅 한 번으로 구독 신청 페이지·피치덱·인포그래픽·웹사이트 뼈대·애니메이션까지 색과 폰트가 맞아떨어지게 뽑습니다. 프롬프트는 그대로 복사해 쓰세요.

- 2026-07-13 · 튜토리얼 · 초급 · 21분 · Claude · Gemini · Claude Code
- 원문: https://www.aihoon.kr/tutorials/claude-design-30min
- 영상: https://www.youtube.com/watch?v=r_yykDayHv8

## 완성하면

색과 폰트가 맞는 신청 페이지, 피치덱, 인포그래픽이 한 세트로 나와요.

## 시작하기 전에 · 사용 도구

- 클로드 유료 플랜 — Pro·Max·Team·Enterprise 중 하나 (디자인은 베타라 무료 플랜 불가)
- 접속 경로 — claude.ai/design 또는 클로드 앱 사이드바의 Design 버튼
- (선택) 제미나이 계정 — 슬라이드용 이미지 생성, 무료
- (선택) 클로드 코드 — 프롬프트 1을 쓸 때만

## 단계별 따라하기

예시 브랜드는 "길호 AI 클래스"(직장인 대상 온라인 클래스 구독 서비스)입니다. 영상 그대로 따라하려면 각 단계의 프롬프트를 그대로 복사해 쓰고, 내 브랜드로 바꿀 때는 [대괄호] 부분만 바꾸면 됩니다.

### STEP 0. 브랜드 세팅 — 디자인 시스템 (5분, 제일 중요)

노란색 하면 카카오, 초록색 하면 네이버가 떠오르듯, "이 브랜드다" 싶은 색·폰트·그림체를 하나로 정해두는 규칙이 디자인 시스템입니다. 이걸 왜 제일 먼저 하냐면 — 한 번 세팅해두면 이후 만드는 모든 결과물이 이 값으로 통일돼서 나오기 때문입니다.

설정 화면에서 프롬프트 2를 "회사 이름·소개" 칸에, 프롬프트 3을 "기타 노트" 칸에 넣고 저장하면 끝. 아직 브랜드 색이 없어도 클로드가 만들어줍니다. 이 5분이 이후 모든 결과물을 프로처럼 보이게 합니다. 건너뛰지 마세요.

**프롬프트 2 — 디자인 시스템 "회사 이름·소개" 칸**

```
길호 AI 클래스: 바쁜 직장인이 하루 30분으로 실전 스킬을 배울 수 있는 월 구독 온라인 클래스 서비스.
프리미엄하지만 친근하게, 성장하고 싶은 직장인을 위한 서비스.
마케팅 웹사이트, 구독 신청 플로우, 피치덱, 원페이저가 필요해.
```

**프롬프트 3 — "기타 노트(Any other notes)" 칸**

```
따뜻하고, 프리미엄하고, 아늑하게, 절대 딱딱하지 않게.
팔레트는 크림, 에스프레소 브라운, 번트오렌지 포인트에 부드러운 세이지 보조색.
제목은 Pretendard, 본문도 Pretendard.
넉넉한 여백, 12px 둥근 모서리, 부드러운 그림자, 알약형 번트오렌지 버튼.
브랜드 보이스는 따뜻하고 자신감 있으면서 살짝 아늑한 매력.
```

**프롬프트 1 — (선택) 클로드 코드: 브랜드 코드 폴더**

```
"길호 AI 클래스"라는 브랜드를 위한 작은 프론트엔드 디자인 시스템을 만들어줘.
직장인을 위한 월 구독 온라인 클래스 서비스야.
모든 걸 gilho-ai-class-design-system이라는 폴더에 넣어줘. 포함할 것:

- 토큰 파일(CSS 변수): 색상은 크림 배경 [메인 배경색], 텍스트용 에스프레소 브라운,
  번트오렌지 포인트, 세이지 보조색. 그리고 타입 스케일(제목·본문 모두 Pretendard),
  스페이싱 스케일, 12px 보더 radius, 부드러운 그림자.
- 순수 React + CSS로 된 재사용 컴포넌트(프레임워크·백엔드 없이):
  Button(번트오렌지 알약형), Card, PricingTier 카드, NavBar, Footer, Hero 섹션.
- 컴포넌트를 하나씩 다 렌더링해서 전체 시스템을 한눈에 볼 수 있는 index.html 미리보기 한 장.

깔끔하고, 자체 완결적이고, 따뜻하면서 프리미엄하게.
```

_클로드 코드 사용자만 — 브랜드 폴더를 먼저 만들고 설정의 "Link code from your computer"로 연결할 때 씁니다. 안 쓰면 건너뛰세요. 연결한 경우엔 프롬프트 3 끝에 "연결된 폴더의 컴포넌트를 최우선으로 정확히 따라줘"를 덧붙입니다._

### STEP 1. Prototype — 클릭되는 구독 신청 페이지

프롬프트 4를 넣으면 1~2분 뒤 결과가 나옵니다. 화면 구조는 왼쪽이 채팅창(요청이 쌓이는 곳), 오른쪽이 캔버스(결과물 작업 공간)입니다. 수정은 세 가지 — Edit(요소를 직접 옮기기), Tweak(바꿀 내용을 글로 쓰기), Annotate(화면을 콕 찍어 메모하면 그 부분만 수정).

결과물이 나오면 꼭 눌러보세요. 플랜과 결제 주기를 바꾸면 금액이 실시간으로 바뀝니다. 예쁜 이미지가 아니라 진짜 작동하는 페이지라는 것 — 여기서부터 다른 툴과 갈립니다. 프롬프트 5처럼 한 문장씩 얹어가며 발전시키면 되고, 완성품이 아니어도 괜찮습니다. 프로토타입은 견본이니까요.

**프롬프트 4 — [Prototype] 구독 신청 페이지**

```
"길호 AI 클래스"의 구독 신청 페이지를 프로토타입으로 만들어줘.
월 구독 온라인 클래스 브랜드야.

사용자가 플랜(라이트/스탠다드/프로)을 고르고,
결제 주기(월간/3개월/연간)를 고르고,
학습 트랙을 고를 수 있게 해줘.

옵션을 바꿀 때마다 총 금액이 실시간으로 바뀌는 걸 보여주고,
"구독 시작하기" 버튼을 명확하게 넣어줘. 클릭 가능하게.
```

**프롬프트 5 — 결과가 나온 뒤 이어서 (단계 추가)**

```
이제 계정 정보를 입력하는 두 번째 단계를 추가하고,
오른쪽에 주문 요약을 보여줘.
```

### STEP 2. Slides — 피치덱 6장

Slide deck 템플릿을 고르고 프롬프트 6을 넣습니다. 캔바·파워포인트와의 결정적 차이는 클로드 디자인은 이미 내 브랜드를 안다는 것 — STEP 0의 디자인 시스템이 여기서부터 일을 합니다. 그래서 어디서 본 듯한 템플릿이 아니라 내 사업에 맞춰 제작된 것처럼 나옵니다.

이미지가 빠지면 아쉬우니 제미나이에서 사진을 만들어(무료) 다운로드하고, 클로드 디자인에 첨부해 프롬프트 7로 배치를 맡깁니다. 캔바와는 경쟁이 아니라 같이 쓰는 관계 — 완성되면 Share → "Send to Canva"로 넘겨 더 다듬을 수 있습니다.

**프롬프트 6 — [Slide deck] 6장 피치덱**

```
"길호 AI 클래스"가 중견기업 대상 기업 교육 계약을 따내기 위한
6장짜리 피치덱을 만들어줘.

슬라이드:
1) 직원 역량 강화의 문제점
2) 우리의 솔루션
3) 구독이 어떻게 작동하는지
4) 시장
5) 요금제
6) 콜 투 액션

브랜드에 맞게, 깔끔하고 프리미엄하게.
```

_"Use speaker notes"를 켜면 발표용 노트까지 함께 만들어줍니다._

**이미지 생성 — 제미나이에서 (무료)**

```
온라인 교육 브랜드에 어울리는 사진을 만들어줘.
밝고 따뜻한 분위기에서 사람들이 노트북으로 공부하거나 일하는 모습.
프리미엄하고 깔끔한 느낌에 크림·베이지 톤.
실사 스타일로, 3~4장.
```

_제미나이는 내 슬라이드를 모르기 때문에, 원하는 이미지만 묘사해 생성한 뒤 다운로드합니다._

**프롬프트 7 — 클로드 디자인에서, 위 이미지를 첨부한 상태로**

```
첨부한 이미지들을 이 슬라이드에 브랜드에 어울리게 배치해줘.
따뜻하고 프리미엄한 느낌으로.
```

### STEP 3. Document — 인포그래픽 한 장

인포그래픽 만들 때 제일 번거로운 건 글은 여기서, 디자인은 저 툴에서, 이미지는 또 딴 데서 찾는 왕복입니다. 클로드 디자인은 글도 쓰고 디자인도 하니까 그게 한 곳에서 끝납니다. 프롬프트 8을 넣으면 앞서 만든 슬라이드와 같은 색·폰트로, SNS에 바로 올려도 될 수준의 한 장이 나옵니다.

**프롬프트 8 — [Document] 한 장짜리 인포그래픽**

```
"길호 AI 클래스"의 구독이 어떻게 작동하는지 보여주는
한 장짜리 인포그래픽을 디자인해줘.

플랜 고르기 → 학습 트랙 선택 → 매주 새 클래스 받기 흐름으로.
SNS에 올리거나 나눠줄 수 있는 걸로.
아이콘과 명확한 단계로 깔끔하게.
```

### STEP 4. Wireframe — 웹사이트 뼈대 5페이지

와이어프레임은 색·그림 없이 뭐가 어디 들어갈지만 잡아놓은 설계도입니다. 이걸 왜 만드냐면 — 실제 제품 만들 때 돈을 아껴주기 때문입니다. 건너뛰고 바로 만들면 레이아웃이 생각과 다를 때 처음부터 다시 만들며 비용이 계속 듭니다.

프롬프트 9로 5페이지 뼈대를 뽑고, 배치를 확정한 뒤에 진짜를 만드는 순서입니다. 안 예쁜 게 정상입니다 — 화려하라고 만드는 게 아니니까요.

**프롬프트 9 — [Wireframe] 5페이지 웹사이트 뼈대**

```
"길호 AI 클래스"의 5페이지 웹사이트를 와이어프레임으로 만들어줘:
홈, 클래스 목록, 구독 이용 방법, 후기, 문의.

로우 피델리티로, 박스와 라벨만, 색이나 이미지 없이.
각 페이지에 뭐가 어디 들어가는지만 보여줘.
```

### STEP 5. Animation — 움직이는 헤더

애니메이션에 클로드 디자인 쓸 생각은 잘 안 하죠. 영화급은 아니지만 로고가 나타나고 글자가 뜨는 작은 모션은 정말 잘 됩니다. 프롬프트 10으로 헤더를 만들면 이것까지 앞서 만든 것들과 색·폰트가 맞아떨어집니다. 웹사이트에 바로 넣거나 클로드 코드에 넘겨 붙일 수 있습니다.

**프롬프트 10 — [Animation] 움직이는 헤더**

```
"길호 AI 클래스" 홈페이지용 애니메이션 헤더를 만들어줘.

로고가 페이드인되고,
책 아이콘이 아래에서 슬라이드로 올라오고,
헤드라인 "매달 새로운 배움"이 화면에 타이핑되며 나타나게.

모션은 부드럽고 은은하게.
```

### 정리. 한 회사에서 나온 것처럼

오늘 만든 것 — 클릭되는 신청 페이지, 피치덱, 인포그래픽, 웹사이트 뼈대, 애니메이션. AI 툴 여러 개로 따로 만든 게 아니라 진짜 한 회사에서 나온 것처럼 맞아떨어집니다. 처음의 디자인 시스템 5분이 이 통일감을 만듭니다.

## 자주 묻는 질문

**Q. 디자인 버튼이 안 보여요 / 무료 플랜인데 안 열려요**

클로드 디자인은 아직 베타라 유료 플랜(Pro·Max·Team·Enterprise) 전용입니다. 유료 플랜인데도 안 보이면 claude.ai/design 주소로 직접 접속해보세요.

**Q. 결과물이 영상이랑 똑같이 안 나와요**

정상입니다. 생성형 특성상 매번 조금씩 다르게 나옵니다. 디자인 시스템(프롬프트 2·3)을 먼저 세팅했는지가 제일 크고, 그다음은 Edit·Tweak·Annotate 세 가지 수정 도구로 다듬으면 영상 수준으로 맞출 수 있습니다.

**Q. 디자인 시스템 건너뛰고 바로 만들면 안 되나요?**

만들어지긴 합니다. 대신 결과물마다 색·폰트가 제각각으로 나와서 나중에 하나씩 다시 고쳐야 합니다. 세팅은 5분, 건너뛴 대가는 결과물 개수만큼 커집니다.

**Q. 이미지도 클로드 디자인 안에서 만들면 안 되나요?**

이 영상의 워크플로우는 이미지 생성이 무료인 제미나이에서 만들어 첨부하는 방식입니다. 원하는 장면을 글로 묘사해 생성 → 다운로드 → 클로드 디자인에 첨부 → 프롬프트 7로 배치.

**Q. 만든 결과물은 어떻게 내보내요?**

슬라이드는 Share → "Send to Canva"로 캔바에 보내 이어서 편집할 수 있습니다. 프로토타입·애니메이션도 Share 메뉴에서 내보낼 수 있습니다.

## 한 걸음 더

각 프롬프트의 [대괄호] 부분만 내 브랜드명·업종·색으로 바꿔서 오늘 흐름 그대로 내 브랜드 세트를 뽑아보세요. 오늘 만든 인포그래픽은 지금 바로 SNS에 올려도 됩니다. STEP 4의 와이어프레임을 클로드 코드에 넘기면 진짜 작동하는 웹사이트까지 갈 수 있습니다 — 다음 튜토리얼에서 다룹니다.