신용카드사회공헌재단 직원 실습 워크숍 · 3편

바이브코딩 세 번째 걸음
— 내 앱을 진짜 클라우드에 올리기

GitHub · Vercel · Supabase · 전원 실습

대상 : 2편을 마친 재단 직원 진행 : HC 도구 : Claude Code (터미널) 하나
블록 1 · 15분 · 지난 시간, 오늘

빌린 게시판에서, 내 이름의 가게로

2편 — 빌린 게시판 진행자 서버 주소 / apps / 내앱 3편 — 내 이름의 가게 내앱.vercel.app
2편 — 동네 게시판
  • 주소는 진행자의 서버에 있었다
  • 붙이려면 열쇠를 받아야 했다
  • 폰에서 적은 것은 폰에만 남았다
3편 — 내 이름의 가게
  • 주소가 내 계정에 생긴다
  • 고쳐서 올리면 저절로 다시 열린다
  • 어디서 적어도 같은 기록이 보인다
2편 마지막에 이렇게 말씀드렸죠 — "폰에서는 컴퓨터에 적어 둔 내용이 안 보이는 것이 정상입니다." 오늘은 그 한 줄을 넘습니다.
블록 1 · 지도

오늘의 흐름

1오리엔테이션15분
2개념 — 세 조각과 세 곳15분
3준비 · 가입25분
4★완주 최소선 — 올리기35분
5★도전 목표 — 냉장고 붙이기40분
6검수 · 막힘25분
7마무리15분

핵심 블록을 다 더하면 170분입니다. 휴식 10분 × 2회와 버퍼 20~30분을 더해 총 210~220분을 잡습니다.

블록 1 · 도착점

오늘의 도착점

완주 최소선 — 모두 여기까지
  • 내 앱이 내 계정의 주소로 열린다
  • 코드는 내 GitHub 저장소에 있다
  • 고쳐서 올리면 저절로 다시 배포된다
도전 목표 — 여유가 되면
  • 앱의 저장이 냉장고에 연결된다
  • 폰에서 적은 것이 컴퓨터에서도 보인다
  • 못 가도 완주 실패가 아닙니다

배포는 내가 만든 것을 인터넷 주소로 여는 일입니다. 저장소(리포)는 코드를 담아 두는 인터넷 서랍이죠.

블록 2 · 15분 · 개념

앱은 세 조각으로 되어 있습니다

"앱 = 메뉴판 + 요리사 + 냉장고"
손님 = 나 메뉴판 화면 내가 눈으로 보는 곳 요리사 서버 주문을 받아 처리 냉장고 데이터베이스 기록을 담아 둠
2편에서 만든 앱은 메뉴판 하나였습니다. 요리사도 냉장고도 없었어요. 그래서 기록이 그 기기 안에만 남았습니다.
블록 2 · 개념

오늘 쓰는 곳은 세 군데입니다

내 컴퓨터 앱 폴더 GitHub 레시피 노트 코드가 쌓이는 서랍 Vercel 매장 주소가 여기서 나옴 Supabase 냉장고 기록이 모이는 곳 올린다 읽는다 기록

세 곳은 따로 노는 것이 아닙니다. 노트에 올리면 매장이 그것을 읽어 메뉴판을 새로 겁니다.

Vercel과 Supabase는 GitHub로 로그인해서 시작합니다. 따로 아이디를 세 개 만들 일은 없어요.
블록 2 · 개념

게시판과 다른 점은 네 가지입니다

게시판 — 2편
  • 주소가 남의 서버에 있다
  • 올리려면 열쇠를 받아야 한다
  • 올릴 때마다 명령을 다시 친다
  • 기록은 기기마다 따로 남는다
클라우드 — 오늘
  • 주소가 내 계정에 있다
  • 내 저장소에 올리면 그걸로 끝이다
  • 배포는 저절로 다시 일어난다
  • 기록이 한 곳에 모인다

오늘 이후로는 내가 고치고 내가 올립니다. 이제 남의 서버를 빌릴 일이 없어요.

블록 3 · 25분 · 준비 · 가입

준비 체크

계정

