서버비 0원? 드래그 한 번으로 평생 무료 웹사이트 만들기 (Netlify)

"서버비 0원? 드래그 한 번이면 당신도 웹사이트 오너!"

드디어 마지막 단계다. 지난 여정을 복기해 보자. 우리는 1편에서 클로드와 기획을 마쳤고, 2편에서는 '아티팩트' 기능을 통해 단 1분 만에 디자인과 코딩을 완성했다. 하지만 아직 이 멋진 사이트는 당신의 컴퓨터 화면 속에만 갇혀 있다. 친구에게 자랑하려 해도 보여줄 링크가 없다.

오늘은 복잡한 서버 구축이나 도메인 구매 없이, 돈 한 푼 들이지 않고 10초 만에 내 사이트를 전 세계에 배포(Hosting)하는 방법을 소개한다. 준비물은 2편에서 만든 '코드' 딱 하나다.

1. 준비 작업: 코드를 파일로 저장하기

클로드 화면 우측에 있는 미리보기(Preview) 창이나 코드 창을 보자. 코드를 내 컴퓨터로 가져오는 방법은 매우 간단하다.

• 방법 A (다운로드 버튼): 아티팩트 창 우측 하단의 'Download' 아이콘을 클릭하면 파일로 바로 저장된다.
• 방법 B (복사 붙여넣기): 'Copy Code'를 누른 뒤, 메모장을 열어 붙여 넣고 저장한다.

Tech Vibe의 필수 Tip: 파일명은 무조건 'index'
파일을 저장할 때 이름은 반드시 index.html로 해야 한다. 웹 서버는 index라는 이름을 가진 파일을 '대문(홈페이지)'으로 인식하기 때문이다. 다른 이름으로 저장하면 사이트가 열리지 않는다.

2. 배포의 신세계: Netlify(넷리파이)

우리가 사용할 도구는 개발자들 사이에서 '배포의 신'이라 불리는 Netlify다. 개인 포트폴리오 수준의 트래픽은 무료 요금제로 충분히 커버되며, 사용법이 기가 막히게 쉽다.

Step 1. 회원가입 및 로그인
Netlify 홈페이지에 접속해 'Sign up'을 누른다. 구글 아이디 이외에도 깃허브(GitHub)나 이메일로 간편하게 가입할 수 있다.

Step 2. 드래그 앤 드롭 (Drag & Drop)
로그인 후 메인 화면(Team Overview) 하단을 보면 "Drag and drop your site output folder here"라는 점선 박스가 보인다. 여기에 아까 저장한 index.html 파일이 들어있는 폴더를 마우스로 끌어서 툭 던져 넣으면 된다. (파일 하나만 드래그하면 안 먹는 경우가 있으니, index.html을 폴더 안에 넣고 폴더째 드래그하는 편이 안전하다.)

Step 3. 배포 완료 및 주소 확인
파일을 놓자마자 로딩 바가 돌더니, 3초 만에 초록색 'Published' 글자가 뜬다. 그리고 그 위에 https://stellar-zuccutto-abc2de.netlify.app 같은 무작위 주소가 생성된다. 클릭해 보자. 방금 이전 편에서 클로드와 함께 만들었던 화면이 인터넷에서 열린다. 이제 이 주소를 카톡으로 친구에게 보내보자. 스마트폰에서도 완벽하게 접속될 것이다.

3. 조금 더 프로처럼 보이기 (주소 변경)

Netlify가 지어준 이름(fluffy-unicorn...)이 마음에 들지 않는다면? 무료로 바꿀 수 있다.

1. [Site configuration] 버튼 클릭
2. [Change site name] 메뉴 선택
3. 원하는 영문 이름 입력 (예: my-ai-portfolio)

이렇게 하면 주소가 https://my-ai-portfolio.netlify.app으로 깔끔하게 변경된다. 이 정도면 명함에 넣어도 손색이 없다.

4. 내가 실제로 Netlify에 올려본 것들

이 시리즈를 쓰기 전 실험 삼아 몇 가지 프로젝트를 Netlify에 올려봤다. 참고삼아 공유한다.

