엔트로픽이 클로드 디자인을 출시한 날, 피그마 주가가 7% 빠졌습니다. 어도비도 내렸고 관련주가 동반 하락했죠. 하루 만에 디자인 소프트웨어 업계 전체의 밸류에이션이 다시 매겨진 겁니다.
시장이 이렇게 반응한 건 AI가 그림을 그려주기 때문이 아닙니다. 클로드 디자인이 건드린 건 디자인에서 가장 비싼 부분, 시스템 설계와 일관성 유지거든요.
피그마 주가 7% 하락, 클로드 디자인이 건드린 것
클로드 디자인 출시 한 달 전, 엔트로픽에서 이 프로젝트를 총괄하는 제니 웬이 기존 디자인 프로세스는 끝났다는 발언을 했습니다. 피그마에서 피그잼을 성공시킨 디자인 디렉터 출신이죠.
리서치, 발산, 수렴을 반복하는 더블 다이아몬드 프로세스. 디자이너들이 오래 따르던 방법론인데, 엔지니어가 클로드 일곱 개를 동시에 돌리며 코드를 찍어내는 속도에서 디자이너가 몇 달씩 사이클을 밟는 건 팀 전체의 병목이 된다는 뜻이었거든요.
빠르게 만들고, 바로 검증하고, 즉시 수정한다. 클로드 디자인은 이 사이클을 현실로 만드는 도구입니다.
프로토타입, 슬라이드, 템플릿 — 클로드 디자인의 4가지 작업 유형
현재 데스크탑 앱에서는 지원되지 않고, 웹 브라우저 버전의 클로드에서만 접근할 수 있습니다. 왼쪽 사이드바에서 디자인 메뉴를 클릭하면 진입하죠.
작업 유형은 네 가지입니다.
- 프로토타입 — 인터랙티브한 앱/웹 UI 제작
- 슬라이드 덱 — 발표용 프레젠테이션 제작
- 프롬 템플릿 — 기존 템플릿 기반으로 시작
- 기타 — 위 세 유형에 해당하지 않는 결과물
각 유형 위에 디자인 시스템을 얹어서 쓸 수 있는데, 이게 클로드 디자인의 핵심 구조입니다.
3~6개월 걸리던 디자인 시스템 구축을 5분으로 줄인 방법
기업이 디자인 시스템을 구축하는 데 보통 3~6개월, 전담 인력 2~3명이 붙습니다. 컬러 토큰, 타이포그래피 스케일, 컴포넌트 라이브러리, 간격 체계, 아이콘 세트. 이걸 만들고 문서화하고 유지보수하는 게 디자인 조직의 가장 무거운 업무 중 하나거든요.
클로드 디자인은 이 작업을 5분으로 줄였습니다.
방법은 세 가지입니다. design.md 파일을 가져오거나, 피그마 파일을 업로드하거나, 폼을 직접 채워서 처음부터 만들 수 있죠. 깃허브의 awesome-design-md 레포에는 스포티파이, 애플, IBM, 코인베이스 등 유명 브랜드의 디자인 시스템이 마크다운으로 정리되어 있거든요. 복사해서 붙여넣으면 그 브랜드의 시스템이 재현됩니다.
생성하면 약 5분 후 18가지 항목이 만들어집니다. 브랜드 컬러, 서피스 컬러, 텍스트, 보더, 타이포 스펙, 버튼, 레디어스, 스페이싱 등이죠. 각 항목마다 승인 또는 수정 요청을 선택하고, 리뷰가 끝나면 Publish로 활성화합니다. 이후 만드는 모든 작업에 이 시스템이 자동 적용되거든요.
디자인 시스템이 있으면 슬라이드를 만들든, 앱 화면을 만들든 같은 컬러, 같은 간격, 같은 톤이 유지됩니다. 이 일관성을 유지하는 게 디자이너의 핵심 역할 중 하나였거든요.
슬라이드 덱 — PPT 일관성을 구조적으로 보장하는 방식
디자인 시스템을 적용한 프레젠테이션을 생성합니다. 프로젝트 생성 시 연결할 디자인 시스템을 선택하고, 발표자 노트 기능을 설정한 뒤 시작하죠.
기본 결과물만으로도 깔끔한데, 프롬프트 하나 추가로 WebGL 셰이더 배경, 애니메이션, 파티클 이펙트까지 입힐 수 있습니다. 프롬프트 두 번으로 구현되는 수준이죠.
기존 PPT나 키노트에서는 디자인 일관성을 유지하려면 마스터 슬라이드를 정교하게 세팅해야 했고, 사용자가 벗어나면 깨졌습니다. 클로드 디자인은 디자인 시스템이 모든 슬라이드에 강제 적용되기 때문에 비디자이너가 만들어도 일관성이 구조적으로 보장됩니다.
프로토타입 — 5개 화면을 라이트/다크 모드로 한 번에 생성
앱이나 웹의 키 스크린을 디자인합니다. 와이어프레임과 하이파이 중 선택할 수 있고, 디자인 시스템의 컴포넌트를 그대로 활용하죠.
프롬프트를 입력하면 클로드가 부족한 컨텍스트를 채우기 위해 질문을 먼저 합니다. 방향을 선택해주면 그에 맞게 생성하거든요. IBM 카본 디자인 시스템으로 Threads 같은 앱을 만든 사례를 보면, 홈피드, 상세, 작성, 프로필, 탐색 다섯 화면이 라이트/다크 모드 양쪽으로 한 번에 나옵니다.
3D 요소도 가능합니다. WebGL 지구본, 홀로그램 효과 카드, 인터랙티브 그래픽까지 프로토타입 안에서 구현되죠. 완성된 디자인은 클로드 코드로 핸드오프해서 개발로 바로 이어가거나 PDF, 코드, 캔바 등으로 내보낼 수 있습니다.
Tweaks, Drawing, Edit — 3가지 편집 도구의 역할
만들고 나서 수정하는 방법이 세 가지입니다.
Tweaks. 엑센트 컬러, 애니메이션 지속시간, 배경 강도 같은 옵션을 실시간으로 조정할 수 있는 슬라이더 패널이 생깁니다.
Drawing. 수정하고 싶은 영역을 직접 그려서 지정한 뒤 텍스트로 수정을 요청하죠. 하나의 요소만 지정해도 관련 요소 전체가 함께 맞춰지는 경우가 많거든요.
Edit. 특정 섹션을 선택해서 폰트, 사이즈, 컬러, 패딩 등을 직접 조정합니다. 코드 레벨의 세밀한 제어가 가능하죠.
이 세 가지가 조합되면 만들고, 전체 톤을 조정하고, 특정 부분을 수정하고, 미세 조정하는 사이클이 빠르게 돌아갑니다.
디자이너 역할의 변화, 도구 조작에서 시스템 설계로
디자이너가 필요 없어지는 건 아닙니다. 필요한 역량의 무게중심이 옮겨가는 거죠.
피그마에서 픽셀을 밀며 컴포넌트를 하나하나 그리는 작업은 줄어듭니다. 대신 디자인 시스템을 어떤 원칙으로 설계할 것인지, 생성된 결과물의 품질을 어떤 기준으로 판단할 것인지, 수정 방향을 어떻게 잡을 것인지. 이 세 가지가 핵심 역량이 되는 거죠.
교육 현장에서 확인되는 패턴이 있습니다. 같은 클로드 디자인을 써도, 디자인 시스템의 컬러 토큰 위계를 이해하는 사람이 쓴 프롬프트와 그렇지 않은 사람이 쓴 프롬프트는 결과물 퀄리티가 다릅니다. 도구 조작법보다 시스템 설계 원칙, 프롬프트로 의도를 구조화하는 능력, 결과물을 보고 수정 방향을 잡는 눈이 중요하거든요.
클로드 디자인 도입 전 비용, 환경, 역량 체크리스트
비용을 먼저 확인해야 합니다. 테스트와 시연만으로 47달러가 추가 발생했다는 보고가 있거든요. 주 단위로 프레젠테이션을 만드는 팀이라면 월 비용을 미리 산정해야 하죠.
환경도 체크해야 합니다. 현재 웹 브라우저 전용이고 데스크탑 앱에서는 지원되지 않습니다. 외부 깃허브 레포 링크를 직접 못 불러오는 경우가 있어서 design.md 내용을 복사 붙여넣기 하는 방식이 안정적이거든요.
높은 완성도를 원하면 프론트엔드 코드를 다루는 감각이 있는 편이 유리합니다. 셰이더 효과나 3D 요소는 외부 컴포넌트를 코드로 넣어줬을 때 퀄리티가 확 올라가거든요.
디자인 시스템 기반으로 일관된 결과물을 빠르게 생산하는 데 강한 도구입니다. 그동안 리소스 부족으로 시스템 없이 일하던 중소 조직들이 가장 큰 수혜를 볼 구조죠.
