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

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

이 단계를 마치면

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

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

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

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

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

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

Vercel로 배포하기

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

1. vercel.com에서 GitHub 계정으로 가입하고 로그인합니다.
2. 새 프로젝트를 만드는 메뉴에서 GitHub 저장소 목록을 엽니다. 목록에 저장소가 없으면 GitHub 쪽에서 Vercel이 볼 저장소로 이 저장소를 추가합니다.
3. 저장소를 불러옵니다(Import). Vercel이 프레임워크를 스스로 알아보고 빌드 설정을 채웁니다. HTML 파일 하나로 된 도구라면 프레임워크는 "기타(Other)"로 두고 빌드 명령은 비웁니다.
4. 인증키가 필요한 도구라면 이 화면의 환경변수 항목에 이름과 값을 넣습니다(28단계).
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 프로젝트에 배포해 줘"처럼 부탁하면 됩니다. 다만 본 주소로 내보내는 배포는 되돌리기 어려운 동작에 가깝습니다. 28단계의 권한 설정에서 본 배포 명령은 반드시 묻고 실행하게 해 두고, 미리보기 주소에서 먼저 확인한 뒤 본 배포를 허락합니다. 처음 배포는 화면으로 해 보고, 흐름이 익숙해진 뒤에 명령으로 넘어가기를 권합니다.

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

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

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

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

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

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

현장 장면

윤 과장은 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 미리보기