Claude Design은 처음에 Anthropic 내부의 불편한 변화에 대응하기 위해 만들어진 실용적인 해결책이었습니다.
Claude Design은 처음에 Anthropic 내부의 불편한 변화에 대응하기 위해 만들어진 실용적인 해결책이었습니다.
2025년 가을, 제품 디자이너 Nate Parrott는 두 명의 엔지니어와 함께 Visual Studio Code 확장 프로그램인 Claude Code를 개발하는 유일한 디자이너였습니다. 그들의 목표는 Claude Code의 터미널 기반 기능을 그래픽 인터페이스에 통합하여 일반 사용자도 더 쉽게 이해하고 사용할 수 있도록 하는 것이었습니다.
팀은 9월 말에 베타 버전을 출시했습니다. 이후 11월에 Claude Opus 4.5가 출시되었고, Parrott 주변의 엔지니어들은 전례 없는 속도로 결과물을 제공하기 시작했습니다.
그러나 본인의 디자인 프로세스는 같은 속도로 빨라지지 않았습니다.
Parrott은 업무 흐름이 재조정되기를 기다리지 않고, 여가 시간을 활용해 속도를 따라잡을 수 있는 작은 도구를 만들기 시작했습니다. 이 부업은 결국 Claude Design으로 발전했습니다. Anthropic Labs의 제품으로, 출시 첫 주에 백만 명 이상의 사람들이 사용했습니다.
이 이야기는 단순히 AI 디자인 제품의 성공담이 아닙니다. AI가 어떻게 다른 팀보다 먼저 조직의 특정 부분을 가속화하여 새로운 병목 현상을 초래하는지, 그리고 이러한 불균형의 영향을 받은 사람들이 어떻게 같은 기술을 활용해 자신의 업무 방식을 재설계했는지 보여줍니다.
초기 팀은 매우 작았습니다. 엔지니어 두 명과 제품 디자이너 한 명이었습니다.
Opus 4.5 출시 전까지는 작업 속도가 거의 동기화되어 있었습니다. 엔지니어링과 디자인이 함께 기능을 추진할 수 있었고, 어느 한 기능이 계속해서 다른 기능보다 앞서지 않았습니다.
새 모델이 출시된 후, 이러한 균형은 깨졌습니다.
엔지니어들은 Claude Code를 사용하여 더 많은 작업을 구현, 테스트, 수정 및 제공할 수 있었습니다. 반면 Parrott는 여전히 이전과 비슷한 속도로 디자인을 진행했고, 이로 인해 디자인이 프로세스에서 더 느린 부분이 되었습니다.
이는 AI 적용의 광범위한 영향을 드러냈습니다.
AI가 모든 역할을 동일한 정도나 동시에 개선하는 것은 아닙니다. 한 회사는 소프트웨어 구현이 가속화되는 것을 볼 수 있지만, 제품 전략, 디자인 검토, 법무 승인, 콘텐츠, 테스트 또는 고객 지원은 그대로 유지될 수 있습니다.
결과가 항상 즉각적인 일자리 대체로 이어지는 것은 아닙니다. 더 자주, 첫 번째 영향은 상호 연결된 작업 흐름 간의 불일치입니다.
엔지니어링 속도가 향상되면 조직의 다른 부분은 새로운 질문에 답해야 합니다:
Parrott의 해결책은 프로세스에서 병목 현상이 발생하는 부분을 위한 도구를 만드는 것이었습니다.
Claude Code는 주로 텍스트 기반이었기 때문에, Parrott은 처음에 이를 텍스트 작업으로 간주했습니다.
디자인을 또 다른 텍스트 작업으로 본 것입니다.
그는 터미널 출력을 Claude에 복사하고, 인터페이스 스크린샷을 추가하고, 기능을 설명한 후 모델에게 디자인을 요청했습니다.
결과는 실망스러웠습니다.
문제는 Claude가 시각적 능력이나 코딩 능력이 부족해서가 아니었습니다. 이 요청은 모델에게 시각적 아이디어를 표현, 테스트 및 수정할 수 있는 강력한 매체를 제공하지 않았습니다.
채팅에서의 디자인 설명은 여전히 단순한 설명에 불과했습니다. 클릭하거나, 크기를 조정하거나, 애니메이션을 추가하거나, 실행 가능한 흐름으로 경험할 수 없었습니다.
Parrott은 이 부업 프로젝트를 약 한 달간 실험했습니다. 전환점은 그가 Claude에게 추상적으로 '디자인'을 생성하도록 요청하는 대신 HTML을 만들도록 요청한 순간이었습니다.
HTML은 일반적으로 웹사이트의 형식으로 간주되지만, Parrott은 이것이 광범위한 시각 및 상호작용 매체 역할을 할 수 있음을 인식했습니다.
웹 페이지에는 다음이 포함될 수 있습니다:
이로 인해 HTML은 대화와 시각 작업을 연결하는 유용한 다리가 되었습니다.
Parrott은 분할 화면 인터페이스를 만들었습니다:
사용자가 변경 사항을 설명하면 Claude가 기본 페이지를 업데이트하고 결과가 캔버스에 표시됩니다.
이는 정적 이미지를 생성하는 것보다 훨씬 유용했습니다. 출력물이 제품처럼 작동할 수 있기 때문입니다. 버튼이 작동하고, 전환 효과가 실행되며, 각 화면을 수동으로 그리고 연결할 필요 없이 프로토타입에 여러 상태를 포함할 수 있습니다.
기술적으로 사용 가능한 프로토타입도 여전히 획일적이거나 부조화스러워 보일 수 있습니다.
Parrott은 제품 디자인이 각 결정 뒤에 있는 제품과 브랜드를 이해하는 데 의존한다고 생각했습니다. HTML을 만드는 방법을 아는 모델이 Anthropic에 어떤 글꼴, 색상, 구성 요소, 간격 규칙 및 시각적 원칙이 속하는지 자동으로 알지는 못합니다.
따라서 그는 Anthropic의 시각적 시스템을 도구의 작업 맥락에 통합했습니다.
여기에는 다음이 포함됩니다:
이러한 변화로 생성된 작품이 무작위 AI 인터페이스처럼 보이지 않고, Anthropic 제품군의 일부처럼 보이게 되었습니다.
이 내부 실험은 나중에 Claude Design의 핵심 기능이 되었습니다.
온보딩 과정에서 Claude Design은 코드베이스, 디자인 참고 자료, 슬라이드, 문서, 스크린샷, 로고, 색상 팔레트 및 타이포그래피 사양과 같은 소스 코드를 분석할 수 있습니다. 그런 다음 색상, 타이포그래피, 구성 요소 등이 포함된 재사용 가능한 디자인 시스템을 생성합니다.
그리고 레이아웃 패턴도 포함됩니다.
팀 및 엔터프라이즈 조직의 경우 이 시스템을 전체 팀에 공개할 수 있습니다. 관리자는 표준 시스템을 승인하고 편집 권한을 제한하여 프로젝트가 회사 사양과 일관성을 유지하도록 할 수 있습니다.
Parrott은 HTML 워크플로우와 Anthropic 브랜드 맥락을 통합하여 소규모 내부 프로토타입을 만들었습니다.
제품 디자이너들은 이를 사용하여 인터랙티브 프로토타입을 만들기 시작했습니다.
전통적인 클릭 기반 워크플로우에서는 디자이너가 각 화면의 모든 상태를 그리고 수동으로 연결해야 했을 수 있습니다. 그러나 내부 Claude Design 프로토타입을 사용하면 디자이너는 소재를 제공하고, 의도된 동작을 설명한 후 Claude가 경험을 구현하도록 할 수 있었습니다.
각 결과물은 공유 가능한 링크를 생성했습니다.
이로 인해 프로토타입의 위상이 바뀌었습니다.
더 이상 디자인 앱의 비공개 파일이 아니라, 동료들이 열고, 클릭하고, 토론하고, 수정할 수 있는 공유 문서처럼 작동합니다. 그 방식은 공유 문서와 완전히 일치합니다.
결정적인 순간은 Anthropic 연구소의 오프사이트(off-site) 행사에서 찾아왔습니다.
Parrott은 참석자들이 아이디어 제안 세션을 위해 이 도구로 프레젠테이션 슬라이드를 만드는 모습을 목격했습니다. 때로는 회의가 진행 중이거나, 자신의 차례가 임박했을 때 급하게 완성하기도 했죠.
이러한 자발적인 사용은 연구소 팀이 이 사이드 프로젝트가 실제 요구를 해결하고 있음을 확신하게 만들었습니다. Claude Design은 전담 팀 지원을 받으며, 비공식적인 내부 실험에서 정식 제품으로 전환되었습니다.
Anthropic 연구소는 2026년 1월, Claude의 새로운 기능을 활용한 실험적 제품을專門적으로 인큐베이팅하기 위해 더욱 확장되었습니다.
이 팀은 독특한 제품 개발 모델을 위해 설계되었습니다:
Anthropic은 Claude Code가 이 경로의 초기 사례라고 지적합니다. 연구 프리뷰에서 시작하여 6개월 만에 Anthropic이 말하는 10억 달러 규모의 제품으로 성장했습니다.
Claude Design도 비슷한 발전 궤적을 따릅니다:
이러한 상향식(bottom-up) 경로는 매우 중요합니다. AI 네이티브 제품은 사전에 명확한 사양을 정의하기 어려운 경우가 많기 때문입니다. 모델 기능이 빠르게 반복되고, 사용자는 초기 팀이 예측하지 못한 워크플로를 발견할 수 있습니다.
이 사례에서는 사람들이 인터페이스 프로토타입뿐만 아니라 시각적 커뮤니케이션을 위해 지속적으로 사용함에 따라 제품의 범위가 계속 확장되었습니다.
Claude Design은 처음에 제품 디자인 도구로 포지셔닝되었습니다.
하지만 이 설명은 곧 너무 협소하다는 것이 드러났습니다.
팀은 이를 사용하여 다음을 만들기 시작했습니다:
Parrott은 이 도구를 프로덕션급 제품 디자인보다 한 단계 위에 있는 것으로 설명합니다. 핵심 역할은 팀이 개발에 착수하기 전에 아이디어를 탐색하고 전달하는 것을 돕는 것입니다. 이러한 구분은 더 명확한 역할 분담을 가져왔습니다:
| Claude Design | Claude Code |
|---|---|
| 초기 시각적 탐색 | 프로덕션 소프트웨어 개발 |
| 프로토타입 및 컨셉 테스트 | 구현 및 저장소 관리 |
| 프레젠테이션 및 시각적 커뮤니케이션 | 코드 수정, 테스트 및 배포 |
| 개발 전 합의 도출 | 방향 결정 후 개발 |
| 편집 가능한 캔버스 및 시각적 컨트롤 | IDE 및 터미널 기반 코딩 워크플로 |
이 두 도구는 함께 사용할 수 있지만, 서로를 대체하지는 않습니다.
Anthropic은 디자인과 코드 간의 양방향 워크플로를 추가했습니다. Claude Code에서 다음 명령을 사용합니다:
/design-sync
기존 디자인 시스템을 워크플로로 가져와 시각적 작업이 조직의 현재 컴포넌트를 기반으로 수행되도록 합니다. 다음 명령을 사용합니다:
/design
터미널에서 Claude Design 프로젝트를 생성, 편집 및 동기화할 수 있습니다. 팀은 어느 방향에서든 작업을 시작할 수 있습니다.
아이디어를 한 문장으로 입력하면 We0 AI가 쇼케이스 사이트, 페이지, CMS를 생성하고 출시 후 고객과 트래픽 확보를 돕습니다.
무료 등록을 위한 하나의 완전한 프로젝트 생성
하나의 완전한 생성 흐름을 시도하고 첫 번째 프로젝트 초안을 빠르게 보는 데 가장 적합합니다.
이것은 단순히 스크린샷을 개발자에게 넘겨주고 예상되는 동작을 그대로 구현해 달라고 요청하는 것보다 훨씬 신뢰할 수 있습니다. 인계 항목에는 평면 이미지가 아닌, 실행 중인 프로토타입과 관련 디자인 컨텍스트가 포함될 수 있습니다.
Claude Design의 초기 인기는 생성 능력만으로는 충분하지 않음을 보여주었습니다. 팀은 이 도구가 프로젝트 간 일관성을 유지하고 기존 브랜드 체계를 존중하기를 원했습니다. Anthropic은 사용자가 다음 소스에서 하나 이상의 시스템을 가져올 수 있도록 디자인 시스템 가져오기 워크플로를 재구성했습니다:
Claude는 이러한 컴포넌트를 사용하여 구축하고, 시스템에 대해 출력을 확인하며, 표시하기 전에 불일치를 수정합니다. 이는 이 도구를 일상 업무에서 훨씬 더 실용적으로 만듭니다. 한 번 생성된 AI 랜딩 페이지는 인상적일 수 있지만, 실제 기업 환경에서는 적용하기 어렵습니다. 시스템 인식 워크플로는 조직이 매번 처음부터 새로운 비주얼 언어를 만드는 대신, 기존 선택 사항에서 시작할 수 있게 해줍니다.
Claude Design의 베타 버전에는 직접 캔버스 컨트롤 기능이 포함되어 있습니다. 사용자는 다음을 수행할 수 있습니다:
이것이 중요한 이유는 프롬프트가 모든 조정에 최적의 인터페이스가 아니기 때문입니다.
사용자는 여러 문장을 작성하지 않고도 제목을 왼쪽으로 약간 이동하거나 카드 너비를 줄일 수 있습니다. 작은 시각적 수정은 직접 조작을 통해 훨씬 빠르게 완료되는 경우가 많습니다.
Parrott은 광범위한 탐색과 구조적 변경에는 Claude를 사용하고, 최종 단계의 작은 조정은 수동으로 처리할 것을 권장합니다.
직접 편집은 또한 눈으로 판단하기 더 쉬운 변경 사항에 모델 토큰을 소모하는 것을 방지합니다.
Claude Design은 작업물을 다음 형식으로 내보낼 수 있습니다:
Anthropic은 또한 다른 크리에이티브 및 개발 도구로 작업물을 보낼 수 있는 커넥터를 제공합니다.
공식 커넥터 목록에는 Adobe, Base44, Canva, Gamma, Lovable, Miro, Replit, Vercel 및 Wix가 포함되며, 앞으로 더 많은 대상 플랫폼이 추가될 예정입니다.
목표는 모든 전문 도구를 대체하는 것이 아닙니다.
프레젠테이션은 Claude Design에서 시작하여 Gamma 또는 Canva에서 계속할 수 있습니다. 컨셉은 Miro로 이동하여 협업할 수 있습니다. 프로토타입은 Replit, Vercel, Lovable 또는 Wix로 이동하여 추가 구축 및 배포를 진행할 수 있습니다.
Claude Design은 초기 시각적 작업 공간 역할을 하여, 아이디어가 최소한의 수동 재구축으로 다음 적절한 도구로 이동할 수 있도록 돕습니다.
Claude Design에는 명확한 한계가 있습니다.
Anthropic은 Claude Design에 전용 이미지 모델이 없다고 밝혔습니다.
따라서 최종 로고를 생성하거나 처음부터 독창적인 이미지 자료를 만드는 데는 적합하지 않습니다.
사용자는 기존 로고, 제품 이미지, 일러스트레이션, 사진 및 브랜드 자산을 가져와야 합니다.
Claude는 더 큰 시각적 구성 내에서 이러한 자산을 배치하고 사용할 수 있습니다.
이것은 프로덕션급 소프트웨어 플랫폼이 아닙니다.
Claude Design은 인터랙티브 프로토타입과 코드 기반의 시각적 작품을 만들 수 있지만, Anthropic은 프로덕션급 소프트웨어 개발에는 Claude Code를 사용할 것을 권장합니다.
프로토타입은 의도된 경험을 전달할 수 있지만, 보안, 접근성, 테스트, 유지보수성, 성능, 백엔드 안정성 또는 프로덕션 배포 요구 사항을 반드시 충족하는 것은 아닙니다.
Claude는 수많은 옵션을 빠르게 생성할 수 있습니다.
하지만 어떤 방향이 적합한지, 어떤 세부 사항이 평범해 보이는지, 작품이 올바른 메시지를 전달하는지, 어떤 내용을 삭제해야 하는지, 그리고 프로토타입이 프로덕션에 영향을 줄 준비가 되었는지는 사람이 결정해야 합니다.
디자이너의 역할은 더 이상 모든 변형을 수동으로 제작하는 것이 아니라, 방향 설정, 시스템 구축, 품질 판단, 팀 조율로 전환됩니다.
명확한 브리핑은 일반적으로 모호한 요청을 반복적으로 수정하는 것보다 더 나은 결과를 가져옵니다.
대상, 목표, 콘텐츠, 기대하는 느낌을 정의하세요.
Claude에게 구축을 요청하기 전에 제약 조건과 출력 형식을 명확히 하세요.
방향성이 부족하면 AI 시스템이 흔한 미적 스타일로 회귀할 수 있습니다.
서체, 색상, 참고 사례, 무드보드, 작품이 피해야 하거나 근접해야 하는 예시 대상을 구체적으로 지정하세요.
추상적인 규범만 제공하지 말고 실제 브랜드 예시를 업로드하세요.
완성된 랜딩 페이지, 프레젠테이션 또는 인터페이스 하나가 색상 목록만으로 전달하는 것보다 브랜드의 시각적 특성을 훨씬 명확하게 보여줍니다.
여러 옵션을 요청하고 비교하세요.
생성 속도를 높이는 목적은 첫 번째 답변을 수락하기 위함이 아니라, 최종 결정을 내리기 전에 더 많은 가능성을 탐색하기 위함입니다.
손으로 그린 레이아웃은 긴 텍스트 설명보다 공간적 관계를 더 효율적으로 전달할 수 있습니다.
핵심 문제가 구조나 흐름일 경우, 낮은 충실도의 와이어프레임부터 시작하세요.
이렇게 하면 모델이 장식적인 스타일이 아닌 계층 구조와 상호작용에 집중할 수 있습니다.
직접 편집을 통해 최종 정렬, 간격, 크기 미세 조정 등의 시각적 조정을 완료하세요.
기존 코드베이스, 디자인 시스템, 컴포넌트 및 인터페이스에 접근하면 Claude가 실제 제품에 부합하는 결과물을 생성할 수 있습니다.
Claude Design은 현재 베타 버전으로, 다음 요금제에서 사용 가능합니다.
해당 구독 플랜을 통해 사용할 수 있으며, 기능 사용 시 계정의 Claude 사용량이 차감됩니다.
기업 조직의 경우 Claude Design이 기본적으로 비활성화되어 있으며, 관리자가 조직 설정에서 활성화해야 합니다.
Anthropic에 따르면, 조직 범위 공유를 통해 디자인을 비공개로 유지하면서 링크로 동료가 볼 수 있도록 하거나 공동 편집을 위해 개방할 수 있습니다.
제품 가용성 및 요금제 조건은 변경될 수 있으므로, 팀은 작업 흐름을 표준화하기 전에 현재 Claude Design 페이지와 도움말 문서를 확인해야 합니다.
Claude Design은 Anthropic Labs에서 출시한 제품으로, 대화 및 직접 편집을 통해 시각적 작품을 생성하고 개선할 수 있습니다. 프로토타입, 프레젠테이션, 랜딩 페이지, 원페이지 작품, 애니메이션, 마케팅 자료 및 기타 HTML 기반의 인터랙티브 결과물을 생성할 수 있습니다.
초기 베타 프로토타입은 Anthropic의 제품 디자이너 Nate Parrott가 개발했습니다. Claude Code가 엔지니어링 팀의 전달 속도를 기존 디자인 워크플로우보다 훨씬 높인 후, 그는 개인 사이드 프로젝트로 이 도구를 만들었습니다.
Anthropic에 따르면 Claude Design은 출시 첫 주에 백만 명 이상이 사용했습니다. 이 데이터는 2026년 6월 Anthropic의 제품 업데이트에서 발표되었습니다.
Claude는 시각적 작품을 디자인을 설명하거나 정적 이미지를 출력하는 대신 인터랙티브 웹 콘텐츠로 생성합니다. HTML은 레이아웃, 컨트롤, 애니메이션, 프로토타입, 슬라이드 및 기타 시각적 경험을 위한 유연한 창작 캔버스를 제공합니다.
네.
코드베이스, 컴포넌트 라이브러리, 프레젠테이션, 문서, 스크린샷, 로고, 색상, 서체 및 기타 자료를 분석하여 재사용 가능한 디자인 시스템을 생성할 수 있습니다. 팀 및 엔터프라이즈 사용자는 프로젝트에서 사용할 공유 시스템을 게시할 수 있습니다.
Anthropic은 Claude Design에 이미지 생성 모델이 포함되어 있지 않으므로 로고 생성에 적합하지 않다고 밝혔습니다. 기존 로고 및 이미지 자료는 업로드하여 디자인에 사용해야 합니다.
Claude Design은 초기 구상, 프로토타이핑, 시각적 커뮤니케이션 및 팀 정렬에 적합합니다. Claude Code는 프로덕션급 소프트웨어의 구현 및 유지보수를 위한 권장 도구입니다.
Claude Design은 현재 퍼블릭 베타 형태로 Pro, Max, 팀 및 엔터프라이즈 사용자에게 제공됩니다. 엔터프라이즈 관리자가 먼저 활성화해야 조직 구성원이 사용할 수 있습니다.
Nate Parrott의 Claude Design 회고: 제품이 어떻게 탄생했고 그가 어떻게 사용하는지에 대한 창작자의 1인칭 이야기.
Claude Design 소개: 기능 개요, 요금제 가용성 및 내보내기 옵션을 포함한 Anthropic의 공식 출시 발표.
Claude Design 백만 사용자 업데이트: 첫 주 채택률, 디자인 시스템, Claude Code 동기화, 편집 및 커넥터에 대한 Anthropic의 업데이트.
Claude Design 시스템 설정: 브랜드 자료 가져오기 및 재사용 가능한 팀 디자인 시스템 게시에 대한 공식 안내.
[Anthropic Labs 소개](https://www.anthropic.
Anthropic Labs 소개: Anthropic이 Claude Design 뒤에 있는 실험적 제품 인큐베이팅 팀에 대해 설명한 글.
VS Code에서의 Claude Code: Parrott이 초기 디자인을 도운 그래픽 기반 Claude Code 인터페이스 공식 문서.
Claude Opus 4.5 소개: 2025년 11월에 출시된 엔지니어링 가속 관련 모델 버전.
이 내용은 Parrott의 이야기에 묘사되어 있습니다.
Claude Design의 탄생은 한 명의 디자이너가 두 명의 엔지니어 속도를 따라잡아야 했던 필요에서 비롯되었습니다. Claude Opus 4.5 출시 이후 이 엔지니어들의 작업 생산성이 크게 향상되었기 때문입니다.
Nate Parrott의 돌파구는 AI에게 디자인을 추상적인 답변으로 생성하도록 요구하는 대신, Claude에게 회사의 브랜드 체계가 내장된 HTML 캔버스를 제공하고, 결과물을 인터랙티브하고 공유하기 쉬운 형태로 디자인한 데 있었습니다.
내부에서 이 도구를 사용하기 시작하면서, 원래는 부업 프로젝트였던 것이 Anthropic Labs의 정식 제품으로 발전했습니다. Claude Design은 출시 첫 주에 사용자 수 100만 명을 돌파했으며, 점차 프로토타이핑, 프레젠테이션, 랜딩 페이지, 모션 그래픽, 원페이지 브리핑 및 기타 시각적 커뮤니케이션 콘텐츠를 지원하는 창작 공간으로 확장되었습니다.
이 제품은 프로덕션 레벨의 코딩, 전문 이미지 생성 또는 인간의 디자인 판단을 대체하기 위한 것이 아닙니다. 그 가치는 더 초기 단계에서 발휘됩니다: 더 많은 방향 탐색, 아이디어 구체화, 팀 합의 촉진, 최종 실행을 담당하는 도구와 사람에게 더 성숙한 개념을 전달하는 것.
AI가 구현 과정을 점점 더 빠르게 만들면서, 디자이너의 가장 가치 있는 작업은 상류로 이동하고 있습니다—하나하나의 화면을 직접 그리는 것에서 올바른 방향을 선택하고, 시스템 체계를 정의하며, 팀이 '무엇을 구축해야 하는지'에 대해 합의하도록 돕는 쪽으로.
한 문장에서 시작해 몇 분 안에 완전한 웹사이트를 받아보세요.
