16강: 배포

세상에 공개하기

오늘 끝나면 이런 걸 갖게 돼요. 15강에서 고친 서비스가 내-프로젝트.vercel.app 주소로 열려요. 이후에는 클로드에게 저장과 업로드를 부탁하면 새 버전도 자동으로 배포돼요.

15강에서 쓰던 my-service 폴더에서 클로드 코드를 열고 시작하세요.

1. 배포할 코드를 준비해요

Vercel(버셀, 웹 서비스를 인터넷에 올려 주는 도구)은 GitHub(깃허브, 코드를 온라인에 보관하는 곳)의 코드를 가져와요. 먼저 클로드에게 빌드(Build, 실행할 수 있게 포장하는 과정)와 GitHub 연결을 확인해 달라고 하세요.

이 프로젝트를 Vercel에 배포할 수 있게 준비해 줘.

먼저 프로젝트에 맞는 빌드 방법을 찾아 실행하고, 실패하면 원인과 고칠 범위를 설명해 줘.
그다음 Git 상태와 GitHub 연결 여부를 확인해 줘.

GitHub 저장소가 없다면 my-service라는 새 저장소를 만들 준비를 해 줘.
공개와 비공개 중 무엇으로 만들지 먼저 물어보고,
README·.gitignore·license는 새로 만들지 마.

비밀번호나 인증 정보가 저장 대상에 없는지 확인한 뒤
지금 상태를 저장하고 main 작업 갈래를 GitHub에 올려 줘.
실행 전에 무엇을 할지 먼저 보여 줘.
로그인이나 권한 승인이 필요하면 그 화면에서 멈춰서 알려 줘.

브라우저에서 GitHub 로그인이나 권한 승인이 나오면 직접 진행하세요. 이것만 직접 하시면 나머지는 클로드가 해요.

클로드가 빌드 성공과 GitHub 주소를 모두 보여주면 다음 단계로 가세요. 저장소를 직접 확인하고 싶다면 GitHub에 로그인해 my-service가 보이는지 살펴보세요.

2. Vercel과 GitHub를 연결해요

1. vercel.com에서 Sign Up을 누르세요.
2. Continue with GitHub를 고르고 로그인하세요.
3. GitHub 권한 화면에서 Authorize를 누르세요.
4. Vercel 대시보드에서 Add New...와 Project를 차례로 고르세요.
5. my-service 옆의 Import를 누르세요.

저장소가 안 보이면 Adjust GitHub App Permissions에서 접근 권한을 추가하세요. Import 뒤에 설정 화면이 열리면 닫지 말고 다음 단계로 이어가세요.

Vercel의 Hobby 요금제는 비상업적인 개인 용도만 허용돼요. 결제, 광고, 유료 제작처럼 수익과 연결된 서비스는 Pro나 Enterprise 요금제가 필요해요. Pro는 현재 월 20달러부터 시작해요.

3. 환경 변수를 옮겨요

환경 변수(Environment Variables)는 데이터베이스 주소나 API 열쇠를 코드 밖에 보관하는 금고와 비슷해요. .env.local은 GitHub에 올라가지 않으므로 Vercel에 따로 등록해야 해요.

먼저 클로드에게 필요한 이름만 확인하세요.

이 프로젝트를 Vercel에서 실행할 때 필요한 환경 변수 목록을 확인해 줘.
.env.local과 실제 코드를 함께 살펴보고, 배포에 필요한 이름만 표로 정리해 줘.

각 항목이 Production(실제 서비스), Preview(미리보기), Development(개발용) 중 어디에 필요한지 알려 줘.
Config(일반 설정)와 Secret(비밀 설정) 중 무엇으로 저장할지도 알려 줘.
값 자체는 대화에 출력하지 말고, 빠진 이름이나 철자만 확인해 줘.
NEXT_PUBLIC_이 붙은 항목에 비밀값이 들어 있지 않은지도 점검해 줘.

Import 설정 화면의 Environment Variables를 펼치세요. 클로드가 알려 준 이름은 Name, 값은 Value에 넣어요.

12강의 NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY와 13강의 WEATHER_API_KEY처럼 실제로 쓰는 항목을 빠짐없이 옮기세요. 실제 서비스에 필요한 값은 Production을 선택하고, 클로드의 안내에 따라 Config 또는 Secret으로 저장해요.

키 값을 복사해 붙이는 일만 직접 하시면 나머지는 클로드가 확인해요. 채팅창에 값 자체를 붙이지 마세요.

4. 배포 버튼을 눌러요

