올리기 전에, Vercel 가입

24.1 올릴 때 세 곳을 만난다

지금 만든 웹은 내 컴퓨터 안에만 있습니다. 주소창에 localhost 라고 떠 있던 것을 기억하나요(14장)? 내 컴퓨터를 끄면 아무도 볼 수 없습니다.

다음 단계에서는 이 웹을 인터넷에 올립니다. 올린다는 건, 항상 켜져 있는 남의 컴퓨터에 파일을 옮겨 두고 그 자리에 주소를 붙이는 일입니다. 예전에는 그 컴퓨터를 직접 빌리고 설정해야 했지만, 지금은 서비스들이 대신해 줍니다.

올리는 날 가입부터 하면 한 시간이 금방 갑니다. 영어 화면, 확인 문자, 비밀번호 찾기에서 한 명씩 멈추기 때문입니다. 그래서 가입은 미리 해 둡니다. 올리는 것 자체는 하지 않습니다. 올리기 바로 앞 단계까지만 갑니다.

📖 Vercel(버셀)

만든 웹사이트에 주소를 붙여 인터넷에 띄워 주는 서비스. 무료로 시작할 수 있습니다.

GitHub 창고를 연결해 두면, 창고의 코드가 바뀔 때마다 알아서 새 버전을 띄웁니다. 우리가 할 일은 창고에 넣는 것뿐입니다. 이런 일을 배포(deploy) 라고 하고, 다음 단계에서 합니다.

먼저 확인 — GitHub 계정이 있나

Vercel은 GitHub 계정으로 들어갑니다(그림 20-1). 19장 갈림길에서 A 로 간 분은 20장에서 이미 만들었습니다. B 로 간 분은 20장부터 하고 오세요. 5분이면 됩니다.

---

24.2 GitHub 계정으로 가입하기

GitHub에 로그인된 상태 그대로, 새 탭에서 vercel.com 을 엽니다.

⚠️ Vercel 무료(Hobby)는 개인 · 비상업 용도입니다

6번에서 고르는 Hobby 요금제는 비상업 개인 용도로만 쓸 수 있습니다. 수업에서 연습으로 올리는 건 괜찮습니다. 그런데 가게 사이트를 상업용으로 실제 운영하려면 Vercel 무료로는 안 됩니다. 그때는 Cloudflare(클라우드플레어) 를 추천합니다. 웹사이트를 인터넷에 올려 주는 또 다른 서비스입니다.

2번 — 버튼이 네 개인데 왜 GitHub인가

Vercel 가입 화면에는 Continue with Google 이 맨 위에 있습니다. 여기서 Google을 누르고 싶어집니다. GitHub을 Google로 만들었으니까요.

그런데 Vercel은 Google이 아니라 GitHub과 이어져야 합니다. 올릴 때 Vercel이 하는 일은 GitHub 창고에서 코드를 가져가는 것입니다. GitHub으로 들어가 있으면 창고가 바로 보입니다. Google로 들어가면 나중에 GitHub을 따로 또 이어야 합니다.

그리고 Vercel은 휴대폰 번호 하나에 계정 하나만 만들어 줍니다(4~5번). Google로 가입을 끝내 버리면, 같은 번호로 GitHub 가입을 다시 할 수 없습니다. 그때는 새로 만들지 말고 그 계정 설정에서 GitHub을 이어야 합니다. 처음에 GitHub을 누르는 게 제일 쉽습니다.

3번 — Authorize 는 무엇을 허락하나

“Vercel이 내 GitHub 계정으로 들어가도 되나요?” 라는 확인입니다(21장 Supabase 때와 같습니다). 창에 적힌 허락은 내가 누구인지 확인하고, 메일 주소를 읽는 것입니다.

Act on your behalf(나 대신 움직인다) 라는 줄이 무섭게 보일 수 있습니다. 그래도 창고의 코드를 가져가는 허락은 여기 없습니다. 그건 나중에 창고를 이을 때 따로 묻고, 그때도 우리가 고른 창고 하나만 허락합니다.

4~5번 — 왜 휴대폰 번호를 묻나

Authorize를 누르면 Vercel이 휴대폰 번호를 묻습니다. 로그인한 사람이 진짜 사람인지 확인하는 절차입니다. 번호를 넣으면 한 번만 쓰는 숫자가 문자로 오고, 그걸 넣으면 넘어갑니다. 화면에도 “확인 말고는 문자를 보내지 않는다” 고 적혀 있습니다.

번호는 이렇게 넣습니다.

문자가 1~2분 안에 안 오면 번호를 다시 봅니다. 맨 앞 0을 넣었거나, 나라가 한국이 아닌 경우가 대부분입니다.

6번 뒤에 — 여기서 멈춘다

첫 화면에 Import 나 Deploy 같은 버튼이 보입니다. 누르지 않습니다. 아직 올릴 창고가 없고, 문도 열려 있습니다(22장). 로그인과 문 잠그기를 먼저 하고 올린다는 것이 PRD의 「다음에 할 것」 에 적혀 있습니다(23장). 여기서는 가입까지.

---

24.3 Supabase를 아직 안 했다면

19장 갈림길에서 B(화면 더) 로 간 분은 아직 Supabase가 없습니다. GitHub 계정이 생겼으니 21.3절 순서 그대로 하면 됩니다. Continue with GitHub 로 들어가고, 지역은 Northeast Asia (Seoul).

A로 간 분은 이미 했습니다. 대신 올리기 전에 supabase.com 에 한 번 들어가 보세요. 7일 넘게 안 들어가면 창고가 잠듭니다(21장).

---

24.4 다 됐는지 확인

세 곳에 각각 들어가서 오른쪽 위 내 프로필 사진을 눌러 봅니다. 셋 다 같은 사람으로 보이면 끝입니다.

Vercel에 GitHub이 이어졌는지 모르겠으면 Claude에게 물어봐도 됩니다.

아래 문장을 Claude에 입력하세요.

Vercel에 GitHub 계정이 제대로 연결됐는지 확인하는 방법 알려줘.
어디를 눌러야 하는지 하나씩.

---

24.5 정리

• 다음 단계에서 웹을 인터넷에 올린다. GitHub(코드 창고) → Vercel(주소 붙여 띄우기)
• 가입은 미리 해 둔다. 올리는 건 다음 단계, 여기서는 가입까지
• Vercel은 Continue with GitHub — 맨 위 Google 이 아니다
• Vercel은 휴대폰 번호 하나에 계정 하나. 잘못 가입하면 다시 가입이 안 된다
• 번호는 +82 다음에 010의 0을 빼고
• B로 간 분은 GitHub(20장) → Supabase(21장)도 같이

이 장에서 나온 말

다음 단계에서는 세 곳을 잇습니다. 코드를 GitHub 창고에 넣고, Vercel이 그걸 가져가 주소를 붙입니다. 그 주소를 폰으로 열면, 내 가게 사이트가 인터넷에 있습니다.

---

24.6 안 될 때