디자인의 클로드 코드(Claude Code) 순간이 도래했다

Anthropic이 오늘 Claude Design을 출시했다. 바로 사용해봤는데, 그 충격은 처음 Claude Code로 프로그래밍했을 때와 맞먹었다. flypig 선생님의 말을 빌리자면:

방금 써봤는데, 이렇게 말할 수 있겠다: Claude Design은 구글의 Stitch를 우스워 보이게 만든다.

이것이 디자인 분야의 클로드 코드(Claude Code) 순간이다. "디자인은 죽었다"거나 "디자이너가 대체될 것"이라는 선정적인 말은 하지 않겠다. 그냥 이렇게 말하고 싶다:

아이디어와 고퀄리티 인터랙티브 프로토타입 사이의 간극이 사실상 사라졌다. 비(非)디자이너도 이제 독립적으로 출시 가능한 디자인을 만들 수 있다. 디자이너의 생산성은 기하급수적으로 증가하겠지만, 디자인 아웃소싱과 전통적인 디자인 도구는 크게 줄어들 것이다.

오늘 Figma 주가가 급락한 것이 이를 간접적으로 증명한다.

먼저, 실제 테스트 사례를 보자#

완전한 사례 연구를 하나 보여드리겠다. 약 3번의 상호작용으로 제작한 디자인 작품이다. 단순한 정적 이미지나 웹페이지가 아니라, 내부 링크 대부분이 클릭 가능하고 인터랙티브하다.

초기 프롬프트는 매우 기본적이었다:

글쓰기 에이전트용 Mac 앱 디자인을 도와줘. 여러 워크스페이스를 지원하고, 워크스페이스 내에서 문서(마크다운, 텍스트 파일)를 볼 수 있으며, 문서를 수동으로 편집하고, 에이전트를 호출하여 마크다운 문서를 편집할 수 있어야 해. 또한 채팅 대화 내에서 문서를 생성/편집할 수 있어야 해.

사실 어떤 모습이길 원하는지 완전히 정하지 못해서, 브레인스토밍을 도와주길 바라며 모호하게 작성했다.

그러자 몇 가지 질문을 골라서 제시했는데, 단일 선택, 다중 선택, 직접 입력, 또는 AI가 결정하는 옵션이 포함되어 있었다.

잠시 후 확인해보니, 전문 디자이너처럼 먼저 요구사항을 명확히 한 다음, 몇 가지 다른 방향을 제시하여 선택하게 했다.

각 결과물은 정적 이미지나 웹페이지가 아니라, 모두 클릭 가능하고 인터랙티브했다.

검토 후 옵션 2와 옵션 3이 모두 좋지만 문제가 있어서 합쳐야겠다고 생각했다. 그래서 수정 피드백을 주고, 참고용으로 Codex의 스크린샷도 보내면서 옵션 2와 옵션 3을 병합하고 Codex의 디자인 요소를 일부 통합해 달라고 요청했다.

그러자 곧바로 새 버전을 만들어줬는데, 기본적으로 내가 원했지만 명확히 설명할 수 없었던 모습이었다. 예를 들어 Documents와 Chat을 탭으로 분리한 것은 내가 예상했던 "상하" 레이아웃보다 더 마음에 드는 디자인이었다.

전체 디자인에 꽤 만족해서 더 바랄 게 없었다. 다음은 세부 사항을 다듬는 단계였다. 문서 편집 기록이 구현되지 않았기에 해당 부분을 추가해 달라고 요청했다.

프롬프트는 간단했다:

현재 디자인을 기반으로 히스토리 섹션을 디자인해 줘. 사용자가 문서 편집 기록을 더 쉽게 보고 차이점을 비교할 수 있게 하고 싶어.

그러자 곧바로 버전을 만들어줬지만, 열어보니 효과가 좋지 않았다.

수정을 요청하려는 순간, AI가 스스로 레이아웃 문제를 감지하고 수정했다.

수정된 버전은 레이아웃 문제가 전혀 없었고, 두 버전을 편리하게 선택하여 변경 사항을 비교할 수 있었다.

왼쪽 메시지 기록을 보면 자동 오류 수정 메커니즘이 있음을 알 수 있다.

최종 출력물은 React 코드와 스타일시트였다.

