DAY 04 [준비] 프레임워크 고르기: ‘서버비 0원’을 가능하게 하는 한 끗 차이

바이브 코딩으로 블로그 만들기 시리즈 코딩을 몰라도 AI와 대화하며 ‘내 소유’ 수익형 웹사이트를 만드는 15일 여정

DAY 03에서 Node.js, Git, Cursor, GitHub까지 전부 세팅했습니다. 도구가 갖춰졌으니 이제 ‘무엇으로 만들지’를 정할 차례입니다.

여기서 할 일은 딱 두 가지입니다.

첫째, 프레임워크를 고릅니다. 블로그를 짓는 ‘공법’을 정하는 겁니다. 둘째, 도메인을 정합니다. 블로그의 ‘주소’를 정하는 겁니다.

코딩 얘기 같지만, 본질은 돈 이야기입니다. 오늘의 선택이 앞으로 매달 나가는 유지비를 0원으로 만들 수도, 월 수만 원으로 만들 수도 있거든요.

‘서버비’가 뭔데, 왜 중요한가요?

블로그를 인터넷에 올리려면 어딘가에 블로그 파일을 저장하고, 24시간 켜놓고, 누가 접속하면 보여줘야 합니다. 이 ‘어딘가’가 서버이고, 서버를 빌리는 비용이 서버비입니다.

티스토리나 네이버 블로그는 이 비용을 플랫폼이 대신 내줍니다. 대신 광고 수익을 가져가거나 내 블로그에 플랫폼 광고를 박아넣죠. ‘내 소유’라고 말할 수 없는 이유입니다.

전통적인 방식으로 블로그를 직접 운영하면 비용이 이렇습니다.

블로그 수익이 월 10만 원이라고 해도, 서버비로 매달 수만 원이 빠지면 순수익이 크게 줄어듭니다. 특히 초반에는 수익이 0원인데 비용만 나가는 기간이 있습니다. 이 기간이 길어지면 대부분 포기합니다.

우리는 이 비용을 0원으로 만들 겁니다. 어떻게? 프레임워크 선택으로.

핵심 개념: ‘서버가 필요한 블로그’ vs ‘서버가 필요 없는 블로그’

프레임워크를 고르기 전에, 웹사이트가 작동하는 두 가지 방식을 이해해야 합니다. 어렵지 않습니다.

방식 1: 서버 사이드 렌더링 (SSR)

방문자가 글을 요청할 때마다:

방문자 → “글 보여줘” → [서버] → DB에서 글 꺼내기
                                → HTML 만들기
                                → 방문자에게 보내기

서버가 24시간 켜져 있어야 함 → 서버비 발생

워드프레스가 이 방식입니다. 누군가 내 블로그에 접속할 때마다 서버가 “지금부터 페이지 만들게요!”라고 일을 합니다. 서버가 일하니까, 서버비를 내야 합니다.

방식 2: 정적 사이트 생성 (SSG)

블로그를 배포할 때 한 번만:

내 컴퓨터에서 → 모든 글을 미리 HTML로 만들기
             → 완성된 파일을 서버에 올리기

방문자 → “글 보여줘” → [서버] → 이미 만들어진 HTML을 그냥 보내기

서버가 ‘일’을 안 함 → 파일 보관만 → 무료 가능!

이 방식은 모든 페이지를 미리 완성해서 올려놓는 겁니다. 서버는 그냥 완성된 파일을 건네주기만 하면 되니까, 거의 일을 안 합니다. 그래서 Vercel, Netlify 같은 서비스가 이런 사이트를 무료로 호스팅해줍니다.

💡 비유하자면, SSR은 주문 즉시 요리하는 레스토랑(셰프 인건비 발생)이고, SSG는 도시락을 미리 만들어서 진열해놓은 편의점(직원이 계산만 하면 됨)입니다.

블로그는 한 번 쓴 글이 바뀌지 않습니다. 실시간으로 페이지를 만들 필요가 없습니다. 그래서 SSG가 블로그에 가장 적합한 방식이고,이것이 서버비 0원의 비밀입니다.

