원래 kalyna.pro에서 게시됨

Anthropic은 2026년 4월에 연구 프리뷰로 Claude Design을 출시했으며, 이후 2026년 6월에 주요 개편을 거쳐 초기 불만 사항 대부분을 해결했습니다. 코드를 설명하는 대신, 랜딩 페이지, 프로토타입, 슬라이드 덱과 같은 시각적 결과물을 설명하면 Claude가 정적인 목업이 아닌 실제 실행 가능한 HTML, CSS, JavaScript를 생성합니다.

Claude Design의 실제 기능

Claude Design은 Claude.ai에 내장되어 있으며 Opus 4.8로 구동됩니다. 사용자가 원하는 것을 자연어로 설명하면 Claude가 즉시 실행할 수 있는 프로덕션 레디 코드(production-ready code)를 생성합니다. 캔버스도, 드래그 앤 드롭도, '디자인을 코드로 변환'하는 단계도 필요 없습니다.

• 실제 결과물 제공 — Figma 스타일 목업이 아닌 HTML/CSS/JS
• 대화형 반복 수정(Conversational iteration) — 변경 사항을 설명하면 제자리에 적용됨
• 추가적인 비기술적 편집을 위한 Canva 내보내기 기능
• Opus 4.8 기반으로, Claude Code와 동일한 모델 계열 사용

디자인 시스템 가져오기 (2026년 6월 업데이트)

4월 버전은 브랜드 글꼴(fonts), 간격(spacing), 색상 등을 무시하는 경우가 많았습니다. 6월 업데이트에서는 디자인 시스템 가져오기(design system import) 기능이 추가되었습니다. Claude Design에 GitHub 리포지토리, 디자인 파일 또는 원본 컴포넌트 코드를 지정하면, 새로운 것을 창조하기보다 사용자가 승인한 컴포넌트를 사용하여 빌드합니다. 레이아웃, 타이포그래피, 버튼 스타일 컨트롤도 순수 프롬프팅을 넘어 확장되었습니다.

토큰 소모 문제 (해결됨)

초기 사용자들은 반복적인 편집(iterative edits) 시 많은 토큰이 사용되는 점을 지적했습니다. 작은 시각적 수정만으로도 큰 재생성(regenerations)이 발생했기 때문입니다. 6월 업데이트는 이를 직접적으로 겨냥하여, 사소한 변경 사항에 대해 더 작고 효율적인 diff와 향상된 구조 준수성을 제공합니다.

크리에이티브 도구 연결 기능

Claude는 이제 Adobe Creative Cloud, Affinity by Canva, Autodesk Fusion, SketchUp, Blender, Ableton, Resolume Arena, Wire 등에 연결되어 형식 변환(translating formats), 에셋 동기화(syncing assets)를 수행하며, (Claude Code를 통해) 사용자 정의 스크립트와 생성 시스템을 문서화된 코드로 작성합니다.

접근성

Claude Design vs v0 by Vercel

v0는 React + Tailwind + shadcn/ui에 특화된(opinionated) 방식인 반면, Claude Design은 순수 HTML/CSS/JS를 출력합니다. 이는 더 높은 이식성(portable)을 가지며, 스캐폴딩(scaffolding)이 적습니다. Claude Design의 디자인 시스템(design-system) 가져오기 기능은 v0의 컴포넌트 라이브러리(component library) 방식보다 브랜드 충실도(brand-fidelity)를 높이는 더 직접적인 워크플로우를 제공하며, 웹 UI를 넘어 슬라이드 및 크리에이티브 도구 커넥터(creative-tool connectors)로 확장됩니다.

솔직한 평가

빠른 프로토타입(prototype), 랜딩 페이지, 그리고 가져올 수 있는 기존 디자인 시스템을 보유한 팀에게 유용합니다. 복잡한 상호작용(interaction), 접근성(accessibility), 그리고 픽셀 단위의 완벽한 브랜드 정렬(pixel-perfect brand alignment)을 위해서는 여전히 인간의 검토가 필요합니다. Claude Code의 출력물처럼 취급하세요. 최종 배포용이 아닌, 강력한 초안(first pass)입니다.

요약

• 목업(mockup)이 아닌 실제 HTML/CSS/JS 출력
• Claude.ai 내의 Pro/Max/Team/Enterprise 플랜에서만 사용 가능
• 6월 업데이트: 디자인 시스템(design-system) 가져오기 + 편집 시 토큰 소모(token-burning) 문제 수정
• Adobe, Blender, SketchUp, Ableton으로 확장되는 커넥터(connectors)
• 강력한 초안 작성 도구 — 프로덕션(production) 투입 전 인간의 검토와 병행할 것