직장인 필수 자산 관리 계산기 웹앱 직접 만들고 무료 배포합니다

 

1장. 배포의 장벽을 무너뜨린 무료 호스팅 삼국지

웹 개발을 막 시작했거나 사이트를 완성한 초보자들에게 서버 구축은 마치 거대한 성벽처럼 느껴집니다. AWS EC2를 띄우고, Nginx를 설정하고, SSL 인증서(Let's Encrypt)를 수동으로 발급받다가 멘탈이 바스러진 경험, 다들 한 번쯤 있으실 겁니다.

하지만 세상은 넓고 개발자들을 구원할 천사 같은 플랫폼들은 이미 많습니다. Git과 연동만 하면 알아서 빌드하고, 전 세계 CDN(콘텐츠 전송 네트워크)에 파일을 뿌려주며, 심지어 HTTPS 보안 인증서까지 무료로 발급해 주는 서비스들 말이죠.

수익형 블로그나 개인 프로젝트를 운영할 때 반드시 알아야 할 무료 배포 플랫폼 3대장의 특장점을 먼저 비교해 보겠습니다.

플랫폼명	난이도	무료 제공 리소스	추천 용도	핵심 장점
Netlify	최하 ⭐	무제한 정적 사이트, 월 100GB 대역폭	정적 웹사이트, 블로그 위젯, 랜딩 페이지	드래그 앤 드롭 배포 지원, 직관적인 UI
GitHub Pages	하 ⭐⭐	저장소당 1GB, 월 100GB 대역폭	오픈소스 프로젝트, 개인 포트폴리오	GitHub 연동성 최고, 개발자 표준
Vercel	하 ⭐⭐	개인 프로젝트 무제한, 월 100GB 대역폭	React, Next.js, Vite 기반 동적 웹 앱	프론트엔드 최적화, 압도적인 속도

2장. 클릭 몇 번이면 끝! 3분 만에 사이트 띄우기 실전 가이드

이 중에서 블로그 포스팅이나 간단한 웹 위젯(계산기, 시뮬레이터, 오디오 생성기 등)을 배포할 때 가장 직관적이고 쉬운 Netlify와 GitHub Pages를 활용하는 방법을 알아봅니다.

방법 A: 코드를 통째로 던지기만 하세요 — Netlify (가장 쉬움)

깃허브(GitHub) 사용법을 몰라도 상관없습니다. HTML, CSS, JS 파일이 담긴 폴더를 웹 브라우저 창에 드래그해서 올리는 것만으로 배포가 끝나는 마법 같은 곳입니다.

1. Netlify 공식 홈페이지에 접속해 회원가입을 합니다. (구글 계정으로 1초 가입 가능)

2. 
   

3. 로그인 후 대시보드 상단이나 하단에 있는 "Add new site" 버튼을 누릅니다.

4. 
   

5. 그 아래 "Deploy manually" 메뉴를 선택합니다.

1. 내 컴퓨터에 있는 웹사이트 소스 파일 폴더(index.html이 반드시 최상단에 있어야 함)를 마우스로 끌어서 Drag & drop your site folder here 영역에 쏙 집어넣습니다.

1. 단 3초 만에 업로드가 끝나고, [https://random-name-123456.netlify.app](https://random-name-123456.netlify.app) 형태의 임시 주소가 즉시 발급됩니다.

1. 꿀팁: 대시보드 설정(Site settings > Change site name)에 들어가면 내가 원하는 예쁜 도메인 주소로 언제든 바꿀 수 있습니다.

방법 B: 개발자의 정석, 코드를 영구 보존하는 — GitHub Pages

소스 코드의 버전 관리와 배포를 동시에 잡고 싶다면 GitHub Pages가 정답입니다.

1. GitHub에 로그인 후 새로운 Repository(저장소)를 생성합니다. (Public으로 설정)

2. index.html 파일을 포함한 웹 소스 코드를 해당 레포지토리에 업로드합니다.

3. 레포지토리 상단 메뉴에서 Settings로 이동합니다.

4. 왼쪽 사이드바에서 Pages 메뉴를 클릭합니다.

5. Build and deployment 항목의 Branch를 main (또는 master)로 설정하고 Save를 누릅니다.

6. 1~2분 뒤 페이지를 새로고침하면 https://[내아이디].github.io/[저장소이름]/ 형태의 무료 라이브 주소가 생성됩니다.

같이 보면 좋은도서 

"링크 구매시 소정의 수수료를 받을수 있음"