프로토타입과 UX를 위한 Claude 활용하기

기능 아이디어는 사람들이 직접 클릭해 볼 수 있을 때 더 쉽게 판단할 수 있습니다. Claude Design을 사용하면 대화 중에 기능을 설명하기만 해도 Claude가 팀이 열어서 사용해 볼 수 있는 프로토타입을 만들어 줍니다. Claude가 여러분의 디자인 시스템을 가지고 있다면, 제품의 실제 버튼과 폼 같은 여러분만의 컴포넌트로 프로토타입을 만들어 줍니다.

1. 디자인 시작하기

Claude와 작업하는 어디에서든 디자인을 시작할 수 있습니다.

• 어떤 대화에서든: 웹이나 데스크톱 앱에서 프로토타입, 목업 또는 일련의 화면을 요청하세요.
• 사이드바에서: Artifacts를 열고 새로 만들기에서 Design을 선택한 다음, 열리는 대화에서 원하는 것을 설명하세요.
• 저장소 내 Claude Code에서: 같은 방식으로 요청하세요. 이 경우 섹션 3에서 설명하듯이 Claude가 제품의 코드도 읽을 수 있습니다.

디자인은 대화 옆에 있는, 이동하고 확대/축소할 수 있는 캔버스에 열립니다. 각 화면은 자체 아트보드에 배치됩니다. 디자인은 Artifacts에 저장되며, 여러분이 공유하기 전까지는 다른 사람이 열 수 없습니다.

2. 기능 프로토타입 만들기

요청해 볼 수 있는 몇 가지 프로토타입 유형과 시도해 볼 프롬프트를 소개합니다.

새로운 기능

화면과 그 섹션, 그리고 그것들이 어떻게 동작하는지 설명하세요.

• "계정, 결제, 알림, 통합을 위한 섹션이 있는 SaaS 앱용 새 설정 페이지를 디자인해 주세요. 사이드바 내비게이션을 포함하고 각 섹션을 펼칠 수 있게 만들어 주세요."
• "필터, 패싯 결과, 그리고 결과를 클릭하면 오른쪽에서 슬라이드로 나타나는 상세 패널이 있는 검색 경험을 프로토타입으로 만들어 주세요. 클릭 가능하게 만들어 주세요."
• "관리자가 대기열에 제출된 요청을 검토, 댓글 작성, 승인 또는 거부할 수 있는 승인 워크플로 UI를 만들어 주세요."

디자인 리뷰를 위한 대안들

각 접근 방식을 별도의 아트보드에 요청하세요. 그러면 여러분과 리뷰어들이 나란히 비교해 볼 수 있습니다.

• "사용자 프로필 페이지의 세 가지 다른 레이아웃을 보여주세요: 카드 기반 하나, 왼쪽 사이드바가 있는 것 하나, 상단 탭 내비게이션이 있는 것 하나. 각각을 자체 아트보드에 배치해 주세요."
• "이 체크아웃 플로우의 두 가지 버전을 별도의 아트보드에 만들어 주세요. 하나는 단일 페이지, 하나는 다단계로 만들어서 디자인 리뷰에서 비교할 수 있게 해주세요."

전체 플로우

여정을 단계별로 설명하세요.

"무료 플랜에서 유료 플랜으로 업그레이드하려는 사용자의 플로우를 그려주세요. 업그레이드 안내가 보이는 대시보드에서 시작해서, 플랜 비교 페이지, 결제 폼, 확인 화면, 그리고 프리미엄 기능이 해제된 업데이트된 대시보드까지 이어지도록 해주세요."

내부 도구 및 관리자 패널

Claude Design은 관리자 패널이나 모더레이션 대기열 같은 내부 도구에도 잘 작동합니다. 화면이 다듬어지기 전에도 사람들이 프로토타입을 클릭해 보며 단계가 제대로 작동하는지 확인할 수 있습니다.

"사용자 계정을 관리하는 관리자 패널을 디자인해 주세요: 플랜 유형과 상태로 필터링할 수 있는 검색 가능한 테이블, 그리고 계정 이력을 보여주고 권한을 수정할 수 있는 상세 드로어를 포함해 주세요."