GitHub 계정 하나면 됩니다. 없으면 지금 만들어요.

로그인

Vercel과 Supabase는 GitHub로 로그인합니다.

앱 폴더

2편에서 만든 앱 폴더를 그대로 씁니다.

PowerShell을 열고 그 폴더로 들어간 뒤, claude를 실행합니다. 2편과 똑같은 출발입니다.

스마트폰을 옆에 두세요. 오늘은 폰으로 두 번 확인합니다 — 주소가 열리는지, 그리고 기록이 넘어오는지.
블록 3 · ★그대로 붙여 쓰는 프롬프트

환경 점검 프롬프트

오늘은 내가 만든 앱을 인터넷에 올릴 거야. 나는 코딩을 전혀 몰라.

1) 올리는 데 필요한 도구가 내 컴퓨터에 있는지 확인해줘 — git, GitHub 명령 도구(gh), Vercel 명령 도구, Supabase 명령 도구.
2) 없는 것이 있으면 그게 뭐에 쓰는 도구인지 한 줄로 알려주고, 하나씩 설치해줘.
3) 로그인이 필요한 순간이 오면 네가 대신 하지 말고, 브라우저 창을 열고 나에게 말해줘. 내가 로그인하면 그때 이어서 해줘.
4) 다 끝나면 도구 이름과 상태를 표로 정리해서 보여줘.
자동 복사가 안 되면, 위 상자를 클릭해 전체 선택(Ctrl/Cmd+A) 후 복사하세요. 복사 버튼이 동작하지 않습니다 — 위 상자를 직접 드래그해 복사해주세요.

이 프롬프트는 [ ] 없이 그대로 씁니다.

블록 3 · 로그인

로그인은 이 컴퓨터의 브라우저에서 합니다

  1. Claude Code가 로그인을 요청하면, 열린 브라우저 창에서 내가 직접 누릅니다
  2. 휴대폰으로는 안 됩니다 — 이 컴퓨터의 창이어야 그다음이 이어집니다
  3. 로그인이 끝나면 "됐어, 이어서 해줘"라고 말해줍니다
창이 안 뜨면 브라우저의 팝업 차단부터 봅니다. 차단을 풀고 다시 열면 됩니다.
Vercel 로그인 화면
Supabase 로그인 화면
둘 다 Continue with GitHub를 누릅니다 — 표시한 자리입니다.
블록 4 · 35분 · ★완주 최소선

올리는 일은 세 단계로 끝납니다

저장소는 나만 보이게 비공개로 만듭니다. 폰에서도 같은 주소로 열려요.

1 저장소 만들기 GitHub · 앱 폴더를 저장소로 누가 하나 — Claude Code 2 올리고 연결 Vercel이 저장소를 읽습니다 누가 하나 — Claude Code · 나는 로그인만 3 주소 받기 짧은 공개 주소가 나옵니다 누가 하나 — 내가 열어서 확인
한 번 연결해 두면 다음부터는 고쳐서 올리기만 하면 됩니다. 배포는 저절로 다시 일어납니다.
블록 4 · ★[ ] 두 곳만 바꿔 쓰는 프롬프트

올리기 프롬프트

이제 이 앱을 인터넷에 올리고 싶어. 나는 코딩을 전혀 몰라. 아래 순서대로 해줘.

1) 이 폴더를 [앱이름]이라는 이름의 내 GitHub 저장소로 만들어줘. 저장소는 비공개로 만들어줘.
2) 올리기 전에 이 폴더의 git 사용자 이름과 이메일을 내 GitHub 계정과 똑같이 맞춰줘. 내 GitHub 이메일은 [내 GitHub 이메일]이야. 이메일이 다르면 배포가 막히니까 꼭 먼저 확인해줘.
3) 코드를 GitHub에 올리고, Vercel에 연결해서 배포해줘. 로그인 창이 필요하면 브라우저를 열고 나에게 말해줘.
4) 배포가 끝나면 짧은 공개 주소를 알려줘. 팀 이름이 길게 붙은 주소 말고, 로그인 없이 아무나 열 수 있는 짧은 주소여야 해.
5) 그 주소를 직접 열어서 정상으로 열리는지(HTTP 200) 확인하고, '주소 한 줄 + 상태 한 줄'로 보고해줘.
6) 중간에 실패하면 멈추고 받은 응답을 그대로 보여줘. 혼자 되돌리거나 지우지는 마.
자동 복사가 안 되면, 위 상자를 클릭해 전체 선택(Ctrl/Cmd+A) 후 복사하세요. 복사 버튼이 동작하지 않습니다 — 위 상자를 직접 드래그해 복사해주세요.

