Claude Design은 Anthropic Labs에서 제공하는 도구로, Claude와의 대화를 통해 디자인, 인터랙티브 프로토타입, 프레젠테이션 등을 만들 수 있습니다. 이 가이드는 첫 번째 프로젝트 생성, 디자인 반복, 도구 활용 방법을 안내합니다.
Claude Design은 Anthropic Labs에서 제공하며, 현재 Pro, Max, Team, Enterprise 플랜에서 연구 미리보기로 이용 가능합니다. Enterprise 플랜의 경우 기본적으로 비활성화되어 있습니다.
이 가이드는 조직의 디자인 시스템이 이미 설정되어 있다고 가정하므로, 생성하는 모든 것이 자동으로 브랜드의 색상, 타이포그래피, 컴포넌트 패턴을 사용합니다. 디자인 시스템 자체를 설정하거나 수정해야 하는 디자인 리드라면 Claude Design에서 디자인 시스템 설정을 참조하세요.
Claude Design의 작동 방식
Claude Design은 두 가지 주요 영역으로 구성됩니다: 왼쪽의 채팅 인터페이스와 오른쪽의 캔버스입니다. 채팅에서 원하는 것을 설명하면 Claude가 캔버스에 작동하는 디자인을 생성합니다. 그 후 반복하면서 대화와 인라인 댓글을 통해 완벽해질 때까지 개선합니다.
일반적인 흐름은 다음과 같습니다:
프로젝트를 생성하고 관련 컨텍스트(스크린샷, 코드베이스)를 추가합니다.
만들고 싶은 것을 설명합니다.
Claude가 캔버스에 생성한 것을 검토합니다.
채팅 메시지와 인라인 댓글을 사용하여 반복합니다.
결과에 만족하면 내보내거나 공유합니다.
새 프로젝트 생성
프로젝트를 생성하면 자동으로 조직의 디자인 시스템을 상속받습니다. 브랜드 자산을 업로드하거나 설정할 필요가 없습니다. 브랜드 색상, 글꼴, 컴포넌트가 이미 준비되어 있습니다.
프로젝트에 컨텍스트 추가
Claude에 제공하는 컨텍스트가 많을수록 결과가 더 좋습니다. 프로젝트 진행 중 언제든지 참고 자료를 첨부할 수 있습니다.
스크린샷, 이미지 또는 기존 자산: 기존 디자인, 경쟁사 제품, 와이어프레임 또는 시각적 영감의 스크린샷을 업로드합니다. 복제하고 싶은 디자인 스타일이 있는 기존 슬라이드 덱이나 문서를 첨부할 수도 있습니다. "이렇게 보이게 해줘"라는 요청에 유용합니다.
코드베이스 및 기존 디자인 파일: 코드 저장소를 연결하면 Claude가 기존 컴포넌트, 아키텍처, 스타일 패턴을 이해합니다. 이를 통해 프로토타입이 처음부터 더 프로덕션 준비가 됩니다. 가져오기는 기존 제품 디자인 작업을 업로드하는 여러 방법을 지원합니다.
효과적인 프롬프트 작성
훌륭한 결과를 얻기 위해 디자이너일 필요는 없습니다. 무엇을 만들고 있는지, 누구를 위한 것인지, 무엇이 가장 중요한지 구체적으로 설명하세요.
좋은 프롬프트에는 목표(무엇을 만들고 있는지), 레이아웃(어떻게 배열할지), 콘텐츠(어떤 정보를 표시할지), 대상(누가 사용할지)가 포함됩니다. Claude는 더 많은 정보가 필요하면 명확히 하는 질문도 합니다.
잘 작동하는 프롬프트의 예시는 다음과 같습니다:
"지역 및 제품 라인별 필터가 있는 월별 수익을 표시하는 대시보드를 만들어줘."
"핵심 기능을 사용자에게 안내하는 4개 화면의 모바일 앱 온보딩 플로우를 디자인해줘."
"새로운 API 제품을 위한 랜딩 페이지를 만들어줘. 히어로 섹션, 코드 예시, 가격 정보를 포함해야 해."
"카테고리에 따라 조건부 질문이 있는 고객 피드백 수집 양식을 만들어줘."
"운영팀이 콘텐츠 제출을 검토하고 승인할 수 있는 내부 도구를 디자인해줘."
디자인 반복
첫 번째 생성은 시작점입니다. 진정한 가치는 반복에서 나옵니다.
채팅 사용
채팅은 전체 디자인에 영향을 미치는 광범위한 변경에 가장 적합합니다:
"색 구성을 더 어둡고 미니멀하게 만들어줘."
"대시보드를 다시 배열해서 메트릭이 맨 위 행에 있고 차트가 아래에 있도록 해줘."
"오른쪽에 설정 패널을 추가해줘."
"이 페이지의 2~3가지 대체 레이아웃을 보여줘."
Claude에게 디자인 결정을 설명하도록 요청하거나, 개선 사항을 제안하거나, 접근성을 위해 디자인을 검토하도록 할 수도 있습니다.
인라인 댓글 사용
인라인 댓글을 사용하면 캔버스의 특정 부분을 직접 클릭하고 대상 변경을 요청할 수 있습니다. 채팅에서 위치를 설명하는 것보다 빠릅니다.
좋은 인라인 댓글의 예시:
"이 버튼의 패딩을 더 크게 만들어줘."
"이것을 라디오 버튼 대신 드롭다운으로 변경해줘."
"여기에 주요 브랜드 색상을 사용해줘."
"이 섹션을 축소 가능하게 만들어줘."
참고: 댓글이 인식되지 않으면 피드백을 채팅에 직접 붙여넣으세요. 이것은 Claude가 읽기 전에 댓글이 사라질 수 있는 간헐적 문제에 대한 알려진 해결 방법입니다.
채팅 vs. 댓글 사용 시기
대상 지정, 컴포넌트 수준의 변경("이 버튼 수정", "이 간격 조정")에는 댓글을 사용하세요. 구조적 변경, 새 섹션, 미적 변화 또는 설명이나 컨텍스트가 필요한 모든 것에는 채팅을 사용하세요.
버전 및 수정 관리
현재 작업을 잃지 않고 다른 방향을 탐색하고 싶으면 Claude에게 "지금까지의 작업을 저장하고 완전히 다른 접근 방식을 시도해줘"라고 말하세요. Claude가 현재 프로젝트를 저장하고 저장 위치를 확인하므로 대화에서 이전 반복을 쉽게 참조할 수 있습니다.
내보내기 및 공유
디자인이 준비되면 동료와 공유하거나 다른 곳에서 사용하기 위해 내보낼 수 있습니다. 올바른 형식은 이해관계자 피드백을 받는지, 엔지니어링에 인계하는지, 그룹에 프레젠테이션하는지에 따라 달라집니다.
프로젝트를 볼 때 오른쪽 위 모서리의 "내보내기" 버튼을 사용하여 다음 내보내기 형식 중에서 선택합니다.
.zip으로 다운로드
PDF로 내보내기
PPTX로 내보내기
Canva로 전송
독립형 HTML로 내보내기
Claude Code로 인계
로컬 코딩 에이전트로 전송
Claude Code Web으로 전송
공유 가능한 링크를 사용하여 조직 내에서 프로젝트를 공유할 수도 있습니다. 공유 옵션에는 보기 전용, 댓글, 편집 액세스가 포함됩니다.
구독 사용량 및 가격 책정
자세한 내용은 여기를 참조하세요: Claude Design 구독 사용량 및 가격 책정.
최고의 결과를 위한 팁
간단하게 시작한 후 복잡성을 추가하세요. 핵심 레이아웃과 콘텐츠로 시작한 후 상호작용, 엣지 케이스, 마무리를 추가하세요. Claude는 점진적 요청에 잘 반응합니다.
피드백을 구체적으로 제공하세요. "이것이 맞지 않는 것 같아"는 실행하기 어렵습니다. "양식 필드 간의 간격을 8px로 줄여줘"는 Claude에게 정확히 필요한 것을 알려줍니다.
디자인 시스템을 참조하세요. 브랜드 시스템에 컴포넌트가 있다는 것을 알고 있다면 이름으로 언급하세요: "Primary Button 컴포넌트를 사용해줘" 또는 "Card 레이아웃 패턴을 적용해줘."
반응형 디자인을 조기에 고려하세요. 디자인이 모바일, 태블릿, 데스크톱에서 작동해야 하는지, 아니면 그 중 하나에서만 작동해야 하는지 언급하세요.
변형을 요청하세요. 방향이 확실하지 않으면 Claude에게 2~3가지 옵션을 보여달라고 요청하세요. 대안을 비교하는 것이 추측하는 것보다 훨씬 빠릅니다.
Claude에게 피드백을 요청하세요. Claude는 접근성, 명암비, 정보 계층 구조, 일반적인 사용성을 위해 디자인을 검토할 수 있습니다. 이를 생성기가 아닌 디자인 협력자로 취급하세요.
알려진 제한 사항
Claude Design은 Anthropic Labs의 실험적 미리보기로 제공됩니다. 알아야 할 몇 가지 사항이 있습니다:
댓글 지속성: 인라인 댓글이 Claude가 읽기 전에 가끔 사라집니다. 이를 해결하려면 댓글 텍스트를 채팅에 붙여넣으세요.
컴팩트 보기에서 저장 오류: 컴팩트 레이아웃 모드는 저장 오류를 유발할 수 있습니다. 이 경우 전체 보기로 전환하고 다시 시도하세요.
대규모 코드베이스: 매우 큰 저장소를 연결하면 지연이나 브라우저 문제가 발생할 수 있습니다. 전체 모노레포 대신 특정 하위 디렉토리를 연결하세요.
채팅 오류: "채팅 업스트림 오류"가 발생하면 같은 프로젝트 내에서 새 채팅 탭을 시작해보세요.