앤트로픽, '클로드 디자인' 업데이트…디자인 시스템 준수 및 클로드 코드 연동 지원

생성형 AI로 웹페이지나 앱 화면을 만들 때 가장 큰 걸림돌은 팀의 브랜드 가이드라인을 무시한다는 점이었습니다. 결과물이 그럴듯해 보여도 결국 디자이너가 피그마를 켜고 폰트와 여백, 컴포넌트를 처음부터 다시 손봐야 했습니다.

출시 첫 주에만 100만 명 이상이 사용했던 앤트로픽의 ‘클로드 디자인(Claude Design)’이 이 문제를 정조준한 대규모 업데이트를 선보였습니다. 이제 클로드 데스크톱 앱 사이드바와 전용 웹페이지에서 바로 사용할 수 있습니다.

깃허브에서 디자인 시스템 불러와 자동 검수

이번 업데이트의 핵심은 기업 고유의 디자인 시스템을 완벽하게 따르도록 한 것입니다. 깃허브 저장소나 디자인 파일, 직접 업로드 방식을 통해 하나 이상의 디자인 시스템을 가져올 수 있습니다.

클로드는 가져온 기존 컴포넌트를 바탕으로 화면을 구성하며, 결과물을 보여주기 전에 디자인 시스템과 대조해 어긋난 부분을 스스로 수정합니다. 엔터프라이즈 환경을 고려해 관리자가 표준 시스템을 승인하고 수정을 잠글 수 있는 관리자 권한도 추가되었습니다.

캔버스 편집기 자체도 한층 다듬어졌습니다. 요소를 직접 마우스로 끌어다 크기를 조절하고 정렬할 수 있는 직접 제어 기능이 추가되었고, 수백 가지 안정성 패치가 적용되었습니다. 사용량 한도 역시 클로드 코드 등 다른 클로드 작업과 통합되어 이전보다 작업 여유가 크게 늘어났습니다.

스크린샷 대신 클로드 코드와 원클릭 연동

엔지니어와 프로덕트 빌더에게 가장 매력적인 부분은 ‘클로드 코드(Claude Code)’와의 긴밀한 연동입니다.

이전에는 목업 화면을 캡처해 코딩 모델에 던져주고 구현해달라고 부탁하는 어색한 방식을 써야 했습니다. 이제는 ‘/design-sync’ 명령어로 디자인 시스템을 불러와 작업한 뒤, 해당 레이아웃을 클로드 코드로 곧바로 넘겨 실제 코드로 이어받을 수 있습니다.

터미널 작업 중에도 언제든 ‘/design’을 입력해 프로토타입 생성을 요청하거나 코드를 라이브 프로토타입으로 변환할 수 있습니다. 결과물은 PDF, 파워포인트, HTML뿐 아니라 어도비, 캔바, 러버블, 미로, 레플릿, 버셀, 윅스 등 다양한 외부 협업 도구로 곧바로 내보낼 수 있습니다.

왜 중요한가

우리는 앤트로픽의 이번 행보가 AI 디자인 도구를 ‘신기한 장난감’에서 ‘실무용 생산성 도구’로 끌어올린 결정적인 한 수라고 봅니다.

그동안 프롬프트 몇 줄로 예쁜 그림을 만드는 도구는 넘쳐났지만, 실제 팀의 컴포넌트 규격을 엄격하게 지키는 도구는 사실상 전무했습니다. 클로드 디자인이 깃허브 코드를 읽어와 규격을 스스로 맞추고 코드 레벨까지 끊김 없이 이어준다면, 1인 개발자나 소규모 팀은 화면 설계부터 배포 준비까지 걸리는 시간을 획기적으로 줄일 수 있습니다. 유료 플랜을 쓰고 있다면 지금 바로 새 랜딩 페이지 기획에 써볼 만한 가치가 충분합니다.

전략 측면에서도 영리합니다. 앤트로픽은 피그마나 어도비를 시장에서 완전히 몰아내려는 무리수를 두는 대신, 버셀이나 어도비, 윅스 같은 생태계의 주요 플레이어들과 커넥터로 손을 잡았습니다. 아이디어가 처음 출발하는 시작점을 클로드로 선점하겠다는 계산입니다.

다만 수많은 인터랙션 상태가 얽혀 있는 복잡한 엔터프라이즈급 디자인 시스템을 깃허브 임포트만으로 얼마나 완벽하게 소화해낼지는 지켜볼 필요가 있습니다. 그럼에도 스크린샷 기반의 눈대중 구현을 버리고 코드 저장소 기반의 엄밀한 워크플로를 구축했다는 점에서 매우 현실적이고 강력한 진화입니다.