클로드 디자인(Claude Design) 사용법, 디자인 작업 방식이 달라지고 있습니다

디자인 테크

3시간 전

조회수

Anthropic이 디자인 전용 기능인 클로드 디자인(Claude Design)을 출시했습니다. 리서치 프리뷰 단계임에도 시장 반응이 예사롭지 않습니다. 발표 당일 Figma 주가가 약 7% 하락할 정도로 업계의 관심이 쏠렸습니다.

Claude Code가 개발 작업 방식을 바꿔놓은 것처럼, 클로드 디자인이 디자인 작업 방식 자체를 바꿀 수 있다는 기대가 커지고 있는데요.

바이브 디자인 모드를 도입한 Google Stitch에 이어 구글 Stitch에 이어 클로드만의 감성으로 출시된 디자인 전용 기능 '클로드 디자인'은 어떤 식으로 디자인을 생성하고 처리하는지 확인해 보았습니다.

클로드 디자인 핵심 요약

1. 디자인 전용 AI 모드가 등장했습니다. Anthropic이 2026년 4월 17일 공개한 클로드 디자인은 자연어 프롬프트만으로 디자인 시안, 프로토타입, 슬라이드 같은 실무 결과물을 만들 수 있는 대화형 AI 디자인 도구로 발표 당일 Figma 주가가 약 7% 하락할 정도로 큰 파급력을 보이고 있습니다.

2. 브랜드 자산을 유지하면서 일관된 결과물을 만들 수 있습니다. 코드베이스나 디자인 파일을 업로드하면 팀의 색상, 타이포그래피, 컴포넌트를 자동으로 읽어 결과물에 반영해 브랜드 일관성을 유지한 채 작업을 이어갈 수 있어, 새 시안을 만들 때마다 스타일을 수동으로 맞추는 과정을 줄일 수 있습니다.

3. 한 번 생성하고 끝나는 방식이 아닙니다. 초안 생성 이후 프롬프트로 방향을 지시하거나 인라인 코멘트, 커스텀 슬라이더로 결과물을 단계적으로 다듬을 수 있고, Editor 기능을 통해 폰트 사이즈, 자간, 행간, 색상 등 텍스트 요소를 직접 수정할 수 있어 완성도를 계속 높여갈 수 있습니다.

4. 리서치 프리뷰 단계인 만큼 사용 전 확인이 필요합니다. 현재 Pro, Max, Team, Enterprise 플랜에서만 제공되며 플랜별 주간 사용량 한도가 있어 실무 도입 전 확인이 필요하고, 결과물이 빠르게 나오더라도 정보 정확성과 브랜드 톤은 사람이 최종 검토해야 합니다.

클로드 디자인(Claude Design)이란?

클로드 디자인(Claude Design)은 Anthropic Labs가 2026년 4월 17일 리서치 프리뷰로 공개한 대화형 AI 디자인 도구입니다. Claude Opus 4.7을 기반으로, 원하는 결과물을 텍스트로 설명하면 Claude가 초안을 만들어 줍니다.

이후 대화나 인라인 코멘트, 직접 편집, 커스텀 슬라이더로 방향을 다듬어 가는 방식으로 동작해 디자인 시안, 인터랙티브 프로토타입, 발표 자료, 원페이지 문서 같은 시각 결과물을 빠르게 만들 수 있습니다.

텍스트 프롬프트 외에 이미지, 문서, 코드베이스, 디자인 파일을 함께 올릴 수도 있고, 코드베이스와 디자인 파일을 업로드하면 팀의 색상, 타이포그래피, 컴포넌트를 자동으로 읽어 디자인 시스템을 구성해줍니다.

디자이너에게는 여러 방향의 시안을 빠르게 실험하는 도구로, 기획자나 마케터에게는 머릿속 아이디어를 시각화할 수 있는 대화형 디자인 도구로 주목받고 있습니다.

왜 지금 클로드 디자인(Claude Design)이 주목받을까?

1. 디자인 전용 AI 모드의 등장

