이 단원의 카드 9개
- 프로젝트 브리프
- 브랜드 기준 문서
- 비주얼 기준 문서
- 클로드 디자인으로 시안 만들기
- 보이스 기준 문서
- 업무 흐름 문서
- 규칙 파일 — CLAUDE.md
- 결정 원장 — decisions.md
- 조사 기준 문서
먼저 볼 카드 — 비주얼 기준 문서
실습 비주얼
클로드 디자인으로 시안 만들기
이 카드를 다루는 수업 자료를 잘 정리하는 법
클로드 디자인은 claude.ai/design에서 열리는 디자인 도구입니다. 프롬프트를 넣으면 카드뉴스, 슬라이드, 웹 화면 시안을 만들어 줍니다.
Claude Code와 역할이 다릅니다.
- Claude Code — 폴더에서 파일을 직접 만들고 고칩니다.
- 클로드 디자인 — 결과 화면을 눈으로 보면서 고칩니다.
시안을 만들기 전에 기준을 먼저 넣는 것이 중요합니다.
- design.md를 첨부하면, 클로드 디자인이 그 색·폰트·여백에 맞춰 화면을 만듭니다.
- 피그마 디자인 시스템이 있으면 .fig 파일로 등록해 둘 수도 있습니다.
- 기준 없이 “만들어 줘”라고만 하면 어디서 본 듯한 평균적인 화면이 나옵니다. design.md로 잡아 둔 기준이 여기서 그대로 쓰입니다.
한 번에 한 가지만 받지 말고 3가지 방향으로 받습니다. 서로 다른 안을 나란히 놓고 고른 다음, 채팅으로 색·문구·배치를 고쳐 나갑니다.
Pro 이상 구독에서 열리고, 무료 계정에서는 화면이 나타나지 않습니다.
순서 아래 요청을 claude.ai/design 입력창에 붙여넣어 첫 시안을 만들어 보세요.
실행 순서
-
Claude Code 또는 Codex에서 시안 제작에 쓸 요청문을 준비합니다.
첨부한 design.md를 읽고 클로드 디자인에 붙여넣을 [만들 결과물] 요청문을 작성해 주세요. 색·폰트·배치 기준과 확인할 항목을 포함하고, 정하지 않은 값은 제게 물어봐 주세요. 지금은 요청문만 작성하며 로그인·구독·유료 생성은 실행하지 마세요.
확인design.md 기준과 만들 결과물이 담긴 요청문이 나오며, 로그인이나 유료 생성은 실행하지 않습니다.
-
브라우저에서 claude.ai/design에 들어가 로그인합니다. 클로드 디자인은 Pro 이상 구독에서 열립니다.
확인"What should we create?"라는 입력 화면이 나옵니다.
-
만들 것의 기준을 먼저 넣습니다. design.md 파일을 첨부하거나, 피그마 디자인 시스템이 있으면 Create Design System에서 .fig 파일을 올립니다.
확인입력창 아래에 첨부한 design.md나 등록한 디자인 시스템 이름이 보입니다.
-
만들 것을 문장으로 설명하거나, 아래 붙여넣기 요청을 입력창에 넣습니다. 템플릿(Card News·Slides)을 골라서 시작해도 됩니다.
첨부한 design.md를 먼저 읽어. 이 기준에 맞춰 [카드뉴스 표지 / 소개 슬라이드 5장 / 랜딩 첫 화면] 시안을 만들어 줘. 서로 다른 3가지 방향으로 만들어 줘. - 1안: 기준에 충실한 안 - 2안: 여백을 더 크게 둔 안 - 3안: 자유롭게 그라디언트 배경, 이모지, AI가 직접 그린 일러스트는 쓰지 마.
확인설명한 화면이 서로 다른 3가지 방향으로 만들어집니다.
-
마음에 드는 안을 고르고, 채팅으로 색·문구·배치를 고칩니다. 화면이 바로 바뀌는 것을 보면서 반복합니다.
확인요청한 부분만 바뀐 새 시안이 나옵니다.
-
마지막으로 design.md 값과 대조합니다. 색·폰트가 기준과 다르면 고쳐 달라고 요청합니다.
지금 시안에서 쓴 색과 폰트를 design.md의 값과 비교해서, 어긋난 부분만 표로 정리해 줘. 어긋난 곳은 design.md 값으로 고쳐 줘.
확인기준과 어긋난 색·폰트가 표로 나오고, 기준 값으로 맞춰집니다.
직접 해보기
대괄호 안은 실제 값으로 바꿔서 붙여넣습니다.
내가 만드는 건 [채널·결과물, 예: 인스타 카드뉴스 / 서비스 소개 슬라이드]야. 첨부한 design.md 기준으로 이걸 3가지 방향으로 만들어 줘. 시작하기 전에 내가 정해 줘야 할 것이 있으면 먼저 물어봐 줘.
다음 요소는 절대 쓰지 마: 그라디언트 배경, 이모지, 둥근 모서리에 왼쪽 색 보더가 있는 카드, AI가 직접 그린 일러스트, Inter·Roboto·Arial 폰트, 빈 공간을 채우려고 넣는 장식·아이콘·통계 숫자. 대신 단색 배경과 여백으로 구조를 잡고, 텍스트는 핵심만 남겨 줘. 이 규칙으로 방금 시안을 다시 만들어 줘.
design.md를 첨부한 요청과, 첨부하지 않고 "예쁘게 만들어 줘"라고만 한 요청을 각각 한 번씩 보내 결과를 비교해 보세요. 기준을 넣었을 때 결과가 어떻게 달라지는지 눈으로 확인합니다.
헷갈리기 쉬운 것
맥락 없이 "만들어 줘"라고만 하면 어디서 본 듯한 평균적인 화면이 나오므로, design.md를 먼저 첨부하고 피할 요소까지 함께 적습니다. 그리고 클로드 디자인은 Pro 이상 구독에서만 열리므로, 무료 계정에서는 화면이 나타나지 않습니다.
용어 풀이
전체 용어집 →- 클로드 디자인
- claude.ai/design 주소에서 열리는 Anthropic의 디자인 도구입니다. 프롬프트를 넣으면 슬라이드·웹 화면·카드뉴스 시안을 만들어 줍니다. Pro 이상 구독에서 열립니다.
- 디자인 시스템
- 색·폰트·버튼 같은 화면 규칙을 한데 묶어 둔 것입니다. 먼저 등록해 두면 클로드 디자인이 그 규칙에 맞춰 화면을 만듭니다.
- .fig 파일
- 피그마(Figma)에서 만든 디자인 파일 형식입니다. 피그마에서 File → Save Local Copy로 내려받습니다.
- 시안
- 최종본을 만들기 전에 방향을 보기 위해 빠르게 만든 초안 화면입니다.
2026-07-21 기준 · 출처 · Claude Design — Anthropic Labs (공식 발표)