클로드의 역대급 디자인 업데이트. 클로드 디자인 ↔ 클로드 코드 왕복, 이제 끝났습니다. - 블로그

출처: https://lilys.ai/digest/11195097/13195390/

안녕하세요! 프로덕트 디자인에 관심 있는 여러분, 오늘은 정말 흥미로운 소식을 들고 왔습니다. 앤트로픽에서 클로드 디자인과 클로드 코드 사용자들을 위한 역대급 업데이트를 발표했는데요. 바로 클로드 코드 안에서 클로드 디자인의 핵심 기능인 '아트보드 캔버스'를 직접 사용할 수 있게 되었다는 소식입니다. 이제 더 이상 디자인 작업 때문에 두 플랫폼을 오갈 필요가 없어졌어요!

이 업데이트는 마치 디자인팀 사무실과 개발팀 사무실이 하나로 합쳐진 것과 같아요. 예전에는 디자인 시안을 만들려면 클로드 디자인에서 작업하고, 결과물을 클로드 코드로 보내 개발팀과 공유해야 했죠. 이 과정에서 파일 전송이나 컨텍스트 공유 문제로 시간 낭비가 컸습니다. 하지만 이제는 클로드 코드 안에서 모든 작업을 한 번에 처리할 수 있게 되어, 워크플로우가 획기적으로 개선될 것으로 기대됩니다.

디자인 시안, 이제 클로드 코드 세션 안에서 바로!

앱 개발 프로세스를 생각해 보면, 리서치와 기획이 끝나면 디자인 시안 작업을 통해 스타일을 테스트하고 화면 구성을 잡습니다. 이 시안 작업은 수많은 반복(iteration)이 필수적이죠. 여러 디자인 옵션을 비교하고 개선하는 과정이 계속됩니다. 이때 넓은 캔버스에 작업물을 펼쳐 놓고 비교하는 방식이 가장 효율적인데요, 피그마 같은 디자인 툴들이 이 방식을 사용하고 있습니다.

하지만 기존 클로드 코드에는 이런 캔버스 기능이 없었어요. 물론 HTML 형식으로 여러 디자인 시안을 뽑아달라고 요청할 수는 있었지만, 스크롤을 내려야만 다른 시안을 볼 수 있어 한눈에 조망하기 어려웠습니다. 게다가 간단한 컬러나 문구 수정조차도 프롬프트를 다시 입력하고 로딩을 기다려야 하는 번거로움이 있었죠. 그래서 디자인 작업은 클로드 디자인에서 하고, 확정된 결과물만 클로드 코드로 보내는 방식이 일반적이었습니다.

이번 슬래시 디자인 스킬 업데이트로 이 모든 것이 바뀌었습니다. 이제 클로드 코드 안에서 /design 스킬을 사용하면 클로드 디자인에서만 가능했던 아트보드 캔버스를 바로 불러올 수 있습니다. 예를 들어, "할 일 관리 웹 앱 디자인 시안 세 가지를 데스크톱과 모바일 버전으로 만들어 줘"라고 요청하면, 클로드 코드 안에서 여러 시안이 펼쳐진 캔버스를 볼 수 있습니다. 시안들을 자유롭게 확대/축소하며 조망하고, 수정하고 싶은 요소를 클릭해서 바로 변경할 수 있죠. 예전에는 프롬프트로 일일이 변경해야 했던 작업들을 이제는 캔버스 위에서 직관적으로 처리할 수 있게 된 겁니다.

프로젝트의 모든 컨텍스트가 한곳에!

이번 업데이트의 두 번째이자 가장 큰 장점은 바로 '프로젝트 컨텍스트 유지'입니다. 클로드 코드로 프로젝트를 진행하다 보면 CLAUDE.md, design.md, PRD 등 다양한 문서와 규칙들이 생성되고 프로젝트 폴더 안에 쌓이게 됩니다. 에이전트는 이러한 맥락을 바탕으로 작업을 수행하죠.

만약 캔버스 기능이 클로드 코드에 없었다면, 디자인 시안 작업을 위해 클로드 디자인으로 넘어가야 했을 겁니다. 이 과정에서 프로젝트의 문서나 맥락을 잃기 쉽고, 파일을 양쪽으로 주고받는 번거로움이 발생했습니다. 하지만 이제 클로드 코드 상에서 아트보드 캔버스를 사용할 수 있게 되면서, 프로젝트의 모든 맥락을 공유한 상태에서 디자인 작업을 진행할 수 있게 되었습니다.