클로드 디자인의 출시로 디자인 시안, 인터랙티브 프로토타입, 슬라이드 같은 디자인 실무 작업을 자연어 프롬프트만으로 진행할 수 있게 됐습니다.

기존 Claude가 텍스트와 코드 중심이었다면, 클로드 디자인은 디자인 작업에 특화된 전용 모드로 분리됐다는 점에서 의미가 다릅니다.

발표 당일 Figma 주가가 약 7% 하락한 것도 이 도구를 단순한 기능 추가가 아니라 디자인 소프트웨어의 직접적인 경쟁자로 읽었다는 신호이며, 자연어 프롬프트만으로 디자인 작업을 진행하는 바이브 디자인(Vibe Design) 방식이 실무의 표준이 될 수 있다는 기대를 반영하고 있습니다.

2. 비디자이너도 바로 쓸 수 있는 대화형 디자인 도구

클로드 간단한 문장만 입력해도 수준급의 디자인 형태를 생성합니다. 덕분에 기획자, 마케터, 제안서 작업이 많은 실무자도 아이디어를 시각적인 형태로 빠르게 꺼내볼 수 있습니다.

지원 범위도 디자인 시안, 인터랙티브 프로토타입, 프레젠테이션, 원페이저 등 실무 결과물 중심으로 구성되어 있어 전문적인 디자인 업무에 바로 활용할 수 있습니다.

클로드 코드가 개발 방식을 바꿔놓은 것처럼, 클로드 디자인이 디자인 작업 방식 자체를 바꿀 수 있다는 기대가 나오는 이유입니다.

3. AI 기반 브랜드 일관성 유지와 디자인 관리

클로드 디자인은 코드베이스나 디자인 파일을 업로드하면 팀의 색상, 타이포그래피, 컴포넌트를 자동으로 읽어 결과물에 반영합니다.

새 시안을 만들 때마다 브랜드 가이드에 맞게 수동으로 맞출 필요 없이, 기존 자산을 기반으로 일관된 결과물을 바로 뽑을 수 있습니다.

이후 수정이 필요하면 프롬프트로 방향을 지시하면서 브랜드 일관성을 유지한 채 결과물을 계속 다듬어 갈 수 있어, 전문 디자인 작업을 AI로 빠르게 처리할 수 있습니다.

클로드 디자인(Claude Design) 사용법

클로드 디자인은 Claude 웹 화면 좌측 내비게이션의 Design 버튼을 클릭하거나 https://claude.ai/design 주소로 직접 접속할 수 있습니다. 현재 리서치 프리뷰 단계로, 데스크탑 앱에서는 접속이 되지 않습니다.

접속하면 클로드 디자인 대시보드 화면이 나옵니다. 기존 작업물을 이어서 확인하거나, 샘플을 둘러볼 수 있고, 클로드 디자인에서 지원하는 4가지 유형을 활용해 디자인을 생성할 수 있습니다.

클로드 디자인에서 지원하는 작업 유형 4가지

프로토타입(Prototype)

앱이나 웹 서비스의 화면 흐름을 시각적으로 만들어볼 수 있습니다. Wireframe과 High fidelity 두 가지 방식을 선택할 수 있어, 초기 아이디어 검토용 와이어프레임부터 실제 디자인에 가까운 고퀄리티 시안까지 단계별로 작업할 수 있습니다.

슬라이드 덱(Slide deck)

발표 자료를 대화형으로 만들 수 있습니다. 내용을 설명하면 Claude가 슬라이드 구조와 레이아웃을 잡아주기 때문에, 내용 구성에만 집중하면서 빠르게 프레젠테이션 초안을 완성할 수 있습니다.

템플릿 기반 작업(From template)

처음부터 만들기 부담스럽다면 템플릿을 기반으로 시작할 수 있습니다. 기본 구조가 잡힌 상태에서 내용과 스타일만 조정하면 되기 때문에, 결과물을 더 빠르게 뽑아야 하는 상황에 유리합니다.

기타(Other)

