↗Deploy GuideGitHub + Vercel

웹페이지 배포 안내Webpage Deployment Guide

ZIP 받고,
GitHub에 올리고,
Vercel로 배포하기Download ZIP,
upload to GitHub,
deploy with Vercel

ChatGPT가 만들어준 웹페이지 배포용 ZIP 파일을 GitHub 저장소에 올리고, Vercel에 한 번만 연결하면 이후부터는 파일을 추가하거나 수정할 때마다 자동으로 배포됩니다.Upload the deployment ZIP files generated by ChatGPT to a GitHub repository, connect that repository to Vercel once, and every future file update can be deployed automatically.

1바로 따라하기Start Guide⌘폴더 구조 보기View Folder Structure
Prepare

먼저 준비할 것What you need first

처음에는 계정과 ZIP 파일만 있으면 됩니다. 명령어를 몰라도 GitHub 웹 화면에서 업로드할 수 있습니다.You only need accounts and the ZIP file. You can upload files through the GitHub web interface without command-line tools.

1

GitHub 계정GitHub account

웹페이지 파일을 보관할 저장소를 만듭니다.Create a repository to store your webpage files.

  • 새 저장소 이름 예: webpageExample repository name: webpage
  • 공개/비공개는 원하는 대로 선택Choose public or private as needed
2

Vercel 계정Vercel account

GitHub 저장소와 연결해서 웹주소를 만듭니다.Connect your GitHub repository to create a live webpage URL.

  • GitHub 계정으로 로그인 가능You can sign in with GitHub
  • 저장소를 한 번만 연결하면 됨Connect the repository once
3

배포용 ZIPDeployment ZIP

ChatGPT가 만들어준 ZIP을 다운로드한 뒤 압축을 풉니다.Download the ZIP generated by ChatGPT and unzip it first.

  • ZIP 파일 자체를 GitHub에 올리지 않기Do not upload the ZIP file itself
  • 압축 푼 폴더 안의 내용물을 올리기Upload the contents inside the unzipped folder
Folder Structure

GitHub에 이렇게 보여야 정상Your GitHub repository should look like this

프로젝트 폴더를 한 겹 더 넣지 말고, 아래 파일들이 저장소 첫 화면에 보여야 합니다.Do not upload an extra wrapper folder. These items should appear at the repository root.

정답 구조Correct structure

GitHub 저장소 첫 화면에서 vercel.json, README.md, pages/가 보여야 합니다.At the repository root, you should see vercel.json, README.md, and pages/.

repository structure
webpage/
  vercel.json
  README.md
  pages/
    sarang-49/
      index.html
    new-page-name/
      index.html
GitHub Upload

GitHub에 파일 올리기Upload files to GitHub

비어 있는 저장소라면 uploading an existing file을 누르세요. 이미 파일이 있다면 Add file → Upload files를 누르세요.If the repository is empty, click uploading an existing file. If it already has files, click Add file → Upload files.

1

ZIP 압축 풀기Unzip first

다운로드한 ZIP을 먼저 압축 해제합니다.Extract the downloaded ZIP file first.

  • ZIP 파일을 그대로 업로드하지 않습니다.Do not upload the ZIP file directly.
2

내용물 선택Select contents

압축 푼 폴더 안의 vercel.json, README.md, pages/를 선택합니다.Select vercel.json, README.md, and pages/ inside the unzipped folder.

3

Commit changesCommit changes

업로드 화면 아래쪽의 Commit changes 버튼을 누르면 저장소에 반영됩니다.Click Commit changes at the bottom of the upload page to save the files.

Vercel Deploy

Vercel에서 GitHub 연결 후 배포Connect GitHub and deploy on Vercel

Vercel에서 GitHub 저장소를 한 번 연결하면, 이후 GitHub에 페이지를 추가하거나 수정할 때 자동으로 다시 배포됩니다.Once Vercel is connected to your GitHub repository, future GitHub updates can trigger new deployments automatically.

1

Add New → Project

Vercel 대시보드에서 새 프로젝트를 만듭니다.Create a new project from the Vercel dashboard.

2

GitHub 저장소 선택Choose GitHub repository

방금 업로드한 GitHub 저장소를 선택합니다. 저장소가 안 보이면 Vercel의 GitHub 권한을 확인하세요.Select the GitHub repository you uploaded. If it does not appear, check Vercel’s GitHub permissions.

3

Deploy 클릭Click Deploy

정적 HTML 프로젝트라면 보통 빌드 명령어는 비워둬도 됩니다. Deploy 버튼을 누르면 주소가 생성됩니다.For a static HTML project, the build command can usually be left empty. Click Deploy to generate your URL.

Add New Page

새 페이지를 추가할 때When adding a new page

새 페이지는 루트 index.html을 덮어쓰지 말고, pages/새페이지명/index.html로 추가합니다.Do not overwrite the root index.html. Add each new page as pages/new-page-name/index.html.

new page folder
pages/
  my-new-page/
    index.html

생성되는 주소Generated URL

예를 들어 폴더명이 my-new-page라면 주소는 아래처럼 됩니다.For example, if the folder is my-new-page, the URL will look like this.

  • https://프로젝트명.vercel.app/pages/my-new-page/
  • https://project-name.vercel.app/pages/my-new-page/
FAQ

자주 헷갈리는 부분Common mistakes

대부분의 배포 문제는 폴더 위치가 한 겹 더 들어갔거나, ZIP 파일을 그대로 올렸을 때 생깁니다.Most deployment issues come from uploading the ZIP itself or placing files one folder too deep.

ZIP 파일을 그대로 GitHub에 올려도 되나요?Can I upload the ZIP file directly to GitHub?

아니요. ZIP을 먼저 풀고, 그 안의 vercel.json, README.md, pages/를 올려야 합니다.No. Unzip it first, then upload vercel.json, README.md, and pages/.

GitHub 첫 화면에 pages/sarang-49처럼 보이는데 괜찮나요?GitHub shows pages/sarang-49. Is that okay?

괜찮습니다. GitHub가 폴더 안에 파일이 하나뿐일 때 경로를 합쳐서 보여줄 수 있습니다. 클릭했을 때 안에 index.html이 있으면 정상입니다.Yes. GitHub may display nested folders as a combined path when there is only one file inside. If clicking it shows index.html, it is fine.

새 페이지를 올리면 새 주소가 생기나요?Will a new page get its own URL?

네. pages/new-page/index.html로 올리면 /pages/new-page/ 주소가 생깁니다. 같은 Vercel 프로젝트 안에 새 경로가 추가되는 방식입니다.Yes. If you upload pages/new-page/index.html, it becomes available at /pages/new-page/. It adds a new route inside the same Vercel project.

수정하면 같은 주소가 업데이트되나요?If I edit a page, does the same URL update?

네. 기존 pages/페이지명/index.html을 수정해서 commit하면 Vercel이 다시 배포하고 같은 주소가 업데이트됩니다.Yes. Edit the existing pages/page-name/index.html, commit the change, and Vercel will redeploy the same URL.

Final Check

이렇게 보이면 성공입니다You are done when it looks like this

GitHub 저장소 루트에 vercel.json, README.md, pages/가 있고, Vercel 프로젝트 상태가 Ready라면 배포가 완료된 것입니다. 이후에는 pages/새페이지명/index.html만 추가하면 새 페이지 주소가 생깁니다.If your GitHub repository root contains vercel.json, README.md, and pages/, and your Vercel project status is Ready, the deployment is complete. After that, add pages/new-page-name/index.html to create another page URL.

복사했습니다.Copied.