코딩 몰라도 OK! Claude Design으로 디자인부터 배포까지, 나의 첫 웹앱

1. 이런 걸 배워요 (수강 후 얻는 것)

• Claude 채팅을 기획 보조로 활용해 화면 3개짜리 앱 기획 메모를 만드는 방법

• Mobbin에서 실제 앱 화면을 찾아 디자인 레퍼런스로 활용하는 방법

• Claude Design으로 첫 화면을 확정하고 디자인 기준을 세우는 프롬프트 작성법

• 채팅·인라인 코멘트·직접 편집·캔버스 조정, 상황별 4가지 수정 방법

• 화면끼리 클릭으로 이어지는 인터랙티브 프로토타입 만들기

• Hand off to Claude Code로 디자인 의도와 구조를 그대로 코드 작업에 넘기기

• 기술 조건·기능·확인 요청 3단 구성 프롬프트로 실제 동작하는 웹앱 구현하기

• Firebase Authentication으로 구글 로그인·회원가입 기능 붙이기

• Firestore 컬렉션에 내 데이터를 저장하고, 로그인한 사용자별로 불러오기

• AI에게 버그를 정확히 설명하는 법과 GitHub + Vercel로 내 앱 URL 배포하기

2. 한눈에 보는 강의

코딩을 몰라도, 디자인 툴을 다룰 줄 몰라도 괜찮습니다.
이 강의에서는 기획은 나와 Claude 채팅이, 디자인은 Claude Design이, 개발은 Claude Code가 맡는 세 가지 역할 분담으로 독서 기록 웹앱 「나의 책장」을 처음부터 끝까지 완성합니다.
화면을 그리고 끝나는 것이 아니라, Firebase로 구글 로그인·회원가입을 붙이고 Firestore 컬렉션에 내 데이터를 저장하는, 실제로 동작하고 휴대폰에서 열리는 URL까지 만드는 것이 목표입니다.
한 번 이 흐름을 익히면 맛집 기록, 운동 기록, 단어장처럼 나만의 아이디어도 같은 방법으로 만들 수 있습니다.

완성본에서 직접 확인해보세요

3. 섹션별 학습 포인트

섹션 1. Claude Design으로 디자인하기 — 기획부터 클릭되는 프로토타입까지

① 세 가지 역할과 Claude Design 시작하기 (1~2강)

기획자(나 + Claude 채팅), 디자이너(Claude Design), 개발자(Claude Code)의 역할을 나누고, Claude Design의 작업 화면과 사용량을 아끼는 요청 습관을 익힙니다.

② Claude 채팅으로 기획하고 Mobbin으로 레퍼런스 모으기 (3강)

"먼저 나에게 질문 3개만 해줘" 한 문장으로 Claude 채팅과 대화하며 기획 메모를 완성합니다.
Goodreads, Apple Books, Blinkist 같은 실제 앱 화면을 Mobbin에서 찾아 "무엇을 참고할지" 정리합니다.

③ 첫 화면 확정과 4가지 다듬기 방법 (4~5강)

목록 화면 하나로 색·글꼴·분위기를 먼저 확정하고, 채팅·인라인 코멘트·직접 편집·캔버스 조정을 상황에 맞게 써서 완성도를 높입니다.
BookCard, StarRating처럼 요소에 이름을 붙여 디자인과 코드가 같은 언어를 쓰게 만듭니다.

④ 프로토타입 연결과 핸드오프 전 점검 (6~7강)

"같은 스타일로" 한마디로 추가·상세 화면을 만들고, 화면끼리 클릭으로 이동하는 프로토타입을 완성합니다.
놓치기 쉬운 빈 상태(Empty State)와 PC 화면까지 점검합니다.

섹션 2. Claude Code로 구현하고 배포하기 — 핸드오프부터 내 앱 URL 공유까지

⑤ 핸드오프와 3단 구성 구현 요청 (8~9강)

Export → Hand off to Claude Code로 디자인을 Claude Code Web에 넘기고, 기술 조건·기능·확인 요청으로 나눈 프롬프트로 목록 화면부터 구현합니다.

⑥ Firebase 연동과 디버깅 (10~11강)

Firebase 프로젝트를 만들어 앱에 연결하고, 구글 로그인과 이메일 회원가입을 붙입니다.
책 정보를 Firestore 컬렉션에 저장해 로그인한 사용자별로 추가·상세·삭제와 새로고침 후 데이터 유지를 화면 단위로 검증합니다.
"안 돼요" 대신 한 일 · 본 것 · 원하는 것으로 버그를 설명하는 법을 익힙니다.

⑦ 배포와 수정 루프 (12~13강)