[앱이름]은 영문 소문자 · 숫자 · 하이픈으로 짧게 씁니다. [내 GitHub 이메일]은 GitHub에 로그인할 때 쓰는 그 이메일입니다.

블록 4 · ★완주 최소선 달성 지점

폰에서 열리면 오늘의 완주입니다

  1. Claude Code에게 "내 앱 주소만 한 줄로 다시 보여줘"라고 말합니다
  2. 그 줄을 마우스로 긁으면 PowerShell에서는 그대로 복사됩니다 — 나에게 카톡으로 보냅니다
  3. 폰에서 눌러 내 앱이 뜨면 — 완주 최소선 달성입니다 🎉
  4. 옆 사람에게도 주소를 보내 보세요. 남의 폰에서도 똑같이 열립니다
주소는 짧은 쪽이어야 합니다. 팀 이름이 길게 붙은 주소를 열면 로그인 화면이 뜹니다.
폰에서 열린 내 앱 화면
폰에서 열린 내 앱
블록 4 · 체험

고쳐서 올리면 저절로 다시 열립니다

  1. Claude Code에게 "제목 색을 바꿔줘, 그리고 올려줘"라고 말합니다
  2. 1~2분 기다립니다 — 그동안 화면은 그대로 두면 됩니다
  3. 폰에서 화면을 새로고침합니다. 색이 바뀌어 있으면 연결이 살아 있는 겁니다
고친다 내 컴퓨터에서 말로 올라간다 GitHub 저장소로 다시 배포된다 Vercel이 저절로 새로고침 폰에서 확인 다음에 또 고칠 때
이제 고치는 방법은 하나입니다 — 말하고, "올려줘". 따로 명령을 외울 일이 없어요.

고쳐도 주소는 바뀌지 않습니다. 그래서 한 번 보낸 주소가 늘 최신이에요.

블록 5 · 40분 · ★도전 목표

기록이 기기마다 따로인 이유

"지금 기록은 기기 안의 서랍에 있습니다"
지금 폰 폰 안의 서랍 컴퓨터 컴퓨터 안의 서랍 서로 안 보입니다 냉장고를 붙이면 폰 컴퓨터 냉장고 Supabase 한 냉장고를 함께 봅니다
냉장고를 하나 두면 달라집니다. 어느 기기에서 적어도 같은 냉장고로 들어가니까요.
블록 5 · 개념

비밀 열쇠는 코드에 적지 않습니다

"열쇠는 코드가 아니라 금고에"
여기엔 적지 않습니다 코드 파일 앱을 만든 파일 GitHub 저장소 인터넷 서랍 여기에 넣습니다 금고 Vercel 환경변수 요리사 서버 냉장고 Supabase 열쇠를 꺼내 연다
환경변수는 앱이 쓸 값을 코드 밖에 따로 두는 자리입니다. 열쇠는 화면에도 띄우지 않습니다.
블록 5 · ★그대로 붙여 쓰는 프롬프트

냉장고 연결 프롬프트

이제 이 앱이 적은 내용을 인터넷의 한 곳에 저장하게 만들고 싶어. 나는 코딩을 전혀 몰라.

