← 전체 커리큘럼
WEEK 03 · 이 강의의 본체 ⭐

배포하기

내 폰에 내가 만든 앱이 뜨고, 웹과 앱이 같은 데이터를 보게 되고, 웹사이트는 아무나 접속할 수 있는 주소를 갖습니다.

날짜9월 28일 (월)
시간21:00~
필수GitHub · Supabase · Vercel 가입
준비물지난주 폴더 · 폰(Expo Go)

⚠️ 수업 시작 전에 이 세 곳 가입이 끝나 있어야 합니다

  • GitHubContinue with Google (가이드북 20장)
  • SupabaseContinue with GitHub (가이드북 21장). GitHub 가입이 먼저입니다.
  • VercelContinue with GitHub, 휴대폰 확인까지 (가이드북 24장)

셋은 순서가 있습니다. GitHub 계정으로 나머지 둘에 들어가므로 GitHub부터 하세요. 새 비밀번호는 만들지 않습니다 — Google 계정 하나에서 이어집니다.

  • 📱 폰에 Expo Go 앱을 미리 깔아 오세요. 폰과 컴퓨터가 같은 와이파이에 있어야 합니다.
  • 💻 지난주 그 폴더를 그대로 씁니다. 새로 만들지 마세요.
  • 하나라도 안 되어 있으면 수업 전에 카톡방으로 알려 주세요. 대안을 준비해 드립니다.

학습 목표

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

  • 내 폰에 내가 만든 앱이 뜬다 — 컴퓨터에서 고치면 폰이 따라 바뀐다 📱
  • 새로고침해도 안 사라진다 — 웹에서 넣은 것이 폰에 뜨고, 폰에서 넣은 것이 웹에 뜬다 🎉
  • 내 웹사이트 주소를 갖는다 — 카톡으로 보내면 아무나 열어볼 수 있다 🌐
  • 앞으로 코드를 고쳤을 때 어떻게 다시 올리는지 안다

커리큘럼 구성

6교시 · 총 140분 · 2주차 제작prompt 14단계부터 이어서 진행하고, 마지막에 웹을 인터넷에 올립니다

1교시 · 20min · 앱

앱을 내 폰에 띄우기 (14단계)

  • 폰에 Expo Go 준비 — 폰과 컴퓨터가 같은 와이파이인지 확인
  • 내 가게 이름이 폰에 뜹니다. 컴퓨터에서 글씨를 바꾸면 폰이 따라 바뀝니다
2교시 · 25min · 앱

앱 화면 만들기 + 간판 (15단계)

  • 설계 문서대로 아래 탭 → 위쪽 → 목록 → 버튼 순서로 하나씩
  • 지난주에 고르고 문서에 그려만 둔 간판을 이제 진짜로 만듭니다
3교시 · 25min · 데이터

데이터 둘 곳 만들기 (16~17단계)

  • Supabase에 들어가 프로젝트 만들기 — 지역은 서울. 나중에 못 바꿉니다
  • 설계 문서의 「담을 것」대로 표 만들고 데이터 넣기
4교시 · 25min · 데이터

웹·앱 연결 → 연동 확인 (18~19단계)

  • 가짜 데이터를 걷어내고 진짜를 보게 합니다. 새로고침해도 안 사라집니다
  • 컴퓨터에서 누르면 폰에 뜨고, 폰에서 누르면 컴퓨터에 뜹니다 🎉
5교시 · 10min · 문서

설계 문서 고쳐 쓰기 (20단계)

  • 만들면서 달라진 것을 문서로 되돌리고, 완성 검사를 한 번 더
  • 변경 이력에 오늘 자란 만큼이 한 줄씩 남습니다
6교시 · 35min · 웹

GitHub → Vercel 배포 · 주소 획득 🌐

  • “인터넷에 올린다”가 무슨 뜻인지 — 터미널과 Git은 오늘 쓸 만큼만
  • 만든 웹을 GitHub에 올리고 Vercel에 연결 → 내 사이트 주소 받기
  • ⚠️ 열쇠 파일은 올리지 않습니다. 공개 저장소는 누구나 봅니다

