공식 문서에 적힌 /design의 정의

Claude Code 공식 문서의 주간 소식(Week 34, 2026년 8월 17일~21일)은 /design을 Claude Design의 아트보드 작업 방식을 CLI와 Claude Code 데스크톱 앱으로 가져온 기능으로 설명합니다. 기반은 아티팩트입니다. 요청을 담아 실행하면 Claude가 편집 가능한 아트보드 캔버스를 게시하고, 그 링크를 터미널에 출력합니다. 브라우저로 열어 아트보드를 하나 고르고, 어떤 안을 구현할지 다시 터미널에 지시하는 흐름입니다. 현재 단계는 리서치 프리뷰이고, 적용 요금제는 Pro·Max·Team·Enterprise, 필요한 버전은 v2.1.233 이상입니다.

링크가 안 나오고 파일만 생겼다면

/design은 아티팩트 위에 올라가 있어서 아티팩트가 켜지는 조건을 그대로 물려받습니다. 요금제는 Pro·Max·Team·Enterprise, 버전은 아티팩트 자체가 CLI 2.1.183 이상 또는 데스크톱 앱 1.13576.0 이상입니다. 로그인 방식도 조건입니다. /login으로 claude.ai 계정에 로그인한 세션이어야 하고, API 키나 게이트웨이 토큰, 클라우드 자격증명으로 돌리는 세션은 게시가 되지 않습니다. 모델 제공처도 Anthropic API만 해당해서 Amazon Bedrock, Google Cloud Agent Platform, Microsoft Foundry에서는 쓸 수 없습니다. 조건 하나가 어긋나면 Claude는 게시 대신 로컬 HTML 파일을 쓰거나 게시할 수 없다고 답합니다. 링크 없이 파일만 생겼다면 고장이 아니라 조건 불일치로 보시면 됩니다.

시안이 게시된다는 말의 뜻

여기가 기존 디자인 도구와 갈리는 지점입니다. 아티팩트는 claude.ai의 비공개 주소에 올라가는 살아 있는 페이지입니다. 브라우저로 열어두면 세션이 진행되는 동안 그 자리에서 계속 갱신됩니다. 다시 게시할 때마다 같은 주소에 버전이 쌓이고, 페이지 헤더의 공유 설정에서 보는 사람에게 어떤 버전을 보여줄지 고를 수 있습니다. 한 가지는 분명히 해둘 필요가 있습니다. 새로 만든 아티팩트는 처음에는 나에게만 보입니다. 공유는 내가 명시적으로 하는 동작이고, 시안이 저절로 외부에 풀리지는 않습니다.

요금제가 공유 방식을 가릅니다

문제는 공유하기로 마음먹은 다음입니다. 공식 문서는 공유 범위를 요금제로 나눕니다. Team·Enterprise는 조직 안의 특정 인원이나 조직 전체에 권한을 줄 수 있고, 보는 사람은 조직 구성원으로 claude.ai에 로그인해서 봅니다. 반면 Pro·Max에서는 공개 링크가 유일한 공유 방법입니다. 이 링크는 claude.ai 로그인 없이 인터넷에서 누구나 열 수 있습니다. 1인 사업자나 소규모 제작사는 대부분 Pro나 Max를 씁니다. 클라이언트에게 시안 링크를 보내는 순간, 그 시안은 링크를 아는 누구나 볼 수 있는 상태가 된다는 뜻입니다.

공개 공유에 따라오는 세 가지

첫째, 로그인하지 않았거나 조직 밖에서 공개 링크를 연 사람에게는 작성자 이름 대신 "Content is user-generated and unverified."라는 문구가 표시됩니다. 둘째, 댓글 기능은 조직 내부 공유 아티팩트에서만 동작합니다. 공개 공유한 페이지에는 댓글을 달 수 없어서, 클라이언트 피드백을 시안 페이지 위에서 받는 그림은 Pro·Max에서는 성립하지 않습니다. 셋째, 보는 사람을 편집자로 올리는 기능도 Team·Enterprise 전용입니다. 정리하면 미공개로 두고 혼자 보면서 작업하는 용도는 요금제와 무관하게 좋고, 외부 공유는 요금제에 따라 성격이 완전히 달라집니다. 미공개 상태로 두고 화면 녹화나 캡처로 전달하는 방식이 현실적인 대안이 됩니다.

