책에 포함된 노트Claude Design 완전 정복: 아이디어를 프로토타입과 제품으로 바꾸는 실전 가이드

3장. Claude Design이 기존 도구와 다른 점

2026-04-28Views 39약 8분생성형 AI 활용

3장. Claude Design이 기존 도구와 다른 점

많은 사람이 AI 디자인 도구를 떠올릴 때 먼저 생각하는 것은 "프롬프트를 넣으면 예쁜 화면이 나온다"는 장면이다. 하지만 Claude Design의 핵심은 화면 한 장을 그럴듯하게 뽑아내는 데 있지 않다. 진짜 차이는 그 화면이 어디서 시작되고, 무엇을 읽고, 다음 단계로 어떻게 이어지느냐에 있다.¹²

이 점을 한 문장으로 요약하면 이렇다. 다른 도구가 종종 "빈 캔버스에서 그럴듯한 결과물"을 만든다면, Claude Design은 "이미 존재하는 제품의 언어를 읽고 그 언어로 다음 화면을 이어서 만든다". 그래서 Claude Design은 단순 이미지 생성기가 아니라, 디자인과 개발 사이의 번역 비용을 줄이는 워크플로 도구로 보아야 한다.

1부. 왜 지금 Claude Design인가 / 3장. Claude Design이 기존 도구와 다른 점

차이는 결과물이 아니라 출발점에 있다

겉으로만 보면 Claude Design도 다른 생성형 도구와 비슷해 보인다. 텍스트로 설명하면 프로토타입이 나오고, 수정 요청을 하면 다시 다듬어진다. 여기까지만 보면 "AI가 만든 목업 도구"처럼 보이기 쉽다.

하지만 구조는 꽤 다르다. Anthropic은 Claude Design을 단순 생성 툴이 아니라, 팀의 코드베이스와 디자인 파일을 읽어 공통의 디자인 시스템을 먼저 만들고, 이후 프로젝트마다 그 시스템을 자동 적용하는 도구로 설명한다.¹ Scroll의 분석도 같은 지점을 짚는다. Claude Design의 핵심 차별점은 예쁜 HTML을 만드는 능력 자체보다, GitHub 저장소와 Figma 파일에서 색상, 타이포그래피, 컴포넌트, 간격 체계 같은 디자인 시스템을 추출해 새 작업에 그대로 반영하는 데 있다는 것이다.²

이 차이는 실무에서 아주 크게 느껴진다. 빈 페이지에서 시작하는 도구는 보통 "멋있어 보이는 첫 시안"에는 강하다. 하지만 이미 운영 중인 서비스에 새 기능을 붙일 때는 이야기가 달라진다. 그때 필요한 것은 새로운 화면이 아니라, 기존 제품과 어색하지 않게 이어지는 화면이다. Claude Design은 바로 그 지점을 노린다.

코드베이스를 읽는다는 말의 진짜 의미

"코드베이스를 읽는다"는 표현은 얼핏 마법처럼 들리지만, 실제 의미는 꽤 현실적이다. Claude Design은 온보딩 과정에서 팀이 제공한 자산을 분석해 재사용 가능한 시각 규칙을 뽑아낸다. 공식 가이드에 따르면 그 대상은 코드베이스, 슬라이드, 각종 브랜드 자산, 디자인 참고 자료가 될 수 있으며, 여기서 컴포넌트, 색상, 타이포그래피, 패턴을 추출해 계정 차원의 디자인 시스템으로 만든다.³

쉽게 말해, Claude Design은 "이 회사다운 화면"을 나중에 그때그때 추측하는 대신, 먼저 회사의 시각 문법부터 배운다. 예를 들어 코드 안에 다음과 같은 흔적이 이미 들어 있을 수 있다.

버튼은 항상 8px 라운드이고, 주요 액션은 파란색 계열이다.
본문 텍스트는 특정 폰트와 크기 체계를 따른다.
카드, 배지, 모달의 간격이 일정한 스케일을 공유한다.
특정 컴포넌트 이름과 변형 규칙이 반복된다.

