라핀이 알려주는 HTML 무료 홈페이지 배포 방법 | Netlify로 5분 만에 완성
AI 자동화바이브코딩라핀Netlify무료 홈페이지웹호스팅HTML 배포

라핀이 알려주는 HTML 무료 홈페이지 배포 방법 | Netlify로 5분 만에 완성

▶ 유튜브 원본 영상

HTML 파일을 만들었다면 이제 진짜 홈페이지로 만들 차례입니다. Netlify를 사용하면 드래그 앤 드롭만으로 5분 안에 무료 배포가 완성됩니다. 라핀이 초보자도 실수 없이 따라할 수 있도록 전 과정과 주의사항을 정리했습니다.

왜 호스팅이 필요한가?

HTML 파일을 카카오톡으로 공유하면 수정할 때마다 새 파일을 다시 보내야 하고, 누가 최신 버전을 갖고 있는지도 불분명합니다. 웹 호스팅을 하면 URL 하나로 누구나 항상 최신 버전에 접속할 수 있습니다. 컴퓨터든 스마트폰이든, 인터넷만 되면 어디서든 접속 가능합니다.

Netlify란 무엇인가?

Netlify는 HTML, CSS, JavaScript 같은 정적 웹사이트를 무료로 호스팅해주는 서비스입니다. 라핀이 추천하는 이유 3가지:

  1. 드래그 앤 드롭만으로 배포 완성 — GitHub 몰라도 됩니다
  2. 무료 플랜 제공 — 월 100GB 트래픽, 개인 프로젝트에 충분
  3. HTTPS 자동 적용 — 별도 SSL 설정 없이 보안 사이트

Netlify 가입 및 배포 방법 (5분 완성)

Step 1: 가입

  1. netlify.com 접속
  2. 우측 상단 Sign Up 클릭
  3. Google 계정으로 로그인 (가장 빠름)
  4. 기본 정보 입력 (영어 부담되면 브라우저 번역 기능 활용)

Step 2: 배포 준비

  • 파일명을 반드시 index.html 로 변경
  • index.html을 폴더 안에 넣기
  • (이유: 웹 서버는 폴더에 접속하면 자동으로 index.html을 찾기 때문)

Step 3: 배포

  1. Netlify 첫 페이지 하단의 드롭 영역에 폴더를 드래그 앤 드롭
  2. 자동으로 URL 생성 완료
  3. Sites 메뉴 → Quick setup에서 원하는 이름으로 URL 변경 가능
    • 예: lapin-builder.netlify.app

API 키 보안 주의사항 (필수)

웹에 배포할 때 API 키를 코드에 직접 넣는 하드코딩은 절대 금지입니다.

F12 → Sources 탭을 열면 소스 코드가 그대로 보입니다. API 키가 하드코딩되어 있으면 누구든 쉽게 탈취 가능합니다. API 키를 도용당하면 과금 폭탄을 맞을 수 있습니다.

올바른 방법: 사용자가 직접 입력하는 설정 화면을 만들고, 입력값은 브라우저 로컬 스토리지에 저장합니다. 처음 한 번만 입력하면 저장되며, 기기별로 각각 입력해야 합니다.

업데이트 및 롤백 방법

프로그램 수정 후 업데이트:

  1. 새 사이트 만들기 ❌ (URL이 바뀝니다)
  2. 기존 프로젝트 클릭 → Deploys 메뉴 → 폴더를 다시 드롭 ✅

잘못 배포한 경우 롤백:

  1. Deploys 탭에서 이전 배포 버전 클릭
  2. Publish deploy 버튼 클릭
  3. 팝업에서 Publish 확인
  4. 이전 버전으로 즉시 복구 완료

초보자가 자주 하는 실수 3가지

실수 문제 해결책
파일명 오류 main.html, page.html 등 사용 반드시 index.html 로 저장
폴더 미사용 파일 단독 드롭 index.html을 폴더 안에 넣고 폴더를 드롭
새 사이트 생성 수정할 때마다 새 사이트 만들기 기존 프로젝트에 들어가서 재배포

자주 묻는 질문 (FAQ)

Q. Netlify 무료 플랜으로 실제로 운영 가능한가요?
A. 네. Netlify 무료 플랜은 월 100GB 트래픽을 제공합니다. 개인 프로젝트나 포트폴리오 사이트 수준에서는 무료 플랜으로 충분히 운영 가능합니다.

Q. 파일명이 index.html이 아니면 어떻게 되나요?
A. 웹 서버는 폴더 접속 시 자동으로 index.html을 찾습니다. 다른 이름을 사용하면 404 에러가 발생합니다. 메인 페이지는 반드시 index.html로 저장해야 합니다.

Q. GitHub를 몰라도 Netlify를 쓸 수 있나요?
A. 네. Netlify는 드래그 앤 드롭만으로 배포가 가능합니다. GitHub 연동 없이도 폴더를 끌어다 놓으면 즉시 배포됩니다.

Q. API 키를 코드에 직접 넣어도 되나요?
A. 절대 안 됩니다. F12 개발자 도구를 열면 소스 코드가 그대로 노출됩니다. API 키가 탈취되면 본인 계정에 과금이 발생할 수 있습니다. 항상 사용자 입력 방식으로 구현하세요.

정리

라핀의 HTML 무료 호스팅 핵심 요약:

  • Netlify 가입 → index.html 폴더에 넣기 → 드래그 앤 드롭 → 배포 완료 (실질 1분)
  • 수정 시 새 사이트 아닌 기존 프로젝트에 재배포
  • API 키 하드코딩 금지 — 로컬 스토리지 저장 방식 사용
  • 이전 버전 롤백 가능 (Publish deploy)

AI 자동화와 바이브코딩으로 만든 프로그램을 Netlify로 배포하면 URL 하나로 누구와도 공유할 수 있습니다. 이제 카카오톡에 파일 첨부할 필요 없이 링크 하나로 깔끔하게 자랑하세요.

← 블로그 목록으로