WEEK 02

진짜로 만들기 — PRD · 웹 · 앱 화면

지난주에 뭘 만들지 정했습니다. 이번 주는 설계 문서(PRD)를 채우고, 그 문서대로 웹 화면과 앱 화면을 만듭니다. 끝나면 내 폰에 내가 만든 앱이 떠 있고, 컴퓨터에서 고치면 폰 화면이 따라 바뀝니다.

날짜9월 21일 (월)

시간21:00~23:00

준비물지난주 workspace · 안드로이드 폰

기술 경로Expo (React Native)

학습 목표

이 회차가 끝나면 여러분은:

설계 문서(PRD)를 이것만 보고 누가 만들어도 똑같이 나오게 채울 수 있다
문서 먼저, 화면 나중 — 문서를 고치고 화면이 따라가게 하는 순서를 익힌다
설계 문서대로 웹(관리하는 쪽) 화면을 만들 수 있다
내 폰에 내가 만든 앱을 띄우고, 설계 문서대로 앱 화면을 만들 수 있다

커리큘럼 구성

21:00~23:00 · 지난주 폴더를 그대로 쓰고, 준비된 프롬프트 상자를 붙여넣으며 진행합니다

0부 · PRD

설계 문서 완성하기

시작 전에 — 내려받은 두 파일을 workspace로 가져오기. 찾고 옮기는 건 Claude가 합니다
10단계 설계 문서를 이것만 보고 만들 수 있게 채우기 — 화면을 그림과 표로, 누르면 어떻게 되는지, 색·글씨·규칙·데이터·확인 기준까지

1부 · 웹 · 앱 화면

설계 문서 ↔ 화면

11단계 만들 자리 준비하기 — 무엇으로 만들지 고르고 설치
12단계 ⭐ 웹 첫 화면 — 문서에 적고 → 화면이 따라가고 → 시험하기, 네 바퀴
13단계 웹 둘째 화면 · 앱 간판 시안 고르기
14단계 ⭐ 앱을 내 폰에 띄우기 — 컴퓨터에서 바꾸면 폰이 바로 바뀌는 걸 확인
15단계 앱 화면 — 설계 문서대로 하나씩

시간이 남으면 · Supabase

저장되게 만들기

16~19단계 데이터 둘 곳(Supabase) 만들기 → 웹 연결 → 앱 연결
진행 상황을 보고 수업에서 정합니다. 못 하면 다음 주에 이어서 합니다

마무리

설계 문서 고쳐 쓰기

20단계 오늘 달라진 것을 문서에 반영하고, 문서 하나로 다시 만들 수 있는지 검사하기

✅ 실제로 여기까지 했습니다 — 13단계까지

설계 문서 완성 · 웹 화면 두 장 · 앱 간판 시안을 골라 문서에 그리는 데까지 진행했습니다.
14단계(앱을 내 폰에 띄우기)부터는 3주차에 이어서 합니다. 같은 두 파일을 그대로 씁니다.
자세한 순서는 Week 3 페이지에 있습니다.

이론 · 미리 읽을거리

강의 전에 읽어두면 훨씬 수월합니다. 몰라도 수업은 따라올 수 있습니다.

1. 문서 먼저, 화면 나중 ⭐

코드는 Claude가 씁니다. 여러분이 만드는 건 「이것만 있으면 누가 만들어도 똑같이 나오는 설계 문서」입니다. 화면은 그 문서가 맞는지 확인하는 수단이에요.
화면만 고치면, 다음에 설계 문서로 다시 만들었을 때 고치기 전으로 돌아갑니다.
그래서 마음에 안 드는 곳이 있으면 문서부터 고치고, 화면도 고쳐 달라고 합니다. 문서 맨 아래 변경 이력에 무엇을·왜 바꿨는지 한 줄씩 쌓입니다.

2. 왜 Expo인가

안드로이드 앱을 만드는 길은 여러 갈래인데, 입문자가 가장 많이 이탈하는 지점이 개발 환경 설치입니다.
Android Studio는 10GB가 넘습니다. Expo는 Node.js만 있으면 시작할 수 있습니다.
폰에 앱 하나만 깔면 개발 중인 앱이 바로 뜹니다. 폰과 컴퓨터가 같은 와이파이에 있어야 합니다.
웹뷰로 감싼 가짜 앱이 아니라 진짜 네이티브 앱이라 스토어 심사에서 반려될 위험이 낮습니다.

3. 파일은 말로 시킵니다

이번 주부터는 탐색기를 열거나 파일을 끌어다 놓지 않습니다. 찾고 · 옮기고 · 이름을 고치는 건 전부 Claude에게 말로 시킵니다.
지난주와 제일 크게 달라지는 점입니다.

강의 영상

🎬 Week 2 녹화본

▶ 2주차 녹화본 보기 ↗

암호: amypz6*j

강의 자료

📘 Week 2 가이드북

⬇ 2주차 가이드북 PDF 내려받기

2주차 내용을 책으로 정리했습니다. 126쪽 · 약 11MB

📦 Week 2 실습 자료

⬇ 2주차-제작prompt.md 내려받기 ⬇ 2주차-지침서.md 내려받기

두 파일 모두 내려받아 두세요. 지난주 workspace로 옮기는 건 수업 첫 단계에서 Claude가 합니다.

파일 안내

2주차-제작prompt.md — 단계별 프롬프트 상자 (📋 상자만 복사해서 붙여넣기)
2주차-지침서.md — Claude가 읽는 진행 규칙. 2주차-제작prompt.md 와 같은 폴더에 둡니다

📷 간판 샘플 사진 3장

⇩ 샘플 1 내려받기 ⇩ 샘플 2 내려받기 ⇩ 샘플 3 내려받기

앱 첫 화면 맨 위 「간판」에 들어갈 사진입니다. 쓰실 사진이 따로 있으면 그걸 쓰시고, 없으면 이 중 한 장을 골라 쓰세요. 수업에서는 한 장만 씁니다.

사진 안내

샘플 1 — 물레로 그릇을 빚는 손. 세로 사진 · 약 1.7MB
샘플 2 — 그릇이 놓인 선반과 작업대. 세로 사진 · 약 7.6MB
샘플 3 — 촛불과 찻잔이 있는 정물. 위쪽이 비어 있어 글자를 얹기 좋습니다. 세로 사진 · 약 6.1MB

이번 주 과제

📝 3주차 전에 가입해 오기

3주차 수업 시작 전까지 아래 네 곳 가입을 마쳐 주세요. 새 비밀번호는 만들지 않습니다 — Google 계정 하나에서 시작해 차례로 이어 갑니다.

Google 계정 — 개인 계정으로, 2단계 인증을 켜 두세요
GitHub 가입 — Continue with Google (가이드북 20장)
Supabase 가입 — Continue with GitHub (가이드북 21장)
Vercel 가입 — Continue with GitHub, 휴대폰 확인까지 (가이드북 24장)