24강. 배포와 다음 단계 | HTML·CSS 웹 입문 24강 · 입문 — 누구나패스

🎯 학습 목표

이 강을 마치면 여러분은 지금까지 내 컴퓨터 안에만 있던 웹 페이지를 인터넷에 공개해, 누구나 주소만 알면 볼 수 있도록 만들 수 있게 됩니다. 아무리 멋진 페이지를 만들어도 내 컴퓨터에만 있으면 나 혼자만 볼 수 있습니다. 이번 강에서는 그 페이지를 세상에 내보내는 배포를 배웁니다. 그리고 이 강좌를 마무리하며, 앞으로 무엇을 더 배우면 좋을지 학습 지도를 함께 그려 보겠습니다.

구체적으로는 세 가지를 다룹니다. 첫째, 배포가 무엇인지 이해합니다. 둘째, 두 가지 무료 배포 방법을 단계별로 익힙니다. 셋째, 이 강좌 이후의 다음 학습 방향을 안내합니다.

🌍 배포란 무엇인가

이 섹션에서는 배포의 개념부터 살펴보겠습니다.

배포(deploy)란, 내가 만든 웹 페이지 파일을 인터넷에 연결된 서버에 올려, 전 세계 누구나 주소(URL)로 접속할 수 있게 하는 것을 말합니다. 지금까지 우리는 index.html 파일을 더블클릭해 내 컴퓨터에서만 열어 봤습니다. 이 파일은 내 컴퓨터 안에 있으니, 다른 사람은 볼 수 없습니다.

웹 페이지를 남에게 보여 주려면, 파일을 항상 켜져 있는 컴퓨터(서버)에 올려 두어야 합니다. 그래야 누군가 주소를 입력했을 때 그 서버가 파일을 전송해 줍니다. 이렇게 파일을 올려 두는 서비스를 호스팅(hosting)이라 합니다. 예전에는 서버를 직접 마련해야 해서 복잡하고 비용도 들었지만, 지금은 무료로, 몇 분 만에 배포할 수 있는 훌륭한 서비스가 많습니다.

특히 우리가 만든 것처럼 <script>로 서버 프로그램을 돌리지 않는, HTML·CSS·이미지 파일로만 이루어진 페이지를 정적 사이트(static site)라 합니다. 정적 사이트는 배포가 아주 간단해서, 파일만 올리면 끝입니다. 이제 두 가지 대표적인 무료 방법을 배워 봅시다.

🚀 방법 1 — Netlify Drop으로 즉시 배포

이 섹션에서는 가장 간단한 배포 방법인 Netlify Drop을 살펴보겠습니다.

Netlify는 정적 사이트를 무료로 호스팅해 주는 대표적인 서비스입니다. 그중 Netlify Drop은 폴더를 끌어다 놓기만 하면 배포되는, 놀랍도록 간단한 기능입니다. 순서는 다음과 같습니다.

웹 브라우저로 app.netlify.com/drop에 접속합니다.
내 웹 페이지 파일들이 담긴 폴더를 화면의 안내 영역으로 끌어다 놓습니다(드래그 앤 드롭).
잠시 기다리면 https://무작위이름.netlify.app 같은 주소가 즉시 발급됩니다.

정말 이게 전부입니다. 발급된 주소를 친구에게 보내면, 그 친구가 자기 휴대폰으로 내 페이지를 볼 수 있습니다. 다만 한 가지 유의할 점이 있습니다. 로그인(회원가입) 없이 배포하면 편리하지만, 그렇게 올린 사이트는 24시간 뒤 자동으로 삭제됩니다. 페이지를 계속 유지하고 싶다면 무료 계정을 만들어 로그인한 뒤 배포하면 됩니다. 처음 배포를 경험하기에는 이만큼 쉬운 방법이 없습니다.

🐙 방법 2 — GitHub Pages로 배포

이 섹션에서는 개발자들이 널리 쓰는 GitHub Pages를 살펴보겠습니다.

GitHub은 전 세계 개발자들이 코드를 저장·공유하는 곳입니다. 그 GitHub이 제공하는 무료 호스팅 기능이 GitHub Pages입니다. Netlify Drop보다 단계가 조금 더 있지만, 코드를 저장소(repository)에 보관하면서 배포까지 할 수 있어 개발자들이 즐겨 씁니다. 큰 흐름은 다음과 같습니다.

GitHub에 계정을 만들고, 새 저장소(repository)를 만듭니다.
내 웹 페이지 파일들(index.html 등)을 그 저장소에 올립니다(업로드).
저장소의 Settings(설정) 탭으로 가서 Pages 항목을 찾습니다.
Source(소스)에서 배포할 브랜치(보통 main)를 선택하고 저장합니다.

