Anthropic Labs의 Claude Design을 사용하면 Claude와 대화하여 디자인, 대화형 프로토타입, 프레젠테이션 등을 만들 수 있습니다. 이 가이드는 첫 번째 프로젝트를 만들고, 디자인을 반복하며, 도구를 최대한 활용하는 방법을 안내합니다.
Anthropic Labs의 Claude Design은 이제 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에 정확히 필요한 것을 제공합니다.
디자인 시스템을 참조하세요. 브랜드 시스템에 컴포넌트가 있다는 것을 알고 있다면 이름으로 언급하세요: "기본 버튼 컴포넌트 사용" 또는 "카드 레이아웃 패턴 적용."
반응형을 조기에 생각하세요. 디자인이 모바일, 태블릿 및 데스크톱에서 작동해야 하는지, 아니면 그 중 하나에서만 작동해야 하는지 언급하세요.
변형을 요청하세요. 방향이 확실하지 않으면 Claude에 2~3개의 옵션을 보여달라고 요청하세요. 대안을 비교하는 것이 추측하는 것보다 훨씬 빠릅니다.
Claude에 피드백을 요청하세요. Claude는 접근성, 명암비, 정보 계층 구조 및 일반 사용성에 대한 디자인을 검토할 수 있습니다. 이를 생성기가 아닌 디자인 협력자로 취급하세요.
알려진 제한 사항
Claude Design은 Anthropic Labs의 실험적 미리보기로 사용할 수 있습니다. 주의할 몇 가지 사항이 있습니다:
댓글 지속성: 인라인 댓글이 Claude가 읽기 전에 가끔 사라집니다. 이를 해결하려면 댓글 텍스트를 채팅에 붙여넣으세요.
컴팩트 보기에서 오류 저장: 컴팩트 레이아웃 모드는 저장 오류를 트리거할 수 있습니다. 이 경우 전체 보기로 전환하고 다시 시도하세요.
대규모 코드베이스: 매우 큰 저장소를 연결하면 지연 또는 브라우저 문제가 발생할 수 있습니다. 전체 모노레포 대신 특정 하위 디렉터리를 연결하세요.
채팅 오류: "채팅 업스트림 오류"가 발생하면 같은 프로젝트 내에서 새 채팅 탭을 시작해 보세요.