전체 과정에서 몇 가지 놀라운 점이 있었다: 능동적으로 요구사항을 묻고, 여러 옵션을 제공하며, 이미지 참조를 혼합하여 이해하고, 자체 점검 및 자체 수정하며, 정적 목업이 아닌 실행 가능한 코드를 출력한다. 이러한 협업 방식은 이전의 어떤 디자인 도구와도 다르다.

Claude Design이 정확히 무엇인가?#

먼저 기본 사항을 살펴보자. Claude Design은 Anthropic Labs가 오늘 출시한 신제품으로, Claude Opus 4.7을 기반으로 한다. Pro, Max, Team, Enterprise 구독에서 사용할 수 있다(Enterprise는 기본적으로 비활성화되어 있으며 관리자가 활성화해야 함). claude.ai/design으로 직접 이동하면 된다.

인터페이스는 간단하다. 왼쪽은 채팅, 오른쪽은 캔버스다. 원하는 것을 설명하면 오른쪽에 그리고, 채팅, 인라인 댓글, 직접 편집 또는 자동 생성된 조정 슬라이더를 통해 수정하며, 수정 후 HTML, PDF, PPTX, ZIP으로 내보내거나 Canva로 보내 추가 편집하거나 Claude Code용으로 패키징하여 제품 코드로 구현할 수 있다.

단순히 AI 버전의 Figma처럼 보일 수 있지만, 그렇지 않다.

Ryan Mather는 Anthropic 자체 디자인 팀 소속으로, 한 사람이 동시에 7개 제품 라인을 담당한다. 오늘 그의 트윗에서 핵심적인 내용은 다음과 같다:

Claude Design을 캔버스 기반 도구처럼 사용하려고 하지 마세요. 다른 능력을 가진 다른 동물입니다. 솔직히 말하면, 캔버스 기반 디자인 도구보다 Claude Code에 더 가깝습니다. https://x.com/Flomerboy/status/2045162328593670321

이 말이 Claude Design을 이해하는 핵심이다.

인용 트윗 6. Claude에게 즉석 맞춤형 도구를 만들도록 요청하세요. 일반적으로 Claude Design을 캔버스 기반 도구처럼 사용하려고 하지 마세요. 다른 능력을 가진 다른 동물입니다. 실험하고 재미있게 즐기세요! 예전 방식보다 훨씬 뛰어난 디자인을 하게 될 것입니다. https://x.com/i/web/status/2045162328593670321

Figma, Canva 등과의 근본적인 차이점#

지난 1년 동안 Figma는 AI를 추가했고, Adobe는 AI를 추가했으며, Canva도 AI를 추가했다. 그들의 논리는 동일하다: 인간 중심의 캔버스 도구 위에 AI 플러그인 계층을 추가하여 그림을 조금 더 빠르게 그리고, 카피를 더 편리하게 작성하도록 돕는 것이다.

Claude Design은 다른 길을 간다: AI가 주요 생성자이고, 인간이 주요 검토자이다. 전체 도구의 프레임워크는 이 가정을 기반으로 구축되었다.

이 차이는 추상적으로 들리지만, 몇 가지 구체적인 제품 차이로 나타난다.

출력물은 정적 목업이 아닌 실행 가능한 코드#

위의 Mac App 사례에서 최종 결과물은 React + CSS로, 실행 가능한 것이며 링크를 클릭할 수 있고, 탭을 전환할 수 있으며, 버전 간 차이를 비교할 수 있다. 이는 "예쁜 UI 이미지를 생성하는 것"과는 다른 종류다.

조직 수준의 디자인 시스템#

코드베이스, PPT, 브랜드 자료를 업로드하면 색상, 글꼴, 컴포넌트, 레이아웃 사양을 추출하여 이후 모든 프로젝트에 자동으로 적용한다. Brilliant의 한 디자이너는 다른 도구에서 20회 이상의 프롬프트가 필요했던 복잡한 상호작용이 Claude Design에서는 2회 만에 해결되었다고 피드백했는데, 이는 디자인 언어를 이미 "알고" 있기 때문이다.

코드베이스를 이해합니다#

