Claude Design이 무엇인가
Claude Design은 Anthropic이 공개한 'Anthropic Labs'의 리서치 프리뷰 제품입니다. 우리가 아는 Claude 채팅이 '글로 답하는 AI'라면, Claude Design은 '보이는 결과물을 만드는 AI'입니다. 프롬프트(요청 문장)만 주면 웹사이트 시안, 클릭되는 프로토타입, 발표용 슬라이드, 광고 레이아웃, 이력서나 계약서 같은 문서를 화면 위에 바로 그려 줍니다.
구동 모델은 Claude의 프런티어(최상위) 모델입니다. 이 글이 참고한 튜토리얼 시점에는 Opus 4.8이 돌아갑니다. 별도의 디자인 프로그램을 배우지 않아도, 평소 Claude에게 말하듯 요청하면 결과가 나온다는 게 핵심입니다.
중요한 구분이 하나 있습니다. Claude Design은 '디자인과 시안'을 만드는 도구입니다. 그 시안을 실제로 작동하는 코드로 바꾸고 인터넷에 올리는(배포) 일은 뒤에서 다룰 Claude Code가 이어받습니다. 둘은 짝을 이루지만 같은 것이 아닙니다.
어디서 어떻게 시작하나
먼저 Claude 계정과 유료 구독이 필요합니다. Claude Design은 현재 리서치 프리뷰라 Pro·Max·Team·Enterprise 구독자에게 열려 있습니다. claude.ai에 접속해 로그인(구글 계정 등으로 가입 가능)하는 것이 출발점입니다.
접근 경로는 둘입니다. 하나는 웹 브라우저입니다. claude.ai에 들어가 왼쪽 위 사이드바를 열면 'Claude Design' 항목이 보이고, 여기서 바로 열 수 있습니다.
다른 하나는 Claude 데스크톱 앱입니다. 화면을 넓게 쓸 수 있어 튜토리얼 제작자가 권하는 방식이기도 합니다. 왼쪽 아래 다운로드 버튼에서 자기 운영체제(맥OS·윈도우)용 앱을 받아 설치하고 로그인하면, 왼쪽 아래에 'Design' 버튼이 생깁니다. 누르면 별도 창으로 Claude Design 작업 공간이 열립니다.
처음 열면 예시 디자인 몇 개가 보이거나 빈 화면이 나올 수 있습니다. 사람마다 다르니 당황하지 말고, 다음 단계인 '디자인 시스템 만들기'부터 시작하면 됩니다.
왜 '디자인 시스템'을 먼저 만드나
Claude Design에서 무엇을 만들든 첫 단추는 '디자인 시스템'입니다. 디자인 시스템은 한 브랜드의 시각 규칙을 한곳에 모은 묶음입니다. 어떤 폰트를 쓰고, 어떤 색을 쓰고, 로고는 어떻게 생겼고, 버튼·카드 같은 요소는 어떤 모양인지를 정해 둔 '브랜드 설명서'라고 보면 됩니다.
이걸 먼저 만드는 이유는 일관성입니다. 디자인 시스템을 정해 두면 이후 만드는 웹사이트·슬라이드·광고가 전부 같은 폰트와 색으로 나옵니다. 매번 브랜드를 다시 설명할 필요가 없어집니다.
만드는 방법은 여러 가지입니다. 이미 코드나 디자인 자산이 있다면 GitHub 저장소 주소를 붙이거나, 내 컴퓨터의 코드 폴더를 지정하거나, Figma 파일을 연결해 그 스타일을 읽게 할 수 있습니다. 아무것도 없다면 회사 이름과 한두 문장 소개만 주고, 폰트·색은 Claude에게 물어 후보를 받으면 됩니다. 실제로 Claude 채팅에 어울리는 구글 폰트 조합과 색 팔레트를 미리보기와 함께 제안해 달라고 하면 골라 쓸 안을 줍니다.
로고가 없다면 로고는 별도의 이미지 생성 도구로 먼저 만들어 넣습니다. 튜토리얼에서는 Anthropic이 아닌 외부(서드파티) 도구로 확대해도 깨지지 않는 SVG 로고를 만들어 끌어다 넣었습니다. 이 부분은 Claude Design의 기능이 아니라 제작자가 고른 선택이라는 점만 기억하면 됩니다. 로고 이미지는 어떤 도구로 만들든 상관없습니다.
정보를 다 넣고 생성을 누르면 몇 분 뒤 브랜드 가이드가 완성됩니다. 로고 변형, 색 팔레트, 버튼·카드·폼 같은 요소가 정리된, 언제든 수정 가능한 '살아있는 문서'가 나옵니다. 마음에 들면 게시(published) 상태로 바꾸고, 원하면 기본 디자인 시스템으로 지정해 이후 모든 작업에 자동 적용할 수 있습니다.
이 회사에 어울리는 구글 폰트 조합을 4가지 제안해줘.
헤딩용·본문용 폰트를 짝지어, 흔하지 않으면서 과하지 않게.
각 조합의 미리보기도 함께 보여줘.
(폰트를 고른 뒤)
신뢰감을 주면서 동네 소상공인 느낌을 살리는 색 팔레트를 4가지 제안해줘.웹사이트 한 페이지를 실제로 만들어 보면
디자인 시스템을 만들었으면 'New design(새 디자인)'을 눌러 방금 만든 디자인 시스템을 고르고, 무엇을 만들지 문장으로 설명합니다. 예를 들어 상단에 무료 견적 폼이 있는 랜딩 페이지, 첫 화면(히어로) 영역, 서비스 섹션, 지역 섹션, 하단에 같은 폼 한 번 더, 상단 내비게이션까지 요청하는 식입니다.
Claude Design은 프롬프트를 받으면 바로 만들지 않고 먼저 되묻습니다. '서비스 항목은 무엇으로 할까요?', '전화번호는?', '강조할 신뢰 지표는?', '견적 폼에 넣을 항목은?' 같은 질문에 답하면 그 답을 반영해 사이트를 짓기 시작합니다. 이렇게 먼저 확인하는 과정 덕분에 헛다리를 덜 짚습니다.
만드는 동안 'tweaks(조정)' 패널이 뜹니다. 여기서 코드를 몰라도 폼 위치(오른쪽/아래), 폼 스타일(인라인/카드), 헤드라인 문구, 전체 톤(은은하게/균형/과감하게)을 슬라이더와 버튼으로 즉석에서 바꿔 볼 수 있습니다. 화면 오른쪽 위의 breakpoint(데스크톱·태블릿·모바일) 전환으로 기기별 모습도 미리 확인합니다.
이미지가 들어갈 자리는 빗금 무늬 자리표시자로 비워 두고, 각 자리에 어떤 이미지를 넣으면 좋을지 프롬프트와 필요한 비율(예: 16:9)까지 Claude가 함께 알려 줍니다. 그 프롬프트로 이미지를 만들어(여기서도 이미지 생성은 별도 도구를 씁니다) 번호에 맞춰 끌어다 넣으면 Claude Design이 자리에 맞게 배치합니다.
우리 디자인 시스템을 써서 랜딩 페이지 한 장을 만들어줘.
- 첫 화면: 오른쪽에 무료 견적 폼 + 왼쪽에 회사 소개(지역 밀착·신뢰)
- 서비스 섹션 / 지역 섹션 / 맨 아래 견적 폼 한 번 더
- 상단 내비게이션(서비스는 드롭다운)
이미지가 들어갈 자리는 비워 두고, 각 자리에 넣을 이미지 프롬프트와 필요한 비율을 같이 알려줘.웹사이트만이 아니다 — 광고·슬라이드·문서
Claude Design의 결과물은 웹사이트만이 아닙니다. 시작할 때 고르는 템플릿에 따라 종류가 달라집니다.
animation(애니메이션) 템플릿을 고르면 광고 스튜디오가 나옵니다. 인스타그램·페이스북 등 각 광고 규격에 맞춰 텍스트 오버레이, 인트로·아웃로 모션, 색·문구를 조정하는 대시보드를 만들어 줍니다. 다만 광고에 들어갈 배경 영상·이미지 자체는 Claude Design이 만드는 게 아니라 별도 생성 도구로 만들어 넣어야 합니다. Claude Design은 그 소재를 얹을 '광고 틀과 움직임'을 짜 줍니다.
slides(슬라이드) 템플릿은 발표 자료를 만듭니다. 예를 들어 제품 색상·사양을 담은 제안용 덱을 이미지 자리표시자와 함께 짜 줍니다. 완성본은 PPTX(파워포인트)로 내보낼 수 있어, 태블릿에 담아 고객 앞에서 바로 보여 줄 수 있습니다.
document(문서) 템플릿은 계약서·제안서 같은 문서를 브랜드 톤으로 만듭니다. 고객 이름·서비스 항목처럼 바꿔야 할 부분을 자리표시자로 남겨 두어 매번 값만 바꿔 쓰기 좋게 나옵니다. (법적 효력이 필요한 문서는 전문가 검토가 당연히 필요합니다.)
정리하면, 하나의 디자인 시스템 위에서 웹·광고·발표·문서까지 같은 브랜드로 뽑아내는 것이 Claude Design의 그림입니다.
완성한 시안을 Claude Code로 넘겨 코드·배포로
여기까지는 '보이는 시안'입니다. 이걸 실제로 인터넷에 올려 작동하게 하려면 Claude Code가 필요합니다. Claude Code는 명령으로 코드를 짜고 실행하는 AI 코딩 도구입니다.
넘기는 방법은 간단합니다. Claude Design에서 만든 결과물을 'Share(공유) → Send to Claude Code(클로드 코드로 보내기)'로 넘기면 붙여 넣을 프롬프트가 나옵니다. 이걸 Claude Code에 붙이면 됩니다. 디자인 시스템도 같은 방식으로 넘길 수 있고, Claude Code 안에서 /design-sync 명령으로 디자인 시스템을 주고받을 수도 있습니다.
그다음부터는 Claude Code의 몫입니다. 넘겨받은 시안들을 하나의 코드 저장소로 정리하고, 웹사이트는 실제로 배포하며, 문서·슬라이드·광고를 만드는 반복 작업은 '스킬'로 묶어 재사용하게 만들 수 있습니다. 튜토리얼에서는 이렇게 만든 사이트를 배포 서비스에 올려 실제 주소로 띄우고, 관리자만 로그인해 접수된 견적을 확인하는 데까지 갔습니다. 이 배포·조립 부분은 Claude Design이 아니라 Claude Code가 한 일이라는 점을 기억하세요.
핵심 가치는 이것입니다. Claude Design은 빠른 프로토타입(시제품)을, Claude Code는 그걸 유지·확장 가능한 진짜 코드 자산으로 바꿔 줍니다. 시안이 그림으로 끝나지 않고 코드로 남습니다.
이게 왜 중요한가 — SH Consulting 관점
예전에는 브랜드 하나를 세우려면 디자이너, 웹 개발자, 영상 편집자, 문서 담당이 각자 붙었습니다. Claude Design은 이 역할들을 한 사람의 대화 흐름 안으로 끌어옵니다. 디자인 시스템 한 벌만 정해 두면 웹·광고·발표·문서가 같은 손끝에서 나옵니다.
특히 소상공인과 1인 사업자에게 의미가 큽니다. 에이전시에 맡길 예산이 없어 미뤄 두던 브랜드 정비를, 이제 대표 한 사람이 주말에 초안까지 끝낼 수 있습니다. 완벽한 최종본이 아니라 '고칠 수 있는 시작점'이 몇 시간 만에 손에 들어온다는 것이 진짜 변화입니다.
다만 도구를 켠다고 끝은 아닙니다. 무엇을 만들지 판단하고, 나온 결과를 브랜드에 맞게 다듬고, 코드 자산으로 남길지 결정하는 일은 여전히 사람 몫입니다. SH Consulting이 보는 지점은 여기입니다. 질문을 '어떤 디자인 도구를 살까'에서 '우리 브랜드 제작 과정을 어떻게 다시 짤까'로 바꾸는 것. 도구는 이미 충분히 강하고, 승부는 그 도구를 우리 업무 흐름 어디에 꽂느냐에서 갈립니다.