Claude에 Design이라는 새로운 기능이 추가되었습니다.
Claude Design은 Anthropic이 4월 17일에 출시한 연구 프리뷰로, Anthropic Labs 제품 라인의 일부이며 현재 가장 강력한 비전 모델인 Opus 4.7에서 실행됩니다. Claude로 시각적 드래프트를 만들기 위해 설계되었습니다. 웹 프로토타입, PPT, 피치 덱, 랜딩 페이지, 원페이지 등이 모두 그 범위에 포함됩니다. 코드 저장소와 기존 디자인 파일을 읽고, 출력에 디자인 시스템을 적용하여 스타일이 기존 프로젝트와 일치하도록 할 수 있습니다.
가장 좋은 점은 최종 출력입니다. PDF/PPTX/HTML로 내보내거나 Canva로 보내는 것 외에도 모든 것을 핸드오프 번들로 패키징하여 로컬 Claude Code에 전달하여 프로젝트 코드를 계속 수정할 수 있습니다.
이 기능이 나오자마자 Figma의 주가에 타격을 입혀 6.89% 하락 마감했습니다.
Figma에 대한 간단한 소개: 온라인 협업 디자인 도구를 만드는 회사로, Adobe 및 Canva와 경쟁합니다. 전 세계 수천만 명의 디자이너가 이를 사용하여 디자인을 만듭니다. 사실 AI로 Figma를 제어할 수 있는 MCP가 이미 있었지만, 제 미적 감각이 너무 기본적이고 머릿속이 텅 비어 아이디어가 없어서 그 제품을 사용하지 않았습니다.
왜 정말 필요했는가
제가 위챗 공식 계정에 콘텐츠를 푸시하기 위해 만든 Obsidian 플러그인을 기억하시나요?
지금까지 모든 채널을 통틀어 0개를 팔았습니다. 정말 기쁘네요 (TAT).
물론, 제 기본적인 디자인 취향과 관련이 있을 가능성이 있습니다. 자랑하는 건 아닙니다.
원래 플러그인 UI가 어땠는지 한번 보세요:
두 줄의 툴바, 9개의 버튼이 한 줄에 빽빽이 들어차 있습니다. 포맷, 계정, 사전 설정 계정 이름, 계정 설정, 구매 활성화, 사용자 가이드, 렌더링 새로고침, HTML 복사, 위챗 공식 계정에 붙여넣기, 초안 발행… 모두 가장 눈에 띄는 곳에 쌓여 있습니다.
모든 기능이 다 있지만, 보기만 해도 지칩니다.
그 아래에는 엄청 긴 프롬프트가 있습니다: ‘아래 버튼을 클릭하여 컴퓨터에서 이미지를 선택하세요; 비워두면 플레이스홀더 커버를 사용합니다; 기본 커버가 설정된 경우 기본 커버를 사용합니다.’ 친구가 보고 말하길, ‘이건 누구를 위한 거야? 데이터베이스 필드 설명?’
그래서 Claude Design이 나왔을 때 바로 시도해봤습니다. 실제로 어떻게 작동하는지 봅시다.
사용 방법
먼저 Claude 웹 버전을 열고 왼쪽의 Design을 클릭하여 들어갑니다. 상단에 ‘New prototype’이라는 입력 상자가 있으며, 프로젝트 이름을 입력하면 됩니다.
Wireframe(저충실도) 또는 High fidelity(브랜드 자산이 포함된 고충실도)를 선택할 수 있습니다. 처음에는 대략적인 개념만 있으면 되므로 저충실도를 선택했습니다. 사실 완료하면 자동으로 업그레이드해 줍니다.
다음으로, 프로그램 폴더 경로를 알려주고, 수정하려는 페이지의 스크린샷을 보내세요.
먼저 몇 가지 질문을 합니다: 무엇을 변경할지, 무엇을 유지할지, 기본 작업은 무엇인지, 보조 작업은 무엇인지. 솔직하게 고백했습니다—‘초안 발행’과 ‘계정 전환’을 가장 강조하고 싶고, 나머지는 접을 수 있게 하고 싶다고.
질문을 마친 후, 스스로 실행되기 시작했습니다.
4가지 옵션을 제시했습니다
곧 wireframes.html 비교 페이지를 건네주었습니다.
가장 먼저 비교를 보여주었습니다. 현재 UI의 ‘죄악’을 빨간색 텍스트로 하나씩 나열했습니다:
- ‘두 줄의 막대가 미리보기를 압박함’
- ‘9개의 버튼’
- ‘중국어/영어 혼용 + 혼란스러운 기호 설명’
이 기능은 정말 놀라웠습니다. 단순히 수정을 도와줄 줄 알았는데, 실제로 내용을 보고 문제점을 지적해 주었습니다. 차가운 AI가 아니라 실제 디자이너와 대면하여 소통하는 느낌이었습니다.
그리고 4가지 옵션이 나왔습니다:
- 옵션 A: 단일 행 미니멀, 메인 버튼 ‘초안 발행’ + 계정 캡슐, 나머지 아이콘 +
⋯메뉴 - 옵션 B: 카드 브레드크럼 + 드로어, 메타 정보 편집 항목 유지
- 옵션 C: 사이드 레일(VSCode처럼), 상단 바는 제목만
- 옵션 D: 오른쪽 아래에 떠 있는 발행 카드, 기본 작업이 가장 두드러짐
가장 흥미로웠던 것은 옵션 D였습니다. ‘일반적인 디자인 규칙’과 ‘권장 순서’가 적힌 스티커 메모를 그렸습니다:
A → 가장 공간 절약, 낮은 학습 비용 D → 시각적으로 가장 예쁨, 가장 만족스러운 기본 작업 C → 파워 유저에게 친숙함(아이콘 라이브러리) B → 안전함, 메타 정보 편집 유지
이것은 단순히 ‘여기 몇 가지 옵션이 있습니다’가 아니라 ‘여기 몇 가지 옵션이 있으며 각각 누구를 위한 것인지 알려줍니다’입니다. 저는 오랫동안 플러그인을 만들어 왔지만, 아무도 진지하게 ‘이 버튼이 어디에 있어야 하는지’ 알려준 적이 없습니다.
계속 반복할 수 있습니다
방향을 선택한 후에도 계속 소통할 수 있습니다. 왼쪽에는 채팅 상자가 있고, 오른쪽에서 Edit을 클릭하여 요소를 직접 선택하고 수정할 수 있습니다(하지만 설정이 너무 전문적이어서 이해할 수 없어 건너뛰었습니다). Draw를 클릭하여 미리보기에 원과 화살표를 그리고 ‘이것을 여기로 옮기고 싶다’고 말할 수 있습니다:
Draw 기능이 정말 놀랍다고 생각합니다. 버튼에서 오른쪽 아래로 매우 대략적인 화살표를 그렸는데 실제로 이해했습니다. 아마 Opus 4.7의 시각 인식 대규모 업그레이드와 관련이 있을 것입니다(앞서 언급했듯이 이미지 인식 정밀도를 3.75메가픽셀로 높였습니다).
툴바에서 레이아웃으로
메뉴 바를 수정한 후, 여러 가지 기사 레이아웃 스타일을 만들어 달라고 요청했습니다. 결국 제 플러그인의 주요 작업은 Markdown을 위챗 공식 계정에 게시할 수 있는 형식으로 변환하는 것이니까요.
새 페이지를 열었고 제목은 ‘Markdown을 읽을 가치가 있는 위챗 기사로 포맷하기’였습니다. 오른쪽 상단에는 Tweaks 버튼이 있어 클릭하면 글꼴 크기, 두께, 색상, 줄 간격 등을 Figma처럼 조정할 수 있습니다:
이것은 가짜가 아니라 실제로 클릭하고 전환할 수 있는 페이지입니다. 이 상호작용은 터미널에서 Claude Code로 하는 것보다 훨씬 좋습니다. Claude Code에서는 완료될 때까지 기다려야 효과를 볼 수 있고, 그런 다음 수정을 요청해야 합니다. 여기서는 실시간 미리보기를 얻을 수 있습니다.
최종 확정 후 오른쪽 상단의 Export를 클릭합니다. 여러 옵션이 제공됩니다: PPT 다운로드, PDF 내보내기, 독립형 HTML 내보내기, 또는 마지막 옵션인 **‘Handoff to Claude Code’**는 전체 디자인 파일을 로컬 Claude Code로 보내 코딩을 계속합니다.
이것이 전체 체인에서 가장 좋은 부분입니다.
웹에서 디자인한 후 명령어를 생성해 줍니다. 터미널에 복사하여 붙여넣으면 로컬 Claude Code가 작업을 이어받습니다:
> Fetch this design file, read its readme,
and implement the relevant aspects of the design.
Implement: option-b-hifi.html
그런 다음 디자인 패키지를 읽고, 현재 코드를 살펴보고, 수정할 파일을 파악한 후 마지막으로 제 플러그인 소스 코드를 모두 직접 변경합니다. 디자인 페이지는 option-b-hifi.html을 제공했고(결국 옵션 B의 고충실도 버전을 선택했습니다), Claude Code는 디자인 파일에서 색상, 글꼴 크기, 간격을 읽어 제 React 코드에 적용합니다.
전체 과정에서 단 한 줄의 코드도 작성하지 않았습니다.
최종 결과
어쨌든 원래보다 훨씬 낫다고 생각합니다. 실제 디자이너가 더 잘했을 수도 있지만, 개인 플러그인으로는 충분합니다(원래 디자인과 비교하면).
제목 + 메타 정보가 한 줄로 접히고, 계정은 캡슐(녹색 활성 점 포함)이 되었으며, 기본 작업은 오른쪽에 있는 보라색 ‘초안 발행’ 버튼 하나뿐이고, 나머지는 모두 ⋯ 메뉴에 숨겨졌습니다.
알고 보니 제 ‘기능’ 더미는 디자인 감각이 부족한 것이 아니라, 아무도 절충을 도와주지 않았던 것이었습니다.
버튼을 추가하는 것은 쉽지만, UI에서 버튼을 제거하는 것은 개발자에게 직관에 반합니다. 항상 ‘누군가 필요하면 어쩌지?‘라고 생각하니까요. 하지만 디자이너는 그 결정을 대신 내려줍니다: ‘이것은 보조 메뉴에 넣으세요. 사용자는 처음 이후에는 다시 클릭하지 않을 것입니다.’
이번에는 Claude Design이 그 결정을 내려주었습니다.
비용
리소스를 많이 소모합니다
Claude의 구독 요금제에서 Design은 자체 할당량이 있습니다(Claude의 별도 할당량이 정말 쌓이고 있다고 말해야겠네요).
이 작업 세트(4가지 옵션 비교 + 5가지 기사 테마 + 고충실도 구현)는 일일 할당량의 36%를 소모했습니다. 저는 5x Max 계정을 사용 중입니다. Pro 계정이라면 하루 할당량 전체를 소진했을 것입니다.
제 친구 중 한 명이 Pro 계정을 사용합니다. 어젯밤에 Design으로 30페이지 분량의 PPT를 만들었는데 일일 할당량이 완전히 소진되었습니다.
가끔 발생하는 결함
작업 중에 가끔 이런 상황이 발생할 수 있습니다: 메시지를 보내면 <empty>라고 응답합니다. 다시 보내도 여전히 <empty>입니다:
해결 방법은 페이지를 새로고침하고 ‘계속해 주세요’라고 말하는 것입니다. 그러면 보통 다시 이어받습니다. 하지만 약간의 맥락이 손실됩니다. 중요한 디자인 반복 작업 중이라면 수시로 스크린샷을 백업으로 찍어두세요. 마지막 단계에서 고장 나면 처음부터 다시 시작하지 않아도 됩니다.
마지막 생각
기본적인 디자인의 제 Obsidian 플러그인이 드디어 제대로 된 제품처럼 보이게 되었습니다.
하지만 솔직히 말하면, 컴퓨터 앞에 앉아 ‘초안 발행’을 클릭했을 때 완전히 신나지는 않았습니다. 한 가지는 매우 분명합니다. 디자인 교육을 받지 않은 사람이 두 시간 만에 괜찮은 UI를 만들 수 있다면, ‘괜찮은’ 것으로 생계를 유지하는 사람들은 앞으로 몇 년 동안 힘들어질 것입니다.
예전에는 AI가 작가들에게 문학적 취향을 가진 대화 상대를 잃게 만들까 걱정했습니다. 이번에는 그 반대입니다. 디자이너들은 시장에서 가장 두꺼운 부분인 초급에서 중급 범위를 잃게 될 것입니다.
AI가 한 걸음 나아갈 때마다 어떤 사람들은 환호하고, 어떤 사람들은 조용히 떠납니다. 이번에는 제가 환호하는 쪽이지만, 뒤에서 들려오는 한숨 소리가 들립니다.
최근 AI에 많은 시간과 돈을 쏟아부었고, 언젠가 나를 대체할까 걱정했지만, 아직 돌파구를 찾지 못했습니다. 일상 업무에는 도움이 되지만 근본적인 변화는 없습니다. 가장 중요한 것은, 돈을 벌지 못했다는 점입니다.
여러분도 저처럼 먼지 쌓인 작은 제품, 플러그인, 또는 웹사이트가 있다면 Claude Design을 사용해 보세요.
첫 번째 판매를 이끌어내지 못할 수도 있지만, 적어도 더 보기 좋게 만들어 줄 것입니다. 그리고 그것만으로도 큰 개선입니다.