코드베이스를 스크린샷처럼 취급하지 않고, 실제로 컴포넌트 구조, 프레임워크 패턴, 파일 구성을 읽습니다. 따라서 디자이너가 작업을 마치고 "핸드오프"를 클릭하면 엔지니어에게 "여기 다시 만들어야 할 이미지가 있습니다"가 아니라 "기존 컴포넌트 라이브러리에 바로 통합할 수 있는 구현 초안입니다"가 전달됩니다.

도구를 만들 수 있으며, 디자인만 하는 것이 아닙니다#

공식 블로그에서는 다음과 같은 기능을 언급합니다. Claude Design에게 브랜드 팔레트용 컬러 피커, 커스텀 스펙 생성기, 또는 소규모 인터랙티브 프로토타입 테스트 도구 등 특수 목적 도구를 임시로 생성하도록 요청할 수 있습니다. 출력물은 "디자인 파일"에 국한되지 않고 "문제를 생각하는 데 도움이 되는 모든 계산 제품"입니다.

Datadog의 피드백도 흥미롭습니다. 이전에는 브리핑 → 목업 → 리뷰의 여러 라운드를 거쳐 일주일이 걸리던 작업이 이제는 단 한 번의 미팅으로 끝낼 수 있으며, 대화 중에 프로토타입이 완성되고 엔지니어가 실시간으로 디자인 논의에 참여할 수도 있습니다.

이는 "Figma 속도가 30% 향상되었습니다"와 같은 최적화가 아닙니다. 오히려 완전히 다른 작업 방식에 가깝습니다.

어떤 용도로 사용할 수 있나요?#

공식 블로그와 현재 공개된 사용 사례를 바탕으로 Claude Design은 최소한 다음 유형의 작업을 처리할 수 있습니다.

제품 프로토타입 및 인터랙션 플로우. 제 Mac App 사례나 5개 화면 온보딩 플로우, 필터링 및 상세 서랍이 있는 검색 환경, 승인 워크플로우 큐 등이 이에 해당합니다. 이것이 가장 강력한 영역입니다.

프레젠테이션 자료. 10페이지 분량의 Q1 실적 자료, 15페이지 분량의 이사회 로드맵, 회의 전 클라이언트 자료, 전사 회의 자료 등입니다. PPTX로 바로 사용할 수 있게 내보내거나 Canva로 보내 추가 편집할 수 있습니다.

마케팅 자료. 랜딩 페이지, 소셜 미디어 그래픽, 이벤트 비주얼 등입니다.

내부 도구 백엔드. 관리자 패널, 콘텐츠 심의 큐, 권한 관리 인터페이스 등입니다. 이 범주는 이전에 전담 프론트엔드 인력을 고용해야 했지만, 이제 PM이 직접 사용 가능한 프로토타입을 만들 수 있습니다.

디자인 탐색. 한 번에 3~5개의 방향성을 생성하여 선택할 수 있게 합니다. 이전에는 "시간이 없어서 두 가지 버전만 보여드릴 수 있습니다"였다면, 이제는 "다섯 가지 버전을 만들 테니 하나를 골라 다듬으세요"가 되었습니다.

또한 공식 블로그에서 강조하지는 않지만 중요한 점은 비디오 데모입니다. Ryan Mather는 정적 이미지뿐만 아니라 비디오 형태의 데모를 직접 생성할 수 있다고 언급했습니다. 이는 제품 출시, 사용자 테스트, 투자자 커뮤니케이션을 위한 새로운 역량을 열어줍니다.

그 경계를 한 문장으로 정의하자면: 구조가 명확하고, 정보 블록이 뚜렷하며, 인터랙션 로직을 설명할 수 있는 작업에 뛰어납니다. 순수 예술적이고 감정 중심의 창의적인 작업을 대체하기 위한 것은 아닙니다.

이것은 단순히 디자인에 관한 것이 아닙니다#

Ryan Mather가 혼자서 7개의 제품 라인을 담당하고 있다는 것은 하나의 신호입니다. 두 달 전만 해도 불가능했던 일입니다.

디자이너에게#

생산성은 기하급수적으로 증가하겠지만, 팀 규모는 줄어들 가능성이 높습니다. 이전에 회사에서 5명의 디자이너가 필요했던 작업을 이제는 1~2명이 수행할 수 있으며, 개인의 출력물은 더 많아지고 품질도 더 좋아집니다. 남는 사람들은 진정한 판단력이 필요한 작업, 즉 브랜드 방향성, 핵심 일러스트레이션, 네이밍, 전략적 의사 결정에 집중할 수 있기 때문에 더 가치 있게 될 것입니다. 나머지 80%의 실행 작업은 모델이 대신합니다.

