🧑🏫
멘토 한마디
오늘도 한 칸 올라가 볼까요? 천천히, 그러나 멈추지 않고 — 그게 진짜 실력이 됩니다. 💪
드디어 내가 만든 페이지를 인터넷에 올릴 차례입니다. '배포(deploy)'란 내 컴퓨터에만 있던 파일을 누구나 주소로 접속할 수 있게 인터넷에 올리는 일입니다. 코딩 경험이 없어도 끌어다 놓기만으로 할 수 있는 두 가지 무료 방법을 소개합니다.
배포가 무엇인가
내 컴퓨터에서 index.html을 열면 나만 볼 수 있습니다. 배포를 하면 그 파일이 인터넷의 서버에 올라가고, https://...로 시작하는 주소가 생겨 다른 사람도 볼 수 있게 됩니다.
핵심 보통 사이트의 첫 화면 파일 이름은
index.html입니다. 이 이름이어야 주소로 접속했을 때 자동으로 열립니다.방법 1: Netlify Drop
가장 쉬운 방법입니다. 파일을 화면에 끌어다 놓기만 하면 됩니다.
- 사이트의 모든 파일을 한 폴더에 모읍니다. (첫 화면은 index.html)
- Netlify Drop 페이지를 엽니다.
- 그 폴더를 브라우저 화면 위로 끌어다 놓습니다.
- 잠시 뒤 접속 가능한 주소가 만들어집니다.
방법 2: Cloudflare Pages
Cloudflare Pages도 무료로 정적 사이트를 올릴 수 있는 서비스입니다. 폴더를 업로드하거나, 코드 저장소와 연결해 자동으로 배포할 수 있습니다.
| 방법 | 특징 |
|---|---|
| Netlify Drop | 끌어다 놓기, 가장 빠르게 시작 |
| Cloudflare Pages | 폴더 업로드 또는 저장소 연결 배포 |
배포 후 확인
주소가 생기면 휴대폰 등 다른 기기로 그 주소에 접속해 잘 보이는지 확인합니다. 내 컴퓨터가 아닌 다른 기기에서도 보인다면 진짜로 인터넷에 올라간 것입니다.
주의 올린 파일은 누구나 주소로 볼 수 있습니다. 비밀번호나 개인정보 같은 민감한 내용을 페이지에 넣지 마세요.
처음에는 빈 페이지 하나라도 직접 올려 주소가 생기는 경험을 해 보는 것이 중요합니다. 이 과정을 한 번 겪으면 '내 사이트'를 만드는 일이 훨씬 가깝게 느껴집니다.
AD
이해도 퀴즈 (10문항)
정답 6개 이상 → +140 XP배운 내용을 정확히 점검해 보세요. 10문항 중 6문항 이상 맞히면 챕터가 완료되고 경험치(XP)가 적립됩니다. 난이도는 문항마다 하·중·상으로 섞여 있어요.
하 쉬움중 보통상 어려움
하
Q1.'배포(deploy)'의 의미로 가장 알맞은 것은?
하
Q2.사이트의 첫 화면 파일 이름으로 권장되는 것은?
중
Q3.파일 이름을 index.html로 두어야 하는 이유는?
중
Q4.Netlify Drop으로 배포하는 가장 큰 특징은?
중
Q5.Cloudflare Pages의 배포 방식으로 소개된 것은?
중
Q6.배포가 잘 됐는지 확인하는 좋은 방법은?
상
Q7.배포 전과 후의 차이를 옳게 설명한 것은?
중
Q8.배포된 페이지에 대한 올바른 태도는?
하
Q9.무료로 정적 사이트를 올릴 수 있는 서비스로 소개된 두 가지는?
중
Q10.첫 배포에서 중요하다고 강조된 경험은?
← 이전 챕터 · CH6
브라우저 개발자도구 첫걸음
F12 개발자도구의 Elements·Console·Network 패널로 페이지를 들여다보고 문제를 찾는 법을 익힙니다.
트랙 완주 🏁
이 트랙의 마지막 챕터예요!
수고했어요. 다른 트랙으로 실력을 더 키워볼까요?
수련 목록으로 →
📚 함께 보면 좋은 정보글
AD