Claude Design 시작하기

Claude Design을(를) 사용하면 Claude와 대화하여 디자인, 대화형 프로토타입, 원페이저 및 기타 시각적 작업을 만들 수 있습니다. 아티팩트를 시작할 수 있는 템플릿 중 하나이므로 모든 채팅, Claude Code 및 아티팩트 탭에서 캔버스 내 편집 및 디자인 시스템을 포함하여 사용할 수 있습니다. 이 가이드는 첫 번째 디자인을 만들고, 반복하고, 최대한 활용하는 방법을 안내합니다. 아티팩트가 무엇이고 사용 방법에 대해 자세히 알아보세요.

이 가이드는 조직의 디자인 시스템이 이미 설정되어 있다고 가정하므로 만드는 모든 것이 자동으로 브랜드의 색상, 타이포그래피 및 구성 요소 패턴을 사용합니다. 디자인 시스템 자체를 설정하거나 수정해야 하는 디자인 리드인 경우 Claude Design에서 디자인 시스템 설정을(를) 참조하세요.

Claude로 아티팩트 만들기

Claude Design은 대화와 캔버스를 연결합니다. 원하는 것을 설명하면 Claude가 대화 옆의 캔버스에 작동하는 디자인을 생성합니다. 거기서부터 반복하면서 대화, 인라인 댓글 및 캔버스에서 직접 개선하여 완벽하게 만듭니다.

일반적인 흐름은 다음과 같습니다:

Claude Design과 Claude Code 간에 이동하면서 작업을 동기화된 상태로 유지할 수 있습니다. /design-sync를 사용하여 디자인 시스템을 가져오면 Claude Design에서 빌드하는 모든 것이 기존 구성 요소에서 시작됩니다. 디자인이 소프트웨어가 될 준비가 되면 Claude Code로 전달할 수 있으며, 이는 스크린샷에서 다시 시작하는 대신 기존 작업에서 계속됩니다.

Claude Code에서 /design을(를) 사용하여 디자인을 코드베이스로 가져오거나, 코드를 라이브 프로토타입으로 내보내거나, Claude가 처음부터 끝까지 전체를 빌드하도록 하세요.

프로젝트를 만들면 자동으로 조직의 디자인 시스템을 상속합니다. 브랜드 자산을 업로드하거나 아무것도 구성할 필요가 없습니다. 브랜드 색상, 글꼴 및 구성 요소가 이미 준비되어 있습니다.

GitHub 리포지토리, 디자인 파일, 원본 업로드 또는 Claude Code의 /design-sync 명령을 사용하여 로컬 코드베이스에서 하나 이상의 디자인 시스템을 가져오세요. Claude는 실제 디자인 시스템 구성 요소로 빌드하고, 자신의 출력을 디자인 시스템에 대해 확인하고, 표시되기 전에 수정합니다.

Enterprise 플랜에서 관리자는 특정 사용자를 위해 게시, 기본값 설정 및 디자인 시스템 삭제를 예약할 수 있습니다. Team 및 Enterprise 플랜용 아티팩트 관리자 가이드에서 자세히 알아보세요.

claude.ai/design의 독립 실행형 버전에서 만든 디자인 시스템을 이동할 수 있으므로 Claude Code를 포함한 모든 채팅에서 사용할 수 있습니다. 독립 실행형 버전이 2026년 12월 14일에 종료되기 전에 마이그레이션하세요. 독립 실행형 Claude Design에서 Claude로 마이그레이션에서 자세히 알아보세요.

Claude에 제공하는 컨텍스트가 많을수록 출력이 더 좋아집니다. 프로젝트 중 언제든지 참고 자료를 첨부할 수 있습니다.

훌륭한 결과를 얻기 위해 디자이너일 필요는 없습니다. 빌드할 내용, 대상 및 가장 중요한 것을 구체적으로 설명하세요.

좋은 프롬프트에는 목표(빌드할 내용), 레이아웃(항목 배열 방식), 콘텐츠(표시할 정보) 및 대상(사용할 사람)이 포함됩니다. Claude는 더 많은 정보가 필요하면 명확히 하는 질문도 할 것입니다.

잘 작동하는 프롬프트의 몇 가지 예는 다음과 같습니다:

첫 번째 생성은 시작점입니다. 실제 가치는 반복에서 나옵니다.

채팅은 전체 디자인에 영향을 미치는 광범위한 변경에 가장 적합합니다:

Claude에게 디자인 결정을 설명하거나, 개선 사항을 제안하거나, 접근성을 위해 디자인을 검토하도록 요청할 수도 있습니다.

인라인 댓글을 사용하면 캔버스의 특정 부분을 직접 클릭하여 대상 변경을 요청할 수 있습니다. 이는 채팅에서 위치를 설명하는 것보다 빠릅니다.

좋은 인라인 댓글의 예:

리치 레이아웃 컨트롤을 사용하여 요소를 직접 드래그, 크기 조정 및 정렬하여 빠른 시각적 및 미적 변경을 수행합니다.

대상 구성 요소 수준의 변경("이 버튼 수정", "이 간격 조정")에는 댓글을 사용하세요. 구조적 변경, 새 섹션 또는 설명이나 컨텍스트가 필요한 모든 것에는 채팅을 사용하세요. 빠른 시각적 및 미적 변경에는 직접 편집을 사용하세요.

아티팩트 패널에 들어가고 나가며 패널의 헤더에서 댓글을 달려면 키보드 또는 화면 읽기 프로그램으로 아티팩트 사용을 참조하세요. 이 문서에서는 포커스의 의미, Mac 노트북 또는 Safari에서 수행할 작업, 표에서 키를 표시하는 방법도 설명합니다.

