제가 만드는 로나(링크)를 소개하는 자리가 생겼어요. 🎉
발표 자료를 만들기 위해, Claude Design에 회사 디자인 시스템을 한 번 등록해두고, 최종 구성 정리 및 수정은 Claude Code로 핸드오프하는 흐름으로 풀어서 나름 만족스러운 결과를 얻었습니다.
Claude Design은 Anthropic Labs가 2025년 말 공개한 비주얼 작업 도구입니다. 대화로 슬라이드·프로토타입을 만들면 결과물이 실제 HTML/CSS/JS 코드로 나와요. 핵심은 회사 디자인 시스템을 한 번 등록해두면 이후 모든 산출물에 자동 적용된다는 점입니다.
1. 디자인 시스템을 한 번 등록해두니, 그 다음부터가 편해졌어요
로나의 디자인 톤을 알려주기 위해, 클로드코드에게 '로나의 디자인 시스템 알려줘.' 라고 요청했습니다.
Claude Code가 정리해준 텍스트를 그대로 복사해서, Claude Design 채팅창에 통째로 붙여넣었어요. 별도로 "이걸로 디자인 시스템 만들어줘" 같은 지시는 하지도 않았는데, Claude Design이 알아서 컬러 스케일(50→900), 폰트, radius, spacing을 모두 구조화해서 디자인 시스템으로 등록해줬습니다.
거의 30가지가 넘는 항목(버튼, 폰트, 카드, 그래프 등) 에 대해 디자인 시스템이 정리가 되었고 항목마다 Looks good / Needs work 버튼이 있어서, 잘못 잡힌 부분만 짧게 피드백을 주면 바로 반영돼요.
딱히 피드백 줄 필요 없이 한 번에 잘 나왔습니다.
한 번 등록해두니, 새 슬라이드 덱을 만들 때 이 디자인 시스템을 고르기만 하면 됩 니다.
클라우드 디자인 옵션이 강조 표시된 화면
인풋으로 대표님이 미리 만들어둔 기존 구글 슬라이드를 PDF 파일 형태로 저장했고 이걸 클로드코드에게 주었어요.
기존의 구글 슬라이드..
이 PDF 내용을 등록된 디자인 시스템 톤으로 재디자인해줘.(그런데 덱 만들기를 시키면서 클로드디자인이 저에게 몇가지 인 터뷰를 했는데 - 로나보다 조금 더 전문적인 느낌으로 만들어달라고 했더니 전반적인 톤은 로나랑 좀 달라지긴 했어요.)
시안이 한 시간 안에 나왔습니다. 대표님이 만든 슬라이드를 그대로 디자인을 시킨거라 총 19장이 나왔고 - 이걸 5분 발표에 맞춰 재구성을 해야합니다.
한국어로 된 웹사이트의 홈페이지
2. 1차 시안이 나오자 Claude Code로 넘겼어요
여기서 두 갈래 선택지가 있었어요. ① Claude Design에서 계속 내용을 다듬기 ② Share > Handoff to Claude Code로 넘겨서 코드로 편집하기.
저는 ②를 골랐는데, 이유는 두 가지예요.
첫째, Claude Design은 토큰 사용량이 별도로 관리됩니다. Claude.ai 사용량 화면을 보면 "모든 모델 / Sonnet만 / Claude Design"이 각각 독립된 한도로 표시돼요. 디자인 시스템 등록과 1차 시안까지 만들면 빠르게 소진되니, 다음번을 위해 아껴두고 싶었습니다.
둘째, 이 시점부터 필요한 작업은 발표 구성에 따라 내용 재배치 / 마이너한 디자인 수정들이라 클로드 코드가 더 잘해줄 것 같았습니다.
클로드디자인에는 핸드오프 기능이 있고 이걸 누르면 클로드코드에 전달줄 수 있는 명령어가 뜹니다.
텍스트 상자가 강조 표시된 웹 페이지의 스크린샷
텍스트 편집기가 포함된 웹페이지의 스크린샷
핸드오프하면 Claude Code 쪽에서 HTML 한 덩어리로 받습니다. 슬라이드 순서 재배치, 표·다이어그램 라벨 교체, 자동화 스크립트 같은 작업은 평소 Claude Code 환경이 훨씬 손에 붙어요. Claude Code는 다른 풀(모든 모델/Sonnet)을 쓰니까 Claude Design 풀에 부담도 안 가고요.
Share 메뉴의 Handoff to Claude Code 버튼 한 번으로 매끄럽게 넘어갔습니다. 이게 정말 깔끔한 닫힌 루프 기능이에요.
그리고 클로드코드에서 작업을 이 어나가서 한시간도 안 되어 덱을 완성했습니다. 나름 만족스러움
결과
체감으로 가장 컸던 건 "디자인 시스템 한 번 등록해두면, 다음 덱·프로토타입을 만들 때마다 같은 작업을 다시 안 해도 된다"는 점이었어요. 1회성 절약이 아니라 누적되는 절약이에요.
AI 활용 팁!
이 방법은 발표 덱 말고도 회사 톤이 일관되게 유지돼야 하는 모든 비주얼 산출물에 그대로 적용됩니다. 회사 소개서, 제안서, 채용 페이지, 이벤트 랜딩 페이지 등등.
주의할 점도 두 가지 있어요.
디자인 시스템 등록은 처음 한 번만 공들이세요. 컬러 스케일·폰트·radius를 명확히 정해서 넣으면 이후 산출물 품질이 훨씬 안정적이에요. 어설프게 넣으면 산출물도 어설프게 나옵니다.
Claude Design 토큰 풀은 별도라서 관리가 필요해요. 디자인 시스템 등록 + 1차 시안까지만 Claude Design에서 끝내고, 본격 편집은 Claude Code로 넘기는 게 효율적이에요
