·약 11분 읽기
바이브 코딩으로 블로그 만들기 시리즈 코딩을 몰라도 AI와 대화하며 ‘내 소유’ 수익형 웹사이트를 만드는 15일 여정
DAY 06에서 헤더, 푸터, 전체 색상을 수익형 블로그에 맞게 다듬었습니다. 블로그의 ‘겉모습’이 한 단계 올라갔죠.
오늘은 블로그의 ‘심장’을 만듭니다. 바로 글쓰기 시스템입니다.
블로그의 본질은 결국 글입니다. 아무리 레이아웃이 좋고 색상이 예뻐도 글이 없으면 아무 소용 없습니다. 그런데 글을 쓰는 방식이 불편하면 글이 안 쌓입니다. 글이 안 쌓이면 방문자가 안 오고, 방문자가 안 오면 수익도 없습니다.
오늘 이후로 여러분의 글쓰기 워크플로는 이렇게 됩니다.
① 메모장 같은 화면에서 글을 쓴다
② 저장한다
③ 끝. (블로그에 자동으로 올라간다)
에디터 화면에서 버튼을 클릭해 서식을 지정하고, 이미지를 드래그하고, 카테고리를 선택하고, 발행 버튼을 누르는, 그런 복잡한 과정이 전부 사라집니다. 마크다운 덕분입니다.
마크다운(Markdown)은 텍스트에 간단한 기호를 붙여서 서식을 표현하는 방법입니다. 2004년에 만들어졌고, 지금은 GitHub, Notion, Slack, Discord 등 거의 모든 개발 도구에서 표준으로 쓰입니다.
티스토리나 네이버 블로그의 에디터와 비교하면 차이가 명확합니다.
티스토리 방식:
글을 쓴다 → 마우스로 드래그 → 메뉴에서 "제목 2" 선택 → 적용
마크다운 방식:
##을 쓴다 → 끝. 자동으로 제목 2가 된다.
마우스에 손이 가지 않습니다. 키보드에서 손을 떼지 않고 글의 구조를 잡을 수 있습니다. 처음엔 기호를 외워야 해서 낯설지만, 30분만 써보면 다시는 클릭-드래그 에디터로 돌아가고 싶지 않게 됩니다.
마크다운 문법은 진짜 적습니다. 블로그 글을 쓰는 데 필요한 건 아래가 전부입니다.
# 제목 1 (H1) — 글 제목에만 사용, 본문에서는 쓰지 않음
## 제목 2 (H2) — 소제목. 가장 많이 쓰는 단위
### 제목 3 (H3) — 소소제목. H2 아래 세부 항목
실제 출력:
SEO 팁: H1은 글 제목(
title)에 자동 사용되므로 본문에서는 H2부터 시작하세요. 구글은 H1이 여러 개인 글을 구조가 불명확하다고 판단합니다. H2로 글의 뼈대를 잡고, 필요하면 H3으로 세부 항목을 나누세요.
**굵은 글씨** (중요한 키워드에 사용)
*기울임* (부가 설명이나 강조에 사용)
~~취소선~~ (수정 사항 표시에 사용)
`인라인 코드` (기술 용어나 명령어 표시에 사용)
실제 출력: 굵은 글씨, 기울임, 취소선, 인라인 코드
순서 없는 목록:
- 항목 1
- 항목 2
- 하위 항목 (앞에 공백 2칸)
순서 있는 목록:
1. 첫 번째
2. 두 번째
3. 세 번째
[클릭할 텍스트](https://example.com)
> 이것은 인용문입니다.
> 출처를 밝힐 때, 핵심 문장을 강조할 때 사용합니다.
---
글의 주제가 크게 전환될 때 사용합니다. 남용하면 글이 산만해지니 절제해서 쓰세요.
```javascript
const greeting = "안녕하세요";
console.log(greeting);
```
기술 블로그가 아니더라도, 설정값이나 명령어를 보여줄 때 유용합니다.
| 항목 | 가격 | 비고 |
|---|---|---|
| 도메인 | 연 15,000원 | 필수 |
| 서버비 | 0원 | Vercel 무료 |
| SSL | 0원 | 자동 제공 |
여기까지가 전부입니다. 진짜 이게 끝입니다. 이 문법들을 한 번에 외울 필요도 없습니다. 글을 쓰다가 ‘굵은 글씨는 뭐였지?’ 하면 이 페이지를 다시 보거나, AI에게 “마크다운에서 굵은 글씨 어떻게 해?”라고 물어보면 됩니다.
마크다운 파일 맨 위에 ---로 감싸인 영역이 있습니다. DAY 05에서 글을 직접 써봤을 때 이미 한 번 봤습니다.
---
title: "글의 제목"
date: "2025-06-15"
category: "카테고리명"
description: "이 글의 요약 (검색 결과에 표시됨)"
thumbnail: "/images/thumbnail.jpg"
---
여기서부터 본문 시작...
이 영역을 frontmatter라고 합니다. 글의 메타 정보, 즉 ‘신분증’입니다.
각 항목이 하는 일을 정리합니다.
title → 글 제목. 브라우저 탭과 목록에 표시
date → 작성일. 목록 정렬과 표시에 사용
category → 카테고리. 분류와 필터링에 사용
description → 요약. 구글 검색 결과에 표시되는 텍스트 (SEO 핵심!)
thumbnail → 썸네일 이미지 경로. 목록에서 미리보기로 표시
description은 절대 비워두지 마세요. 구글 검색 결과에서 제목 아래 보이는 2줄 짜리 설명문이 바로 이겁니다. 비워두면 구글이 본문 아무 데서나 임의로 가져옵니다. 50~160자로 핵심을 요약하세요. 이 한 줄이 검색 결과에서 클릭률을 좌우합니다.
DAY 05에서 AI가 만들어준 포스트 상세 페이지가 있습니다. 기능적으로는 작동하지만, 수익형 블로그에 맞게 몇 가지를 다듬어야 합니다.
먼저 커서를 실행하고 터미널 창을 열어 npm run dev를 입력하여 서버를 시작합니다. 그리고 블로그 글 하나를 열어 주세요.
① 글 상단 정보 영역
이와 같이 작성일 옆에 ‘읽는 시간’을 표시하면 두 가지 효과가 있습니다. 짧은 글이면 ‘금방 읽겠네’ 하고 읽기 시작하고, 긴 글이면 ‘이 정도 투자할 가치가 있나’ 미리 판단할 수 있어서 이탈률이 줄어듭니다.
② 마크다운 렌더링 스타일
AI가 만든 기본 마크다운 렌더링은 대체로 밋밋합니다. 수익형 블로그에 맞게 가독성을 높여야 합니다.
개선 포인트:
- H2 소제목 위에 충분한 여백 (48px)
- H2 아래에 옅은 구분선
- 인용문(blockquote)에 왼쪽 파란색 보더
- 코드 블록 배경색 구분
- 이미지에 둥근 모서리와 가운데 정렬
- 링크에 파란색 + hover 시 밑줄
③ 본문 중간 광고 자동 삽입
지금은 광고 위치가 하드코딩되어 있을 겁니다. 글마다 수동으로 넣는 건 비효율적입니다. H2 소제목 사이에 자동으로 광고를 삽입하는 로직을 만들어야 합니다.
④ 이전 글 / 다음 글 내비게이션
글을 다 읽은 사람에게 ‘다음에 이거 읽어보세요’를 보여주는 겁니다. 페이지뷰를 늘리는 가장 간단한 방법입니다.
⑤ 관련 글 추천
같은 카테고리의 다른 글을 하단에 보여줍니다. 이것도 페이지뷰 증가 = 광고 노출 증가로 이어집니다.
한 번에 다 요청합시다. 아래 프롬프트를 Cursor 채팅창에 붙여넣으세요.
포스트 상세 페이지(/posts/[slug])를 개선해줘.
## 1. 글 상단 정보
- 카테고리 이름을 뱃지(작은 라벨) 형태로 표시 (포인트 컬러 배경, 흰색 글자, 둥근 모서리)
- 글 제목 (H1, 32px, 굵게)
- 메타 정보: 작성일 + "· 읽는 시간 N분" (본문 글자 수 기준으로 자동 계산, 분당 500자)
- 메타 정보 글자색: 보조 텍스트 색상 (#6B7280)
## 2. 마크다운 렌더링 스타일 (prose 영역)
- H2: font-size 24px, font-weight 700, margin-top 48px, padding-bottom 8px, 하단에 1px 보더
- H3: font-size 20px, font-weight 600, margin-top 32px
- p: font-size 18px, line-height 1.8, margin-bottom 24px, 글자색 #333 (다크: #E0E0E0)
- blockquote: 왼쪽 4px 파란색 보더, 배경 #F9FAFB (다크: #1E1E1E), 패딩 16px, 이탤릭 아님
- code (인라인): 배경 #F3F4F6 (다크: #2D2D2D), 패딩 2px 6px, 둥근 모서리 4px, 글자 크기 15px
- code block: 배경 #1E1E1E, 글자 #E0E0E0, 둥근 모서리 8px, 패딩 20px
- img: max-width 100%, 둥근 모서리 8px, margin 24px auto, 가운데 정렬
- a (링크): 포인트 컬러, 밑줄 없음, hover 시 밑줄
- ul/ol: 왼쪽 패딩 24px, 항목 간 간격 8px
- table: 전체 너비, 보더, 헤더 배경색 구분, 셀 패딩 12px
- hr: margin 40px 0, 색상 #E5E7EB (다크: #2D2D2D)
## 3. 광고 자동 삽입
- 본문의 H2 태그를 기준으로 자동 삽입
- 첫 번째 H2 위에 광고 1개
- 이후 H2 2개마다 광고 1개 (과도한 광고 방지)
- 본문 끝에 광고 1개
- 광고는 AdPlaceholder 컴포넌트 사용
## 4. 이전 글 / 다음 글 네비게이션
- 본문 끝 광고 아래에 배치
- 왼쪽: ← 이전 글 제목 / 오른쪽: 다음 글 제목 →
- 없으면 해당 방향 비워두기
- 날짜 순 기준
## 5. 관련 글 추천
- 같은 카테고리의 글 최대 3개
- 카드 형태: 제목 + 날짜 + 요약(1줄)
- 현재 글은 제외
모든 수정 사항을 적용하고, 필요하면 lib/posts.js에
이전/다음 글, 관련 글을 가져오는 함수도 추가해줘.
AI가 수정을 끝내면 localhost:3000에서 아무 글이나 클릭해서 상세 페이지를 확인하세요.
개선된 포스트 상세 페이지
오늘 이후로 블로그에 새 글을 올리는 전체 과정을 정리합니다. 이 워크플로는 블로그를 운영하는 내내 반복하게 될 겁니다.
Cursor에서 posts/ 폴더를 우클릭 → New File
파일 이름 규칙:
✅ next-js-blog-tutorial.md (영어 소문자 + 하이픈)
✅ how-to-make-money-blog.md (URL이 되므로 의미 있는 이름)
❌ 블로그글.md (한글 URL은 SEO에 불리)
❌ My First Post.md (띄어쓰기 금지)
❌ post1.md (의미 없는 이름)
파일 이름 = URL 슬러그입니다.
next-js-blog-tutorial.md로 만들면 주소가myblog.com/posts/next-js-blog-tutorial이 됩니다. 구글은 URL에 포함된 키워드도 읽습니다. 글의 핵심 키워드를 영어로 넣으세요.
---
title: "Next.js로 블로그 만드는 완전 가이드"
date: "2025-06-20"
category: "개발"
description: "코딩 초보도 따라할 수 있는 Next.js 블로그 제작 튜토리얼. 바이브 코딩으로 30분 만에 완성하는 방법을 단계별로 알려드립니다."
thumbnail: ""
---
체크포인트:
title: 호기심을 자극하되, 핵심 키워드를 포함 (SEO용)date: YYYY-MM-DD 형식 엄수. 다른 형식은 에러 원인category: 기존에 쓴 카테고리와 정확히 동일한 이름 (대소문자 주의)description: 50~160자. 검색 결과에 보이는 2줄 요약thumbnail: 이미지가 없으면 빈 문자열("")로 두기글의 구조를 잡는 공식이 있습니다. H2 = 챕터, H3 = 소챕터로 생각하세요.
## 첫 번째 챕터 제목
도입 문단. 이 챕터에서 다룰 내용을 한 줄로 요약.
본문 내용...
### 세부 항목 1
상세 설명...
### 세부 항목 2
상세 설명...
## 두 번째 챕터 제목
본문 내용...
## 세 번째 챕터 제목
본문 내용...
이렇게 쓰면 자동 목차(TOC)에 챕터 구조가 그대로 반영됩니다. 방문자가 원하는 섹션으로 바로 점프할 수 있어 체류 시간이 늘어납니다.
수익형 글쓰기 팁: H2 소제목은 4 ~ 6개가 적당합니다. 너무 적으면 글이 얕아 보이고, 너무 많으면 산만해집니다. 구글은 ‘잘 구조화된 긴 글’을 좋아합니다. 1,500 ~ 3,000자 사이의 글이 SEO에 유리합니다.
Ctrl + S (Mac: Cmd + S). 끝입니다.
개발 서버(npm run dev)가 켜져 있다면 브라우저를 새로고침하면 새 글이 보입니다. 안 보이면 서버 재시작(Ctrl + C → npm run dev).
마크다운에서 이미지를 넣는 방법을 정리합니다.
프로젝트 안에 이미지 폴더를 만들고 거기에 저장합니다.
📁 public/
📁 images/
📁 posts/
📄 my-post-thumbnail.jpg
📄 my-post-screenshot.png
마크다운에서 이렇게 참조합니다.
public폴더 안의 파일은 URL에서/로 바로 접근할 수 있습니다.public/images/photo.jpg는myblog.com/images/photo.jpg로 접근 가능합니다.
이미 인터넷에 올라가 있는 이미지를 가져다 쓸 수 있습니다.
단, 외부 이미지는 원본 서버가 다운되면 깨집니다. 중요한 이미지는 다운로드해서 로컬에 저장하는 게 안전합니다.
이미지 파일 크기가 크면 페이지 로딩이 느려집니다. 간단한 규칙 세 가지만 지키세요.
첫째, 가로 너비는 1200px이면 충분합니다. 본문 최대 너비가 720px이므로 레티나 디스플레이를 고려해도 1200px이면 됩니다. 4000px짜리 원본 사진을 그대로 올리지 마세요.
둘째, WebP 형식을 쓰세요. JPG보다 30~50% 작으면서 품질은 거의 동일합니다. 무료 변환 사이트(squoosh.app)에서 쉽게 변환할 수 있습니다.
셋째, 파일 이름에 키워드를 넣으세요. IMG_4832.jpg 대신 nextjs-blog-folder-structure.webp처럼. 구글 이미지 검색에서 발견될 가능성이 높아집니다.
바이브 코딩은 코드만 AI에게 맡기는 게 아닙니다. 글의 뼈대도 AI에게 도움받을 수 있습니다.
Cursor 채팅이나 Claude에서 이렇게 요청해보세요.
"Next.js로 블로그 만들기"라는 주제로 블로그 글의
마크다운 뼈대를 만들어줘.
조건:
- H2 소제목 5개
- 각 소제목 아래 핵심 포인트 2~3개를 bullet으로
- frontmatter 포함
- SEO에 유리한 description 작성
- 전체 분량: 2,000자 내외
뼈대만 만들어줘. 본문은 내가 채울게.
AI가 구조를 잡아주면, 여러분은 각 섹션의 내용을 채우기만 하면 됩니다. 빈 화면에서 시작하는 것보다 훨씬 빠릅니다.
주의: AI가 쓴 글을 그대로 발행하지 마세요. 구글은 AI 생성 콘텐츠를 감지하는 기술이 점점 발전하고 있습니다. AI는 뼈대와 아이디어를 제공하는 도구이고, 실제 내용은 여러분의 경험과 관점으로 채워야 합니다. DAY 13에서 ‘AI와 함께 쓰되 구글 페널티를 피하는 법’을 자세히 다룹니다.
블로그의 글쓰기 시스템이 완성됐습니다. 이제 글을 쓸 수 있고, 쓴 글이 자동으로 블로그에 올라갑니다. 에디터 기능이 부족하다고 느껴지더라도, 이 단순한 워크플로가 수백 개의 글을 쌓는 데 가장 효율적인 방식이라는 걸 시간이 지나면 깨닫게 될 겁니다.
이 코너는 매 회 해당 단계에서 자주 겪는 문제와 해결법을 다룹니다.
에러 1: 마크다운이 렌더링되지 않고 날것 그대로 표시된다
→ 마크다운을 HTML로 변환하는 라이브러리가 제대로 작동하지 않는 겁니다. AI에게 “마크다운 렌더링이 안 되고 있어. 현재 사용 중인 마크다운 파싱 라이브러리를 확인하고, 제대로 적용되어 있는지 점검해줘”라고 요청하세요. gray-matter(frontmatter 파싱)와 remark/rehype 또는 next-mdx-remote 같은 라이브러리가 필요합니다.
에러 2: 읽는 시간이 ‘0분’으로 표시된다
→ 글자 수를 세는 함수가 마크다운 문법 기호까지 포함해서 세고 있거나 아예 본문을 못 읽고 있을 수 있습니다. AI에게 “읽는 시간 계산 함수를 확인해줘. HTML 태그와 마크다운 기호를 제거한 순수 텍스트 기준으로 분당 500자로 계산해야 해”라고 요청하세요.
에러 3: 광고가 모든 H2 사이마다 들어가서 글이 읽기 힘들다
→ 광고 삽입 로직에서 ‘H2 2개마다 1개’라는 조건이 빠진 겁니다. AI에게 “광고 자동 삽입 로직을 수정해줘. 첫 번째 H2 위에 1개, 이후로는 H2 2개마다 1개씩만 넣고, 본문 끝에 1개 추가해줘”라고 구체적으로 요청하세요.
에러 4: 이전/다음 글 링크가 잘못된 글을 가리킨다
→ 정렬 순서의 문제입니다. AI에게 “이전/다음 글 함수가 날짜 기준으로 정렬하고 있는지 확인해줘. 현재 글의 날짜보다 이전인 글 중 가장 최신이 ‘이전 글’, 이후인 글 중 가장 오래된 것이 ‘다음 글’이어야 해”라고 요청하세요.
헤더·푸터·색상·타이포를 수익 관점에서 다시 설계하고, 애드센스와 조화되는 링크 색·체크리스트까지.
create-next-app으로 뼈대 만들기, Cursor 프롬프트로 수익형 블로그 UI 생성, localhost 확인·에러 대처·마크다운 글까지 첫 화면 띄우기.
SSG·SSR로 보는 서버비 구조, Next.js vs Astro와 바이브 코딩 관점, Next.js 네 가지 개념, 도메인·애드센스까지 오늘의 선택을 한 번에 정리한다.