디자인은 아트보드의 캔버스입니다. 각 아트보드는 텍스트, 도형, 이미지 등의 레이어를 포함하며, 레이어는 내부에 다른 레이어를 포함할 수 있습니다.

F6을 눌러 다음 영역으로 이동하고 Shift+F6을 눌러 이전 영역으로 이동합니다. Cmd+F6(Windows의 Shift 포함 또는 제외)은 F6 대신 작동합니다. 영역은 상단 표시줄, 캔버스 및 속성 패널입니다. 무언가가 선택되고 속성 패널이 닫혀 있으면 F6도 선택 위에 떠 있는 도구 모음에서 멈춥니다.

아트보드의 제목에 도달할 때까지 Tab을 누릅니다. 이름에는 "아트보드 1/7"과 같은 위치가 포함됩니다. 제목에서 Space는 아트보드를 선택하고 Return은 내부로 이동하여 레이어로 이동합니다. 내부에서:

텍스트 레이어를 편집할 때 완료되면 Escape 또는 Tab을 누릅니다. 이동하면서 편집기는 화면 읽기 프로그램에 선택된 항목과 "1/5"와 같은 위치를 알려줍니다.

아트보드를 이동하려면 선택(제목에서 Space)하고 화살표 키를 누릅니다. 1픽셀씩 또는 Shift로 10씩 이동합니다. 아트보드 내에서 화살표 키는 다른 작업을 수행합니다. Shift 포함 또는 제외하고 다음 또는 이전 레이어로 이동하며 레이어 자체를 이동하지 않습니다. 현재 레이어를 이동하려면 Option(Windows의 Alt)을 누르고 화살표 키를 누릅니다. 자유롭게 배치된 레이어는 1픽셀씩 또는 Shift로 10씩 이동합니다. 행, 열 또는 그리드의 일부인 레이어는 대신 이웃과 위치를 바꿉니다. 위 또는 왼쪽은 더 일찍 이동하고 아래 또는 오른쪽은 나중에 이동합니다. 편집기는 화면 읽기 프로그램에 이동의 짧은 확인을 보냅니다.

아트보드 또는 레이어를 선택한 상태에서 Cmd+D(Windows의 Ctrl+D)를 눌러 복제하고 Delete 또는 Backspace를 눌러 삭제합니다. Cmd+Z(Windows의 Ctrl+Z)를 눌러 실행 취소합니다. 편집기는 각각에 대해 화면 읽기 프로그램에 짧은 확인을 보냅니다.

선택 위에 떠 있는 도구 모음은 속성 패널이 닫혀 있을 때만 표시되며 F6이 도달합니다. 화살표 키는 컨트롤 간을 이동하고, Home과 End는 첫 번째 및 마지막으로 이동하며, Escape는 선택을 유지한 채 캔버스로 돌아갑니다. Tab으로 각 컨트롤에 도달할 수도 있습니다.

Cmd+\(Windows의 Ctrl+\)는 속성 패널을 열고 포커스를 이동합니다. 다시 누르면 패널이 닫히고 포커스가 상단 표시줄의 "속성" 버튼으로 돌아갑니다. 색상, 글꼴 및 기타 팝업은 열릴 때 포커스를 가지며 Escape는 닫습니다. 텍스트 색상을 선택하면 색상 선택기는 배경에 대한 대비가 좋은지 나쁜지 알려줍니다.

속성 패널의 레이어 목록에서: 위쪽 화살표와 아래쪽 화살표 키는 행 간을 이동하고, 오른쪽 화살표 키는 행을 확장한 후 내부로 이동하며, 왼쪽 화살표 키는 축소한 후 이동하고, Return 또는 Space는 캔버스에서 해당 레이어를 선택하며, 텍스트 레이어에서 다시 Return은 편집합니다.

현재 작업을 잃지 않고 다른 방향을 탐색하고 싶다면 Claude에게 "지금까지의 작업을 저장하고 완전히 다른 접근 방식을 시도해 봐"라고 말하세요. Claude가 현재 프로젝트를 저장하고 저장 위치를 확인해 주므로 대화에서 이전 버전을 쉽게 참조할 수 있습니다.

디자인이 완성되면 동료와 공유하거나 다른 곳에서 사용할 수 있도록 내보낼 수 있습니다. 올바른 형식은 이해관계자 피드백을 받는지, 엔지니어링 팀에 인계하는지, 그룹에 발표하는지에 따라 달라집니다.

프로젝트를 볼 때 오른쪽 위 모서리의 "내보내기" 버튼을 사용하여 다음 내보내기 형식 중에서 선택하세요.

디자인은 기본적으로 비공개입니다. 공유하려면 "공유"를 클릭하고 누가 열 수 있는지, 무엇을 할 수 있는지 선택하세요. 디자인을 공유받은 사람들은 이를 보거나, 댓글을 달거나, 편집할 수 있습니다. 아티팩트 공유에 대해 자세히 알아보세요.

Claude Design은 Claude의 나머지 부분과 동일한 사용량 제한에 포함됩니다. 디자인 활동은 Claude Code를 포함한 Claude의 나머지 작업과 동일한 풀에서 사용되므로 추적할 별도의 Claude Design 할당량이 없습니다. 대규모 코드베이스 또는 많은 반복이 있는 복잡한 프로젝트는 더 많은 사용량을 소비합니다.

사용량 제한에 도달하면 제한이 초기화될 때까지 Claude Design을 사용할 수 없습니다. 사용량 크레딧을 활성화한 경우 포함된 제한에 도달한 후에도 계속 작업할 수 있습니다. 사용량 및 길이 제한이 작동하는 방식에 대해 자세히 알아보세요.

알아야 할 몇 가지 사항: