“블로그로 진짜 돈을 벌 수 있을까?” 막연한 호기심의 결과물
블로그 부업으로 수익을 낸다는 인터넷의 수많은 글들을 보며, 저 역시 생각했습니다. ‘이게 정말 돈이 될까? 월급을 대체할 수는 없더라도 생활비나 공과금에 조금이라도 보탬이 되지 않을까?’
그 막연한 호기심에서 출발한 자료 조사가 결국 현재 여러분이 보고 계신 이 weno.blog의 탄생으로 이어졌습니다.
처음에는 남들처럼 네이버 블로그, 티스토리, 혹은 워드프레스를 고민했습니다. 하지만 각 플랫폼의 장단점을 깊이 파고들수록 한계가 명확하게 보였습니다. 고민 끝에 제가 선택한 답은, 서버 비용을 들이지 않고 압도적인 로딩 속도를 자랑하는 Astro 프레임워크 기반의 정적 웹사이트(SSG)였습니다.
문제는 제가 코딩을 전혀 모르는 ‘비전공자’라는 사실이었습니다. 하지만 AI의 도움을 적극적으로 활용하며 맨땅에 헤딩하듯 하나씩 부딪혔고, 결국 나만의 온전한 블로그를 배포하는 데 성공했습니다.
이 시리즈 포스팅은 제가 사이트를 구축하며 겪었던 수많은 고민과 선택, 그리고 오류 해결 과정을 생생하게 담은 기록입니다.
- 기존 블로그 플랫폼(네이버블로그, 티스토리, 워드프레스 등)의 한계와 비용 문제에 지치신 분
- 코딩 지식은 없지만 나만의 빠르고 가벼운 블로그를 직접 만들어보고 싶은 분
- AI를 활용해 웹사이트를 구축하는 실제 과정이 궁금하신 분
저와 같은 비전공자도 해냈습니다.
이 글이 여러분만의 사이트를 구축하는 데 든든한 가이드가 되기를 바랍니다.
완성될 결과물과 핵심 기술 스택 3가지
이 시리즈 포스팅을 끝까지 따라오시면, 현재 여러분이 보고 계신 weno.blog와 동일한 수준의 고성능 사이트를 직접 소유하게 됩니다.
이 블로그는 기술 문서 작성에 특화된 ‘Astro Starlight’ 템플릿을 기반으로 만들어졌습니다.
저는 이 템플릿의 장점을 극대화하여, 단조로운 문서를 넘어선 ‘완벽한 블로그 형태’로 구조를 뜯어고쳤습니다.
이 시리즈를 통해 여러분은 다음과 같은 결과물을 얻게 됩니다.
결과물 요약
- 포스팅 간의 유기적인 연결과 체계적인 작가 페이지 구성
- 마크다운(MDX) 환경에서 본문 가독성을 높여주는 나만의 커스텀 UI 컴포넌트 직접 제작 및 적용
- 타 플랫폼과 차별화되는 깔끔하고 군더더기 없는 디자인
서버 비용 0원 달성을 위한 핵심 도구 3가지
무거운 백엔드 서버 없이, 압도적인 로딩 속도와 ‘서버 비용 0원’을 실현하기 위해 우리는 딱 3가지 도구만 사용합니다.
- Astro (프레임워크)
불필요한 자바스크립트를 걷어내어 구글 SEO 점수를 극대화하는 블로그 최적화 오픈소스 템플릿입니다.
- GitHub (저장소)
코딩 초보의 구명조끼입니다. 내가 쓴 글과 코드를 인터넷에 안전하게 백업하고 버전을 관리해 주는 공간입니다.
- Cloudflare Pages (무료 배포)
깃허브에 올린 파일을 감지하여 전 세계에 가장 빠르게, 그리고 ‘무료’로 배포해 주는 호스팅 서비스입니다.
이 시스템을 구축하는 데 들어가는 금전적 비용은 ‘개인 도메인 구매 비용(커피 한두 잔 값)‘이 전부입니다.
물론 여러분의 시간과 노력이 투자되어야 합니다.
하지만 그 과정을 거치고 나면, 왜 제가 네이버나 워드프레스가 아닌 이 방식을 선택했고 이것이 블로그 운영의 강력한 무기가 되는지 확실히 체감하실 수 있을 것입니다.
시리즈 포스팅, 정적 사이트 구축 전체 로드맵
이 페이지는 앞으로 정적 사이트 구축 시리즈 포스팅될 모든 과정의 ‘베이스캠프(허브)‘입니다.
코딩을 모르는 비전공자도 헤매지 않도록, 기초 세팅부터 UI 커스텀, 최종 배포까지 제가 직접 부딪히며 검증한 순서대로 커리큘럼을 구성했습니다.
아직 링크가 활성화되지 않은 ‘(예정)’ 단계의 글들은 현재 순차적으로 집필 중이며, 지속적으로 업데이트됩니다.
이 페이지를 북마크(즐겨찾기) 해두시고, 블로그를 만들다 막히는 부분이 생길 때마다 언제든 돌아와 다음 단계를 확인해 보세요.
전체 커리큘럼 보기
- 1티스토리, 워드프레스 대신 정적 사이트(SSG)를 선택한 이유
- 2수많은 프레임워크 중 Astro와 Starlight를 선택한 이유
- 3코딩 초보의 구명조끼, GitHub
- 4서버 비용 0원, Cloudflare Pages 배포(예정)
- 5워드보다 쉬운 글쓰기의 혁신, 마크다운(Markdown)과 MDX 이해하기(예정)
- 6복잡한 폴더는 그만! Astro의 직관적인 파일 기반 라우팅(Routing)(예정)
- 7레고 블록처럼 조립하는 UI, 컴포넌트(Component)의 개념(예정)
- 8개발자의 무기 장착하기: Node.js와 VS Code 설치 가이드(예정)
- 9명령어 한 줄로 내 컴퓨터에 Astro & Starlight 블로그 띄우기(예정)
- 10블로그의 뇌를 건드리다: astro.config.mjs 기본 설정 해독하기(예정)
- 11구글을 유혹하는 첫걸음, SEO 프론트매터(Frontmatter) 최적화(예정)
- 12다크 모드도 내 마음대로! Starlight CSS 변수(Variables) 뜯어고치기(예정)
- 13가독성을 200% 올리는 커스텀 알림 박스(<Aside>) 활용법(예정)
- 14독자의 이탈을 막아라: '시리즈 목차(<SeriesToc>)' 컴포넌트 개발기(예정)
- 15스쳐 가는 독자도 붙잡는 '블로그 메인(Home) 화면' 개조기(예정)
- 16저작권 걱정 없는 썸네일과 Astro 이미지 최적화(Image 컴포넌트)(예정)
- 17비전공자의 멘붕 일지: 자주 겪는 빌드 에러와 트러블슈팅 모음(예정)
- 18나만의 문패 달기: Cloudflare DNS로 커스텀 도메인(개인 주소) 연결하기(예정)
- 19전 세계에 내 블로그 신고하기: 구글 서치 콘솔 및 사이트맵(Sitemap) 등록(예정)
- 20수익형 블로그의 완성: 방문자 통계(Analytics) 분석과 애드센스의 방향성(예정)
가이드를 200% 활용하기 위한 3가지 주의사항
여기까지 읽으셨다면, 서버 비용 0원의 나만의 블로그를 직접 만들어보겠다는 결심이 서셨을 겁니다.
이 가이드의 핵심은 ‘비전공자가 AI의 도움을 받아 코딩의 벽을 넘는 것’입니다.
하지만 본격적인 시작에 앞서, 제가 숱한 시행착오를 겪으며 깨달은 현실적인 조언을 먼저 드리고 싶습니다.
첫째, AI는 ‘부품’을 만들 뿐 ‘조립’은 사람의 몫입니다.
AI에게 “완성된 블로그를 뚝딱 만들어줘”라고 지시하면 절대 원하는 결과물이 나오지 않습니다.
AI는 필요한 코드 조각을 훌륭하게 만들어주지만, 그것들을 하나의 사이트로 연결하고 다듬는 과정은 결국 사람의 손을 거쳐야 합니다.
아무런 이해 없이 코드 복사·붙여넣기만 반복하면, 나중에 작은 오류 하나만 발생해도 코드를 수정할 수 없는 ‘멘붕’에 빠지게 됩니다.
코드를 완벽히 외울 필요는 없습니다. 다만, ‘AI에게 어떻게 질문해서 원하는 코드를 얻어내는지’, 그리고 ‘그 코드를 어디에 배치해야 하는지’ 원리를 이해하는 데 중점을 두시길 바랍니다.
둘째, 반드시 순서대로 읽고 상황에 맞게 응용하세요.
가이드에 등장하는 코드와 세팅은 현재 여러분이 보고 계신 이 사이트 환경에 맞춰진 것입니다.
따라서 독자님의 사이트 설정이나 버전에 따라 조금 다르게 적용해야 할 수도 있습니다.
눈으로 가볍게 훑지 마시고, 1편부터 순서대로 따라오시며 전체적인 뼈대가 구축되는 과정을 먼저 이해하시는 것을 권장합니다.
셋째, 막히는 부분은 언제든 이메일로 남겨주세요.
정적 사이트(SSG)의 가장 큰 특징은 무거운 서버가 없다는 점입니다.
압도적인 로딩 속도와 서버 비용 0원을 달성하기 위해, 이 블로그 역시 무거운 ‘댓글 기능’은 과감하게 제외했습니다.
가이드를 따라 하시다가 도저히 풀리지 않는 에러를 만나거나 궁금한 점이 생기셨다면, 고민하지 마시고 사이트 최하단(Footer)에 기재된 이메일로 연락해 주세요.
제가 아는 선에서 최대한 도움을 드리겠습니다.
이제, 여러분의 사이트를 띄울 시간입니다
모든 마음의 준비와 전체적인 뼈대 파악이 끝났습니다.
처음에는 코드가 낯설고 막막하게 느껴질 수 있습니다.
하지만 이 가이드를 따라 하나씩 복사하고, 붙여넣고, 수정하다 보면 어느새 나만의 도메인으로 접속되는 번듯한 웹사이트를 마주하게 될 것입니다.
포기하지 않고 끝까지 완주하시어, 여러분이 머릿속으로만 그리던 그 공간을 직접 완성하시길 진심으로 응원합니다.
자, 그럼 그 첫 번째 여정. 우리가 왜 남들이 다 쓰는 기존 플랫폼(티스토리, 워드프레스)을 과감히 버리고 이 방식을 선택해야만 했는지, 그 진짜 이유부터 파헤쳐 보겠습니다.