시안을 브랜드 규칙에 맞추는 세팅

Claude는 아티팩트를 만들 때 내장 디자인 스킬을 적용하는데, 그 전에 프로젝트 안에 이미 있는 디자인 시스템을 먼저 찾습니다. 공식 문서가 안내하는 방식은 색·타이포·간격 값을 프로젝트의 CLAUDE.md나 테마 파일에 적어두는 것입니다. 문서가 든 예시는 "Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc / Typography: Inter for body, JetBrains Mono for code / Spacing: 8px scale, 6px border radius" 같은 형식입니다. 우선순위는 내 프롬프트, 프로젝트 디자인 시스템, Claude 자체 판단 순입니다. 브랜드 컬러와 폰트, 간격 규칙이 정해져 있는 제작사라면 이 파일을 한 번 채워두는 편이 매번 프롬프트에 색상 코드를 적는 것보다 낫습니다.

한글 브랜드 서체는 한 단계가 더 붙습니다

아티팩트 페이지는 엄격한 보안 정책 아래에서 동작합니다. 공식 문서 기준으로 페이지가 외부에서 불러올 수 있는 폰트 소스는 Google Fonts 하나뿐이고, 그 밖의 서체는 @font-face data URI 방식으로 파일 안에 심어야 합니다. 국내 제작 현장에서 표준처럼 쓰는 Pretendard는 Google Fonts에서 제공되지 않습니다. 2026년 8월 25일 기준으로 Google Fonts CSS API에 Pretendard를 요청하면 오류가 돌아오고, 같은 방식으로 요청한 Inter는 정상 응답합니다. 시안을 Pretendard로 확인하고 싶다면 서체를 페이지 안에 심어야 하고, 그만큼 페이지 용량이 올라갑니다. 렌더된 페이지는 16MiB 이하여야 한다는 제한이 있으니 이 부분도 함께 계산하는 편이 좋습니다.

기존 디자인 도구를 대체하지 않는 지점

아티팩트는 한 장짜리 자체 완결 페이지입니다. 공식 문서가 명시한 제약을 그대로 옮기면 백엔드가 없어 폼에 입력한 값을 저장하지 못하고, 여러 경로를 제공하지 못해 상대 경로 링크가 동작하지 않으며, 게시 파일은 .html·.htm·.md만 되고, 렌더된 페이지 크기는 16MiB 이하여야 합니다. 그래서 /design이 잘 맞는 자리는 여러 안을 나란히 놓고 방향을 정하는 초반 구간입니다. 실제로 공식 문서도 아티팩트의 대표 활용으로 여러 대안을 한 페이지에 나열해 비교하는 방식을 듭니다. 컴포넌트 단위 관리, 디자인 토큰 운영, 개발 핸드오프까지는 기존 도구의 몫이 그대로 남습니다.

되는 것은 터미널에서 한 줄로 편집 가능한 아트보드 캔버스를 만들고, 고른 안을 그대로 구현시키는 흐름입니다. 필요한 것은 v2.1.233 이상, Pro·Max·Team·Enterprise 요금제, /login으로 로그인한 claude.ai 계정 세션, 그리고 Anthropic API입니다. 주의할 것은 Pro·Max에서 공개 링크가 유일한 공유 수단이고 댓글 기능이 동작하지 않는다는 점입니다. 미리 해둘 것은 CLAUDE.md에 색·폰트·간격 값을 적어두는 일과, 한글 서체 인라인 방식 및 16MiB 제한을 확인하는 일입니다. 시안을 만드는 속도보다 그 시안이 어디에 어떤 상태로 놓이는지가 실무에서는 더 중요합니다.

누끼토끼는 아임웹·식스샵·카페24 제작을 하면서 AI 도구를 어느 구간에 넣을지부터 정리해 드립니다. 시안 단계와 구현 단계의 경계를 다루는 강의와 칼럼도 함께 운영하고 있습니다.