설정 화면 아래의 Deploy를 누르세요. 이 1~2분 동안 Vercel이 코드를 빌드해요.

꽃가루 화면과 Status: Ready가 보이면 배포가 끝난 거예요. 내-프로젝트.vercel.app 형태의 주소를 눌러 서비스를 여세요.

환경 변수를 나중에 바꿨다면 새 배포가 필요해요. 프로젝트의 Environment Variables에서 저장한 뒤 Deployments를 열고, 최근 배포의 메뉴에서 Redeploy를 누르세요.

5. 공개된 화면을 확인해요

완료 기준은 세 가지예요.

1. 컴퓨터에서 공개 주소가 열린다.
2. 스마트폰에서도 글과 버튼이 화면 밖으로 나가지 않는다.
3. 로그인과 데이터 조회 같은 주요 기능이 작동한다.

문제가 있으면 Vercel에서 프로젝트를 열고 Deployments에서 최근 배포를 고르세요. Building을 펼쳐 처음 나온 오류부터 클로드에게 건네면 돼요.

Vercel 배포가 실패했어.
최근 배포의 빌드 로그에서 처음 나온 오류는 아래와 같아.

[여기에 오류 메시지 붙이기]

원인을 먼저 설명하고, 고칠 파일과 범위를 보여 줘.
내 확인을 받은 뒤 최소한으로 수정하고 다시 점검해 줘.

배포는 성공했는데 로그인이나 데이터만 안 된다면 이렇게 말하세요.

로컬에서는 잘 되지만 Vercel 주소에서는 로그인이나 데이터 조회가 작동하지 않아.
환경 변수의 이름, 적용 환경, 누락 여부부터 확인해 줘.
비밀값은 출력하지 말고 내가 Vercel 화면에서 확인할 항목만 알려 줘.

배포는 어떤 흐름인가요?

배포는 내 컴퓨터의 서비스를 인터넷에서 열 수 있게 옮기는 일이에요. 식당 건물을 직접 짓는 대신 공유 주방에 입점한다고 생각하면 쉬워요.

GitHub가 코드를 보관하는 주방이라면 Vercel은 요리를 포장해 주소까지 붙여 주는 배달 창구예요. 코드를 올리면 빌드를 거쳐 공개 주소를 만듭니다.

1. 클로드가 코드를 수정하고 GitHub에 올려요.
2. Vercel이 새 코드를 감지해 빌드해요.
3. 보통 30초~2분 뒤 같은 주소에 새 버전이 반영돼요.

한 번 연결한 뒤에는 아래처럼 한 문장으로 부탁하면 돼요.

지금 상태 저장하고 깃허브에 올려 줘.
비밀번호나 인증 정보가 포함되지 않았는지 먼저 확인하고,
실행 전에 무엇을 할지 보여 줘.

GitHub Pages와 무엇이 다른가요?

8강의 GitHub Pages는 HTML, CSS, JavaScript로 만든 정적 화면에 알맞아요. 이번 프로젝트처럼 로그인, API, 데이터베이스 연결이 있다면 서버 기능을 다루는 Vercel이 필요해요.

HTTPS는 주소창의 자물쇠로 확인할 수 있어요. Vercel 기본 주소와 연결한 도메인에 자동으로 적용돼요.

내 도메인을 연결하고 싶다면

이미 my-project.com 같은 도메인을 샀다면 프로젝트의 Settings에서 Domains를 열고 Add Domain을 누르세요. Vercel이 보여 주는 DNS(인터넷 주소를 찾아 주는 정보) 값을 도메인 업체에 등록하면 돼요.

도메인 업체 로그인과 DNS 변경 승인은 직접 해야 해요. 처음 배포할 때 꼭 필요한 단계는 아니므로, vercel.app 주소부터 확인한 뒤 진행해도 돼요.

이런 분께 추천해요

내 컴퓨터에서만 보던 서비스를 다른 사람에게 보여 주고 싶은 분께 필요해요. 로그인이나 데이터베이스가 있는 프로젝트를 공개하고, 이후 수정도 자동으로 반영하고 싶은 분에게 알맞습니다.

참고 링크

• Vercel 공식 시작 가이드 (영문)
• Vercel 환경 변수 설정 가이드
• Vercel 환경 변수 추가·수정 방법 (영문)
• Vercel 커스텀 도메인 연결 가이드
• Vercel 요금제별 사용 범위 — 무료 Hobby의 비상업 제한 (영문)

다음 강

17강: 피드백과 개선에서는 공개한 서비스를 다른 사람에게 보여 주고, 받은 의견을 작은 개선으로 이어가요.

17강으로 넘어가기