💡 [웹사이트 제작 1편] 유지비 0원? 워드프레스 대신 '이것' 선택한 이유

🤔 수익형 블로그 시작, 첫 달부터 서버비 낼 필요는 없잖아?

📌 한 줄 요약: 초기 서버 유지비 부담을 줄이기 위해 워드프레스 대신 Notion + GitHub Actions + Cloudflare Pages를 조합한 정적 웹사이트 구조를 직접 구축한 이유를 소개한다.

수익형 웹사이트를 만들어보겠다고 마음먹었을 때 가장 먼저 찾아본 것은 역시 워드프레스였다.

워드프레스는 이미 다양한 기능과 플러그인이 갖춰져 있어 웹사이트를 만들기 편리하지만, 처음부터 서버나 호스팅 환경을 직접 마련해야 한다는 점이 부담으로 다가왔다.

특히 방문자가 거의 없는 초기 단계에서는 아직 수익이 발생하지도 않았는데 매달 서버·호스팅 비용부터 지출해야 하는 구조가 썩 마음에 들지 않았다.

그렇다고 트래픽이 늘어날 때마다 서버를 직접 관리하거나 요금제를 계속 신경 쓰고 싶지도 않았다.

그래서 방향을 조금 다르게 잡았다.

“처음부터 서버를 직접 운영하지 않고, 콘텐츠를 작성하고 배포하는 데 필요한 기능만 조합하면 어떨까?”

여러 방법을 찾아본 끝에 내가 선택한 구조는 Notion을 콘텐츠 관리 도구(CMS)로 사용하고, GitHub Actions에서 웹사이트를 생성한 뒤, Cloudflare Pages를 통해 정적 파일을 배포하는 방식이었다.

그리고 이 구조를 실제로 구현하는 과정에서는 AI 바이브코딩을 활용해 필요한 웹사이트 코드를 직접 만들고 수정했다.

지금부터 왜 이런 구조를 선택했는지, 그리고 각각의 기술이 어떤 역할을 하는지 하나씩 살펴보자.

💡 워드프레스 대신 정적 웹사이트(SSG)를 선택한 이유

📌 한 줄 요약: 콘텐츠 중심의 블로그라면 서버에서 매번 페이지를 생성하는 대신 미리 만들어진 HTML을 배포하는 정적 사이트 구조로 서버 운영 부담을 줄일 수 있다.

처음에는 AWS 같은 클라우드 서버나 카페24와 같은 일반적인 호스팅 서비스도 살펴봤다.

하지만 내가 만들려는 것은 회원가입이나 결제 시스템이 필요한 서비스가 아니라 글을 작성하고 방문자에게 보여주는 콘텐츠 중심의 블로그였다.

그렇다면 굳이 복잡한 서버를 계속 운영해야 할까?

여기서 정적 사이트 생성(SSG, Static Site Generation)이라는 방식을 알게 됐다.

SSG는 간단히 말해 웹사이트에 필요한 HTML 파일을 미리 만들어 놓고 방문자에게 전달하는 방식이다.

사용자가 페이지를 요청할 때마다 서버에서 데이터베이스를 조회하고 페이지를 새로 만드는 대신, 미리 생성된 정적 파일을 CDN을 통해 제공할 수 있다.

따라서 콘텐츠 중심의 웹사이트에서는 서버를 직접 운영하는 부담을 크게 줄일 수 있다.

내가 선택한 방법의 전체적인 흐름을 단순하게 표현하면 다음과 같다.

여기서 중요한 것은 각각의 서비스가 모든 일을 하는 것이 아니라는 점이다.

Notion은 글을 작성하는 공간,

GitHub Actions는 웹사이트를 자동으로 만들어주는 실행 환경,

Cloudflare Pages는 만들어진 웹사이트를 배포하는 공간이라고 이해하면 쉽다.

📊 Pixoas 웹사이트는 이렇게 구성되어 있다

📌 한 줄 요약: 글은 Notion에서 작성하고, GitHub Actions에서 웹사이트를 빌드하며, Cloudflare Pages에서 완성된 페이지를 배포하는 구조다.

처음 이 구조를 보면 서비스가 여러 개라 복잡해 보일 수 있다. 하지만 각각의 역할을 나눠보면 오히려 단순하다.

이 구조의 핵심은 콘텐츠와 웹사이트를 분리하는 것이다.

