HTML 파일을 인터넷에 올리는 방법: 무료·저가 호스팅 4곳 비교
Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기
더블클릭하면 잘 열리는 index.html 파일이 있습니다. 그런데 주소창을 보면 file:///C:/Users/...로 시작합니다. 이 주소는 내 컴퓨터에서만 통합니다. 거래처에 링크를 보내거나 전단지에 QR 코드로 넣으려면 파일을 웹 서버에 올려 진짜 주소를 받아야 합니다. 무료이거나 저렴한 방법이 여럿 있는데, 차이는 대개 세 가지입니다. 어떤 계정이 필요한지, 나중에 내용을 어떻게 바꾸는지, 어떤 제한이 있는지입니다.
올리기 전에 알아 둘 것: 정적 페이지
아래에 소개하는 곳은 모두 정적(static) 파일을 올리는 방식입니다. 서버는 HTML, CSS, 이미지, 자바스크립트를 받은 그대로 내보낼 뿐이고 서버 쪽에서 실행되는 프로그램은 없습니다. 소개 페이지나 포트폴리오, 행사 안내, 메뉴판에는 이것으로 충분합니다.
문제는 문의 양식입니다. 페이지에 <form>과 "보내기" 버튼이 있어도 입력한 내용을 받아 줄 곳이 없습니다. 누르면 페이지가 새로 고쳐지거나 오류가 납니다. 이때는 Formspree, Google 설문지, Tally 같은 별도 양식 서비스를 써야 합니다. 서비스가 알려 주는 주소를 form의 action에 넣거나, 그 서비스의 양식을 통째로 붙여 넣는 방식입니다. 로그인, 결제, 게시판도 마찬가지입니다.
고치는 일과 올리는 일은 따로입니다
내용 수정은 손에 익은 도구로 끝내 두십시오. 메모장이나 VS Code로 코드를 직접 고쳐도 되고, Finipage 같은 화면 편집기로 브라우저에서 파일을 열어 글자와 이미지를 클릭해 고친 뒤 내 컴퓨터에 저장해도 됩니다. Finipage는 편집만 하는 도구라 인터넷에 올려 주지는 않습니다. 저장한 파일을 아래 호스팅 중 한 곳에 올리면 됩니다.
어떤 편집기를 썼는지보다 무엇을 올리는지가 더 중요합니다. 페이지 한 장도 실제로는 이렇게 작은 폴더인 경우가 많습니다.
bakery-site/
index.html
style.css
images/
main.jpg
logo.png
index.html이 images/main.jpg를 부르고 있다면, 서버에도 images 폴더가 같은 자리에 있어야 합니다. HTML 파일 하나만 올리지 말고 bakery-site 폴더를 통째로 올리십시오. 첫 화면 파일 이름은 index.html로 두어야 주소만 입력해도 열립니다. 이미지 경로에 C:\Users\... 같은 내 하드디스크 경로가 섞여 있으면 올리는 순간 그림이 사라집니다. 찾고 고치는 방법은 HTML 파일에서 이미지가 안 보일 때에 정리해 두었습니다.
GitHub Pages
계정: 무료 GitHub 계정이 필요합니다. GitHub Free에서는 저장소를 공개(public)로 둬야 하므로 누구나 소스 파일을 볼 수 있습니다. 유료 요금제는 비공개 저장소로도 게시할 수 있지만, 사이트 자체는 어느 쪽이든 공개됩니다.
수정 방법: 저장소의 파일을 바꾸면 잠시 뒤 사이트가 다시 만들어집니다. 웹 화면의 "Add file" 로 파일을 올릴 수도 있지만, 결국 Git 사용법을 조금은 익히게 됩니다. 진입 비용은 사실상 이것입니다.
제한: GitHub 문서 기준으로 게시된 사이트는 1GB를 넘을 수 없고, 월 100GB의 전송량과 시간당 10회의 빌드에 느슨한(soft) 한도가 있습니다. 온라인 사업이나 쇼핑몰을 운영하는 무료 호스팅으로 쓰는 것도 허용되지 않습니다. 수치는 바뀔 수 있으니 "GitHub Pages limits" 문서를 확인하십시오. 주소는 아이디.github.io/저장소이름 형태입니다.
Netlify Drop
계정: 처음에는 없어도 됩니다. Drop 페이지에 폴더를 끌어다 놓으면 몇 초 만에 임의의 주소가 생깁니다. 다만 가입하거나 로그인해 프로젝트를 내 것으로 등록(claim)하기 전까지는 임시 비밀번호가 걸린 임시 사이트로 취급되므로, 실제로는 무료 계정을 만들게 됩니다.
수정 방법: 프로젝트 대시보드의 "Production deploys" 아래 끌어다 놓는 칸에 고친 폴더를 다시 놓습니다. 여기서도 파일 하나가 아니라 폴더째 놓아야 이미지가 빠지지 않습니다.
제한: 무료 요금제에 월 사용량 한도가 있는데, 계산 방식이 몇 차례 바뀌었습니다. 예전 블로그 글보다 Netlify 가격 페이지를 직접 확인하는 편이 정확합니다. 주소는 이름.netlify.app이고 앞부분은 바꿀 수 있습니다.
Cloudflare Pages
계정: 무료 Cloudflare 계정이 필요합니다.
수정 방법: Git 저장소를 연결하거나, 직접 업로드(direct upload) 방식으로 바꿀 때마다 폴더나 그 폴더를 묶은 zip 파일을 올립니다. 직접 업로드로 만든 프로젝트는 나중에 Git 연결로 바꿀 수 없으니 처음에 정해 두십시오.
제한: 페이지 한두 장에는 넉넉합니다. 관리 화면에서 끌어다 놓는 방식은 파일 1,000개, 파일 하나당 25MiB 까지라서 큰 동영상이나 이미지가 아주 많을 때만 신경 쓰면 됩니다. 주소는 프로젝트이름.pages.dev입니다. 관리 화면에 다른 상품 메뉴가 워낙 많아 처음에는 길을 찾기 어렵습니다.
웹호스팅 + FTP
가장 오래된 방식이고 국내에서는 지금도 카페24, 가비아, 닷홈 같은 업체를 많이 씁니다. 월 이용료를 내고 저장 공간을 빌리며 FTP 접속 정보를 받습니다. 닷홈에는 디스크 500MB, 월 전송량 15GB의 무료 호스팅도 있지만, 닷홈 기본 주소만 쓸 수 있고(내 도메인 연결 불가) SSL도 없으며 6개월마다 연장 신청을 해야 합니다.
계정: 호스팅 회원 가입이 필요하고 보통 본인 인증을, 유료 상품이면 결제 수단도 등록합니다.
수정 방법: 파일질라(FileZilla) 같은 FTP 프로그램에 호스팅 관리 화면에 나온 서버 주소, 아이디, 비밀번호를 넣고 접속한 뒤 폴더 안의 파일을 웹 폴더에 끌어다 놓습니다. 웹 폴더 이름은 www나 public_html 인 경우가 많은데 업체 안내서를 확인하십시오. 같은 이름으로 덮어쓰면 페이지가 바뀝니다.
제한: 상품별 디스크 용량과 하루 전송량으로 정해집니다. HTTPS(SSL)는 상품마다 다릅니다. 인증서는 무료여도 설치비가 따로 드는 경우, 인증서 자체가 유료인 경우가 있고, 닷홈은 유료 부가 상품을 써야 SSL을 설치할 수 있습니다. 주소를 인쇄하기 전에 확인하십시오. 대신 대개 PHP와 데이터베이스가 함께 제공되어 문의 양식을 같은 서버에서 처리할 수 있습니다.
어느 쪽을 고를까
| 방법 | 필요한 계정 | 수정 방법 | 주의할 점 |
|---|---|---|---|
| GitHub Pages | GitHub(무료) | 저장소에 올리기 | 저장소 공개, Git 학습 |
| Netlify Drop | 유지하려면 Netlify(무료) | 폴더 다시 끌어다 놓기 | 등록 안 하면 삭제 |
| Cloudflare Pages | Cloudflare(무료) | Git 또는 폴더 업로드 | 복잡한 관리 화면 |
| 웹호스팅 + FTP | 호스팅(대개 유료) | FTP로 덮어쓰기 | 월 이용료, SSL 설정 |
Git이나 FTP 없이 오늘 당장 한 장짜리 페이지를 올리려면 Netlify Drop이나 Cloudflare Pages의 직접 업로드처럼 끌어다 놓는 방식이 가장 빠릅니다. 자주 고칠 예정이고 Git을 조금 배울 생각이 있다면 GitHub Pages가 변경 이력을 전부 남겨 줍니다. 문의 양식을 내 서버에서 직접 처리해야 한다면 여전히 웹호스팅이 가장 간단합니다.
주소가 생겼다면 내 도메인 연결하기로 회사 주소를 붙여 보십시오. 링크를 돌리기 전에는 휴대폰에서 어떻게 보이는지도 확인해 두면 좋습니다.
내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.