이미 같은 시나리오가 펼쳐졌습니다#

프로그래밍 분야에서는 Claude Code가 그랬습니다. AI를 활용하는 엔지니어는 생산량이 배가되는 반면, 따라잡지 못하는 엔지니어는 점차 도태됩니다. 분석 분야에서는 다양한 AI 기반 데이터 분석 도구가 그렇습니다. 분석가는 "SQL 작성자"에서 "AI와 함께 질문하는 사람"으로 변화하고 있습니다. 새로운 직업이 이 지점에 도달할 때마다 항상 같은 궤적을 따릅니다: 1인당 생산량이 급증하고, 최상위 인력은 더 많은 이득을 보는 반면, 하위 인력은 기회가 점차 사라집니다. 디자인 분야가 이 변곡점에 도달한 것입니다.

PM, 창업자, 마케터에게#

이것은 완전히 새로운 역량입니다. 이전에는 아이디어가 있어도 직접 스케치를 해서 디자이너에게 요청하거나, 보기 흉하고 우울한 PPT를 직접 만들어야 했습니다. 이제는 아이디어를 명확하게 설명하면 엔지니어, 투자자, 또는 클라이언트에게 바로 보여줄 수 있는 완성된 결과물을 얻을 수 있습니다.

Figma, Adobe, Canva에게#

이것은 경종이지만, 10%의 주가 하락은 표면적인 영향만 반영할 수 있습니다. Ryan Mather의 트윗에는 더 깊은 신호가 있습니다. Anthropic 자체 디자인 팀은 이미 Claude Design을 주요 도구로 사용하고 있으며, Figma는 가끔만 언급됩니다. Anthropic의 디자이너들이 Figma를 주로 사용하지 않는다면, 다른 기술 회사들은 왜 그래야 할까요? 2~3분기 후, 기업들이 매년 디자인 도구 예산을 재평가할 때, 레거시 도구의 갱신 수가 주가보다 더 직접적인 답을 줄 것입니다.

회사 의사 결정권자에게#

두 가지를 재계산해야 합니다. 하나는 디자인 인력 규모입니다. Mather가 혼자서 7개의 제품 라인을 담당한다는 것은 이전에 3~5명의 디자이너가 필요했던 작업을 의미하며, 연간 예산표에서 이 숫자는 무시하기 어려울 것입니다. 다른 하나는 도구 구독 비용입니다. 주요 작업이 하나의 제품 내에서 대부분 완료될 수 있다면, 이전에 Figma, Sketch, Notion, Miro, Keynote에 분산되어 있던 계정들이 재평가될 것입니다.

엔지니어에게#

이것은 오랫동안 기다려온 희소식입니다. 디자인에서 엔지니어링으로의 핸드오프는 항상 가장 고통스러운 부분 중 하나였습니다. 디자이너는 시각적으로 작업하고 엔지니어는 코드로 작업하며, 전적으로 Figma 주석과 반복적인 검토에 의존했습니다. 이제 Claude Design에서 나오는 결과물은 본질적으로 컴포넌트 구조와 구현 초안을 포함하고 있어 구현 비용을 획기적으로 줄여줍니다.

기타 참고 사항#

Claude Design은 현재 연구 프리뷰 단계이며, 몇 가지 실용적인 한계점을 알아두어야 합니다.

현재 감사 로그 및 사용량 추적 기능이 없고, 데이터 상주를 지원하지 않으며, 업로드된 에셋이 영구적으로 저장됩니다. 규정 준수 요구 사항이 엄격한 회사에 있다면, 현재로서는 민감한 디자인 자료를 직접 입력하지 않는 것이 좋습니다.

현재 웹 인터페이스만 제공되며, 공개 API는 없습니다. 자체 제품에 임베드하려는 경우 아직 불가능하며, Claude API와 Agent SDK를 기반으로 유사한 기능을 직접 구축해야 합니다. 그러나 Claude Design의 강점은 결정적으로 Opus 4.7 모델의 향상된 멀티모달 기능에 있습니다. 이론적으로는 Opus 4.7을 사용하여 유사한 제품을 구축할 수 있습니다.