ℹ️ 지난주에 어디까지 왔나 — 왜 14단계부터인가

  • 2주차에 설계 문서를 완성하고, 웹 화면 두 장을 만들고, 앱 간판 시안을 골라 문서에 그리는 데까지 했습니다 (13단계까지).
  • 앱을 폰에 띄우는 14단계부터가 남았습니다. 그래서 이번 주는 거기서 이어서 시작합니다.
  • 붙여넣는 상자는 지난주 받은 2주차-제작prompt.md · 2주차-지침서.md 두 파일을 그대로 씁니다. 가이드북만 3주차 것으로 새로 받으세요.

⏭️ 이번 주에 하지 않는 것 — 플레이스토어는 다음 회차로

  • .aab 빌드 · Play Console 앱 등록 · 스토어 등록정보 · 내부 테스트 출시
  • 카톡 공유 미리보기 · 검색 노출 · 개인정보처리방침 페이지 (스토어 등록에 필요해서 같이 옮깁니다)
  • 웹사이트 주소를 갖는 것은 이번 주에 끝납니다. 그건 조건이 없습니다.
  • 구글 플레이 개발자 계정 신원 확인은 계속 진행해 두세요. 승인에 길면 2주가 걸립니다 — 아래 이론 6번을 읽어 두시면 됩니다.
  • 📘 가이드북 25장「공공데이터포털」은 4주차 내용입니다. 이번 주에는 하지 않습니다. 대신 공공데이터포털 가입과 활용신청은 이번 주에 미리 해두세요 — 아래 「이번 주 과제」를 보세요.

이론 · 미리 읽을거리

낯선 서비스 네 곳을 하루에 만납니다. 각각이 무엇을 해주는 곳인지만 알고 오셔도 진행 속도가 크게 달라집니다. 몰라도 수업은 따라올 수 있습니다.

1. Expo Go — 만든 앱을 내 폰에서 보는 법

  • 앱은 웹과 달라서 주소를 친다고 열리지 않습니다. 폰에 설치돼야 열립니다.
  • 그런데 만들 때마다 설치 파일을 만들어 깔면 너무 오래 걸립니다. 그래서 Expo Go 라는 「껍데기 앱」을 먼저 깔고, 그 안에 내가 만든 화면만 흘려보냅니다.
  • 그래서 컴퓨터에서 고치면 폰이 바로 따라 바뀝니다. 오늘 제일 신기한 장면입니다.
  • 조건 두 개 — 폰과 컴퓨터가 같은 와이파이에 있을 것, 폰에 Expo Go 가 깔려 있을 것. 미리 깔아 오세요.
  • 처음 열면 10초쯤 하얀 화면이 보입니다. 고장이 아닙니다.

2. Supabase — 데이터를 두는 곳

  • 지금 웹과 앱은 각자 가짜 데이터를 들고 있습니다. 서로를 모르고, 새로고침하면 사라집니다.
  • 둘이 같은 것을 보려면 바깥에 데이터를 두는 곳이 하나 있어야 합니다. 그게 Supabase입니다.
  • 알아둘 말 세 개
    • 표(table) — 엑셀 시트 한 장이라고 보시면 됩니다. 칸 이름을 미리 정해 둡니다
    • 열쇠(API key) — 내 웹·앱이 창고 문을 열 때 쓰는 것. 공개 저장소에 올리면 안 됩니다
    • 지역(region)서울로 고릅니다. 만든 뒤엔 못 바꾸고, 멀면 느립니다
  • ⚠️ 7일 동안 안 들어가면 잠듭니다. 다음 주에 “어제까지 됐는데” 가 되는 흔한 이유입니다. 깨우면 다시 삽니다.

3. “인터넷에 올린다”는 게 무슨 뜻인가

  • 지금 만든 사이트는 내 컴퓨터 안에만 있습니다. 내 컴퓨터를 끄면 아무도 볼 수 없습니다.
  • “올린다”는 것은 항상 켜져 있는 남의 컴퓨터(서버)에 파일을 옮겨두고, 그 위치에 주소를 붙이는 일입니다.
  • 예전에는 서버를 직접 빌리고 설정해야 했지만, 지금은 GitHub와 Vercel이 그 과정을 대신해 줍니다.