Next.js vs Astro: 둘 다 좋은데, 우리에겐 뭐가 맞을까?

SSG를 지원하는 프레임워크는 여러 개 있지만, 2026년 기준 현실적으로 추천할 수 있는 건 두 가지입니다.

1분 요약 비교

둘 다 SSG를 지원하니 서버비 0원은 어느 쪽이든 가능합니다. 하지만 바이브 코딩이라는 맥락에서 승자가 갈립니다.

바이브 코딩에서의 결정적 차이: ‘AI가 얼마나 잘 아느냐’

바이브 코딩은 AI에게 코드를 맡기는 방식입니다. 그런데 AI는 학습 데이터가 많은 기술을 더 잘 다룹니다.

Next.js는 2016년부터 쌓인 방대한 코드, 튜토리얼, Stack Overflow 답변, GitHub 프로젝트가 있습니다. AI가 Next.js 코드를 쓸 때는 수백만 개의 참고 자료를 기반으로 답을 내놓습니다.

Astro는 2022년에 나온 비교적 새로운 프레임워크입니다. 학습 데이터가 상대적으로 적습니다. AI에게 Astro 코드를 요청하면 가끔 구버전 문법을 쓰거나 없는 기능을 만들어내는(할루시네이션) 경우가 더 자주 발생합니다.

이걸 체감으로 바꾸면 이렇습니다.

Cursor에게 “블로그 목차(TOC) 기능 만들어줘”라고 요청했을 때:

Next.js → 10번 중 8~9번 한 번에 작동하는 코드 생성
Astro   → 10번 중 5~6번 한 번에 작동, 나머지는 수정 필요

에러가 나면 AI에게 “고쳐줘”라고 할 때:

Next.js → 대부분 1~2번 대화로 해결
Astro   → 3~4번 대화가 필요하거나 같은 에러를 반복하기도 함

코딩을 아는 사람에게는 Astro의 에러를 직접 잡을 수 있으니 큰 문제가 아닙니다. 하지만 우리는 코딩을 모르는 사람이 AI에게 전적으로 의존하는 상황입니다. AI의 정확도가 곧 프로젝트의 성패입니다.

우리의 선택: Next.js

정리하겠습니다.

Astro가 나쁜 프레임워크라서가 아닙니다. 오히려 블로그 전용으로는 Astro가 더 가볍고 빠릅니다. 하지만 ‘코딩을 모르는 사람이 AI와 대화하며 만든다’는 전제에서는 Next.js가 압도적으로 안전한 선택입니다. 바이브 코딩의 성공 확률을 최대화하는 겁니다.

“나는 코딩을 좀 아는데?”라는 분이라면 Astro도 훌륭한 선택입니다. 이 시리즈의 원리(레이아웃, SEO, 광고 배치)는 프레임워크와 무관하니, Next.js 부분만 Astro로 바꿔서 따라하셔도 됩니다.

Next.js, 이것만 알면 충분합니다

Next.js의 모든 기능을 알 필요 없습니다. 수익형 블로그를 만드는 데 필요한 개념만 딱 4가지입니다.

개념 1: 페이지 = 파일

📁 app/
  📄 page.tsx        → 주소: myblog.com/
  📁 about/
    📄 page.tsx      → 주소: myblog.com/about
  📁 blog/
    📄 page.tsx      → 주소: myblog.com/blog
    📁 [slug]/
      📄 page.tsx    → 주소: myblog.com/blog/첫번째글
                     → 주소: myblog.com/blog/두번째글
                     → 주소: myblog.com/blog/... (자동 생성)

Next.js에서는 app 폴더 안에 파일을 만들면 그게 곧 웹페이지가 됩니다. 폴더 구조가 그대로 URL 주소가 되는 겁니다. 우리가 직접 이 구조를 만들 필요 없습니다. AI에게 “블로그 페이지 구조 만들어줘”라고 하면 알아서 해줍니다. 다만 결과물을 봤을 때 “아, 이 파일이 이 페이지구나”를 이해할 수 있으면 됩니다.

개념 2: 컴포넌트 = 레고 블록