GitHub에 올리고 Vercel로 배포한 뒤, Firebase에 배포 주소를 등록해 휴대폰에서도 구글 로그인이 되는 내 앱을 열어 봅니다.
마지막으로 "읽은 날짜" 기능을 추가하며 디자인 수정 → 재핸드오프 → 코드 반영 → 자동 재배포의 수정 루프를 한 바퀴 돕니다.

4. 이 강의를 들어야 하는 이유

🧭 1. 기획 → 디자인 → 개발 → 배포, 전 과정을 한 번에

화면만 예쁘게 뽑고 끝나는 데모가 아닙니다. 기획 메모에서 시작해 실제로 동작하는 앱의 URL을 공유하는 데까지 갑니다.

🤝 2. 역할을 나눠서 AI를 제대로 부립니다

나와 Claude 채팅은 기획, Claude Design은 디자인, Claude Code는 개발. 각 도구에 맞는 일을 맡기는 법을 배워 결과물의 품질이 달라집니다.

🎨 3. 감이 아니라 레퍼런스로 디자인합니다

Mobbin에서 검증된 실제 앱 화면을 찾아 "무엇을 참고할지"까지 정리해 프롬프트에 녹이는 실무 방식을 따라 합니다.

🧩 4. 그대로 복사해서 쓰는 프롬프트

기획, 첫 화면, 수정, 프로토타입, 구현, 디버깅까지 단계별 프롬프트를 제공합니다. 내 프로젝트에 단어만 바꿔 바로 쓸 수 있습니다.

⏱️ 5. 10~15분 단위의 짧고 확실한 13강

한 강마다 결과물이 하나씩 쌓이는 구성이라 출퇴근길에 한 강씩 들어도 흐름을 놓치지 않습니다.

이런 분들이 수강 후 바로 활용할 수 있습니다.

• 아이디어를 개발자 없이 직접 프로토타입으로 검증하고 싶은 기획자·마케터·창업자

• 디자인 시안을 실제 동작하는 화면으로 바로 만들어 보고 싶은 디자이너

  
  

5. 수강 전 참고사항

📌 Claude 유료 플랜이 필요합니다

Claude Design과 Claude Code는 Claude 유료 플랜(Pro 이상)에서 사용할 수 있습니다. 사용량은 채팅·Claude Code와 같은 한도에서 차감되므로, 강의에서 알려 드리는 "묶어서, 구체적으로" 요청하는 습관을 따라 주세요.

📌 Claude Design은 업데이트가 잦은 서비스입니다

Claude Design은 리서치 프리뷰 단계라 메뉴 이름이나 위치가 강의 화면과 조금 다를 수 있습니다. 큰 변경이 생기면 [강의 새소식 / 보충 영상]으로 안내합니다.

📌 강의 자료 제공

• 차시별 강의 슬라이드(PDF)

• 단계별 프롬프트 모음

• Mobbin 추천 레퍼런스 링크 목록

  
  

  
  

📌 Firebase는 무료 요금제(Spark)로 실습합니다

구글 계정만 있으면 Firebase를 무료로 시작할 수 있고, 실습 규모에서는 결제 정보가 필요하지 않습니다. 단, Firebase 콘솔 화면은 바뀔 수 있어 보충 안내를 드릴 수 있습니다.

📌 Mobbin은 무료 계정으로 충분합니다

무료 계정은 앱마다 볼 수 있는 화면 수가 제한되지만 실습에는 충분합니다.

6. 실습 환경

• 운영체제: Windows, macOS (브라우저만 있으면 OK)

• 브라우저: Chrome 권장

• AI 도구: Claude (Pro 이상) — Claude 채팅, Claude Design, Claude Code Web

• 레퍼런스: Mobbin 무료 계정

• 코드 저장·배포: GitHub 계정, Vercel 계정 (GitHub로 가입 권장)

• 백엔드: Firebase (구글 계정) — Authentication, Firestore

• 설치 프로그램: Node.js (LTS) — GitHub 연동과 Firebase 설정에 필요

  
  

7. 이런 분께 추천해요 / 선수 지식

추천 대상

• 코딩은 처음이지만 내 아이디어를 앱으로 만들어 보고 싶은 분

• Claude Design이 궁금하지만 어디서부터 시작할지 모르는 분

• 디자인 시안에서 멈추지 않고 실제 동작하는 화면까지 가 보고 싶은 디자이너

• 개발자 없이 빠르게 프로토타입을 만들어 검증하고 싶은 기획자·창업자

• AI로 웹앱을 만드는 전 과정을 한 번 경험해 보고 싶은 분

선수 지식

• 필요 없습니다. 웹 브라우저를 쓸 줄 알면 충분합니다.

• HTML/CSS를 조금 알면 9~10강에서 만들어진 코드를 이해하는 데 도움이 됩니다.