• AI 스타트업 제품 소개 랜딩 — 회사 내부 미팅에서 "이런 컨셉의 제품 랜딩이 어떨까요?"를 설명하기 위해, 클로드로 하루 만에 시안 랜딩 페이지를 만들고 Netlify에 올려 링크를 공유했다. PPT 대신 실제 작동하는 웹페이지를 보여주니 의사결정 속도가 눈에 띄게 빨라졌다.
• 개인 포트폴리오 — 블로그 글과 발표 자료를 모아둔 원페이지 포트폴리오. 도메인만 바꿔서 배포 30초 만에 완성.
• 아이와 함께 만든 1쪽짜리 사이트 — 7세 아이가 "아빠, 나도 인터넷에 있는 거 만들고 싶어"라고 해서 아이가 그린 그림을 html에 넣고 함께 드래그앤드롭으로 배포했다. 아이는 자기 이름이 들어간 주소를 보자마자 눈을 반짝였다. 이 장면 하나만으로 이 시리즈를 쓴 보람이 있었다.

5. 솔직한 한계: "평생 무료"는 전제 조건이 있다

제목에 "평생 무료"라고 썼지만, 좀 더 정확히 쓰자면 "개인 프로젝트 수준에서는 사실상 무료"다. Netlify 무료 요금제의 실제 한도는 다음과 같다 (2026년 4월 기준).

• 월 대역폭 100GB — 개인 포트폴리오나 소규모 랜딩 페이지 기준 수천~수만 명 접속까지 충분하다. 바이럴로 유입이 터지면 초과할 수 있다.
• 월 빌드 시간 300분 — 정적 HTML만 드래그앤드롭하는 방식에서는 거의 소진되지 않는다. 자동 배포 파이프라인을 구성할 때 주의.
• 상업적 이용 제약 — 무료 요금제에서도 상업적 사용이 허용되지만, 팀 협업 기능·비밀번호 보호·폼 제출량 등은 유료 요금제에서 열린다.
• 커스텀 도메인(.com) 연결은 가능하지만 도메인 자체는 별도 구매 필요 — 연간 약 1~2만 원.

요약하면, "내 포트폴리오·소규모 프로젝트·가족용 사이트"까지는 평생 0원이 가능하고, "월 수십만 방문자 이상의 상업 사이트"가 되면 유료 전환을 고려해야 한다. 이 정도 한계는 납득 가능한 선이다.

6. 배포 다음에 해야 할 세 가지

1. 내용 업데이트 방법 익히기 — 같은 프로젝트의 Netlify 화면에서 index.html을 다시 드래그하면 자동으로 업데이트된다. 버전 관리까지 기록되어 문제 시 되돌리기도 가능하다.
2. 커스텀 도메인 연결 — 가비아·후이즈 같은 국내 도메인 업체에서 원하는 주소(.com, .kr)를 구매한 뒤 Netlify의 [Domain management]에서 연결하면 된다. HTTPS는 Netlify가 자동으로 붙여준다.
3. 기능 붙이기 — 정적 사이트에 '문의하기 폼'이나 '고객 관리' 같은 기능을 붙이려면 별도 자동화가 필요하다. 다음 시리즈에서 다룰 예정이다.

마무리하며: 이제 당신은 '크리에이터'다

총 3편에 걸친 [클로드 웹사이트 만들기 프로젝트]가 끝났다. 우리는 코딩 지식 하나 없이 기획 → 디자인 → 개발 → 배포까지 해냈다. 이것이 바로 AI 시대의 생산성이다.

과거에는 개발자에게 수백만 원을 줘야 만들 수 있었던 결과물을, 이제는 아이디어만 있다면 누구나 만들 수 있다. 필자가 이 시리즈에서 만든 포트폴리오 사이트는 이해를 돕기 위한 수단일 뿐이다. AI 시대가 와서 직장이 없어질 것이라고 걱정하는 사람도 있지만, 나는 이게 엄청난 기회라고 본다. 이제 당신의 상상을 실행해 줄 에이전트가 생겼기 때문이다. 자그마한 프로젝트라도 실행해 보자. 당신에게 어떤 새로운 기회를 가져다줄지 아무도 모른다.

---

시리즈 전체 보기

• [1편] 클로드를 '수석 엔지니어'로 세팅하는 법
• [2편] 코딩 1도 몰라도 클로드로 '진짜 웹사이트' 만드는 법
• [3편 / 현재 글] 서버비 0원? 드래그 한 번으로 평생 무료 웹사이트 만들기 (Netlify)

다음 확장편

• [다음] 개발자 없이 서버를? AI와 Make로 '문의하기' 기능 10분 만에 구현하기
• [그다음] 서버도 DB도 필요 없다! 구글 시트를 '무료 고객 관리(CRM) 시스템'으로 쓰는 법