배포하기
1. 배포가 뭔가요
지금까지 만든 .html 파일은 내 컴퓨터 안에 있습니다. 더블 클릭하면 나는 볼 수 있지만, 그건 어디까지나 내 컴퓨터에서뿐입니다. 다른 사람에게 보여주려면 파일을 직접 보내야 하고, 받는 사람도 파일을 내려받아 열어야 합니다.
배포는 이 파일을 인터넷에 올려서, 주소(URL)만 알면 누구나 브라우저로 접속할 수 있게 만드는 일입니다. 카카오톡으로 파일을 보내는 대신 https://... 주소 하나를 보내면, 상대는 그 주소를 눌러 바로 봅니다. 포트폴리오, 이력서 페이지, 제품 소개처럼 여러 사람에게 보여줄 결과물이라면 배포가 어울립니다.
모든 결과물에 배포가 필요한 건 아닙니다. 보고서나 작은 도구처럼 한 사람에게 건네면 끝인 경우는 파일 하나로 보내는 편이 낫습니다. 같은 화면을 여러 사람이 봐야 할 때 배포를 떠올리면 됩니다.
2. 가장 간단한 무료 배포, 깃허브 페이지스
HTML 파일을 인터넷에 올리는 방법은 여럿이지만, 무료이면서 가장 간단한 축에 드는 것이 깃허브 페이지스(GitHub Pages)입니다. 깃허브라는 곳에 내 .html 파일을 올려두면, 깃허브가 그 파일을 웹사이트로 띄워줍니다.
여기서는 큰 흐름만 짚습니다. 깃허브 가입과 사용법을 처음부터 익히고 싶다면 '딱 필요한 만큼: 바이브 코딩을 위한 깃허브' 책을 추천합니다. 시리즈의 실습과 요약은 아래에서 제공합니다.
- 딱 필요한 만큼 시리즈: https://just.weniv.co.kr/
2.1 깃허브 가입하기
https://github.com/에 접속해 Sign up 버튼을 눌러 회원가입을 합니다. 이메일 인증까지 마쳐야 다음 단계로 넘어갈 수 있습니다.
가입할 때 정하는 사용자 이름(username)은 나중에 모든 깃허브 주소에 들어갑니다. 배포 주소도 내이름.github.io 형태가 됩니다. 회사명, 본명, 닉네임 중 무엇이든 괜찮지만, 포트폴리오 주소로 쓰게 될 가능성이 크니 너무 짧거나 장난스러운 이름은 피하는 편이 좋습니다.
2.2 레포지토리 만들기
레포지토리는 하나의 프로젝트를 담는 폴더라고 생각하면 됩니다. 만들려는 웹 페이지 하나에 레포지토리 하나입니다.
1 - 깃허브 우측 상단의 + 버튼을 누르고 New repository를 클릭합니다. 처음 가입한 경우라면 바로 레포지토리를 만들라는 화면이 보이기도 합니다.
2 - 레포지토리 이름을 정합니다. 한글은 피하고 영문 소문자와 하이픈으로 짓는 편이 안전합니다. my-jeju, vibe-page 같은 형식입니다.
3 - Public을 고릅니다.
4 - Add a README file을 On으로 바꿉니다. 켜지 않으면 빈 레포지토리가 만들어져 절차가 한 단계 더 늘어납니다.
5 - 하단의 Create repository 버튼을 누르면 레포지토리가 생성됩니다.
생성이 끝나면 아래와 같은 화면으로 이동합니다.
2.3 파일 이름은 index.html로
대문 역할을 하는 파일은 index.html이라는 이름으로 두기로 약속되어 있습니다. AI가 만들어준 파일이 다른 이름이라면 index.html로 바꿔주세요. 처음 만들 때부터 이렇게 부탁해도 됩니다.
간단한 제주 소개 웹 페이지를 HTML 한 파일로 만들어줘.
깃허브 페이지스로 배포할 거라서 파일 이름은 index.html로 해줘.
2.4 깃허브에 파일 올리기
방금 만든 레포지토리 화면에서 + 버튼을 눌러 Upload files를 선택합니다.
파일을 드래그 앤 드롭으로 올리고, 이름이 index.html인지 한 번 더 확인한 다음 Commit changes 버튼을 누릅니다.
제대로 올라갔다면 레포지토리에 index.html 파일이 보입니다.
2.5 배포 켜기
업로드만으로는 아직 파일이 저장된 것일 뿐입니다. 인터넷에서 접속할 수 있게 배포를 켜줍니다.
1 - 레포지토리 화면 우측 상단의 Settings 클릭
2 - 왼쪽 메뉴에서 Pages 클릭
3 - Branch 항목에서 main을 고르고 Save
4 - 보통 3분, 길게는 20분 안에 배포가 끝납니다. 페이지를 새로고침하며 주소가 뜨는지 확인합니다.
5 - 주소는 https://내이름.github.io/내레포명/ 형태로 고정됩니다. 이 주소를 그대로 공유하면 됩니다. 나중에 따로 주소를 구매해서 바꿀 수도 있습니다.
3. 언제 배포가 어울리나
깃허브 페이지스가 어울릴 때
- 이력서, 포트폴리오처럼 한 번 만들고 거의 안 바꾸는 페이지
- HTML, CSS, JavaScript만으로 된 작은 사이트
잘 안 어울릴 때
- 로그인이나 데이터베이스 조회처럼 서버에서 처리해야 하는 기능이 있는 앱
깃허브 페이지스는 우리가 올린 .html, .css, .js 파일을 그대로 보여줄 뿐, 뒤에서 돌아가는 서버가 없습니다. 그래서 화면을 그리는 정적인 사이트에는 잘 맞지만, 회원가입이나 결제처럼 서버가 필요한 기능은 다른 도구가 있어야 합니다. 이건 이 책의 범위를 넘어서는 이야기이니, 지금은 만든 화면을 인터넷에 띄우는 것까지만 챙기면 충분합니다.
4. 실습
레포지토리를 만들고 index.html을 올려 배포까지, 직접 한 번 해보세요. 주소가 떴다면 휴대폰으로 그 주소에 접속해보세요. 내 컴퓨터가 아닌 곳에서도 똑같이 열린다는 걸 확인할 수 있습니다.
이제 HTML을 만들고, 손보고, 인터넷에 올리는 한 바퀴를 모두 돌아봤습니다. 이어지는 두 장에서는 그 결과물을 더 보기 좋게 만드는 법, 이미지 파일 없이 코드로 직접 그림을 그리는 법과 검증된 도구를 얹어 수준을 끌어올리는 법을 차례로 살펴봅니다.