이렇게 하면 잠시 후 https://사용자이름.github.io/저장소이름/ 형태의 주소로 페이지가 공개됩니다. 반영되기까지 몇 분 정도 걸릴 수 있으니 조금 기다리면 됩니다. GitHub Pages의 큰 장점은, 저장소의 파일을 고쳐서 다시 올리면 사이트도 자동으로 갱신된다는 것입니다. 코드 관리와 배포가 한곳에서 이루어지는 셈입니다. 참고로 index.html이라는 이름이 웹의 대문(첫 화면) 역할을 하므로, 첫 페이지 파일 이름은 index.html로 두는 것이 좋습니다.

🔗 도메인 — 나만의 주소 갖기

이 섹션에서는 배포한 사이트에 나만의 주소를 붙이는 방법을 간단히 살펴보겠습니다.

지금까지 방법으로 배포하면 무작위이름.netlify.app이나 사용자이름.github.io처럼 서비스 이름이 섞인 주소가 주어집니다. 개인 연습용으로는 충분하지만, 정식으로 운영하려면 my-site.com 같은 나만의 도메인을 갖고 싶어집니다.

도메인(domain)이란 naver.com, google.com처럼 웹사이트의 고유한 이름 주소입니다. 도메인은 도메인 등록 업체에서 1년 단위로 구입(임대)합니다. 흔한 .com 주소는 보통 연 1~2만 원 안팎이며, 이름의 인기도에 따라 가격이 다릅니다. 구입한 도메인은 Netlify나 GitHub Pages의 설정에서 연결(설정)할 수 있습니다. 다만 이 과정은 입문 단계에서 꼭 필요한 것은 아니니, '나중에 정식 사이트를 만들 때 이런 것이 있다'는 정도로만 알아 두면 충분합니다.

🧭 다음 단계 — 무엇을 더 배울까

이 섹션에서는 이 강좌 이후의 학습 방향을 안내하겠습니다.

여러분은 이제 HTML로 뼈대를 세우고, CSS로 꾸미고, 반응형 페이지를 만들어 인터넷에 배포까지 할 수 있습니다. 웹의 기초를 온전히 갖춘 것입니다. 여기서 더 나아가려면 다음 세 방향을 권합니다.

첫째, 자바스크립트(JavaScript)입니다. HTML·CSS가 페이지의 '모습'을 담당한다면, 자바스크립트는 '동작'을 담당합니다. 버튼을 눌렀을 때 반응하고, 입력을 검사하고, 데이터를 불러오는 등 움직이는 기능은 자바스크립트로 만듭니다. 22강에서 언급한 '햄버거 메뉴'처럼 상호작용이 필요한 것이 모두 여기에 해당합니다. 웹을 계속 배운다면 다음 순서는 자바스크립트가 자연스럽습니다.

둘째, 라이브러리와 프레임워크입니다. 규모가 큰 웹사이트를 더 효율적으로 만들도록 돕는 도구들로, React·Vue 같은 것이 대표적입니다. 다만 이들은 자바스크립트 위에서 동작하므로, 자바스크립트를 먼저 익힌 뒤 배우는 것이 순서입니다.

셋째, 꾸준한 실전입니다. 가장 중요한 것은 직접 무언가를 만들어 보는 것입니다. 자기소개 페이지, 좋아하는 것을 소개하는 사이트 등 작은 프로젝트를 만들고 배포하는 경험이, 어떤 강의보다 실력을 키워 줍니다.

📝 강좌를 마치며

드디어 HTML·CSS 웹 입문 24강의 마지막에 이르렀습니다. 우리가 함께 걸어온 길을 돌아봅시다.

HTML — 태그로 문서의 뼈대를 세우고, 목록·링크·이미지·표·폼·시맨틱 태그로 구조를 만들었습니다.
CSS — 선택자로 요소를 골라 색·글꼴·박스 모델로 꾸미고, display·position으로 배치했습니다.
레이아웃 — Flexbox와 Grid로 유연한 배치를, 반응형으로 모든 화면 대응을, 애니메이션으로 생동감을 더했습니다.
실전과 배포 — 헤더와 랜딩 페이지를 직접 만들고, 인터넷에 공개하는 법까지 익혔습니다.

처음 웹이 무엇인지도 몰랐던 자리에서 시작해, 이제 스스로 웹 페이지를 만들고 세상에 공개할 수 있게 되었습니다. 정말 큰 발걸음입니다. 여기서 멈추지 말고, 오늘 배운 배포 방법으로 여러분의 첫 페이지를 꼭 인터넷에 올려 보세요. 그 한 번의 경험이 다음 배움으로 나아가는 가장 큰 힘이 될 것입니다. 그동안 함께해 주셔서 감사합니다. 여러분의 웹 여정을 응원합니다!

배포와 다음 단계