1) Supabase에 내 프로젝트를 만들어줘. 로그인 창이 필요하면 브라우저를 열고 나에게 말해줘. 이미 만들어진 프로젝트가 있으면 새로 만들지 말고 그걸 쓰자.
2) 이 앱의 기록을 담을 표를 만들어줘. 어떤 칸이 필요한지는 앱을 보고 네가 정해줘.
3) 앱의 저장과 불러오기를 브라우저 저장 대신 Supabase로 바꿔줘. 지금 되는 기능은 그대로 두고.
4) 비밀 열쇠는 코드에도 GitHub에도 적지 말고 Vercel의 환경변수로 넣어줘. 화면에도 열쇠를 찍지 마.
5) 다 되면 다시 배포하고, 내 주소에서 한 줄 적어 저장한 다음 새로고침해서 그대로 남아 있는지 확인해줘.
6) 폰처럼 다른 기기에서 열어도 같은 내용이 보이는지, 내가 무엇을 눌러 확인하면 되는지 한 줄로 알려줘.
7) 중간에 실패하면 멈추고 받은 응답을 그대로 보여줘.
자동 복사가 안 되면, 위 상자를 클릭해 전체 선택(Ctrl/Cmd+A) 후 복사하세요. 복사 버튼이 동작하지 않습니다 — 위 상자를 직접 드래그해 복사해주세요.

이 프롬프트도 [ ] 없이 그대로 씁니다. 중간에 로그인 요청이 오면 내가 눌러 줍니다.

블록 5 · ★도전 목표 달성 지점

폰에서 적은 것이 컴퓨터에 뜨면 끝입니다

  1. 폰에서 내 주소를 열고 아무 한 줄을 적어 저장합니다
  2. 컴퓨터에서 같은 주소를 새로고침합니다
  3. 그 줄이 화면에 보이면 — 도전 목표 달성입니다 🎉
  4. 반대로도 해보세요 — 컴퓨터에서 적고 폰에서 새로고침하면 됩니다
여기까지 못 와도 오늘은 완주입니다. 완주 최소선은 블록 4에서 이미 넘었어요.
블록 6 · 25분 · 검수 · 막힘

점검 프롬프트

배포가 끝났어. 이제 제대로 됐는지 점검하자. 하나씩 실제로 확인하고 결과를 표로 알려줘.

1) 내 짧은 공개 주소가 로그인 없이 열리는지 확인해줘.
2) 첫 화면만 열리고 안쪽 페이지가 404로 뜨지는 않는지도 확인해줘.
3) 한 줄 적어 저장한 뒤 새로고침했을 때 그대로 남아 있는지 확인해줘.
4) 비밀 열쇠가 코드와 GitHub에 들어가 있지 않은지 확인해줘.
5) 폰에서 열었을 때도 같게 보이는지, 내가 무엇을 눌러 확인하면 되는지 알려줘.
6) 표의 각 줄은 '항목 / 결과(됨·안 됨) / 안 되면 무엇을 해야 하는지 한 마디'로 채워줘.
자동 복사가 안 되면, 위 상자를 클릭해 전체 선택(Ctrl/Cmd+A) 후 복사하세요. 복사 버튼이 동작하지 않습니다 — 위 상자를 직접 드래그해 복사해주세요.

냉장고를 붙이지 못했으면 3번은 건너뛰어도 됩니다.

블록 6 · 검수

마지막 세 가지는 내 눈으로 봅니다

1
주소

로그인 없이 열리는가. 폰에서도 그대로 열리는가.

2
기록

한 줄 적고 새로고침했을 때 그 줄이 남아 있는가.

3
열쇠

코드와 저장소 어디에도 열쇠가 적혀 있지 않은가.

셋 중 하나라도 안 되면 다음 장의 표에서 한 마디를 찾아 그대로 말합니다.
블록 6 · 막힘

자주 막히는 곳

증상원인Claude Code에게 할 한 마디
배포가 5분 넘게 안 끝난다커밋 이메일이 GitHub 계정과 다름"커밋 이메일을 내 GitHub 이메일로 바꾸고 다시 올려줘"
주소를 열면 로그인 화면이 뜬다팀 주소를 열었음"짧은 공개 주소를 알려줘"
저장이 안 된다열쇠가 금고에 안 들어감"환경변수가 등록됐는지 확인하고 다시 배포해줘"
화면은 뜨는데 일부가 404다서버 쪽 경로 규칙"api 경로 설정을 점검하고 두 단계 주소도 되게 해줘"
로그인 창이 안 열린다팝업 차단, 또는 폰으로 시도차단을 풀고 이 컴퓨터의 브라우저에서 다시 엽니다

