일하는 ai

32. 클로드 디자인 결국 디자인까지 정복해버린

13 min read

-

Anthropic이 몇 시간 전에 공개한 Claude Design을 직접 만져보는 영상이다. 코드팩토리는 이걸 단순히 또 다른 디자인 툴로 보지 않고, 디자인 시스템을 만들고 와이어프레임을 잡고 프로토타입과 프레젠테이션 덱까지 만든 다음, 마지막에 클로드 코드로 바로 넘기는 풀스택 흐름의 앞단이 생겼다고 해석한다. 특히 모든 작업이 하나의 컨텍스트 안에서 이어진다는 점을 가장 중요하게 짚는다.

flowchart LR
A[디자인 툴과 구현 툴이 분리돼 있음] --> B[Claude Design에서 디자인 시스템 생성]
B --> C[와이어프레임·프로토타입·슬라이드덱 제작]
C --> D[Claude Code로 그대로 핸드오프]

핵심 요약

  • Claude Design은 Stitch, Paper, Pencil이 하던 영역을 Anthropic 방식으로 다시 구현한 도구로 소개된다
  • 시작점은 디자인 시스템 세팅이다. 회사 정보, GitHub 링크, 소스 코드, Figma 파일 등을 넣으면 엑센트 컬러, 아바타, 배지 같은 시스템 정보를 먼저 뽑아 준다
  • 작업 흐름은 두 갈래다. 하나는 프로토타이핑 툴, 다른 하나는 슬라이드덱 제작이며, 템플릿 기반 반복 작업도 가능하다
  • 데모에서는 SNS 서비스를 예시로 와이어프레임을 만들고, 선택한 옵션을 기반으로 완전한 프로토타입과 소개용 슬라이드덱까지 생성한다
  • 마지막에는 ZIP, PDF, PPTX, Canva 내보내기뿐 아니라 Claude Code 핸드오프까지 지원해, 디자인 시스템 레퍼런스를 그대로 구현 단계로 넘길 수 있다

왜 지금 중요한가

지금까지 클로드 코드는 구현 능력은 강했지만, 그 앞단의 와이어프레임이나 디자인은 다른 툴로 넘겨야 했다. 이 영상이 흥미로운 이유는 그 분리된 앞단을 Anthropic 생태계 안으로 끌어왔다는 데 있다. 디자인 시스템, 와이어프레임, 프로토타입, 슬라이드덱, 코드 구현이 한 컨텍스트 안에 묶이면 의사결정 손실이 줄고 핸드오프가 훨씬 짧아진다.

주요 내용

먼저 디자인 시스템을 세팅한다

영상에서 가장 먼저 보여주는 건 디자인 시스템 세팅 화면이다. 회사 정보, GitHub 링크, 소스 코드, Figma 파일 같은 입력을 주면, Claude Design이 엑센트 컬러, 아바타, 배지 같은 요소를 뽑아낸다. 그리고 왼쪽 채팅을 통해 이 요소들을 계속 수정할 수 있다.

이 상태에서 New Design System을 누르면, 방금 만든 시스템을 바탕으로 바로 후속 디자인 작업을 시작할 수 있다. 코드팩토리는 이 흐름을 Stitch에서 먼저 디자인 시스템이 나오고 그 다음 컴포넌트가 생기는 과정과 비슷하다고 설명한다.

와이어프레임 생성은 질문 기반으로 진행된다

데모 주제는 SNS다. 와이어프레임부터 만들고, 마음에 드는 시안을 고른 뒤, 실제 디자인으로 올리고, 마지막에는 프레젠테이션 덱까지 만든다. Claude Design 안에서 이 전 과정을 다 보여 주겠다는 구성이다.

와이어프레임 생성을 시작하면 단순히 “SNS 만들어 줘”에서 끝나지 않고, 클로드가 질문을 던지며 의도를 구체화한다. 영상에서는 사진 이미지 중심, 웹 플랫폼, 타깃 20대 대학생, 피드·게시물 상세·프로필 세 화면을 선택한다. 또 시안 수는 3개로 정하고, 차이점은 피드백 형태, 레이아웃 구조 차이, 소셜 그래프 구조로 잡는다. 톤 앤 매너는 밝고 친근함, 그리고 러프한 스케치 스타일로 지정한다.

여기서 한 가지 버그도 같이 언급한다. 리서치 프리뷰 상태라서 작업을 시작한 뒤 홈으로 나가면 스트림이 다시 싱크되지 않아 진행 과정을 볼 수 없다고 한다. 작업 자체는 끝나지만, 여러 작업을 동시에 하려면 새 탭을 열어서 돌리는 편이 낫다고 설명한다.

선택한 옵션을 기반으로 프로토타입을 올린다