4. GitHub — 코드를 보관하는 곳

  • 코드를 인터넷에 보관하는 창고입니다. 그냥 창고가 아니라 변경 이력이 남는 창고입니다.
  • Vercel이 이 창고를 지켜보다가, 내용이 바뀌면 자동으로 사이트를 새로 띄웁니다.
  • 알아둘 말 세 개
    • 저장소(repository) — 프로젝트 하나당 창고 하나
    • 커밋(commit) — “여기까지 됐다”고 도장 찍기. 되돌릴 지점이 됩니다
    • 푸시(push) — 내 컴퓨터의 변경분을 창고로 올리기
  • ⚠️ 공개 저장소는 누구나 봅니다. 비밀번호·계좌번호·API 키를 올리면 안 됩니다. 지워도 이력에 남습니다.
  • 이 강의 저장소가 실제 공개 저장소입니다. 계좌번호가 든 파일을 어떻게 제외해 두었는지 수업에서 실물로 보여드립니다.

5. Vercel — 웹사이트를 띄워주는 곳

  • 만든 사이트에 주소를 붙여 띄워주는 서비스입니다. 무료로 시작할 수 있습니다.
  • GitHub 저장소를 연결해 두면 → 푸시할 때마다 → 자동으로 새 버전이 올라갑니다.
  • 알아둘 말 세 개
    • 배포(deploy) — 올려서 실제로 보이게 만드는 것
    • 프로젝트 설정 — 저장소 안 어느 폴더를 사이트로 볼지 지정합니다. 폴더를 옮기면 이 설정도 같이 바꿔야 합니다
    • 빌드 실패 — 실패해도 직전 성공 버전이 그대로 살아 있습니다. 사이트가 죽지 않습니다
  • 지금 보고 계신 이 페이지도 Vercel에 올라가 있습니다. 배포 화면을 함께 열어 봅니다.

6. 구글 플레이스토어 (Play Console) — 앱을 배포하는 곳 · 다음 회차

  • 안드로이드 앱을 올리고 심사받고 배포하는 관리 화면입니다.
  • 개발자 계정 — 등록비 $25(1회) + 신원 확인. 보통 하루, 길면 2주. 그래서 개강 전부터 신청하시게 했습니다.
  • 개인 계정과 조직 계정의 결정적 차이
    • 개인 — 정식 출시 전에 테스터 12명이 14일 연속 참여한 비공개 테스트를 통과해야 합니다
    • 조직(사업자등록증 필요) — 이 요건이 면제됩니다
  • 출시 단계: 내부 테스트 → 비공개 테스트 → 공개 테스트 → 정식 출시. 다음 회차 목표가 내부 테스트까지입니다.
  • 등록에 반드시 필요한 것: 아이콘 · 스크린샷 · 설명 · 개인정보처리방침 URL

7. 개인정보처리방침 URL — 웹과 앱이 만나는 지점 · 다음 회차

  • 스토어 등록에는 개인정보처리방침 주소가 필수입니다. 없으면 등록이 막힙니다.
  • 그런데 여러분은 이번 주 6교시에 웹사이트를 배포합니다. 거기에 방침 페이지를 한 장 추가하고 그 주소를 내면 됩니다.
  • 그래서 웹 배포가 먼저입니다. 스토어 등록은 그 주소가 생긴 다음입니다.

8. 어디까지 가는가 — 정직하게

  • 📱 Expo Go로 내 폰에서 앱 실행오늘. 내 폰에 내가 만든 화면이 뜹니다
  • 💾 웹·앱이 같은 데이터를 보고 새로고침해도 안 사라지기오늘
  • 🌐 웹사이트를 인터넷에 올려 주소 갖기오늘. 조건 없음. 그날부터 아무나 접속합니다
  • 🌐 카톡 공유 미리보기 · 검색 노출 · 개인정보처리방침 — 다음 회차
  • 📱 앱 빌드 · 스토어 등록 · 업로드 · 플레이스토어로 내 폰에 설치다음 회차
  • 📱 아무나 검색해서 받는 정식 공개 — 사업자 계정이면 곧바로, 개인 계정이면 테스터 14일 이후
  • “4주 안에 정식 출시”가 아니라 “올리는 데까지”가 정확한 약속입니다. 대신 웹사이트는 조건이 없습니다.

강의 영상

🎬 Week 3 녹화본

  • 강의 종료 후 업로드됩니다.
  • 영상: 준비 중
  • 암호: 준비 중

