첫 배포
드디어 이 과정의 하이라이트입니다. 지금까지 설치한 도구들을 모두 사용해서 진짜 웹사이트를 만들고 인터넷에 올려볼 거예요.
오늘 할 일 미리보기
| 단계 | 할 일 | 걸리는 시간 |
|---|---|---|
| 1 | 프로젝트 만들기 | 2분 |
| 2 | 내 컴퓨터에서 확인하기 | 1분 |
| 3 | GitHub에 올리기 | 3분 |
| 4 | Vercel에서 자동 배포 | 2분 |
전부 합쳐도 10분이면 됩니다. 차근차근 따라오세요.
1단계: 프로젝트 만들기
Cursor를 열고 터미널을 엽니다 (` Ctrl + ``).
아래 명령을 그대로 복사해서 터미널에 붙여넣고 Enter를 누릅니다:
npx create-next-app@latest my-first-site
이 명령이 하는 일을 설명하면:
| 부분 | 의미 |
|---|---|
npx |
Node.js에 포함된 도구 실행기 |
create-next-app |
웹사이트 기본 틀을 자동으로 만들어 주는 도구 |
@latest |
최신 버전을 사용하겠다는 뜻 |
my-first-site |
프로젝트 이름 (폴더 이름이 됩니다) |
명령의 의미를 외울 필요 없습니다. "이 명령을 실행하면 웹사이트 기본 틀이 만들어진다" 정도만 알면 됩니다.
설치 중 질문에 답하기
명령을 실행하면 몇 가지 질문이 나옵니다. 아래와 같이 답해 주세요:
| 질문 | 입력할 것 |
|---|---|
| Would you like to use TypeScript? | Yes (Enter) |
| Would you like to use ESLint? | Yes (Enter) |
| Would you like to use Tailwind CSS? | Yes (Enter) |
Would you like your code inside a src/ directory? |
Yes (Enter) |
| Would you like to use App Router? | Yes (Enter) |
| Would you like to use Turbopack? | Yes (Enter) |
| Would you like to customize the import alias? | No (Enter) |
대부분 기본값이 Yes이므로 Enter만 계속 누르면 됩니다. 마지막 질문만 No를 선택하세요.
설치가 진행되면 여러 줄의 텍스트가 쭉 지나갑니다. 1~2분 정도 기다리면 "Success!" 같은 메시지가 나옵니다.
2단계: 내 컴퓨터에서 확인하기
이제 방금 만든 프로젝트 폴더로 이동하고 웹사이트를 실행합니다.
터미널에 아래 두 명령을 차례대로 입력합니다:
cd my-first-site
npm run dev
| 명령 | 의미 |
|---|---|
cd my-first-site |
방금 만든 폴더로 이동 |
npm run dev |
웹사이트를 내 컴퓨터에서 실행 |
실행되면 터미널에 이런 메시지가 보입니다:
▲ Next.js 15.x.x
- Local: http://localhost:3000
이제 Chrome을 열고 주소창에 localhost:3000 을 입력하고 Enter를 누르세요.
화면에 Next.js 로고와 함께 웹페이지가 보이면 성공입니다!
localhost:3000 이란? "내 컴퓨터(localhost)의 3000번 출입구"라는 뜻입니다. 아직 인터넷에는 공개되지 않았고, 내 컴퓨터에서만 볼 수 있는 상태예요.
3단계: GitHub에 올리기
이 웹사이트를 인터넷에 공개하려면 먼저 GitHub에 올려야 합니다.
3-1. 터미널 준비
먼저 웹사이트 실행을 멈춥니다. 터미널에서 Ctrl + C 를 누르세요.
Ctrl + C는 "현재 실행 중인 것을 중단"하라는 명령입니다. 웹사이트가 멈추지만, 코드는 그대로 남아 있으니 걱정하지 마세요.
3-2. GitHub에 새 저장소 만들기
- Chrome에서 github.com 에 접속합니다 (로그인 필요)
- 오른쪽 위의 "+" 버튼 → "New repository" 클릭
- Repository name에
my-first-site입력 - 나머지는 그대로 두고 아래쪽 "Create repository" 클릭
3-3. 코드 올리기
GitHub에 저장소를 만들면 "...or push an existing repository from the command line" 아래에 명령어가 보입니다. 그 명령어를 Cursor 터미널에 한 줄씩 복사해서 붙여넣으면 됩니다.
보통 이런 형태입니다:
git remote add origin https://github.com/내사용자이름/my-first-site.git
git branch -M main
git push -u origin main
| 명령 | 의미 |
|---|---|
git remote add origin ... |
"이 코드를 GitHub의 이 주소에 연결해라" |
git branch -M main |
"메인 가지를 main이라고 부르자" |
git push -u origin main |
"코드를 GitHub에 올려라" |
GitHub 로그인 창이 나타나면 GitHub 사용자 이름과 비밀번호를 입력하세요. 브라우저 팝업으로 인증을 요청할 수도 있는데, 그냥 승인해 주면 됩니다.
GitHub 페이지를 새로고침하면 코드 파일들이 올라간 것이 보입니다!
4단계: Vercel에서 자동 배포
이제 마지막 단계입니다. Vercel이 GitHub의 코드를 가져와서 웹사이트로 만들어 줄 거예요.
- Chrome에서 vercel.com 에 접속합니다 (로그인 필요)
- "Add New..." → "Project" 클릭
- GitHub 저장소 목록에서 my-first-site 옆의 "Import" 클릭
- 설정 화면이 나오면 아무것도 바꾸지 말고 "Deploy" 클릭
Vercel이 자동으로 웹사이트를 만들기 시작합니다. 1~2분 정도 기다리면...
"Congratulations!" 화면이 나타납니다!
화면에 보이는 링크를 클릭해 보세요. my-first-site-xxxx.vercel.app 같은 주소입니다.
축하합니다!
인터넷에 올린 첫 웹사이트입니다!
이 주소를 가족이나 친구에게 보내보세요. 핸드폰으로도 열 수 있습니다. 전 세계 어디서든 이 주소로 접속할 수 있어요.
아직은 기본 화면만 보이지만, 이것은 진짜 웹사이트입니다. 앞으로 이 프로젝트의 코드를 수정하면 Vercel이 자동으로 업데이트해 줍니다.
전체 흐름 정리
오늘 한 일을 다시 한번 정리합니다:
Cursor에서 코드 작성
↓
GitHub에 코드 올리기
↓
Vercel이 자동으로 웹사이트 공개
↓
전 세계 누구나 접속 가능!
이 흐름은 앞으로 계속 반복됩니다. 코드를 수정하고 GitHub에 올리면 Vercel이 자동으로 반영해 줍니다.
문제 해결
| 증상 | 해결 방법 |
|---|---|
npx 명령이 안 됨 |
Node.js가 설치되었는지 확인 (node --version). 안 되면 Cursor 재시작 |
| localhost:3000이 안 열림 | npm run dev가 실행 중인지 확인. 터미널에 에러가 없는지 확인 |
| GitHub push가 안 됨 | 로그인 팝업이 나오면 승인. 사용자 이름/비밀번호 확인 |
| Vercel 배포 실패 | Vercel 화면에서 에러 로그 확인. 보통 다시 Deploy 버튼을 누르면 해결됨 |
이 절의 요약
npx create-next-app@latest my-first-site로 웹사이트 프로젝트를 생성합니다npm run dev로 내 컴퓨터에서 미리 확인합니다 (localhost:3000)git push로 GitHub에 코드를 올립니다- Vercel에서 Import하면 자동으로 인터넷에 공개됩니다
- 이 흐름(코드 수정 → GitHub 올리기 → 자동 배포)은 앞으로 계속 반복됩니다