웹페이지를 레고 블록처럼 조각조각 만들어서 조립하는 방식입니다. 헤더를 한 번 만들면 모든 페이지에서 재사용합니다. “헤더의 색깔 바꿔줘”라고 하면 한 파일만 수정하면 전체 사이트에 반영됩니다.

개념 3: 마크다운 = 글 쓰기 도구

# 이것이 제목입니다

이것은 본문입니다. **이렇게 하면 굵게** 됩니다.

## 이것은 소제목

- 목록 1
- 목록 2

> 이것은 인용문입니다

마크다운은 메모장에서 글을 쓰듯이 간단한 기호만으로 서식을 지정하는 방법입니다. 위처럼 쓰면 자동으로 제목, 굵은 글씨, 목록, 인용문이 됩니다. 우리 블로그의 모든 글은 마크다운으로 작성할 겁니다. 워드프로세서보다 훨씬 간단하고, 코드와 함께 관리할 수 있습니다.

개념 4: 빌드 = 완제품 만들기

개발 중:                          빌드 후:
📁 app/                          📁 out/
  📄 page.tsx  (React 코드)   →    📄 index.html  (완성된 웹페이지)
  📁 blog/                        📁 blog/
    📄 page.tsx               →      📄 첫번째글.html
                                     📄 두번째글.html

개발 중에는 React 코드(.tsx 파일)로 작업합니다. “빌드”라는 과정을 거치면 이 코드가 브라우저가 이해할 수 있는 HTML 파일로 변환됩니다. 이 변환된 파일들을 Vercel에 올리면 세상 누구나 볼 수 있는 웹사이트가 됩니다.

이 4가지 개념을 외울 필요 없습니다. 나중에 AI가 만들어준 코드를 볼 때 ‘아, 이게 그거구나’ 정도만 알면 됩니다. 지금은 눈으로 한 번 읽고 넘어가세요.

도메인: 블로그의 ‘주소’ 정하기

프레임워크를 정했으니, 이제 블로그 주소를 정합시다.

도메인이 뭔가요?

myblog.com에서 myblog.com 전체가 도메인입니다. 사람으로 치면 ‘집 주소’이고, 가게로 치면 ‘상호명’입니다.

Vercel로 배포하면 기본적으로 프로젝트명.vercel.app이라는 무료 주소가 주어집니다. 하지만 수익형 블로그를 운영하려면 나만의 도메인이 필요합니다.

왜 커스텀 도메인이 필요한가?

❌ my-blog.vercel.app    → 애드센스 승인 불가 (서브도메인)
✅ myblog.com            → 애드센스 승인 가능
✅ myblog.co.kr          → 애드센스 승인 가능

구글 애드센스는 vercel.app 같은 무료 서브도메인으로는 승인이 나지 않습니다. “이 사람이 진지하게 사이트를 운영하는구나”라는 신호를 도메인에서 읽기 때문입니다. 수익화하려면 나만의 도메인은 선택이 아니라 필수입니다.

도메인, 어디서 사나요?

도메인 구매 사이트(레지스트라)는 여러 곳이 있습니다.

추천: 처음이라면 가비아(한국어 지원, 결제 편함)나 Namecheap(가격 저렴)을 추천합니다. 도메인 연결은 DAY 11에서 합니다. 지금은 ‘이름만 정해두기’도 괜찮습니다.

돈 되는 도메인 이름 짓기 5원칙

도메인 이름은 한 번 정하면 바꾸기 어렵습니다. SEO(검색 최적화)와 브랜딩 관점에서 이 원칙을 지키세요.

① 짧을수록 좋다

my-awesome-coding-blog-2025.com ❌ devnote.com ✅ 8~15자가 적당합니다. 타이핑하기 쉽고, 기억에 남습니다.

② 니치(주제)를 드러내라

블로그 주제가 도메인에 살짝 보이면 검색 엔진이 좋아합니다.

• 개발 블로그: codeflow.kr, devpilot.com
• 재테크 블로그: moneynote.kr, richlog.com
• 라이프스타일: dailypick.kr, lifememo.com

③ 하이픈(-)은 1개 이하로