하지만 Claude Code의 경우와 마찬가지로, 동일한 Claude 모델을 사용하더라도 Claude Code가 여러 측면에서 더 뛰어난 성능을 보입니다. 결국 Anthropic은 새로운 모델을 최대한 활용하는 방법을 가장 잘 알고 있으며, 사용자 디자인 데이터와 상호 작용을 사용하여 차세대 모델을 훈련시켜 데이터 플라이휠을 만들 수 있습니다.

이러한 이점은 OpenAI나 Gemini와 같은 다른 플레이어가 단기간에 따라잡기 어려운 부분입니다.

가격 및 할당량#

이 표는 Anthropic의 공식 Claude Design 가격 문서를 기반으로 작성되었습니다. 공식에서 특정 주간 할당량 값을 공개하지 않았으므로 해당 셀은 "명시되지 않음"으로 표시해야 합니다.

저는 Claude Max@5x를 사용 중이며, 하나의 App을 디자인하고 하나의 Slides를 생성한 후 주간 할당량이 소진되었습니다.

모델, 사양 및 멀티모달 기능#

Claude Design의 기반 모델로 공개적으로 명시된 유일한 모델은 Claude Opus 4.7입니다. 공식 측은 사용자가 Claude Design 내에서 Sonnet이나 Haiku로 전환할 수 있는지 여부를 밝히지 않았으므로, 이는 명시되지 않음 / 고정되었을 가능성이 높은 것으로 간주해야 합니다. 한편, Anthropic의 모델 개요 페이지에서는 현재 주요 모델들을 비교하여 Claude Design의 모델 선택 이유를 이해하는 데 도움을 줍니다.

위 표의 데이터는 Anthropic의 모델 개요에서 요약되었으며, "Claude Design 도입 관계"는 Claude Design 공식 블로그에서 가져왔습니다.

시각적 사양과 관련하여 Opus 4.7은 고해상도 이미지를 지원하는 최초의 Claude 모델로, 긴 쪽 기준 최대 기본 해상도는 2576픽셀, 이미지당 최대 약 4784개의 이미지 토큰입니다. 이는 Claude Design이 스크린샷, 웹페이지 캡처, 프로토타입 비교 및 문서 시각적 의미론에 크게 의존하기 때문에 특히 중요합니다. 한편, Opus 4.7은 새로운 토크나이저를 사용하여 동일한 텍스트에 대해 Opus 4.6 대비 토큰이 약 1배~1.35배 증가할 가능성이 있어, 개발자는 이미지/코드/긴 컨텍스트 시나리오에서 max_tokens, 캐싱 및 비용을 다시 추정해야 합니다.

마무리하며#

Claude Design이 가져온 영향은 단순히 디자인 업계의 효율성 향상이 아니라, 보다 심오한 패러다임 전환에 가깝습니다. 과거 디자이너는 캔버스에서 꼼꼼하게 작업하고 수동으로 주석을 다는 데 익숙했지만, 이제 AI는 아이디어에서 바로 실행 가능한 고충실도 인터랙티브 프로토타입으로 직행할 수 있게 되어 디자이너의 역할을 순수한 실행자에서 전략적 의사 결정자로 전환시키고 있습니다. 이러한 변화는 디자인 분야에서만 일어나는 것이 아닙니다. 프로그래머, 분석가, 마케터, 제품 관리자 모두 이미 유사한 혁명을 겪었거나 곧 겪게 될 것입니다.

이러한 시대에 재정의되고 있는 것은 단순히 우리의 업무 방식뿐만 아니라 생산성과 창의성에 대한 우리의 이해입니다. AI가 아름다움에 대한 인간의 판단, 브랜드에 대한 통찰력, 또는 전략적 기획을 대체하지는 않겠지만, AI의 등장으로 모든 사람이 이러한 가장 가치 있는 역량에 더욱 집중할 수 있게 되었습니다.

아마도 몇 년 후, 우리는 오늘날의 Claude Design을 마치 지금 우리가 Claude Code를 처음 사용했던 때를 되돌아보는 것처럼 바라보며, 역사의 분수령이 무심코 지나갔다는 것을 깨닫게 될 것입니다. 그리고 우리는 바로 그 새로운 미래로 발을 들여놓고 있습니다.