30단계배포: 동료의 휴대폰에서 열리는 주소

걸리는 시간 · 읽기 약 10분 · 따라 하기 약 60분 · 난이도 ★★★ 심화 · 화면 확인 2026.09.27

이 단계를 마치면

• Vercel과 Cloudflare Pages 가운데 하나를 골라 GitHub 저장소를 연결하고 주소를 받을 수 있다.
• 미리보기 주소와 본 주소를 구분하고, 필요하면 내 도메인을 연결할 수 있다.
• 받은 주소를 내 휴대폰과 동료 휴대폰에서 열어 확인할 수 있다.
• 푸시할 때마다 배포가 다시 돌아가는 흐름을 확인하고, 배포 상태를 읽을 수 있다.

팀장에게 "다 만들었습니다"라고 말했다. 팀장이 묻는다. "그래서, 어디서 열어 보면 돼?" 이 질문에 주소 하나로 답할 수 있어야 한다.

지금 만든 도구는 내 노트북과 GitHub 저장소에 있다. 저장소는 비공개라 팀원이 볼 수 없고, 공개로 바꿔 봐야 코드 목록이 보일 뿐 페이지가 열리지는 않는다. 팀원이 쓰려면 주소가 있어야 한다. 그 주소를 만드는 일이 배포다. GitHub에 올라간 것을 인터넷 주소에 연결해 누구든 브라우저로 열 수 있게 한다.

배포 서비스 고르기. 배포 서비스는 여럿 있다. 이 책의 실습에서는 Vercel이나 Cloudflare Pages처럼 GitHub 저장소를 골라 불러오기만 하면 주소를 만들어 주는 서비스를 예로 든다. 둘 다 흐름이 비슷하다. 회사에 정해진 서비스가 있다면 그것을 쓴다. 가격과 이용 조건은 각 서비스의 안내에서 확인하자.

흐름. 순서는 이렇다. 화면의 버튼 이름은 바뀔 수 있으니 뜻을 보고 따라가자.

저장소 접근은 고른 저장소만 허용하는 쪽을 권한다. 권한은 필요한 만큼만, 좁게 주는 것이 원칙이다. 설정 단계에서 HTML 파일 하나로 된 도구라면 프레임워크를 "없음"이나 "기타"로 두고, 빌드 명령은 비워 둔다. index.html이 저장소 맨 위에 있으면 서비스가 그 파일을 첫 화면으로 연다. 25단계에서 파일 이름을 index.html로 정한 이유가 여기 있다. 설정 항목이 무엇을 뜻하는지 모르겠으면 화면을 캡처해 Claude에게 보여 주고 무엇을 넣어야 하는지 물어보자.

Vercel로 배포하기

Vercel은 GitHub 저장소를 불러와 몇 번의 클릭으로 주소를 만들어 주는 서비스다. 화면 이름은 바뀔 수 있으니 뜻을 보고 따라간다.

1. vercel.com에서 GitHub 계정으로 가입하고 로그인한다.
2. 새 프로젝트를 만드는 메뉴에서 GitHub 저장소 목록을 연다. 목록에 저장소가 없으면 GitHub 쪽에서 Vercel이 볼 저장소로 이 저장소를 추가한다.
3. 저장소를 불러온다(Import). Vercel이 프레임워크를 스스로 알아보고 빌드 설정을 채운다. HTML 파일 하나로 된 도구라면 프레임워크는 "기타(Other)"로 두고 빌드 명령은 비운다.
4. 인증키가 필요한 도구라면 이 화면의 환경변수 항목에 이름과 값을 넣는다(31단계).
5. 배포(Deploy)를 누른다. 끝나면 프로젝트이름.vercel.app 형태의 주소가 나온다.
6. 이후 본줄(main)에 푸시할 때마다 이 주소가 새 화면으로 바뀐다. 다른 브랜치나 풀 리퀘스트를 올리면 본 주소는 그대로 두고 따로 미리보기 주소를 만들어 준다.

무료 요금제(Hobby)는 개인의 비상업적 용도로 제한되어 있다. 회사 업무에 쓸 도구라면 유료 요금제나 회사 계정을 쓸지 먼저 확인한다.

Cloudflare Pages로 배포하기

Cloudflare Pages도 흐름은 같다. 이 책의 저자가 운영하는 ceoai.kr도 이 방식으로 배포된다.

1. Cloudflare 대시보드에 로그인해 Workers & Pages 메뉴로 간다.
2. 애플리케이션 만들기에서 Pages를 고르고 "Git에 연결(Connect to Git)"을 누른다. GitHub 로그인과 저장소 접근 허용 화면이 나온다. 이 도구의 저장소 하나만 허용한다.
3. 저장소를 고르고 빌드 설정을 정한다. HTML 파일 하나로 된 도구라면 프레임워크는 "없음", 빌드 명령은 비우고, 출력 폴더는 저장소 맨 위로 둔다.
4. 필요하면 환경변수를 넣고 저장 후 배포한다. 끝나면 프로젝트이름.pages.dev 형태의 주소가 나온다.
5. 본줄에 푸시하면 본 주소가, 다른 브랜치나 풀 리퀘스트를 올리면 미리보기 주소가 새로 만들어진다. GitHub의 풀 리퀘스트 화면에 미리보기 주소가 댓글로 달리기도 한다.