위 세 가지 유형에 해당하지 않는 작업도 요청할 수 있습니다. 원페이저, 인포그래픽, 마케팅 자료처럼 형식이 정해지지 않은 결과물도 자연어로 설명하면 Claude가 형태를 제안하고 만들어줍니다.

Figma 디자인 커뮤니티에서

디자인 시스템 레퍼런스 찾기

Figma 디자인 커뮤니티의 Untitled UI를 래퍼런스로 활용합니다.

* 이미지 출처: Untitled UI – FREE Figma UI kit and design system v2.0 페이지

Figma Community에는 다양한 디자인 시스템이 오픈소스로 공개되어있습니다. 그 중 모던하고 깔끔한 분위기의 Untitled UI 디자인 시스템을 선택했습니다.

Untitled UI는 CC BY 4.0 라이선스가 적용되어 출처를 밝히면 상업적으로도 사용할 수 있습니다.

좌측의 Figma에서 열기 버튼을 클릭해 디자인 시스템을 Figma에서 엽니다.

Untitled UI 디자인 시스템에는 컬러부터 타이포그래피, 로고, 아이콘, 이펙트 스타일까지 다양한 요소들이 정리되어 있어 디자인 작업에 유용하게 활용할 수 있습니다.

피그마에서 Untitled UI의 디자인 파일을 로컬 복사본으로 저장했습니다.

클로드 디자인에서 사용하기 위해 좌측 파일 메뉴에서 로컬 복사본 저장을 클릭해 파일을 저장합니다.

클로드 디자인으로

UX/UI 용 디자인 시스템 생성하기

클로드 디자인에서 디자인 시스템을 생성하려면 우측 상단의 Design System을 클릭한 뒤, 좌측의 Set up design system 버튼을 클릭합니다.

디자인 시스템 설정 화면이 열리면 디자인 시스템의 세부 항목을 입력할 수 있습니다. 첫 번째 란에는 생성할 디자인 시스템의 컨셉을 입력합니다.

AI 독서 큐레이션을 만들기 위해 ‘오늘의 독서’에 대한 프롬프트를 입력했습니다.

GitHub 링크나 디자인 에셋 등 다양한 리소스를 디자인 시스템 예시로 추가할 수 있습니다. 여기서는 피그마 커뮤니티에서 다운받은 디자인 시스템 레퍼런스 파일을 Upload a .fig file 항목에 추가합니다.

화면 하단의 프롬프트 창에 세부 내역을 추가로 입력할 수 있습니다. 원하는 내용을 작성한 뒤 Continue to generation 버튼을 눌러 디자인 시스템을 생성합니다.

생성하기 버튼을 클릭하면 디자인 시스템 생성에 약 5분이 소요된다는 안내 메시지가 표시되며 생성이 시작됩니다.

입력한 프롬프트를 바탕으로 UX/UI용 디자인 시스템이 생성되었습니다. 전체 레이아웃부터 폰트, 컬러, 아이콘, 로고까지 피그마에서 추가한 Untitled UI 디자인 시스템을 기반으로 구성되었습니다.

독서 큐레이션 웹 페이지 생성하기

* 이미지 출처: Figma 디자인 커뮤니티 - Sweet Flower Shop

생성한 디자인 시스템을 활용해 서비스용 웹 페이지 디자인도 만들 수 있습니다. 웹 페이지의 컨셉과 분위기를 잡기 위해 피그마 커뮤니티에서 웹 디자인 레퍼런스를 검색하던 중 Sweet Flower Shop의 디자인을 레퍼런스로 참고했습니다.

클로드 디자인 시스템 프롬프트 창에 레퍼런스 이미지와 함께 디자인 세부 내역을 입력했습니다.

프롬프트 창에 피그마 커뮤니티에서 찾은 레퍼런스 복사본을 붙여넣은 뒤 웹 페이지에 대한 내용을 입력합니다. 서비스 설명부터 페이지 구성, 세부 내용까지 상세하게 입력할수록 더 높은 퀄리티의 결과물을 얻을 수 있습니다.