강의 자료

📘 Week 3 가이드북

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

119쪽 · 약 12MB · 14장~25장. 14~16장은 지난주에 한 곳이라 복습용이고, 17장(앱을 내 폰에 띄우기)부터가 이번 주입니다.

이번 주에 보는 장
  • 17장 앱을 내 폰에 띄우기 · 18장 앱 화면과 간판 — 1·2교시
  • 19장 갈림길 · 21장 Supabase 가입 · 22장 웹과 앱을 창고에 잇기 — 3·4교시
  • 23장 설계 문서 고쳐 쓰기 — 5교시
  • 20장 GitHub 가입 · 24장 Vercel 가입 — 수업 전에 미리 읽고 가입해 오세요
  • 25장 공공데이터포털 — 4주차 내용입니다. 가입과 활용신청만 이번 주에 미리

📦 Week 3 실습 파일 — 지난주 그대로

붙여넣는 상자 파일은 지난주 그대로입니다. 지난주 폴더의 두 파일을 쓰고, 14단계부터 이어서 붙여넣으시면 됩니다. 잃어버리셨으면 여기서 다시 받으세요.

⬇ 2주차-제작prompt.md 다시 받기 ⬇ 2주차-지침서.md 다시 받기

🗂️ 완성된 설계 문서 샘플 — 동문시장 소식 게시판

⬇ 설계 문서 샘플 내려받기 (약 200KB)

강사가 이 강의 순서를 그대로 밟아 실제로 만든 프로젝트의 문서 묶음입니다. 「설계 문서를 어디까지 적어야 만들 수 있는가」가 궁금하실 때 열어 보세요. 코드는 들어 있지 않습니다 — 문서만입니다.

압축 안에 든 것
  • docs/20.working/PRD.md설계 문서 완성본. 화면마다 그림 + 사양 표 + 안 고른 안, 맨 뒤에 변경 이력
  • docs/20.working/브레인스토밍.md — 아직 안 정한 것, 뒤집힌 결론
  • docs/20.working/대화기록.md정할 때 오간 말을 그대로 남긴 기록
  • docs/30.output/시안-*.html — 화면 시안 13장 (브라우저로 바로 열립니다)
  • docs/90.reference/ — 참고 링크 · 사진 프롬프트 · 다른 PC에서 이어 하는 법
  • 제작지침서.md · CLAUDE.md — 실제 제작용으로 고쳐 쓴 진행 규칙

⚠️ 그대로 베끼지 마세요. 여러분 것은 여러분 PRD에서 나옵니다. 이건 「어느 정도까지 적으면 되는가」의 자 역할입니다.

이번 주 과제

📝 스토어에 낼 것 준비하기

  • 아이콘 512×512 · 스크린샷 2장 · 앱 설명 — 다음 회차 스토어 등록 화면을 이걸로 채웁니다.
  • 스크린샷은 이번 주에 폰에 띄운 앱을 그대로 찍으시면 됩니다.
  • 구글 플레이 개발자 계정 신원 확인이 아직이면 지금 넣어 두세요. 길면 2주가 걸립니다.

배포한 웹 주소를 카톡방에 자랑해 주세요 🎉

📝 공공데이터포털 가입하고 키 신청하기 — 4주차 준비

3주차 가이드북 25장「공공데이터포털」4주차에 하는 내용입니다. 다만 가입과 신청만은 이번 주에 미리 해두셔야 합니다 — 당일에 하면 늦습니다.

  • 공공데이터포털(data.go.kr) ↗ 회원가입 — 이것만 해두셔도 절반은 끝납니다
  • 쓰고 싶은 데이터를 하나 골라 활용신청 — 즉시 승인되는 것도 있지만 심사에 1~2일 걸리는 것도 있습니다
  • ③ 승인되면 인증키가 나옵니다. 4주차에 그 키를 씁니다
  • 무엇을 고를지 모르겠으면 카톡방에 물어보세요. 추천 목록은 Week 4 페이지에 있습니다
  • 승인이 늦어져도 진행할 수 있게 강사 백업 키와 샘플 데이터를 준비해 둡니다. 카톡방으로 알려 주세요
NEXT · WEEK 04
공공데이터 활용하기