만든 걸 인터넷에 올리는 순서

Vercel은 깃허브에 있는 코드를 가져다 배포합니다. 그래서 코드가 먼저 거기 있어야 합니다.

1. 1github.com 에서 가입하고 New repository 를 누릅니다. 이름은 아무거나 괜찮습니다.
2. 2Private 을 고르세요. 코드를 남에게 보여줄 이유가 없고, Vercel은 Private 도 그대로 가져갑니다.
3. 3Cursor·Claude Code 같은 도구를 쓰고 계시면 「이 폴더를 방금 만든 깃허브 저장소에 올려줘」라고 시키면 됩니다. 아래 지시문을 그대로 붙여넣으셔도 됩니다.

여기가 사고가 나는 자리입니다. API 키나 비밀번호는 보통 .env 라는 파일에 들어 있는데, 이걸 같이 올리면 누구나 보게 됩니다. Private 저장소라도 나중에 공개로 바꾸는 순간 드러납니다.

1. 1프로젝트 폴더에 .gitignore 파일이 있는지 보고, 그 안에 .env 한 줄이 있는지 확인하세요. 없으면 추가합니다.
2. 2이미 올려버리셨다면 지우는 것만으로는 부족합니다. 깃 기록에 남아 있습니다. 그 키를 발급한 곳에서 새로 발급받고 옛 키를 버리세요.
3. 3Vercel 에서는 키를 파일이 아니라 Settings 의 Environment Variables 에 넣습니다. 이름과 값을 .env 에 있던 그대로 하나씩 옮기면 됩니다.

이 부분은 저희가 주소만으로 하는 진단에서도 잡아내는 항목입니다. 배포하고 나서 다시 진단해보시면 키가 밖으로 새고 있는지 알려드립니다.

1. 1vercel.com 에 깃허브 계정으로 로그인합니다. 따로 가입할 필요가 없습니다.
2. 2Add New 에서 Project 를 고르고, 방금 만든 저장소를 Import 합니다.
3. 3설정은 대부분 그대로 두셔도 됩니다. Vercel 이 Next 인지 Vite 인지 알아서 알아봅니다. 2번에서 옮기기로 한 환경변수만 여기서 넣으세요.
4. 4Deploy 를 누르면 몇 분 안에 주소가 나옵니다.

첫 배포에서 한 번 깨지는 것은 흔한 일입니다. 내 컴퓨터에서는 되는데 저기서는 안 되는 이유는 보통 셋 중 하나입니다.

1. 1환경변수를 안 넣었습니다. 로그에 키 이름이 undefined 로 나오면 이것입니다.
2. 2내 컴퓨터에만 있는 파일을 쓰고 있습니다. .gitignore 에 걸려서 안 올라간 파일입니다.
3. 3대소문자입니다. 맥은 Button.tsx 와 button.tsx 를 같은 파일로 보지만 Vercel 은 다르게 봅니다.

Vercel 화면의 Deployments 에서 실패한 건을 누르면 로그가 통째로 나옵니다. 그 로그를 쓰시던 AI에 그대로 붙여넣으면 대개 바로 잡아줍니다.

배포하면 Vercel 이 주소를 하나 줍니다. 보통 내프로젝트.vercel.app 같은 모양입니다. 이것도 진짜 주소입니다. 남에게 보여주고 진단도 받을 수 있습니다.

내 도메인을 쓰고 싶으시면 Settings 의 Domains 에서 붙이면 되는데, 지금 당장 필요하지는 않습니다. 돈을 받기 시작할 때 하셔도 늦지 않습니다.

위 1~3번을 직접 하기 번거로우시면, 이 지시문을 쓰시던 AI에 그대로 붙여넣으세요. 무료입니다.