이런 정보는 디자이너의 머릿속에만 있는 것이 아니라, 이미 제품 코드 곳곳에 박혀 있다. Tailwind 설정, CSS 변수, 토큰 파일, 컴포넌트 이름, 공통 스타일, 레이아웃 규칙이 바로 그 증거다. Claude Design의 강점은 이 흔적들을 읽어 "아, 이 팀은 이런 방식으로 화면을 만든다"고 파악하는 데 있다.¹²

그래서 같은 "대시보드 하나 만들어줘"라는 요청도 결과가 달라진다. 일반 생성 도구는 세상 어딘가의 익숙한 SaaS 대시보드를 닮은 화면을 내놓기 쉽다. 반면 Claude Design은 이미 운영 중인 제품의 버튼 모양, 여백 감각, 제목 스타일을 따라가며 새 화면을 만든다. 즉, 초안이지만 낯설지 않은 초안이 나온다.

Figma 파일을 읽는다는 말의 진짜 의미

코드만 읽는다고 해서 모든 것이 해결되지는 않는다. 실제 팀의 디자인 의도는 Figma 안에도 많이 들어 있다. 컴포넌트 구조, 변수, 토큰, 프레임 레이아웃, 텍스트 스타일, 색상 체계 같은 것들이다. Anthropic의 Figma 플러그인 설명에 따르면 Claude는 Figma 파일에서 레이아웃, 타이포그래피, 색상 같은 구조화된 디자인 데이터를 추출하고, 디자인 변수와 토큰을 가져오며, Code Connect를 통해 Figma 컴포넌트를 코드베이스의 실제 구현과 연결할 수 있다.⁴

여기서 중요한 것은 "스크린샷을 본다"와 "디자인 문맥을 읽는다"의 차이다. 스크린샷만 보면 화면의 겉모습은 알 수 있어도, 어떤 버튼이 공통 컴포넌트인지, 어떤 색이 브랜드 기본 토큰인지, 같은 카드라도 어떤 변형이 있는지는 알기 어렵다. 반면 구조화된 디자인 데이터를 읽으면 화면이 단순 그림이 아니라 시스템으로 보이기 시작한다.⁴

이건 사람으로 비유하면 이렇다. 스크린샷만 보는 AI는 옷을 보고 따라 그리는 화가에 가깝다. Figma 파일과 코드베이스를 함께 읽는 AI는 옷장 정리법, 계절별 코디 규칙, 자주 입는 브랜드까지 파악한 스타일리스트에 가깝다. 둘 다 겉모습은 비슷하게 흉내 낼 수 있지만, 두 번째 쪽이 다음 옷을 더 자연스럽게 고른다.

그래서 결과물이 '그림'이 아니라 '워크플로 산출물'이 된다

이 지점에서 Claude Design의 성격이 분명해진다. 이 도구의 목적은 한 장짜리 시안 제작에서 끝나지 않는다. Anthropic은 Claude Design이 프로토타입, 와이어프레임, 슬라이드, 원페이저 같은 결과물을 만들고, 이를 대화, 인라인 코멘트, 직접 수정, 슬라이더 같은 세밀한 조정 방식으로 다듬은 뒤, 최종적으로는 Claude Code로 핸드오프하는 흐름을 제공한다고 설명한다.¹

즉, Claude Design의 산출물은 "봐주세요" 하고 끝나는 PNG가 아니다. 다음 행동을 부르는 작업물이다. 누군가는 그 위에 코멘트를 남기고, 누군가는 텍스트를 직접 고치고, 누군가는 같은 브랜드 시스템을 유지한 채 다른 버전을 더 만들어 비교할 수 있다. 디자인이 파일이 아니라 대화의 중심이 되는 셈이다.

이 흐름은 Figma와 연결될 때 더 분명해진다. Figma는 Claude Code에서 실행 중인 실제 UI를 캡처해 편집 가능한 Figma 프레임으로 가져오는 기능을 소개하면서, 코드의 강점은 하나의 상태를 빠르게 수렴하는 데 있고, 캔버스의 강점은 여러 방향을 나란히 펼쳐보는 데 있다고 설명했다.⁵ 이 관점은 Claude Design을 이해하는 데도 잘 맞는다. Claude 생태계는 이제 아이디어를 만들고, 프로토타입으로 시험하고, 캔버스에서 비교 검토하고, 다시 코드로 넘기는 흐름 전체를 연결하려 한다.¹⁵

