#클로드디자인 #ClaudeDesign #AI디자인
클로드 디자인으로 모바일 화면 7장, 1시간 만에 만들었습니다. 피그마에서는 선 하나 안 그렸습니다.
예전 같으면 2주 걸리고, 디자이너 인건비만 400만 원부터 시작하던 작업이죠.
9년 동안 UX 디자인 컨설팅 회사를 운영하면서 포토샵으로 한 땀 한 땀 그리던 시절부터 피그마 컴포넌트로 디자인 시스템을 세우던 시절까지 다 거쳤습니다.
그런데 지금은 그 과정을 이렇게 안 합니다.
다만 "예쁜 앱 만들어줘"라고 던진다고 좋은 디자인이 나오지는 않습니다.
핵심은 화면을 하나씩 고치는 게 아니라, 디자인의 규칙 자체를 먼저 바꾸는 겁니다.
컬러, 타이포그래피, 버튼, 카드, 여백, 모서리까지 규칙을 먼저 정하고
그 규칙으로 화면을 만들게 하면, AI가 화면마다 제각각 디자인하는 문제가 크게 줄어듭니다.
이 영상에서는 피그마 커뮤니티의 디자인 시스템을 가져와 클로드 디자인에서 커스터마이징하고,
PRD와 실제 운영 중인 PC 서비스 화면을 넣어 모바일 주요 화면까지 만드는 전 과정을 보여드립니다.
AI로 디자인했다는 걸 아무도 모를 정도의 퀄리티를 보여드릴 게요
✅ 이런 분들에게 추천합니다
✔ AI로 UI를 만들었는데 결과가 비슷비슷해서 고민인 분
✔ Claude를 UX/UI 디자인 실무에 활용하고 싶은 분
✔ 디자인 시스템을 처음부터 만드는 것이 부담스러운 기획자·디자이너
✔ Figma 작업 시간을 줄이고 싶은 분
✔ 서비스 기획부터 UI 제작까지 AI와 함께 진행하고 싶은 분
✔ AI 시대에 UX 디자이너의 역할이 어떻게 달라질지 궁금한 분
■ 오늘의 작업 순서
Plan & PRD → 디자인 시스템 레퍼런스 → 스타일 레퍼런스 이미지 → 클로드 디자인 → 모바일 UI
■ AI와 일할 때 지키는 프롬프트 원칙 3가지
1. 맥락과 목적을 먼저 설명한다
2. 원하는 방향을 시각 레퍼런스로 보여준다 (구체적일수록 좋다)
3. 한 번에 하나씩 시킨다 — 연관된 화면 묶음 단위로
■ 타임스탬프
00:00 🏗️ 원래 UX 디자인은 어떻게 만들어졌을까?
[03:50] 🤖 AI 티 안 나는 디자인의 핵심
[05:05] 🧠 AI와 사람의 Dual Brain 방식
[06:58] 🔎 Figma Community에서 디자인 레퍼런스 찾기
[08:48] 🎨 Claude로 나만의 디자인 시스템 만들기
[10:15] 🧩 디자인 시스템을 실제 화면에 적용하기
[11:26] 📱 PC 서비스를 모바일 UX로 재설계하기
[12:07] ✨ Figma를 직접 만지지 않고 화면 만들어보기
[15:08] 🎯 한 화면에서 여러 화면으로 확장하기
다음 영상에서는 여기서 만든 디자인을 피그마로 자동으로 옮겨서
바이브 코딩을 준비하는 과정까지 이어갑니다.
■ 이 영상에서 쓴 자료
디자인 시스템 레퍼런스: [https://www.figma.com/design/NFv4XcFdOcuFBHafr6f7qq/iOS-and-iPadOS-26--Community-?node-id=553-22762&t=0HzAbARTLLJDxfow-1]
이렇게 클로드와 함께 프로토타입 MVP를 만들어가는 과정을 계속 올립니다.
비슷한 고민 하고 계셨다면 구독해두세요.
어떤 부분이 제일 궁금하셨는지 댓글로 남겨주시면 다음 영상에 반영하겠습니다.
IDEAiPlus는 아이디어에 AI를 더해, 생각을 문서와 서비스로 바꾸는 과정을 함께 찾아가는 채널입니다.
#클로드디자인, #클로드, #Claude Design, #AI디자인, #디자인시스템, #피그마, #피그마없이디자인, #ux디자인 디자인, #모바일UI, #PRD, #AI프롬프트, #프로토타입, #MVP, #AI디자인툴, #바이브코딩