my-dev-blog.com은 괜찮지만 my-dev-code-blog-site.com은 스팸처럼 보입니다.

④ 숫자를 피하라

blog123.com은 전문성이 떨어져 보입니다. 불가피한 경우가 아니면 숫자는 빼세요.

⑤ .com 또는 .kr을 우선하라

.com은 전 세계 어디서든 신뢰도가 높습니다. 한국 타겟이라면 .co.kr이나 .kr도 좋습니다. .xyz, .site 같은 신생 도메인은 가격이 싸지만 스팸 사이트에 많이 쓰여서 신뢰도가 낮을 수 있습니다.

도메인 구매는 지금? 나중에?

지금 바로 사지 않아도 됩니다. DAY 11에서 Vercel 배포할 때 연결하면 됩니다.

다만, 원하는 이름이 있다면 먼저 선점해두는 게 좋습니다. 좋은 도메인은 금방 누군가가 가져갑니다. 가비아나 Namecheap에서 이름을 검색해보고, 마음에 드는 게 있으면 연간 만 원대의 비용으로 먼저 잡아두세요.

도메인 비용은 ‘서버비’에 포함되나요? 엄밀히 말하면 별개입니다. 서버비(호스팅비)는 0원이고, 도메인 비용만 연간 1~2만 원 들어갑니다. 월로 치면 1,000원 정도입니다. 이건 ‘내 소유’ 블로그를 갖기 위한 유일한 비용입니다. 커피 한 잔 값도 안 됩니다.

오늘의 결정 정리

DAY 01부터 DAY 04까지, 1주차 ‘준비 단계’가 거의 끝나갑니다.

지금까지 한 일을 돌아보면 이렇습니다.

DAY 01  바이브 코딩이 뭔지 이해했다
DAY 02  돈 되는 블로그의 레이아웃 패턴을 파악했다
DAY 03  AI 코딩 비서를 영입하고 도구를 전부 세팅했다
DAY 04  프레임워크와 도메인을 정했다       ← 오늘 여기!
─────────────────────────────────────────
DAY 05  ???

내일이면 드디어 화면에 뭔가가 뜹니다. 4일 동안 참은 보람이 있을 겁니다.

오늘의 에러 119 🚨

이 코너는 매 회 해당 단계에서 자주 겪는 문제와 해결법을 다룹니다.

오늘은 코딩이 아니라 개념과 선택의 날이었으니, 에러 대신 초보자가 자주 하는 잘못된 선택 TOP 3을 짚습니다.

실수 1: “워드프레스가 더 좋지 않나요? 플러그인도 많고…”

→ 워드프레스는 훌륭한 도구입니다. 하지만 서버비가 듭니다. 월 5,000~30,000원의 호스팅 비용 + 느린 속도로 인한 SEO 불이익 + 보안 업데이트 스트레스가 패키지로 따라옵니다. 우리가 만드는 Next.js SSG 블로그는 서버비 0원, 로딩 속도 최상위, 보안 걱정 거의 없음(정적 파일이라 해킹할 서버가 없음)입니다. 플러그인이 없는 대신 AI가 필요한 기능을 직접 만들어줍니다.

실수 2: “도메인 이름을 내 본명으로 하려고요”

→ hongildong.com 같은 본명 도메인은 개인 브랜딩에는 좋지만, 수익형 블로그에는 불리합니다. 검색 엔진은 도메인에서 콘텐츠 주제를 추론하는데, 사람 이름에서는 주제를 알 수 없습니다. 또한, 나중에 블로그를 매각하거나 주제를 바꿀 때 유연성이 떨어집니다. 주제를 암시하는 이름을 추천합니다.

실수 3: “무료 도메인(.tk, .ml)으로 시작해도 되죠?”

→ 절대 안 됩니다. 무료 도메인은 스팸 사이트의 온상이라, 구글이 이런 도메인의 검색 노출을 극도로 경계합니다. 애드센스 승인도 사실상 불가능합니다. 연간 1~2만 원을 아끼려다 검색 노출 자체가 안 되는 상황이 벌어집니다. 도메인은 유일하게 돈을 써야 하는 곳입니다.