다시 말해 Claude Design은 "멋진 첫 화면 생성기"가 아니라, 아이디어를 팀이 검토 가능한 형태로 만들고, 그 의도를 구현 단계까지 잃지 않게 이어주는 중간 허브에 가깝다.

기존 도구와 비교하면 구조가 이렇게 다르다

이 장에서는 자세한 경쟁 구도보다 구조적 차이만 잡아두는 것이 중요하다.

일반 이미지 생성기는 시각적 결과는 빠르게 만들지만, 그 결과가 팀의 실제 디자인 토큰이나 컴포넌트 체계와 연결되지 않는 경우가 많다.
전통적인 디자인 도구는 정교한 편집과 협업에 강하지만, 기존 코드베이스에서 디자인 시스템을 자동 추출해 새 작업에 입히는 문제는 별도 과정이 필요하다.
개발자용 UI 생성 도구는 코드 출력이 빠르지만, 이미 운영 중인 제품의 시각 언어를 저장소 전체에서 읽어 내재화하는 기능은 제한적일 수 있다.
Claude Design은 바로 그 사이, 즉 "브랜드 일관성 있는 초안 생성"과 "개발 핸드오프" 사이의 끊긴 구간을 메우는 쪽에 초점이 맞춰져 있다.²

이 차이 때문에 Claude Design을 평가할 때 "Figma보다 픽셀 편집이 약하다"거나 "v0처럼 바로 코드만 내놓지 않는다"는 식으로 보면 절반만 보게 된다. Claude Design이 겨냥하는 승부처는 다른 곳이다. 디자인 시스템을 이해한 상태로 시각 결과물을 만들고, 그 결과를 다시 구현 워크플로로 넘기는 과정 전체를 얼마나 매끄럽게 만드는가가 핵심이다.

예시 하나로 보면 더 쉽다

가령 한 PM이 기존 SaaS 제품에 "사용량 초과 경고와 업그레이드 유도 화면"을 추가해야 한다고 해보자. 보통은 요구사항 문서를 쓰고, 디자이너가 Figma에서 몇 가지 시안을 만들고, 엔지니어가 그걸 코드로 옮기면서 미묘한 어긋남이 생긴다. 버튼 크기는 맞는데 여백이 다르고, 경고 배지는 있는데 톤이 브랜드와 살짝 어색하고, 헤더는 비슷하지만 정확히 같은 컴포넌트는 아니다.

Claude Design식 접근은 다르다. 먼저 기존 코드베이스와 디자인 파일을 읽는다. 그러면 이미 제품에 쓰고 있는 경고 색상, 버튼 계층, 제목 스타일, 카드 구조를 바탕으로 첫 시안을 만든다.¹²⁴ PM은 그 결과를 보고 "업그레이드 버튼을 더 강하게"라거나 "팀 요금제 문구를 더 안심되게" 같은 식으로 수정한다. 필요하면 Figma 쪽에서 코드 기반 UI를 편집 가능한 프레임으로 가져와 여러 안을 비교할 수도 있다.⁵ 그리고 방향이 정해지면 Claude Code로 넘긴다.¹

핵심은 중간 단계마다 사람이 완전히 새로 번역하지 않아도 된다는 점이다. 아이디어가 디자인으로 바뀔 때, 디자인이 구현으로 바뀔 때, 같은 시스템이 계속 따라다닌다. 이 연속성이 바로 워크플로 도구의 힘이다.

물론 자동 추출이 만능은 아니다

여기서 한 가지는 차분하게 짚고 넘어가야 한다. Claude Design이 추출하는 디자인 시스템은 말 그대로 "추출"이면서 동시에 "추론"이다. Scroll이 지적하듯, 드문 변형 컴포넌트나 맥락에 따라 달라지는 토큰, 예외적인 규칙까지 언제나 완벽하게 읽어내는 것은 아니다.²

이 말은 곧, Claude Design이 팀의 디자인 리드를 완전히 대체한다는 뜻이 아니라는 뜻이기도 하다. 다만 초안의 출발점을 훨씬 더 제품 친화적으로 바꿔준다는 점은 분명하다. 예전에는 제법 멋진데 우리 것 같지는 않은 결과물이 나왔다면, 이제는 꽤 우리 것 같은 상태에서 출발할 수 있게 된 셈이다.