by Kainos·2026.4.24·7분 읽기
kainos.kr 메인 페이지를 새로 디자인해보고 싶던 참에 Claude Design이 출시됐습니다. 평소 kainos.kr과 bible.kainos.kr 같은 사이트를 만들 때는 Pencil로 시안을 여러 개 받아서 마음에 드는 안을 골라 구현하는 방식을 써왔는데, 이번엔 새 도구를 한번 써보려 합니다.
Claude Design은 2026년 4월 17일 출시된 Anthropic의 AI 디자인 도구입니다. 프롬프트 한 줄로 프로토타입·슬라이드·원페이저를 만들고, 대화로 다듬어 완성하는 흐름입니다. 디자인 경험이 없는 창업자, PM, 마케터를 주요 대상으로 내세우지만, 개발자도 아이디어를 빠르게 시각화하는 데 유용합니다.
Claude Design이란
내부 모델은 방금 공개된 Claude Opus 4.7입니다. 일반 Claude 대화나 Claude Code처럼 코드와 텍스트만 다루는 게 아니라, 시각적 결과물 자체를 생성한다는 것이 핵심입니다. 만들 수 있는 산출물은 네 가지입니다.
- 인터랙티브 프로토타입 — 클릭이 동작하는 모바일·웹 목업
- 프레젠테이션 슬라이드 — 기획서·제안서 수준의 덱
- 원페이저 — 랜딩 페이지, 제품 소개, 포스터 형태
- 시각 자산 — 마케팅용 이미지, 소셜 그래픽
접근 조건은 Claude Pro, Max, Team, Enterprise 구독자이며 현재는 연구 미리보기(research preview) 단계입니다.
핵심 기능 네 가지
디자인 시스템을 읽는다
GitHub 레포, Figma 파일, 폰트, 로고를 올리면 팀의 브랜드 시스템을 자동으로 학습합니다. 이후 만들어지는 모든 프로젝트는 그 스타일을 상속받아 일관된 결과물이 나옵니다.
대화로 수정한다
"여백을 좀 더 주고, 타이틀 색을 차분한 톤으로" 같은 평문 지시로 수정할 수 있습니다. 특정 요소에 인라인 주석을 달거나, Claude가 직접 만들어주는 슬라이더로 여백·색·레이아웃을 실시간으로 조절할 수도 있습니다.
여러 입력에서 시작한다
텍스트 프롬프트뿐 아니라 참고 이미지, 스케치, 기존 문서(DOCX·PPTX), 심지어 웹사이트 URL에서도 출발할 수 있습니다. 이미 있는 걸 가져다 시각화하거나 리디자인하는 흐름도 자연스럽습니다.
어디로든 내보낸다
PDF, PPTX, 독립형 HTML, 공유 가능한 URL로 내보낼 수 있고, Canva로 보내면 팀원들과 협업 편집이 가능합니다. Claude Code로 넘겨서 실제 프로덕션 코드로 변환하는 흐름도 지원합니다.
실제 사용 흐름
브랜드 시스템 설정
첫 프로젝트 전에 로고·폰트·컬러·기존 UI 코드를 올려 둡니다. 이후 작업은 자동으로 이 스타일을 따릅니다.
프롬프트로 시작
"명상 앱 메인 화면, 차분한 타이포그래피와 자연에서 영감받은 파스텔 톤으로" 같이 한 줄로 초안을 만듭니다.
대화형으로 다듬기
말로 수정 요청, 인라인 주석, 슬라이더 조절을 섞어가며 반복합니다. 다크모드 추가 같은 큰 변화도 한 문장으로 처리됩니다.
내보내기 또는 핸드오프
마케팅용은 PDF·PPTX로, 협업은 Canva로, 구현은 Claude Code로 넘깁니다. 인터랙티브 프로토타입은 URL로 바로 공유합니다.
Pencil과 Claude Design — 무엇이 다른가
그동안 사이트 초기 화면은 Pencil로 작업해왔습니다. kainos.kr, bible.kainos.kr의 첫 레이아웃 모두 Pencil로 여러 시안을 받아 그중 하나를 골라 만들었습니다. 그래서 Claude Design을 볼 때 자연스레 Pencil과 비교하게 됩니다.
| 항목 | Pencil | Claude Design |
|---|---|---|
| 주된 쓰임 | 여러 방향의 시안을 빠르게 탐색 | 하나의 시안을 완성도 높게 발전 |
| 결과물 형태 | .pen 파일, 스케치 수준의 레이아웃 | 인터랙티브 프로토타입, 슬라이드, 원페이저 |
| 수정 방식 | 새 시안을 다시 뽑기 | 대화·슬라이더·인라인 주석으로 현장 수정 |
| 디자인 일관성 | 각 시안이 독립적 | 브랜드 시스템을 자동 적용 |
| 프로덕션 연결 | 개발자가 다시 구현 | Claude Code로 코드 변환 가능 |
| 토큰/쿼터 | Claude Max 토큰 내에서 자유롭게 | 별도 할당량, 비교적 빠르게 소진 |
| 잘 맞는 순간 | 초기 방향 탐색, 여러 안 비교 | 고른 방향을 완성도 있게 구현 |
핵심적인 차이는 탐색 vs 완성의 축으로 갈라집니다. Pencil은 방향을 고르기 위해 여러 안을 빠르게 펼쳐 보는 쪽에 강합니다. 반면 Claude Design은 하나의 안을 붙잡고 완성도까지 끌고 가는 흐름에 더 적합합니다. 대화로 바로 수정할 수 있고, 내보낸 결과물이 그대로 프레젠테이션이나 프로덕션 코드로 연결되기 때문입니다.
언제 Pencil을 쓰고, 언제 Claude Design을 쓸까
Pencil이 잘 맞을 때 — 새 사이트·새 페이지를 시작하면서 아직 방향이 안 잡혀 있을 때. 시안을 3~5개 뽑아 놓고 고르는 초기 단계. Claude Max 토큰으로 편하게 반복할 수 있어 부담이 적습니다.
Claude Design이 잘 맞을 때 — 방향이 어느 정도 정해진 상태에서 메인 페이지·랜딩 페이지를 완성도 있게 만들고 싶을 때. 투자자용 슬라이드나 팀에 공유할 원페이저가 필요할 때. Canva로 넘겨서 협업 편집이 필요할 때.
두 도구를 섞는 흐름도 가능합니다. Pencil로 방향 탐색 → Claude Design에 해당 방향을 설명하고 프로토타입 완성 → Claude Code로 실제 구현. kainos.kr 메인 페이지 리디자인은 이 흐름으로 시도해 볼 생각입니다.
아쉬운 점 — 쿼터가 금방 찬다
써보면서 가장 걸리는 지점입니다. Claude Design은 Claude Max 토큰과 별도 할당량을 씁니다. 일반 대화에서 쓰는 토큰이 아무리 남아 있어도, Design 쪽 쿼터는 금방 차 버립니다.
디자인 작업의 본질을 생각하면 이건 꽤 큰 제약입니다. 한 번에 결정되는 경우가 거의 없고, 슬라이더를 움직이고 대화로 다듬는 반복이 많을수록 좋은 결과가 나옵니다. 그런데 그 반복이 쿼터를 빠르게 먹습니다. 몇 번 시도해 보면 제한에 걸려서, 진짜 집중해서 한 세션에 끝내야 한다는 압박이 생깁니다.
실용적인 대처는 프롬프트를 앞에서 충분히 벼리고 들어가는 것, 그리고 잔여 수정은 슬라이더로 해결하는 것입니다. 대화 수정보다 슬라이더가 쿼터를 덜 먹는 느낌입니다.
결론 — 지금은 아직 Pencil이 메인
Claude Design의 방향성과 완성도는 명확하게 매력적입니다. 프롬프트 한 줄로 프로토타입을 받고, 대화로 다듬고, 디자인 시스템을 자동으로 적용하는 흐름은 실제로 작업 시간을 크게 줄여줍니다.
다만 현재는 쿼터 제약이 일상적으로 쓰기엔 너무 뻑뻑합니다. 앞으로 리밋이 완화되거나, Claude Max 토큰과 공유되어 좀 더 여유 있게 쓸 수 있게 되면 그때 메인 도구로 넘어갈 생각입니다.
그때까지는 Pencil이 메인, Claude Design은 특별한 순간에— 이번 kainos.kr 메인 페이지 리디자인 같은 집중 작업에만 꺼내 쓰는 쪽이 현실적입니다.
Claude Design은 아래 링크에서 바로 써볼 수 있습니다.
Claude Design 열기