나는 웹사이트의 모든 글을 직접 HTML로 작성하지 않는다. 평소처럼 Notion에서 글을 작성하고, GitHub Actions가 필요한 작업을 수행한 뒤, 완성된 웹사이트를 Cloudflare Pages에 배포한다.

그리고 이 과정에서 필요한 웹사이트 코드와 자동화 로직은 AI 바이브코딩을 활용해 직접 구축했다.

즉, 특정 완성형 서비스를 그대로 가져다 쓴 것이 아니라 내가 원하는 구조에 맞게 코드를 만들고 수정하면서 현재의 시스템을 구성한 것이다.

🤖 그런데 코딩을 모르는 내가 어떻게 만들었을까?

📌 한 줄 요약: 웹사이트의 코드를 처음부터 혼자 작성하는 대신 ChatGPT, Gemini 등의 AI를 활용해 필요한 코드를 만들고 수정하는 방식으로 구축했다.

여기서 가장 큰 도움이 된 것이 AI 바이브코딩(Vibe Coding)이었다.

사실 이 프로젝트를 시작할 때 나 역시 웹사이트에 필요한 모든 코드를 처음부터 직접 작성한 것은 아니다.

대신 원하는 결과를 구체적으로 설명하고, AI가 작성한 코드를 실제 환경에서 실행해본 뒤 문제가 생기면 다시 AI에게 수정하도록 요청하는 방식으로 개발했다.

예를 들어, “Notion에서 작성한 글을 가져와 웹페이지로 보여주고 싶어.” 라는 요구사항부터 시작해서, “이미지도 웹사이트에서 정상적으로 표시되게 해줘.”, “새 글이 추가되면 자동으로 다시 빌드되게 해줘.”, “검색엔진이 페이지 구조를 이해할 수 있도록 사이트맵도 생성해줘.” 처럼 필요한 기능을 하나씩 추가해 나가는 방식이다.

물론 AI가 한 번에 완성된 코드를 만들어주는 것은 아니다.

실제로 실행해보고 오류가 발생하면 오류 메시지를 전달하고, 원하는 화면과 다르면 화면을 보여주면서 다시 수정하는 과정이 반복된다.

결국 중요한 것은 AI가 코드를 대신 작성해준다는 사실 자체보다, 내가 원하는 기능을 설명하고 결과를 확인하면서 코드를 완성해 나가는 과정이었다. 이 부분은 다음 편에서 실제 웹사이트 뼈대를 구축하는 과정과 함께 자세히 다룰 예정이다.

🚀 이 구조의 가장 큰 장점은 '글쓰기에 집중할 수 있다는 것'

📌 한 줄 요약: 초기 구축 이후에는 콘텐츠 작성은 Notion에서, 반복적인 빌드와 배포는 GitHub Actions가 담당하도록 역할을 나눌 수 있다.

이 구조를 선택하면서 가장 마음에 들었던 부분은 웹사이트를 운영할 때 반복되는 작업을 자동화할 수 있다는 것이었다.

📝 ① 글 작성은 Notion에서

별도의 복잡한 관리자 페이지를 만들 필요 없이 평소 사용하는 Notion에서 글을 작성한다.

⚙️ ② GitHub Actions가 빌드 작업을 실행

Notion에 저장된 콘텐츠를 가져와 웹사이트에 필요한 형태로 변환하고, 정적 페이지를 생성하는 작업을 수행한다.

☁️ ③ Cloudflare Pages에서 배포

빌드가 완료된 정적 파일을 Cloudflare Pages를 통해 방문자에게 제공한다.

결과적으로 콘텐츠를 작성하는 사람의 입장에서는 “글을 쓰고 배포를 실행한다”는 단순한 흐름으로 사용할 수 있다. 물론 처음에는 GitHub, GitHub Actions, Notion API 등의 설정이 필요하다. 하지만 한 번 구축해두면 이후 반복되는 작업을 자동화할 수 있다는 것이 이 구조의 가장 큰 장점이다.

💰 그래서 정말 서버 유지비가 0원일까?

📌 한 줄 요약: 무료 요금제를 활용하면 서버·호스팅에 대한 월별 고정비 없이 시작할 수 있지만, 도메인 등 별도의 비용까지 모두 0원이라는 의미는 아니다.

여기서 한 가지는 정확하게 짚고 넘어가야 한다.

“유지비 0원”이 “모든 비용이 0원”이라는 뜻은 아니다.