AI 독서 큐레이션 웹 서비스 페이지가 완성됐지만, 디자인 시스템의 컨셉이 온전히 반영되지 않아 의도한 방향과 다른 결과물이 나왔습니다. 프롬프트 창에 수정할 내용과 함께 디자인 시스템 컨셉을 따르도록 요청하면 원하는 방향으로 다듬을 수 있습니다.

디자인 시스템에 맞춰 웹 페이지 디자인이 수정되었습니다. 처음보다 전체적으로 밝고 세련된 느낌이 잘 살아났습니다.

클로드 디자인에서 생성된

웹 페이지의 디자인 폰트 수정하기

클로드 디자인은 생성된 디자인 폰트를 수정할 수 있는 Editor 기능도 제공합니다. 상단 중앙의 Design Files 버튼을 클릭하면 생성된 디자인 소스를 확인할 수 있습니다. 수정할 파일을 선택한 뒤 우측의 Open 버튼을 클릭합니다.

클로드 디자인에서 생성한 웹 페이지 중 수정이 필요한 페이지를 선택합니다.

수정이 필요한 페이지를 선택한 뒤 우측의 Open 버튼을 클릭합니다.

우측 상단의 Edit 버튼을 클릭합니다.

디자인의 폰트를 수정할 수 있는 Editor 기능이 활성화됩니다. 폰트 사이즈, 자간, 행간, 색상, 문구 등 텍스트 요소를 원하는 대로 직접 수정할 수 있습니다.

클로드 디자인(Claude Design)

활용 노하우 4가지

1. 완성본보다 초안 도구로의 접근

클로드 디자인은 한 번에 최종본을 만드는 도구보다, 아이디어를 빠르게 시각화하고 방향을 잡는 데 더 잘 맞습니다.

디자인 시안, 프로토타입, 슬라이드, 원페이저처럼 방향이 정해지지 않은 초기 단계에서 꺼내보는 용도로 접근하면 훨씬 효율적입니다.

처음부터 완성도를 기대하기보다, 빠르게 형태를 잡고 거기서 수정해 나가는 흐름에 맞추는 것이 좋습니다.

2. 목적 · 대상 · 톤을 함께 넣는 프롬프트 작성

막연하게 요청하는 것보다 "누구를 위한 자료인지", "어떤 상황에서 쓰는지", "어떤 분위기를 원하는지"를 함께 설명해야 결과가 더 안정적으로 나옵니다.

클로드 디자인은 대화형으로 결과물을 만드는 구조라서, 프롬프트가 구체적일수록 수정 횟수를 줄이고 원하는 방향에 더 빨리 가까워질 수 있습니다.

3. 수정 포인트를 나눠서 단계별 요청

전체를 한 번에 바꾸게 하기보다 레이아웃, 문구, 색상, 정보 구조처럼 수정 포인트를 나눠서 요청하는 편이 훨씬 효율적입니다.

클로드 디자인의 강점은 단발성 생성보다 반복 수정에 있기 때문에, 대화를 주고받으면서 단계적으로 결과물을 다듬어 가는 방식이 실제 사용에 더 잘 맞습니다.

4. 기존 자료를 먼저 올리고 작업 시작하기

첫 프롬프트를 입력하기 전에 코드베이스나 디자인 파일을 미리 업로드해두는 것이 좋습니다.

이후 만드는 결과물에 팀의 색상, 타이포그래피, 컴포넌트가 자동으로 반영되어 매번 스타일을 수동으로 맞추는 과정을 줄일 수 있습니다.

클로드 디자인(Claude Design)

사용 시 주의할 점

1. AI 결과물의 최종 검토는 반드시 사람이 해야 합니다

클로드 디자인은 시각 결과물을 빠르게 만드는 데 강점이 있지만, 현재 리서치 프리뷰 단계입니다. 결과물이 빨리 나온다고 해서 그대로 최종본으로 확정하기보다, 정보 정확성, 표현 방식, 브랜드 톤이 맞는지 사람이 한 번 더 검토하는 과정이 필요합니다.