[실습 1]
디자인 시스템 & DESIGN.md의 중요성
실습 설명
패션 플랫폼 M사의 메인 화면을 레퍼런스로 컬러/타이포/간격/컴포넌트 토큰을 DESIGN.md로 정의하고, 이를 기반으로 일관된 모바일 커머스 UI를 프롬프트로 생성해봅니다.

강의 내용 미리보기
(1) 컬러 팔레트
(2) 타이포 스케일
(3) 간격 규칙
(4) 버튼/탭/카드 컴포넌트
(5) 인터랙션 적용

[실습 2]
콘텐츠 + 커머스를 조합할 때의 디자인 구성
실습 설명
라이프스타일 플랫폼 O사의 메인 화면을 레퍼런스로, 콘텐츠와 커머스 영역이 한 화면에 공존할 때의 정보 위계/섹션 리듬/컴포넌트 다양성을 DESIGN.md로 확장하고 구현해봅니다.

강의 내용 미리보기
(1) 콘텐츠형 카드 컴포넌트
(2) 커머스형 카드 컴포넌트
(3) 섹션 헤더/캐러섹/그리드 컴포넌트
(4) 태그 칩/플로팅 컴포넌트

[실습 3]
정보 밀도가 높을 때의 디자인 구성
실습 설명
중고거래 플랫폼 D사를 레퍼런스로 랜딩 → 검색 결과 리스트 → 상품 상세 페이지로 이어지는 다중 화면 플로우 전체에 걸친 디자인 시스템을 DESIGN.md로 설계하고, 페이지 간 일관성, 라우팅, 재사용 가능한 컴포넌트 구조까지 구현해봅니다

강의 내용 미리보기
(1) 글로벌 토큰(브랜드 컬러·타이포·아이콘 시스템)
(2) 페이지별 로컬 토큰(랜딩 다크 모드 / 마켓 화이트 모드)
(3) 재사용 컴포넌트
(4) 랜딩페이지 > 검색결과 화면 > 상품 페이지 구현

Claude Design 출시 직후 SNS에 떠도는 결과물들의 대부분은 "한 화면을 멋지게 뽑은" 사례가 대부분이었습니다. 보기엔 그럴듯하지만, 실제 서비스에 적용하려고 보면 문제가 드러나죠. 같은 프롬프트를 다시 돌렸을 때 컬러가 미묘하게 달라지고, 비슷한 컴포넌트의 패딩이 들쭉날쭉하고, 화면 5개를 만들면 톤이 5가지가 됩니다. "보기엔 예쁜데 양산이 안 되는" 상태인 거예요. 이건 도구의 한계가 아니라, 사용자가 시스템을 정의해주지 않았기 때문에 발생하는 현상입니다.

저는 현재 국내에서 가장 큰 DESIGN.md 저장소를 운영하고, Claude Design이 출시된 이후 가장 먼저 DESIGN.md를 활용한 일관성 있는 작업물을 만들어내는 과정을 SNS를 통해 공유해왔습니다. 토스·배달의 민족·당근 같은 국내 대기업의 디자인을 채팅 3번 만에 일관성 있게 재현하는 워크플로우를 Threads에 올렸을 때 누적 5만 회 이상의 반응이 왔고, "이런 게 가능하냐"는 질문을 정말 많이 받았습니다.

이 강의는 그 워크플로우를 처음부터 끝까지 전수하는 자리입니다. 단순히 한 장면을 잘 뽑는 것이 아니라, 한 번 정의한 디자인 시스템으로 랜딩페이지·IR·카드뉴스·앱 화면을 모두 일관되게 양산하고, 나중에 기능을 추가할 때도 흐트러지지 않게 확장하는 방법까지 다룹니다. 상업적으로 쓰려면 결국 "일관성을 통제할 수 있느냐"가 핵심이고, 이 강의는 정확히 그 능력을 만들어드리는 것을 목표로 합니다.

한 줄로 답한다면, "시스템으로 디자인의 일관성을 통제하는 사고방식"을 갖추게 하는 것입니다. 대부분의 AI 디자인 강의는 "이 도구의 이 기능을 이렇게 누르면 됩니다"에서 끝납니다. 그런데 도구는 6개월마다 바뀌고, 기능은 매주 업데이트됩니다. 도구 사용법만 배우면 6개월 뒤 다시 강의를 들어야 해요.

이 강의는 그 반대 방향을 택했습니다. Claude Design은 어디까지나 "도구" 중 하나이고, 진짜로 배워야 하는 것은 "디자인 시스템(DS)과 DESIGN.md로 결과물의 일관성을 통제하는 사고방식" 입니다. 이걸 한 번 익혀두면 어떤 AI 디자인 도구가 새로 나와도, 어떤 도메인의 작업이 들어와도 같은 원리로 풀어낼 수 있습니다.

완강 후에 구체적으로 다음 세 가지를 할 수 있게 됩니다. 1. 무신사/오늘의집/당근 같은 국내 대기업 수준의 디자인을 그대로 카피해서, 본인 브랜드에 차용 가능한 자산으로 정리할 수 있게 됩니다.

2. Apple HIG/토스 디자인 시스템 같은 검증된 시스템을 가져와, 본인 서비스의 랜딩페이지/IR 피치덱/카드뉴스를 일관된 톤으로 양산할 수 있게 됩니다. 한 번 잡은 시스템으로 매주 새 콘텐츠를 30분 만에 만들어내는 워크플로우를 손에 익히는 거죠.