둘 중 무엇을 고를까

처음이라면 어느 쪽을 골라도 된다. 회사가 이미 도메인을 Cloudflare에서 관리하고 있다면 Cloudflare Pages가, 개발팀이 Next.js를 쓰고 있다면 Vercel이 편하다. 가격과 한도는 자주 바뀌니 고르기 전에 각 서비스의 요금 안내를 확인하자.

내 도메인 연결하기

이름.vercel.app이나 이름.pages.dev 대신 tools.우리회사.com 같은 주소로 열고 싶다면 도메인을 연결한다. 두 서비스 모두 프로젝트 설정의 도메인(Domains, Custom domains) 항목에서 쓸 주소를 입력하면, 도메인 관리 화면에 넣어야 할 값(DNS 레코드)을 알려 준다. 그 값을 도메인을 산 곳의 관리 화면에 넣고 기다리면 연결된다. 보안 인증서(https)는 두 서비스가 알아서 붙여 준다. 회사 도메인은 IT 담당이 관리하는 경우가 많으니, 넣어야 할 값을 캡처해 IT 담당에게 전달하는 것이 가장 빠르다.

Claude Code에게 배포를 맡기기

화면을 누르는 대신 Claude Code에게 명령으로 배포를 맡길 수도 있다. Vercel은 vercel 명령(CLI), Cloudflare는 wrangler 명령으로 터미널에서 배포한다. 처음 한 번은 브라우저로 로그인을 허락해야 하고, 그다음부터는 "Vercel로 미리보기 배포를 올리고 주소를 알려 줘", "이 폴더를 Cloudflare Pages 프로젝트에 배포해 줘"처럼 부탁하면 된다. 다만 본 주소로 내보내는 배포는 되돌리기 어려운 동작에 가깝다. 31단계의 권한 설정에서 본 배포 명령은 반드시 묻고 실행하게 해 두고, 미리보기 주소에서 먼저 확인한 뒤 본 배포를 허락한다. 처음 배포는 화면으로 해 보고, 흐름이 익숙해진 뒤에 명령으로 넘어가기를 권한다.

휴대폰으로 열기. 주소가 나오면 가장 먼저 내 휴대폰으로 열어 본다. 이 도구를 실제로 쓰는 곳이 휴대폰이기 때문이다. 와이파이를 끄고 휴대폰 데이터로도 열어 본다. 그다음 옆 동료에게 주소를 보내 자기 휴대폰으로 열어 보게 한다. 배포는 동료가 열었을 때 비로소 끝난다. 내 기기에서만 열리는 경우는 생각보다 많다. 로그인 상태가 남아 있거나, 예전 파일을 붙잡고 있거나, 회사망 안에서만 열리는 경우다.

푸시하면 다시 배포된다. 연결을 마치고 나면 그다음부터는 따로 배포 버튼을 누를 필요가 없다. 흐름은 이렇다.

내 노트북에서 고친다 → 커밋 → 푸시 → GitHub에 기록이 쌓인다
→ 배포 서비스가 새 기록을 알아챈다 → 새로 배포한다 → 같은 주소의 화면이 바뀐다

문구 하나를 고쳐 푸시하고, 배포 서비스의 배포 목록을 열어 보자. 맨 위에 새 배포가 생기고 상태가 "만드는 중"에서 "준비됨"으로 바뀌는 것이 보인다. 그다음 주소를 다시 연다. 고친 문구가 보이면 흐름이 제대로 이어졌다. 서비스에 따라서는 본줄이 아닌 브랜치에 푸시하면 본 주소 대신 별도의 미리보기 주소를 만들어 주기도 한다. 29단계에서 말한 "브랜치에 올렸는데 화면이 그대로"가 여기서 생긴다.

공개 범위. 사내 도구라는 점을 잊지 말자. 주소가 생겼다면 그 주소를 아는 누구나 열 수 있을지도 모른다. 주소를 단톡방에 한 번 올리면 어디까지 퍼질지 알 수 없다. 배포 전에 아래 표로 한 번 걸러 내자.

접근을 제한하는 방법은 서비스와 요금제마다 다르다. 확신이 서지 않으면 처음에는 공개돼도 문제없는 내용만 담는다.

현장 장면

윤 과장은 Vercel에 GitHub 개인 계정으로 로그인했다. 새 프로젝트를 만들려고 저장소 목록을 열었는데 visit-log가 보이지 않았다. 로그인할 때 저장소 접근을 허용하는 화면을 대충 넘긴 탓이었다. Claude 앱에 화면을 설명하자, GitHub 쪽에 이 서비스가 볼 저장소를 고르는 설정이 있다는 답이 돌아왔다. 윤 과장은 visit-log 하나만 허용했고, 그제야 목록에 저장소가 나타났다.

