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