3. 본인 서비스(혹은 가상 서비스)의 구린 디자인을 처음부터 리뉴얼하고, 데스크탑 웹/모바일 웹 반응형까지 일관되게 만든 다음, 새 기능을 추가할 때도 기존 디자인이 흔들리지 않게 확장하는 전 과정을 직접 해보게 됩니다.

본 강의는 이 세 가지를 12시간 안에 압축해서 다룹니다. "도구 사용법"을 넘어 AI 시대에도 변하지 않는 "디자인 사고방식"을 가르치는 강의이기 때문에, 강의가 끝난 뒤에 옆에 제가 없더라도 스스로 프로젝트에 적용할 수 있는 능력을 가져가실 수 있습니다.

다음 네 분 중 한 명에라도 본인이 들어맞는다고 느끼신다면, 이 강의가 당장 도움이 되실 거예요.

1. 디자이너 없이 사업을 운영하고 있는 [1인 기업가/솔로프리너/소규모 운영자]
외주 비용은 부담되고, 본인이 만들면 퀄리티가 아쉬워서 결국 콘텐츠 발행이 미뤄지는 분들 많으실 거예요. 이 강의는 "디자이너 한 명을 영입한 것과 비슷한 효과"를 1인이 가져갈 수 있는 워크플로우를 만들어드립니다. 한 번 정의한 DESIGN.md로 랜딩·SNS 콘텐츠·제안서를 모두 같은 톤으로 양산할 수 있게 됩니다.

2. 디자인 센스에 자신이 없어서 [결과물 퀄리티에 늘 아쉬움을 느끼던 분]
사실 디자인 센스는 "타고나는 것"이 아니라 "좋은 시스템을 모방하는 훈련의 결과"입니다. 이 강의는 그 시스템을 어떻게 추출하고, 어떻게 본인 작업에 적용하는지를 단계별로 보여드립니다. 비전공자에 맞춰 설계했기 때문에 포토샵·피그마 경험이 없어도 따라오실 수 있습니다.

3. 바이브코딩에 관심 있는 디자이너
Claude Code·Cursor를 써보고 싶은데 어디서부터 시작해야 할지 막막한 분들. 이 강의는 디자인 단계에서 코드 단계로 매끄럽게 이어지는 핸드오프 워크플로우를 다루기 때문에, 본인의 디자인 감각을 그대로 코드 결과물로 연결하는 경험을 가져가실 수 있습니다.

4. Claude Code/Cursor를 이미 쓰고 있는 개발자
AI로 코드는 빠르게 만드는데 디자인 산출물 자동화는 아직 정립이 안 되신 분들. 이 강의는 DESIGN.md를 어떻게 정의하고 Claude Code와 어떻게 연결해야 디자인까지 AI로 자동화되는지 구체적인 워크플로우를 보여드립니다.

실습에 필요한 최소 비용을 솔직하게 안내드립니다. 다만 다른 AI 강의들에 비해 부담이 훨씬 적도록 설계했습니다.

1. 필수 비용 – Claude Pro 구독: 월 $20
Claude Design은 Claude Pro 이상 구독자에게만 제공되는 기능이라 이 부분은 필수입니다. 강의 12시간을 따라오시는 동안의 메시지 한도는 Pro 플랜으로 충분합니다.

2. 권장 비용 – Cursor 또는 Claude Code (선택)
Cursor: 월 $20 / Claude Code: Pro 구독에 포함 Part 3 후반부와 Part 4의 Claude Code 핸드오프 실습에서 사용합니다. 둘 중 하나만 있으면 충분하고, 강의 전에 어느 쪽이 본인에게 더 맞는지 비교해드리는 클립도 포함되어 있습니다. 강의는 Claude Code를 중심으로 진행할 예정입니다. 3. 선택 비용 – 에셋 생성 도구 (Grok Imagine, 미드저니 등) 강의 중 이미지·영상 에셋을 만드는 파트가 있는데, 강사가 미리 만들어둔 에셋 모음을 GitHub로 제공해드리기 때문에 별도 구독 없이도 모든 실습을 따라오실 수 있습니다. 직접 에셋을 만들어보고 싶으신 분만 Grok Imagine(월 $30)이나 다른 도구를 선택적으로 사용하시면 됩니다.

4. 비용 없는 부분
배포 실습은 Vercel 같은 무료 플랜으로 충분히 진행되도록 설계했습니다. 별도 호스팅 비용이나 도메인 비용 없이 본인 결과물을 인터넷에 올리는 경험을 하실 수 있습니다.
정리하면, 최소 비용은 Claude Pro 월 $20 한 가지입니다. 나머지는 실습을 따라하고, 실제로 프로젝트를 진행하시면서 자유롭게 추가로 구독하셔서 사용하시면 됩니다

* 26년 5월 기준 정보
* 툴이나 프로그램 사용 환경과 버전 업데이트에 따라, 강의 내 화면(UI) 구성이나 기능이 실제 수강 시점과 다를 수 있습니다.
* 본 강의는 촬영 시점의 버전을 기준으로 학습 흐름과 개념 전달에 중점을 두었으며, 이후 버전 업데이트에 따른 내용 수정이나 추가는 제공되지 않습니다.
* 강의에서 안내되는 AI 툴의 무료 크레딧 제공 여부 및 요금제 가격은 각 서비스 제공사의 정책에 따라 변경되거나 종료될 수 있습니다. 이용 전 반드시 해당 서비스의 최신 정책 및 요금을 확인해 주시기 바랍니다.