🎨 클로드 디자인, 꼭 알아야 할 것들 — 'AI 티' 안 나는 앱 UI를 1시간 만에
디자인 시스템·프롬프트 3원칙부터, 코드 안에서 바로 쓰는 /design 업데이트까지
🎨 클로드 디자인, 꼭 알아야 할 것들 — 'AI 티' 안 나는 앱 UI를 1시간 만에
디자인 시스템·프롬프트 3원칙부터, 코드 안에서 바로 쓰는 /design 업데이트까지
요즘 디자인 쪽에서 클로드 디자인(Claude Design) 얘기가 계속 나옵니다. 저도 처음엔 "AI가 만든 화면은 어차피 티 나잖아" 싶었는데, 제대로 쓰는 사람들 결과물을 보면 그게 아니더라고요. 핵심은 도구를 잘 다루는 게 아니라, '무엇을 만들지'를 정확히 정의하고 디자인 시스템을 잘 태워주는 것에 있었어요.
UX 9년 경력자의 실전 워크플로우와, 최근 나온 /design 업데이트까지 — 클로드 디자인 쓸 거면 꼭 알아야 할 것들을 한 번에 정리했습니다.
◦ ◦ ◦
🔄 1. 뭐가 바뀌었나 — 도구 숙련보다 '기획력'
예전엔 피그마·포토샵을 얼마나 능숙하게 다루느냐가 실력이었죠. 지금은 달라졌어요. 무엇을, 어떤 흐름으로 만들지 설계하는 기획력(UX 설계)이 더 중요해졌습니다. 그림 그리는 손보다, 잘 정의하는 머리가 앞선다는 거예요.
효율도 무섭습니다. 피그마에서 선 하나 직접 안 긋고도, 1시간 안에 디자인 시스템 구축 + 모바일 UI 화면 7~10장을 뽑아냅니다. 예전 같으면 며칠 걸리던 일이죠.
◦ ◦ ◦
🧱 2. AI 티 안 나는 디자인 — 3단계 워크플로우
① 디자인 시스템 준비 & 커스터마이징
• 피그마 커뮤니티의 검증된 UI 키트(예: iOS/iPad UI Kit) .fig 파일을 내보내 클로드 디자인에 업로드.
• 핀터레스트 등에서 뉴모피즘·글래스모피즘 같은 원하는 스타일과 컬러 팔레트 레퍼런스를 수집.
• 그 레퍼런스 이미지를 첨부해서 컬러·컴포넌트·섀도우·이펙트를 우리 톤으로 커스터마이징.
② PRD + 레퍼런스 전달
• 서비스 플로우와 요구사항을 정리한 PRD 문서를 첨부하고 모바일 UI를 지시.
• 한 번에 다 시키지 말고, 메뉴/기능 단위로 하나씩 순차로 진행.
③ 피드백 & 세부 수정
• 그림자가 너무 강하거나 포인트 컬러가 약하면, 말로 지시하거나 수정용 레퍼런스 이미지를 던져 실시간으로 보완.
◦ ◦ ◦
🎯 3. 성공하는 프롬프트 3원칙
• 맥락·목적 명확화 — 어떤 서비스의 모바일 버전을 만드는지 정확히 설명.
• 구체적 레퍼런스 제공 — AI가 시각적 방향을 잡게 이미지·컬러 스타일을 첨부.
• 단계별 분할 — 과부하 방지를 위해 한 번에 한 메뉴, 혹은 연속된 화면 단위로 요청.
"OO 배달 서비스의 모바일 홈 화면을 만들어줘. 톤은 첨부한 글래스모피즘 레퍼런스처럼, 포인트 컬러는 이 팔레트로. 이번엔 홈 화면 하나만 먼저 보여줘."
◦ ◦ ◦
🔗 4. 디자인에서 끝이 아니다 — 개발로 연결
완성된 화면은 그림으로 끝나지 않아요. 피그마(Figma)로 자동 전송한 뒤, 피그마 MCP를 연동하고, 클로드 코드(Claude Code)로 프론트엔드 바이브코딩 → MVP 개발까지 이어집니다. 디자인이 곧 개발의 출발점이 되는 거죠.
◦ ◦ ◦
🆕 5. 최신 업데이트 — 코드 안에서 바로 /design
앤트로픽이 최근 /design(슬래시 디자인) 스킬을 내놨는데, 이게 워크플로우를 크게 바꿨어요.
• 단일 세션 통합 — 예전엔 디자인은 클로드 디자인, 코딩·기획은 클로드 코드에서 따로 하며 파일을 주고받았죠. 이제 클로드 코드 안에서 /design으로 아트보드 캔버스를 바로 호출합니다.
• 맥락 유지 — PRD, 디자인 규칙(design.md), 프로젝트 규칙(CLAUDE.md)이 한 세션 안에서 안 끊기고 유지돼 효율이 확 올라갑니다.
• 병렬 작업 — 세션을 여러 개 열어 디자인·작업을 동시에.
실전 6단계 워크플로우
◦ ◦ ◦
⚠️ 6. 아직은 한계도 있어요
• 내보내기 제한 — 클로드 디자인과 달리 /design은 HTML·PPT·PNG·PDF·Vercel 전송 같은 다양한 내보내기가 부족하고, 지금은 링크 공유 위주입니다.
• 디자인 시스템 GUI 관리 불가 — 클로드 디자인이 주는 전용 GUI 관리 툴이 없어서, 지금은 CSS·문서 형태로 관리해야 해요.
◦ ◦ ◦
💡 정리하면
클로드 디자인의 핵심은 결국 '좋은 디자인 시스템 + 구체적 레퍼런스 + 단계별 프롬프트'예요. 이 셋만 지키면 AI 티 안 나는 화면이 1시간 안에 나오고, 그대로 피그마·클로드 코드로 넘겨 개발까지 이어집니다. 최신 /design까지 쓰면 디자인과 개발을 한 세션에서 왕복 없이 끝낼 수 있고요.
처음이라면 검증된 UI 키트 하나 올리고, 마음에 드는 레퍼런스 몇 장 붙여서 화면 하나만 만들어 보세요. "어? 이거 AI가 만든 거 맞아?" 싶은 결과가 나올 겁니다. 🙌