예를 들어 나만의 ‘example.com’ 같은 커스텀 도메인을 사용하려면 도메인 등록 비용이 별도로 발생한다. 내가 말하는 유지비 0원은 기본적으로 서버를 직접 임대하거나 매월 별도의 호스팅 비용을 지불하지 않고, 각 서비스에서 제공하는 무료 범위 안에서 웹사이트를 운영하는 것을 의미한다.

따라서 초기 비용을 최대한 줄이고 싶은 콘텐츠형 블로그라면 상당히 매력적인 구조가 될 수 있다. 다만 각 서비스의 무료 요금제에는 사용량이나 기능상의 제한이 있을 수 있고, 정책은 언제든 변경될 수 있으므로 “무조건 평생 무료”라고 생각해서는 안 된다.

⚖️ 워드프레스와 비교하면 무엇이 다를까?

어느 쪽이 무조건 더 좋다는 의미는 아니다.

워드프레스는 회원가입, 쇼핑몰, 다양한 플러그인 등 동적인 기능을 빠르게 추가할 수 있다는 강력한 장점이 있다.

반대로 내가 만들고 싶었던 것은 콘텐츠를 꾸준히 발행하는 수익형 블로그였기 때문에, 서버 운영 부담을 줄이고 콘텐츠 생산에 집중할 수 있는 이 구조가 더 적합하다고 판단했다.

🙋‍♂️ 블로그 시작 전 궁금했던 점 (Q&A)

(👉 질문을 클릭하면 자세한 답변이 펼쳐집니다)

📚 웹사이트 제작 9부작 시리즈 전체 목차

Pixoas에서는 웹사이트 제작을 쉽게 따라 할 수 있도록 9편의 튜토리얼로 쪼개어 연재한다.
차근차근 따라오면 어느새 나만의 개인 웹사이트가 완성되어 있을 것이다.

• 💡 [웹사이트 제작 1편] 유지비 0원? 워드프레스 대신 노션 택한 이유 (현재 글)
• 🎨 [웹사이트 제작 2편] AI로 코딩 없이 웹사이트 뼈대 구축하기
• 📝 [웹사이트 제작 3편] 노션을 웹사이트 CMS로 쓰는 법
• ☁️ [웹사이트 제작 4편] Cloudflare Pages로 웹사이트 배포하기
• ⚙️ [웹사이트 제작 5편] 노션 글 자동 반영! 깃허브 액션 연동법
• 🚨 [웹사이트 제작 6편] 노션 이미지 엑스박스 오류 해결
• 📈 [웹사이트 제작 7편] 검색엔진 등록 & 도메인 연결
• 💰 [웹사이트 제작 8편] 애드센스 승인, 가치 없는 콘텐츠 피하기
• 🤖 [웹사이트 제작 9편] AI로 블로그 방문자 늘리기

이 시리즈는 특정 서비스를 무조건 추천하기 위한 글이 아니다. 내가 직접 여러 방법을 비교하고 구축하면서 선택한 구조를 공유하는 기록에 가깝다. 1편에서는 전체적인 구조 설계와 이유를 살펴봤고, 2편부터 본격적으로 실제 웹사이트를 만드는 과정에 들어간다. Notion 연결부터 GitHub Actions 자동화, Cloudflare Pages 배포까지 차례대로 완성해 나갈 예정이다.
이어지는 2편에서는 AI 바이브코딩을 활용해 웹사이트의 실제 코드를 만들고, 내가 원하는 디자인과 기능을 하나씩 구현하는 과정을 자세히 알아보겠다.

✅ 마무리 정리

1. 수익형 블로그를 처음 시작하는 단계에서는 매월 발생하는 서버·호스팅 비용이 부담이 될 수 있다.
2. 그래서 Notion에서 콘텐츠를 작성하고, GitHub Actions에서 웹사이트를 빌드한 뒤, Cloudflare Pages를 통해 정적 웹사이트를 배포하는 구조를 선택했다.
3. 이 과정에서 필요한 웹사이트 코드와 자동화 로직은 AI 바이브코딩을 활용해 직접 구축하고 수정했다.
4. 무료 티어를 활용하면 직접 서버를 임대하거나 관리하지 않고 서버 유지비 부담을 크게 줄인 구조로 시작할 수 있다. 다만 도메인 비용이나 각 서비스의 무료 요금제 정책 등은 별도로 고려해야 한다.
5. 이 구조는 모든 웹서비스를 대체하는 만능 방법은 아니지만, 콘텐츠 중심의 수익형 블로그를 운영하면서 서버 관리 부담을 줄이고 싶은 경우 충분히 활용할 수 있는 방법이다.