불러온 뒤 설정 화면에서 프레임워크는 기타로 두고 빌드 명령은 비웠다. 배포를 누르자 상태가 바뀌어 가다가 "준비됨"이 떴고, 주소가 나왔다. 노트북에서 열어 보니 방문 일지가 보였다. 휴대폰으로 열어도 보였다. 됐다. 윤 과장은 팀 단톡방에 주소를 올리려다 손을 멈췄다. 팀장이 먼저 물었기 때문이다. "그 주소, 우리 팀 말고도 열 수 있는 거지?"

공개 범위를 배포 전에 따져 보지 않았던 것이다. 윤 과장은 위 표로 도구를 다시 거르고, 저장소 전체에서 실제 회사 이름이나 사람 이름이 들어간 곳을 Claude에게 찾게 했다. 하나가 걸렸다. 입력란의 예시 문구에 실제 거래처 이름이 남아 있었다. "예: 업종·지역"으로 바꿔 커밋하고 푸시하자 배포 목록에 새 배포가 생기고 "준비됨"으로 바뀌었다. 주소를 새로 열자 예시 문구가 바뀌어 있었다. 윤 과장은 그제야 옆자리 동료 둘에게 주소를 보냈고, 둘 다 자기 휴대폰에서 문제없이 열었다.

따라 하기

1. 배포 서비스에 GitHub 계정으로 로그인하고, 저장소 접근을 이 도구의 저장소 하나만 허용한다. 성공 기준: 새 프로젝트 화면의 저장소 목록에 내 저장소가 보인다.
2. 저장소를 불러오고, HTML 파일 하나로 된 도구라면 설정을 거의 건드리지 않은 채 배포한다. 성공 기준: 상태가 준비됨으로 바뀌고 주소가 나온다.
3. 주소를 내 휴대폰에서 와이파이와 휴대폰 데이터로 각각 연다. 성공 기준: 두 경우 모두 첫 화면이 보이고 입력란이 잘리지 않는다.
4. 위 공개 범위 표로 도구에 들어간 것을 거르고, 아래 프롬프트로 저장소를 점검한다. 성공 기준: 실명, 연락처, 인증키가 한 곳도 없다.
5. 문구 하나를 고쳐 푸시하고, 배포 목록에서 새 배포가 준비됨으로 바뀌는 것을 본 뒤 주소를 다시 연다. 성공 기준: 고친 문구가 주소에서 보인다.
6. 옆 동료에게 주소를 보내 자기 휴대폰으로 열게 한다. 성공 기준: 동료가 도움 없이 열고 입력까지 해 본다.
7. 브랜치를 하나 만들어 문구를 고쳐 푸시하고, 미리보기 주소가 따로 생기는지 본다. 성공 기준: 본 주소는 그대로이고, 미리보기 주소에서만 고친 문구가 보인다.

복사해 쓰는 프롬프트

이 도구를 배포하기 전에 점검해 줘. 고치지는 말고 먼저 목록으로 보고해 줘.
- 저장소 맨 위에 index.html이 있는지, 첫 화면이 그 파일인지
- 코드와 설정 파일 어디에 인증키, 비밀번호, 실제 회사 이름, 사람 이름, 연락처가 적혀 있는지
- 공개 주소로 올라가면 곤란할 만한 문구나 예시 값이 있는지
- 배포 서비스 설정에서 프레임워크, 빌드 명령, 출력 폴더에 무엇을 넣어야 하는지
문제가 있는 곳은 어떻게 고칠지 계획만 보여 주고, 내가 좋다고 하면 고친 뒤 커밋해 줘.

막히면 이렇게

실습 파일

공개 저장소에 올려 둔 가공 자료와 양식이다. 회사 자료 대신 먼저 이것으로 해 본다.

• 샘플 자료 영업_방문기록.csv · 영업 사원 네 명의 3월 방문 기록 30건
• 채워 쓰는 양식 배포_전_점검표.md · 사내 도구를 주소로 올리기 전의 공개 범위·인증키·권한·열어 보기 점검

스스로 점검

• ☐ 동료가 자기 휴대폰으로 주소를 열어 봤는가
• ☐ 푸시한 뒤 배포 목록에서 새 배포가 준비됨으로 바뀌는 것을 봤는가
• ☐ 공개 주소에 올라가면 안 될 정보가 없는지 배포 전에 걸렀는가

기억할 것

• 배포는 옆 사람이 자기 휴대폰으로 열었을 때 끝난다.
• 저장소 접근은 좁게 허용하고, 공개 범위는 배포 전에 거른다.

더 알아보기 · Vercel 배포 · Vercel 도메인 · Vercel Hobby 요금제 · Cloudflare Pages Git 연결 · Cloudflare Pages 도메인 · Cloudflare Pages 미리보기