와이어프레임이 생성되면 옵션별로 시안을 비교할 수 있다. 예시에서는 플로우 그리드 형태의 이미지 피드, 게시물 상세, 프로필 화면이 나온다. 그 상태에서 다크 모드, 콤팩트 정도, 2열/3열/4열, 그룹 타임라인 같은 변수들을 계속 바꿔볼 수 있다.

그다음 단계가 핵심이다. 왼쪽의 디자인 파일 시스템에 생성된 SNS wireframe.html을 기반으로, 특정 카드 옵션과 라이트 모드, 기본 밀도, 3열 피드 레이아웃, 깔끔한 스타일을 선택해 “완전한 프로토타입을 만들어 달라”고 요청한다. 그러면 테스크 리스트가 붙고 실제 프로토타입이 생성된다.

완성된 결과물은 정배율에서 꽤 선명하게 보이고, 버튼도 실제로 작동한다. 올리기 버튼을 누르면 다이얼로그가 뜨고, 2배열·3배열·4배열, 콤팩트·랄락·민트 같은 옵션 변경도 바로 먹는다. 또 Edit 버튼으로 특정 요소를 선택해 인라인이나 너비를 수정할 수 있고, Comment로 특정 부분만 집어서 프롬프트를 달 수도 있다. 즉, 결과물이 그냥 정적인 이미지가 아니라 인터랙션을 가진 디자인 파일이라는 점이 강조된다.

슬라이드덱과 Claude Code 핸드오프까지 이어진다

Claude Design이 웹 디자인에서 멈추지 않는다는 걸 보여주기 위해, 발표자는 바로 이어서 “디자인한 웹사이트를 소개하는 슬라이드덱을 만들어 달라”고 요청한다. 그러면 디자인 파일 폴더 안에 슬라이드 파일이 생기고, 조금 기다리면 프레젠테이션이 완성된다. 실제로 디자인과 비슷한 톤과 무드를 유지한 채 정리된 덱이 생성되는 걸 보여준다.

마지막은 구현 단계 연결이다. Export 버튼을 누르면 ZIP 다운로드, PDF, PPTX, Canva 전송이 가능하고, 가장 중요한 옵션으로 Claude Code 핸드오프가 있다. 이걸 선택해 복사한 뒤 클로드 코드에 붙여 넣으면, 레퍼런스를 통해 디자인 시스템을 그대로 가져와 구현 작업으로 넘어갈 수 있다는 설명이다. 추가 프롬프트도 덧붙일 수 있어서, 구현 전 전달 정확도를 더 높일 수도 있다.

원문 발화 하이라이트

“디자인 시스템 만들고 와이어프레임 만들고 프로토타입 만들고 프레젠테이션 덱 만들고 클로드 코드한테 바로 넘겨 버리기.”

“이거 그냥 또 다른 스티치 아니야라고 생각할 수가 있는데 그렇지는 않아요.”

“클로드가 우리한테 질문을 했을 때 우리가 변수가 될 만한 부분들은 이것들을 했으면 좋겠어라고 했던 것들을 전부 다 잘 구현을 해 준다라는 걸 여러분들이 기억을 해 주시면 될 거 같고.”

“모든 버튼들이 제대로 작동하는 형태로 우리가 디자인을 받아볼 수가 있는 겁니다.”

“이 모든 것들이 하나의 컨텍스트에 있다라는게 생각보다 중요하다는 거 이제 여러분도 잘 알고 있을 거기 때문에 적극적으로 한번 활용을 해 보시면 좋을 것 같습니다.”

바로 실행해 보기

  1. 기존 브랜드 자산으로 디자인 시스템부터 만든다 — 회사 정보, GitHub 링크, 소스 코드, Figma 파일 중 있는 것부터 넣고 엑센트 컬러·배지·아바타 같은 시스템 요소를 먼저 뽑아 본다
  2. 와이어프레임 단계에서 변수 질문을 적극적으로 활용한다 — 타깃, 플랫폼, 핵심 화면, 시안 수, 레이아웃 차이, 소셜 그래프 구조 같은 항목을 명확히 답하면 시안 품질이 훨씬 안정적이다
  3. 프로토타입을 만든 뒤 바로 Claude Code로 넘긴다 — 디자인만 보고 끝내지 말고, Export의 Claude Code 핸드오프를 써서 같은 컨텍스트에서 구현까지 이어간다

참고

  • 영상: 클로드 디자인! 결국 디자인까지 정복해버린 앤트로픽! (영상URL)

영상 메타

수집 품질

  • 자막 세그먼트: 288개
  • 자막 문자수: 5262자
  • 챕터 추출: 0개
  • 콘텐츠 생성: Subagent 기반

AI 생성 도구를 활용해 초안을 구성했고, 원영상 발화와 공개 자료를 교차 확인해 정리했습니다.

그래프 뷰

백링크