AI Sparkup

최신 AI 쉽게 깊게 따라잡기⚡

Claude Design, 디자인을 코드로 넘길 때 다시 그리던 시대를 끝내다

지금까지 AI 디자인 도구로 화면을 만들고 개발로 넘기는 과정은 한 방향이었습니다. 디자인을 스크린샷으로 찍어 넘기면, 개발 쪽 AI는 그 그림을 보고 코드를 처음부터 다시 만들었죠. 이번 Claude Design 업데이트는 그 단절을 양방향 동기화로 바꾸려 합니다.

사진 출처: Anthropic

Anthropic이 6월 17일 Claude Design 베타의 대규모 업데이트를 발표했습니다. 사용자의 디자인 시스템을 프로젝트 전반에 일관되게 유지하고, Claude Code와 양방향으로 작업을 주고받으며, 캔버스에서 요소를 직접 편집할 수 있게 됐습니다. 4월 첫 출시 후 첫 주에만 100만 명 이상이 사용했고, 이번 개선은 그 피드백을 반영한 결과입니다.

출처: Claude Design now stays on brand for daily work – Anthropic

AI 디자인 도구가 풀지 못하던 문제

AI로 화면을 빠르게 만드는 일은 이제 어렵지 않습니다. 문제는 그 다음입니다. 업계에서 반복적으로 지적된 약점은, AI가 디자인 시스템을 세션 사이에 잊어버린다는 점입니다. 화면 하나를 만들 때는 그럴듯하지만, 다음 화면을 만들 때 간격이나 색상 토큰이 조금씩 어긋나기 시작하죠.

더 큰 문제는 디자인과 코드의 어긋남입니다. AI가 만든 화면이 보기엔 맞아 보여도, 거기 쓰인 간격 값이 실제 코드 컴포넌트와 다르면 디자인과 코드가 따로 놀게 됩니다. 그리고 이후 AI가 새 화면을 만들 때마다 그 격차는 점점 벌어집니다. 한 분석가는 이를 ‘핸드오프 붕괴(handoff collapse)’라고 불렀습니다. 결국 사람이 일일이 손봐야 하니, AI가 절약해 준 시간이 다시 사라지는 셈입니다.

자기 결과물을 스스로 검사하는 방식

이번 업데이트의 핵심은 두 가지입니다. 첫째는 디자인 시스템을 가져오는 방식이 정교해진 점입니다. GitHub 저장소, 디자인 파일, 직접 업로드 중 어느 쪽으로든 하나 또는 여러 개의 디자인 시스템을 불러올 수 있습니다.

작동 흐름은 이렇습니다.

  1. 사용자의 디자인 시스템(컴포넌트, 색상, 간격 규칙)을 가져옵니다.
  2. Claude가 그 컴포넌트를 재료로 화면을 만듭니다.
  3. 결과물을 디자인 시스템 기준에 맞는지 스스로 대조합니다.
  4. 어긋난 부분을 사용자에게 보여주기 전에 먼저 수정합니다.

사용자가 결과를 받기 전에 검증과 교정이 한 번 끝나 있다는 점이 차이입니다. 앞서 본 ‘잊어버리는’ 문제를 도구가 매번 자기 기준으로 점검하는 구조로 바꾼 셈이죠.

디자인과 코드를 오가는 양방향 연결

두 번째 핵심은 Claude Code와의 연동입니다. 기존 방식에서 디자인이 코드로 넘어갈 때는 스크린샷이 출발점이었습니다. 개발 쪽은 그 이미지를 보고 처음부터 다시 만들어야 했죠.

이번에는 디자인이 준비되면 Claude Code가 기존 작업을 이어받아 계속합니다. 처음부터 다시 그리는 게 아니라 이미 만들어진 것에서 출발하는 겁니다. 반대로 터미널에서 시작하는 것도 가능합니다. 코드를 살아 있는 프로토타입으로 바꾸거나, 디자인 시스템을 코드베이스로 가져오는 식으로요. 디자인에서 코드로, 코드에서 디자인으로 양쪽 방향이 모두 열린 것이 변화의 핵심입니다.

이 외에도 PDF·PowerPoint 내보내기, Canva·Figma 연동을 돕는 외부 도구 연결, 캔버스 직접 편집 등이 추가됐습니다. 사용 한도도 채팅·Cowork·Claude Code와 공유하도록 바뀌어, 대부분의 사용자가 더 여유 있게 작업할 수 있게 됐습니다.

아직 Figma를 대체하는 건 아니다

다만 이 도구가 전문 디자인 툴을 곧장 대체한다고 보기는 어렵습니다. 4월 출시 당시 Figma·Canva의 경쟁작이라는 평가가 쏟아졌고 시장도 민감하게 반응했지만, 정작 디자이너들의 평가는 신중합니다. 한 UX 리뷰어는 지금의 베타가 Figma를 대체할 수준은 아니라고 선을 그으면서도, 평균적인 실행(execution)을 극적으로 저렴하게 만든다는 점에서 압박이 시작된다고 봤습니다.

디자인을 직업으로 삼지 않는 사람에게 의미가 더 큽니다. 브랜드 자산이나 발표 자료, 랜딩 페이지 시안이 필요할 때, 디자인과 개발 사이를 오가는 일이 한 사람의 작업 흐름 안으로 들어왔기 때문입니다. 디자인과 코드를 가르던 경계가, 적어도 초기 단계에서는 점점 흐려지고 있습니다.

참고자료:


AI Sparkup 구독하기

최신 게시물 요약과 더 심층적인 정보를 이메일로 받아 보세요! (무료)

Comments

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다