Claude가 실제 가격 같은 모든 사실을 알고 있지 않을 수 있습니다. Claude가 여러분에게 물어보거나 가정을 할 수도 있습니다. 디자인을 공유하기 전에 항상 Claude의 작업을 검토하고 세부 사항을 확인하세요. Claude의 결과물을 평가하는 방법에 대해 더 알아보려면 저희 교육 보고서인 사람들이 Claude의 작업을 확인하는 방법을 읽어보세요.

3. 여러분의 컴포넌트로 구축하기

Claude는 제품에서 이미 사용 중인 실제 버튼과 폼 같은 여러분의 실제 컴포넌트로 프로토타입을 만들 수 있습니다. 그러면 프로토타입이 엔지니어가 실제로 구축할 것과 일치하게 됩니다. 여러분의 컴포넌트가 없으면 Claude는 비슷해 보이기만 하는 자체 버전을 그립니다.

제품과 일치하는 프로토타입을 얻으려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다:

• 디자인 시스템 설정하기(권장): 디자인 시스템은 색상, 타이포그래피, 컴포넌트를 Claude 안의 한 곳에 보관합니다. 조직에서 기본값을 설정하면, 팀이 시작하는 모든 디자인에 Claude가 이를 사용합니다. Claude에서 디자인 시스템 설정하기를 참조하세요.
• 저장소 내 Claude Code에서 작업하기: 프로젝트 내 Claude Code 세션에서 디자인을 요청하세요. Claude는 코드를 읽고 제품에서 이미 사용 중인 색상, 타이포그래피, 간격을 파악할 수 있습니다. 별도의 설정이 필요하지 않습니다.

어느 쪽을 선택하든 다음 습관이 도움이 됩니다:

• 프롬프트에서 컴포넌트 이름을 명시하세요: "ProductCard 컴포넌트를 사용해 주세요" 또는 "설정 페이지와 같은 레이아웃을 따라주세요"라고 하면 Claude가 어떤 컴포넌트를 사용해야 할지 알 수 있습니다.
• Claude에게 인터페이스 코드를 알려주세요: 대규모 저장소에서는 어떤 패키지나 폴더에 컴포넌트가 있는지 Claude에게 알려주세요.
• 컴포넌트를 변경하려면 Claude에게 요청하세요: 여러분의 실제 컴포넌트는 코드에 있는 그대로 아트보드에 나타납니다.
• 라이브러리가 변경되면 새로고침하세요: 코드에서 동기화된 디자인 시스템은 마지막 동기화 시점의 컴포넌트 사본을 유지합니다. 릴리스 후에는 다시 동기화하세요.

4. 아트보드에서 다듬기

직접 디자인을 변경하거나, Claude에게 댓글을 남기거나, 대화에서 요청할 수 있습니다. 변경 사항은 만드는 즉시 저장되므로 별도의 저장 버튼이 없습니다.

• 직접 수정: 요소를 클릭해 선택하고, 텍스트를 더블클릭해 다시 입력하고, 드래그해서 이동하세요. 툴바를 사용해 텍스트, 메모, 도형, 새 아트보드를 추가하세요. Properties에는 선택한 요소의 설정이 표시됩니다.
• 댓글로: 요소 하나를 변경하려면 댓글 기능을 켜고, 요소를 클릭하고, 원하는 내용을 작성한 다음 Send to Claude를 체크된 상태로 두세요. Claude가 변경을 수행하고 댓글 스레드에 답변합니다.
• 요청으로: 새로운 상태나 또 다른 대안처럼 더 큰 변경이 필요하면 대화에서 요청하세요.

예를 들어: "이 페이지가 빈 상태, 오류 상태, 로딩 상태를 어떻게 처리하는지 보여주세요. 각각을 현재 아트보드 옆에 있는 자체 아트보드에 배치해 주세요."

5. 팀과 함께 검토하기

Share를 사용하면 누가 디자인을 열 수 있는지, 그리고 보기, 댓글, 편집 중 무엇을 할 수 있는지 선택할 수 있습니다. 초대받은 사람은 Claude 계정이 필요합니다. 각 플랜별 옵션은 헬프 센터의 아티팩트 공유하기를 참조하세요.

