클로드 디자인(Claude Design) 사용법, 대화로 시안 만들기

디자이너가 아니어도 시안이 필요할 때가 있습니다. 한 장짜리 소개 자료, 랜딩 페이지 초안, 앱 화면 흐름 같은 것들입니다.

클로드 디자인(Claude Design)은 대화로 이런 시각 작업을 만드는 기능입니다. 말로 설명하면 옆 캔버스에 실제로 작동하는 디자인이 만들어집니다. 공식 안내를 기준으로 정리했습니다.

클로드 디자인(Claude Design) 사용법 확인 순서 정리

누가 쓸 수 있나

Pro, Max, 팀, 엔터프라이즈에서 베타로 제공됩니다. Pro, Max, 팀은 기본으로 켜져 있고, 엔터프라이즈는 소유자가 조직 설정의 Artifacts에서 켜야 합니다.

무엇을 만들 수 있나

  • 디자인 시안과 목업
  • 클릭해 볼 수 있는 인터랙티브 프로토타입
  • 한 장짜리 소개 자료
  • 랜딩 페이지
  • 대시보드, 입력 폼, 내부 업무 도구 화면

시작하는 곳

어디서 어떻게
대화 “이 제안서로 한 장짜리 자료 만들어 줘” 또는 Output → Design
Artifacts 탭 Design 템플릿 선택
클로드 코드 /design으로 만들기·수정·동기화
모바일 앱 요청과 보기만 가능(편집은 웹·데스크톱)
claude.ai/design 기존 단독 화면도 계속 사용 가능

진행 흐름

  1. 대화, Artifacts 탭, claude.ai/design 중 한 곳에서 시작합니다
  2. 쓸 디자인 시스템을 첨부하거나 가져옵니다
  3. 스크린샷이나 코드처럼 참고할 맥락을 더합니다
  4. 만들고 싶은 것을 설명합니다
  5. 캔버스에 나온 결과를 확인합니다
  6. 대화, 댓글, 직접 편집으로 다듬습니다
  7. 만족하면 내보내거나 공유합니다

디자인 시스템부터 챙기기

조직의 디자인 시스템이 설정돼 있으면 새 프로젝트가 브랜드 색, 글꼴, 컴포넌트를 자동으로 물려받습니다. 따로 브랜드 자료를 올릴 필요가 없습니다.

깃허브 저장소, 디자인 파일, 직접 올린 자료, 로컬 코드에서 가져올 수 있습니다. 클로드는 실제 컴포넌트로 만들고, 결과를 디자인 시스템과 대조해 스스로 고친 뒤 보여 줍니다. 다만 공식 안내 표현대로 가져온 원본 품질만큼만 나옵니다. 정리 안 된 코드나 빠진 파일은 결과에 그대로 드러납니다.

요청 잘 쓰는 법

좋은 요청에는 네 가지가 들어갑니다. 목표(무엇을), 배치(어떻게 놓을지), 내용(무엇을 보여 줄지), 대상(누가 쓸지)입니다.

  • “지역과 제품군으로 거를 수 있는 월간 매출 대시보드를 만들어 줘”
  • “핵심 기능을 소개하는 4화면짜리 모바일 앱 온보딩을 디자인해 줘”
  • “히어로 섹션, 코드 예시, 가격표가 있는 API 제품 랜딩 페이지를 만들어 줘”
  • “분류에 따라 질문이 바뀌는 고객 의견 수집 폼을 만들어 줘”

대화, 댓글, 직접 편집 — 언제 무엇을

방법 맞는 경우 예
대화 전체 구조를 바꿀 때 “색감을 어둡고 간결하게”, “배치 대안 2~3개 보여 줘”
인라인 댓글 특정 부분만 고칠 때 “이 버튼 여백 키워 줘”, “라디오 버튼 말고 드롭다운으로”
직접 편집 빠른 시각 조정 끌기, 크기 조절, 정렬

댓글은 캔버스의 해당 위치를 눌러 남기므로, 대화로 위치를 설명하는 것보다 빠릅니다. 클로드에게 설계 이유를 설명하게 하거나, 접근성과 대비, 정보 위계를 검토해 달라고 할 수도 있습니다.

다른 방향도 시험해 보려면

지금 작업을 잃지 않고 새로운 방향을 보고 싶다면 “지금 것 저장하고 완전히 다른 방식으로 해 봐”라고 말하면 됩니다. 클로드가 현재 프로젝트를 저장하고 위치를 알려 줍니다. 공식 버전 기록 기능은 아직 없어서 이 방법이 사실상의 백업입니다.

내보내기와 공유

  • zip, PDF, PPTX, 단독 HTML로 내보내기
  • 구글 슬라이드 내보내기(claude.ai/design에서만)
  • 캔바, 감마, 허브스팟, 미로, 넷리파이, 버셀, 윅스 등 다른 도구로 보내기
  • 클로드 코드로 넘겨 실제 개발 이어가기

디자인은 기본적으로 나만 볼 수 있습니다. 공유 버튼으로 보기, 댓글, 편집 권한을 골라 공유합니다.

사용량

디자인 작업도 클로드 코드를 포함한 같은 사용량 한도에서 차감됩니다. 예전에는 디자인만의 주간 한도가 따로 있었지만 지금은 통합됐습니다. 코드가 큰 프로젝트나 수정을 많이 반복하면 더 많이 씁니다.

베타 단계의 한계

  • 버전 기록이 아직 없습니다
  • 여러 명이 동시에 편집하는 것은 아직 기본 수준이라 불안정할 수 있습니다
  • 인라인 댓글이 가끔 화면에 안 보일 수 있습니다 — 댓글 보기에서 확인하거나 대화에 붙여 넣으세요
  • “chat upstream error”가 나면 같은 프로젝트에서 새 대화 탭을 여세요
  • 아주 큰 저장소는 클로드 코드에서 연결하는 편이 안정적입니다

잘 쓰는 요령

  • 단순하게 시작해 층을 쌓기 – 기본 배치부터, 인터랙션과 예외 처리는 나중에
  • 구체적으로 피드백 – “이상해” 대신 “입력칸 사이 간격 8px로”
  • 반응형을 초반에 – 모바일·태블릿·데스크톱 중 무엇에 맞출지 먼저 말하기
  • 대안 요청 – 방향이 애매하면 2~3개를 비교
클로드 디자인(Claude Design) 사용법 한눈에 보기 표

정리

클로드 디자인은 대화로 시안과 프로토타입을 만드는 도구입니다. 목표·배치·내용·대상을 담아 요청하고, 큰 변화는 대화로, 세부는 댓글로, 미세 조정은 직접 편집으로 다듬으면 됩니다. 버전 기록이 없으니 방향을 바꿀 때는 먼저 저장을 요청하시기 바랍니다.

※ 이 글은 2026년 9월 기준 Anthropic(클로드) 고객센터 공식 안내를 참고했습니다. 메뉴 이름과 한도는 바뀔 수 있으니 최신 내용은 공식 페이지에서 확인하시기 바랍니다.