2분 이상 막히면 손을 들어주세요. 여기서 막혀도 완주에는 영향이 없습니다.

블록 7 · 15분 · 마무리

오늘 가져가는 것

1
내 주소

내 계정에서 나온 주소. 어느 기기에서나 열린다.

2
내 저장소

코드가 담긴 내 GitHub 서랍. 고친 내역이 남는다.

3
내 냉장고

기록이 모이는 한 곳. 어디서 적어도 같은 내용이 보인다.

4
고치는 법

말하고, "올려줘". 오늘 배운 것은 사실 이 한 줄이다.

블록 7 · 마무리

집에서도 같은 방법으로 이어갑니다

  1. 같은 폴더에서 claude를 다시 엽니다
  2. 고치고 싶은 것을 말로 설명합니다
  3. "올려줘"라고 말합니다 — 주소는 그대로, 내용만 바뀝니다
주소가 그대로라서 남에게 다시 보낼 일이 없습니다. 한 번 보낸 주소가 계속 최신이에요.

막히면 그 화면을 그대로 말로 설명하세요. 오늘 표에 있던 한 마디들이 대부분 통합니다.

블록 7 · 마무리

오늘은 무료 등급 안에서 시작합니다

  • 세 곳 모두 무료로 시작하는 등급이 있습니다
  • 한도가 얼마인지는 각 서비스 안내에서 봅니다
  • 오늘 만든 정도의 작은 앱은 그 범위에서 출발합니다
쓰다가 한도가 걸리면 그때 판단하면 됩니다. 미리 결제부터 서두를 이유는 없어요.

여기까지 오신 여러분은 이제 주소를 가진 사람입니다. 다음에 만들 앱도 오늘의 세 단계면 됩니다.

부록

진행자용 타임테이블

진행자(HC · 보조 진행자) 참고용

시간(누적)블록비고
0:00 ~ 0:15블록 1지난 시간 · 흐름 · 도착점
0:15 ~ 0:30블록 2개념 — 세 조각과 세 곳
0:30 ~ 0:55블록 3프롬프트 ① · 로그인
0:55 ~ 1:05휴식10분
1:05 ~ 1:40블록 4★완주 최소선 — 올리기 · 폰 확인
1:40 ~ 2:20블록 5★도전 목표 — 냉장고
2:20 ~ 2:30휴식10분
2:30 ~ 2:55블록 6프롬프트 ④ · 막힘 표
2:55 ~ 3:10블록 7마무리

지연 없는 기준표입니다(190분 = 핵심 170 + 휴식 20). 버퍼 20~30분을 더해 210~220분을 잡습니다.

부록

진행자용 막힘 대응표

진행자(HC · 보조 진행자) 참고용 — 블록 · 확인할 것 · 우회로

막히는 지점블록확인할 것 · 우회로
명령 도구 설치가 실패블록 3다른 설치 방식으로 재시도. 안 되면 짝 컴퓨터에 붙인다
로그인 창이 안 뜬다블록 3팝업 차단 해제 → 주소를 직접 붙여 열게 한다
GitHub 계정이 없다블록 3그 자리에서 만든다. 메일 인증까지 마쳐야 이어진다
배포가 오래 걸린다블록 4커밋 이메일부터 본다. 다르면 표의 한 마디를 친다
주소에서 로그인 화면이 뜬다블록 4긴 팀 주소를 연 것. 짧은 공개 주소를 다시 받는다
폰에서만 안 열린다블록 4사내 와이파이 대신 폰 데이터로 재시도
냉장고 연결이 30분을 넘긴다블록 5여기서 끊는다. 완주 판정에 영향 없다고 알린다
저장이 안 된다블록 5환경변수 등록 → 다시 배포 순서로 본다
열쇠가 코드에 들어갔다블록 6즉시 멈추고 열쇠를 새로 받는다. 저장소 비공개도 본다
2분 이상 혼자 막힘전체짝에게 먼저 묻고, 안 풀리면 진행자가 화면을 본다
1 / 26