각 사람이 할 수 있는 일은 여러분이 부여한 접근 권한에 따라 달라집니다:

• 보기 가능: 디자인을 열고, 요소를 클릭해 크기, 간격, 색상을 확인하고, Play로 클릭 가능한 아트보드를 실행할 수 있습니다. 아무것도 변경할 수는 없습니다.
• 댓글 가능: 위와 동일하며, 클릭한 요소에 댓글을 남길 수 있습니다.
• 편집 가능: 직접 디자인을 변경하고 캔버스에 메모를 추가할 수 있습니다. 조직 내에서 편집 권한이 있는 사람은 Claude에게 요청으로 댓글을 보낼 수도 있습니다.

편집 권한이 있는 사람들은 동시에 캔버스에서 작업할 수 있으며, 서로의 변경 사항을 실시간으로 볼 수 있습니다.

Team 및 Enterprise 플랜에서는 조직의 소유자가 조직 외부로 공유할 수 있는지 여부를 결정합니다. 링크를 열 수 없는 사람에게는 Export를 사용하세요. 다음과 같이 내보낼 수 있습니다:

• 아트보드 하나를 PNG, PDF 또는 HTML(.zip) 파일로
• Share > Export에서 전체 프로토타입을 하나의 웹 페이지(HTML)로
• 모든 아트보드를 하나의 PDF로

6. Claude Code에서 이어가기

Claude Code는 Claude Design에서 만든 프로토타입을 열 수 있습니다. 그러면 엔지니어는 스크린샷이 아니라 실제 아트보드와 그 안의 컴포넌트를 바탕으로 구축할 수 있습니다.

• Claude Code에서 디자인했다면: 같은 세션에 머물면서 Claude에게 구축을 요청하세요. 나중에 다시 돌아오려면 Artifacts에서 디자인을 열고 Share 옆의 버튼을 사용해 디자인을 만든 세션을 다시 열 수 있습니다.
• 다른 곳에서 디자인했다면: 엔지니어에게 디자인에 대한 편집 권한을 부여하세요. 저장소 내 Claude Code에서 엔지니어가 디자인 링크를 붙여넣고 Claude에게 구현을 요청합니다.

빌드를 시작하기 전에

다음 몇 가지 단계를 거치면 디자인을 바탕으로 구축하기가 더 쉬워집니다:

• 아트보드와 컴포넌트 이름을 명확하게 지정하세요: Claude Code는 디자인에서 이 이름들을 읽습니다.
• 결정 사항을 내릴 때마다 기록하세요: 사이드바 대신 탭을 선택했다면, Claude Code가 읽을 수 있도록 아트보드의 메모에 그 이유를 적어두세요.
• 빈 상태, 오류 상태, 로딩 상태를 먼저 요청하세요: 데이터가 매우 적을 때와 예상보다 훨씬 많을 때 화면이 어떻게 동작하는지도 물어보세요.

7. 아이디어에서 구현까지의 예시

1. PM이 대화에서 기능을 설명합니다. 필터링과 일괄 작업이 있는 알림 센터입니다.
2. Claude가 조직의 디자인 시스템을 바탕으로 첫 프로토타입을 만들고, 디자이너가 아트보드에서 이를 다듬습니다.
3. PM이 비동기 리뷰를 위해 디자인을 공유하고, 팀이 프로토타입을 실행해 보고 댓글을 남깁니다.
4. 엔지니어가 Claude Code에서 디자인을 열고 Claude에게 구현을 요청합니다.

뭔가 이상해 보인다면

추가 자료

• 프레젠테이션을 위한 Claude로 슬라이드와 프레젠테이션 만들기
• 디자인이 여러분의 컴포넌트와 타이포그래피를 사용하도록 하는 Claude에서 디자인 시스템 설정하기
• 팀과 디자인을 공유하고 편집하는 방법에 대한 Claude 아티팩트에서 팀과 협업하기
• 더 많은 지원과 문제 해결을 위해 헬프 센터를 방문하세요.