실제 프로젝트는 기획, 디자인, 개발, 마케팅이 일방향으로 진행되지 않습니다. 디자인 작업은 중간에 수시로 발생하고, 기획이나 개발 단계에서도 디자인 수정이 필요할 때가 많죠. 이럴 때마다 클로드 디자인과 클로드 코드를 왔다 갔다 하는 것은 매우 비효율적입니다. 캔버스가 클로드 코드에 통합되면서 이러한 비효율성이 크게 개선될 수 있습니다.

실전 프로젝트: 할 일 앱 풀 프로세스 한 방에!

이번 업데이트의 진가를 확인하기 위해, 저는 좀 더 복합적인 프로세스를 거쳐 할 일 앱 프로젝트를 진행해 보았습니다. 레퍼런스 수집 및 보고서 작성(Mobbin MCP 활용), 앱 비주얼/기획 컨셉 시안 작업, 컨셉 확정 후 디자인 시스템 수립 및 PRD 작성, 필요한 화면 생성, 그리고 최종 개발까지 모든 단계를 클로드 코드 한 세션 안에서 진행했습니다.

예전 방식이었다면 디자인 시안 작업, 디자인 시스템 수립, 전체 화면 생성 등은 클로드 디자인에서만 해야 했을 겁니다. 하지만 이제는 클로드 코드에서 이 모든 과정을 밟을 수 있게 되어 엄청난 효율을 경험할 수 있었습니다.

예를 들어, 저는 /design 스킬을 사용해 "할 일 관리 웹 앱 디자인 시안 세 가지를 데스크톱과 모바일 버전으로 만들어 줘. 하나는 어린용, 다른 하나는 운동 선수용, 다른 하나는 회사 업무용으로 만들어 봐. 모빈에서 레퍼런스를 찾아서 적용하고 보고서로 정리해 줘."라고 요청했습니다. 결과는 놀라웠습니다. 각 컨셉에 맞는 레퍼런스 보고서와 함께, 어린이용은 여우 캐릭터와 퀘스트 요소를 활용한 알록달록한 디자인, 운동 선수용은 다크 테마와 형광색을 활용한 역동적인 디자인, 업무용은 효율성과 생산성에 초점을 맞춘 깔끔한 디자인 시안이 캔버스에 펼쳐졌습니다.

이후 저는 어린이용 할 일 앱 컨셉을 확정하고, PRD 문서와 디자인 시스템(design.md)을 만들었습니다. 그리고 이 문서들을 바탕으로 필요한 모든 화면들을 캔버스에 새로운 페이지로 생성해 달라고 요청했죠. 클로드 코드는 디자인 시스템의 일관성을 유지하며 데스크톱과 모바일 각각에 필요한 화면들을 모두 준비해 주었습니다. 마지막으로 디자인 시스템을 CSS로 구축하고, 이를 바탕으로 앱을 구현하는 것까지 한 세션 안에서 모두 처리할 수 있었습니다.

병렬 디자인 작업과 아직 남은 한계점

이번 업데이트로 좋아진 또 다른 점은 병렬 디자인 작업이 가능하다는 것입니다. 클로드 코드에서는 여러 세션을 열어 동시에 다른 디자인 작업을 진행할 수 있습니다. 예를 들어, 한 세션에서는 A 화면 디자인을, 다른 세션에서는 B 화면 디자인을 동시에 진행하는 것이 가능해졌죠. 기존 클로드 디자인에서는 새로운 대화창을 열면 이전 작업이 멈추는 경우가 있었는데, 이제는 이런 제약 없이 효율적인 병렬 작업이 가능해졌습니다.

물론, 이번 슬래시 디자인 스킬이 클로드 디자인의 모든 기능을 포함하는 것은 아닙니다. 몇 가지 한계점도 존재하는데요. 첫째, 캔버스 기능은 들어왔지만, 클로드 디자인의 강력한 내보내기 기능(HTML, PPT, PNG, PDF, 비디오, 벌셀 등)은 아직 지원되지 않습니다. 현재는 링크만 제공할 수 있죠. 따라서 인스타그램 카드 뉴스나 PPT 슬라이드처럼 내보내기가 중요한 작업에는 여전히 클로드 디자인을 사용하는 것이 더 효율적일 수 있습니다.

둘째, 클로드 디자인에는 디자인 시스템을 생성하고 관리하는 편리한 툴이 있지만, 슬래시 디자인에는 이 기능이 포함되어 있지 않습니다. 따라서 디자인 시스템 관리가 중요한 프로젝트라면, 여전히 클로드 디자인에서 디자인 시스템을 구축하고 관리하는 것이 좋을 수 있습니다.