캔바, 앤트로픽 '클로드 디자인'과 연동…AI 생성 코드 드래그 앤 드롭 편집 지원

AI로 웹 컴포넌트나 인터랙티브 화면을 코드로 뽑아본 사람이라면 누구나 겪는 골칫거리가 있습니다. 버튼 위치나 배경색 하나만 살짝 바꾸고 싶은데, 수정을 요청하는 순간 모델이 코드 전체를 다시 짜면서 멀쩡하던 동작까지 망가뜨리는 일입니다.

Canva와 Anthropic이 이 병목을 해결하기 위해 손을 잡았습니다. Anthropic Labs가 최신 비전 모델인 Claude Opus 4.7 기반의 작업 공간인 Claude Design을 공개했고, Canva는 Claude에서 만든 시각 작업물과 HTML 코드를 자사 에디터로 곧바로 불러와 편집할 수 있는 기능을 내놓았습니다.

코드를 다시 짤 필요 없는 드래그 앤 드롭 HTML 편집

이번 발표의 핵심은 Canva가 새롭게 선보인 HTML 임포트 기능입니다. 기존에는 Claude의 Artifacts 등으로 생성된 대화형 코드가 텍스트 상자 안에 갇혀 있어, 작은 수정 하나에도 프롬프트를 다시 입력해 코드를 재생성해야 했습니다.

이제는 Claude에서 나온 결과물을 Canva의 Visual Suite로 그대로 넘길 수 있습니다. 넘겨받은 HTML 요소는 시각적 레이어로 자동 변환되어, 마우스 드래그 앤 드롭만으로 색상을 바꾸고 배치를 수정할 수 있습니다.

이렇게 손질한 결과물은 Canva 프레젠테이션에 삽입하거나 Canva Form과 연동해 설문을 받고, Canva Websites 기능을 통해 개인 도메인을 붙여 실제 웹사이트로 즉시 배포하는 것까지 가능합니다.

Claude Opus 4.7 기반의 새 작업 공간

협업의 출발점이 되는 Claude Design은 Claude Pro, Max, Team, Enterprise 구독자를 대상으로 리서치 프리뷰 형태로 순차 배포되고 있습니다. 기업 환경에서는 관리자 설정에서 기능을 켤 수 있습니다.

Claude Design은 기존 코드 저장소나 디자인 문서를 읽어 브랜드 가이드를 자동으로 구축하고, 인라인 피드백이나 Claude가 실시간으로 만들어주는 슬라이더를 통해 레이아웃을 직관적으로 조절할 수 있습니다. 완성된 기획안은 Canva로 보내 디자인을 다듬거나, Claude Code로 전달해 곧바로 개발에 착수할 수 있도록 묶어서 내보낼 수 있습니다.

왜 중요한가

생성형 디자인 툴의 가장 큰 한계는 '그럴듯한 초안'을 '실제 쓸 수 있는 결과물'로 바꾸는 과정이 너무 번거롭다는 점이었습니다. 대화창 안에서 미세한 픽셀 단위 조정을 말로 설명하는 것은 제작자에게 큰 피로를 줬습니다.

Anthropic과 Canva의 역할 분담은 꽤 영리합니다. Anthropic은 복잡한 그래픽 디자인 도구를 밑바닥부터 다시 만들지 않고 모델의 코드 생성 및 멀티모달 역량에 집중했고, Canva는 모든 AI 초안이 모여드는 인터넷 디자인의 편집 계층 자리를 선점했습니다.

기획자, 마케터, 1인 창업자 입장에서는 자연어로 아이디어를 빠르게 시각화한 뒤 코딩 없이 인터랙티브 웹 요소를 완성할 수 있어 지금 바로 써볼 가치가 큽니다. 다만 복잡한 인터랙션이 포함된 스크립트 기반 코드를 Canva가 얼마나 기능 손실 없이 편집 가능한 상태로 유지해 줄지는 실제 사용 과정에서 지켜볼 대목입니다.