지금까지 만든 앱은 내 컴퓨터 안에만 있어요. 이제 인터넷에 올려 누구나 접속할 수 있는 링크를 만들고, 필요하면 데이터도 저장해봅니다.
4~6장에서 만들고 다듬은 그 앱을, 이제 세상에 올립니다
앞에서 설계하고(4장), 만들고(5장), 다듬은(6장) 독서 습관 앱을 그대로 이어서 씁니다. 이 앱은 이제 기능이 안정적으로 동작하니, 배포와 데이터 저장을 붙이기에 딱 좋아요. 하나의 앱을 처음부터 끝까지 완성하는 거예요.
개념과 도구 설치는 3장에서 다뤘어요. 여기서는 직접 해보는 실습에 집중합니다.
코드를 창고에 보관한다
먼저 독서 습관 앱 폴더를 GitHub에 올립니다. 배포(Vercel)를 하려면 코드가 먼저 GitHub 창고에 있어야 하거든요. GitHub Desktop으로 하면 클릭 몇 번이면 돼요.
GitHub 계정 만들기, GitHub Desktop 설치 방법은 3장에 자세히 있어요.
→ 3장 · 개발 환경 준비하기 참고
드디어 내 앱에 링크가 생깁니다
이제 GitHub에 올린 코드를 Vercel이 가져가 인터넷에 띄웁니다. 이 단계가 끝나면 내 앱의 주소(URL)가 생겨요.
GitHub와 Vercel을 한 번 연결해두면, 이후에는 GitHub Desktop에서 커밋 + 푸시만 하면 Vercel이 자동으로 다시 배포합니다. 앱을 고칠 때마다 배포 버튼을 누를 필요가 없어요.
Vercel 가입 방법도 3장에 있어요. GitHub 계정으로 간편하게 연결됩니다.
→ 3장 · 개발 환경 준비하기 참고
읽은 기록이 계속 남으려면
4장에서 PRD를 만들 때 데이터 저장 방식을 판단했죠. 두 경우로 나뉩니다.
• 처음부터 DB가 필수인 앱(설문 수집·팀 공유 등)이라면, PRD 단계부터 DB로 설계했어야 합니다. 그런 앱은 이 단계를 처음 개발 때부터 함께 진행합니다.
• 혼자 쓰다가 확장되는 앱(독서 습관 앱처럼)이라면, 브라우저 저장으로 시작한 뒤 필요해질 때 지금처럼 DB를 붙이면 됩니다. 무리 없어요.
우리 독서 습관 앱은 후자예요. 배포까지 하면 앱이 인터넷에 올라가지만, 아직 기록이 브라우저에만 저장돼요. 다른 기기에서 열거나 브라우저 데이터를 지우면 사라집니다. "어제 읽은 기록"이 계속 남으려면 데이터를 DB에 저장해야 해요. 이때 Supabase를 씁니다.
키를 코드에 넣으면 GitHub에 올리는 순간 전 세계에 공개됩니다. 반드시 .env.local 파일에 보관하고, service_role 키는 절대 쓰지 마세요. (anon public만 사용)
→ 3장 · anon과 service_role 구분 참고
혼자 쓰는 앱이라면 브라우저 저장만으로도 충분할 수 있어요. 하지만 여러 기기에서 쓰거나 기록을 오래 남기고 싶다면 DB 저장이 필요합니다.