DAY 05 [실전] 코드 제로, ‘블로그 만들어줘’라고 말만 하세요(첫 화면 띄우기)

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

DAY 01에서 바이브 코딩을 알았고, DAY 02에서 수익형 블로그의 설계도를 그렸고, DAY 03에서 도구를 세팅했고, DAY 04에서 프레임워크와 도메인을 정했습니다.

4일 동안 한 줄의 코드도 작성하지 않았습니다. 화면에 뜬 것도 없습니다. 솔직히 좀 답답하셨죠?

이제 앞에서 했던 작업들이 빛을 발합니다.

AI에게 프롬프트를 입력하고 잠깐 기다리면, 내 컴퓨터 브라우저에서 블로그가 열립니다. 인터넷에 올리기 전, 나만 볼 수 있는 상태입니다. 하지만 분명히 ‘블로그’입니다. 헤더가 있고, 글 목록이 있고, 클릭하면 상세 페이지가 열립니다.

오늘 이 경험을 하고 나면 이 시리즈를 끝까지 따라갈 수 있다는 확신이 생길 겁니다.

시작하기 전 체크리스트

본격적으로 들어가기 전에, DAY 03에서 설치한 것들이 정상인지 30초만 확인합시다.

Cursor를 실행하고, [Terminal] 메뉴 아래 [New Terminal]을 클릭하여 터미널 창을 열어서 아래 명령어를 하나씩 입력합니다.

node -v

→ v24.x.x 같은 숫자가 나오면 정상입니다.

git --version

→ git version 2.x.x 같은 숫자가 나오면 정상입니다.

둘 다 확인됐으면 출발합니다. 만약 안 된다면 DAY 03의 에러 119 코너를 다시 확인하세요.

STEP 1: 프로젝트 생성 — AI 없이, 명령어 한 줄로 (2분)

‘AI가 블로그 다 만들어 준다며? 왜 명령어를 직접 치라는 거야?’라고 생각하실 수 있습니다.

이유가 있습니다. Next.js 프로젝트의 ‘뼈대’를 만드는 건 공식 도구가 가장 정확합니다. AI에게 이 단계를 맡기면 가끔 설정 파일을 빠뜨리거나 구버전 구조를 만들어내는 경우가 있습니다. 뼈대는 공식 도구로 만들고, 살을 붙이는 건 AI에게 맡기는 겁니다.

1-1. Cursor에서 작업 폴더 열기

DAY 03에서 만든 my-blog 폴더를 Cursor에서 엽니다.

File → Open Folder → my-blog 폴더 선택

1-2. 터미널에서 Next.js 프로젝트 생성

Cursor 하단의 터미널에 아래 명령어를 입력합니다.

npx create-next-app@latest .

명령어를 실행할 때 my-blog 폴더가 완전히 비어 있어야 오류가 나지 않습니다.

맨 끝의 점(.) 을 빠뜨리지 마세요. 이 점은 ‘현재 폴더에 만들어줘’라는 뜻입니다. 점이 없으면 새 폴더가 하나 더 생겨서 구조가 꼬입니다.

default로 진행한다는 옵션을 선택한 상태로 엔터를 치면 터미널에 뭔가가 주르르 뜨다가 ‘Success!’ 메시지와 함께 멈춥니다. 그러면 완료된 것입니다.

이거 다 뭔가요? 하나하나 설명하겠습니다.

• TypeScript: 코드의 실수를 미리 잡아주는 도구. AI가 TypeScript를 더 정확하게 씁니다.
• ESLint: 코드 문법 검사기. 오타를 잡아줍니다.
• Tailwind CSS: 디자인을 쉽게 입히는 도구. “글자 크게, 배경 파랗게”를 코드 한 줄로.
• App Router: Next.js의 최신 방식. DAY 04에서 배운 “페이지 = 파일” 구조가 이겁니다.
• Turbopack: 개발 중 변경 사항을 빠르게 반영해주는 엔진.

다 기억할 필요 없습니다. 중요한 건 그게 무엇이든 AI가 알아서 다 해준다는 사실입니다.

1-3. 설치 확인

터미널에 다음을 입력합니다.

npm run dev

몇 초 뒤, 아래와 같은 메시지가 나옵니다.

이와 유사한 메시지가 보이면, 브라우저를 열고 주소창에 localhost:3000을 입력하세요.

축하합니다. 화면에 Next.js 기본 페이지가 떴을 겁니다. 검은 배경에 Next.js 로고와 “To get started, edit the page.tsx file.”이라는 문구가 보입니다.

하지만 이것은 아직 블로그가 아닙니다. Next.js의 기본 환영 페이지일 뿐입니다. 이제 이걸 우리 블로그로 바꿀 차례입니다.

터미널에서 npm run dev가 실행 중인 동안에만 localhost:3000이 작동합니다. 터미널을 닫거나 Ctrl + C를 누르면 서버가 꺼집니다. 작업 중에는 계속 켜두세요.

STEP 2: AI에게 블로그 만들어달라고 하기 (10분)

드디어 바이브 코딩의 본격적인 시작입니다.

DAY 03에서 배운 ‘찰떡 프롬프트’를 기억하시죠? DAY 02의 설계 체크리스트를 녹인 프롬프트를 AI에게 보낼 겁니다. 이 프롬프트 하나가 오늘의 핵심입니다.

2-1. Cursor AI 채팅 열기

Ctrl + L  (Windows)
Cmd + L   (Mac)

채팅 패널이 열리면 상단에서 모델을 확인합니다. 기본으로 Auto로 되어 있을 텐데, Auto 기능을 비활성화하면 다양한 AI 모델을 확인할 수 있습니다. Claude나 GPT 중 아무거나 사용해도 괜찮지만, 여기서는 Auto 옵션을 사용하겠습니다. 그리고 Agent 모드가 켜져 있는지 확인하세요. Agent 모드는 AI가 직접 파일을 생성하고 수정할 수 있게 해줍니다.

2-2. 찰떡 프롬프트 입력

아래 프롬프트를 그대로 복사해서 붙여넣으세요. 한 글자도 바꾸지 않아도 됩니다.

너는 10년 경력의 프론트엔드 개발자야. 
지금 이 Next.js 프로젝트를 수익형 블로그로 바꿔줘.

## 전체 요구사항

1. 레이아웃: 본문 70% + 사이드바 30% 2단 구조 (데스크톱)
2. 모바일: 사이드바가 본문 아래로 이동하는 반응형
3. 색상: 배경 흰색, 글자색 #333, 포인트 컬러 #2563EB (파란색) 1가지
4. 글꼴: 본문 18px, 줄간격 1.8
5. 다크모드 지원 (토글 버튼)

## 페이지 구조

- 홈페이지(`/`): 최신 포스트 목록 (썸네일 + 제목 + 요약 + 날짜)
- 포스트 상세(`/blog/[slug]`): 마크다운 렌더링 + 자동 목차(TOC)
- 소개 페이지(`/about`): 블로그 소개
- 카테고리별 목록(`/category/[name]`)

## 컴포넌트

- Header: 로고(텍스트), 카테고리 네비게이션, 다크모드 토글
- Footer: 저작권 표시, 소개/개인정보처리방침/문의 링크
- Sidebar: 프로필 소개, 인기글 TOP 5, 카테고리 목록
- TOC: 본문의 H2/H3를 자동 추출, 스크롤 시 현재 위치 하이라이트, sticky

## 마크다운 블로그 시스템

- `/content/posts/` 폴더에 .md 파일로 글 작성
- frontmatter에 title, date, category, description, thumbnail 포함
- 예시 포스트 3개 생성 (더미 데이터)

## 광고 영역

- 실제 광고 코드 대신 "광고 영역"이라고 표시된 플레이스홀더 배치
- 위치: 포스트 제목 아래, 본문 중간, 본문 끝, 사이드바 상단 (총 4곳)

## 기술 제약

- Next.js App Router + TypeScript + Tailwind CSS 사용 (이미 설치됨)
- SSG(정적 생성) 방식으로 빌드 가능해야 함
- 외부 DB 없이 마크다운 파일만으로 운영

지금 바로 전체 코드를 작성해줘. 
파일을 하나씩 만들고, 각 파일이 무슨 역할인지 주석으로 설명해줘.

이 프롬프트 안에 DAY 02의 설계도(ㄱ자 레이아웃, 광고 위치 4곳, 색상 3가지, 반응형)와 DAY 04의 기술 결정(Next.js, SSG, 마크다운)이 전부 녹아 있습니다. 기획이 곧 프롬프트가 된다는 말이 바로 이겁니다.

2-3. AI가 일하는 동안

프롬프트를 입력하면 AI가 파일을 하나씩 만들기 시작합니다. Cursor의 Agent 모드에서는 AI가 직접 파일을 생성하고 코드를 작성합니다.

이때 여러분이 할 일:

1. AI가 파일을 만들 때마다 [Accept] 또는 [Apply]를 눌러주세요. AI가 제안한 변경사항을 승인하는 겁니다.
2. 중간에 질문이 오면 [Yes] 또는 [진행해줘]라고 답하세요.
3. 절대 하지 말아야 할 것: AI가 작업 중일 때 직접 파일을 수정하지 마세요. 충돌이 납니다.

AI가 모든 파일을 다 만들 때까지 기다립니다. 보통 2~5분 정도 걸립니다.

STEP 3: 내 블로그 첫 확인 (3분)

AI가 작업을 끝냈으면, 블로그가 제대로 돌아가는지 확인해봅시다.

3-1. 필요한 패키지 설치

AI가 새로운 라이브러리를 사용했을 수 있습니다. 터미널에서 아래를 실행합니다.

잠깐! 이미 npm run dev가 실행 중이라면, 먼저 Ctrl + C로 멈춘 뒤 실행하세요.

npm install

그러면 다음과 같이 패키지가 몇 개 설치되었는지 보여줍니다.

3-2. 개발 서버 다시 켜기

npm run dev

3-3. 브라우저에서 확인

localhost:3000으로 이동합니다. 이미 열려 있다면 새로고침(F5)하세요.

이제 Next.js 기본 페이지가 아니라, 블로그 형태의 페이지가 보일 겁니다.

이런 화면이 보여야 정상입니다.

3-4. 포스트 상세 페이지 확인

글 제목을 클릭해서 상세 페이지로 들어가보세요.

DAY 02에서 설계한 구조가 그대로 구현된 게 보이시나요? ㄱ자 레이아웃, 광고 위치 4곳, 사이드바의 목차와 인기글. 기획이 곧 결과물이 된 겁니다.

3-5. 모바일 확인

앞에서 블로그 사용자 중 모바일 사용자의 비중이 높다는 사실을 언급했습니다. 따라서 모바일에서도 제대로 보이는지 확인해야 합니다. 그런데 이때 진짜 휴대폰으로 볼 필요 없습니다. 브라우저에서 F12를 누르면 개발자 도구가 열립니다. 상단의 디바이스 토글을 클릭하면 모바일 화면 크기로 바뀝니다.

사이드바가 아래로 내려가고, 1단 레이아웃으로 바뀌는지 확인하세요. DAY 02에서 분석했던 모바일 전략이 적용된 겁니다.

STEP 4: 에러가 났다면 — 당황하지 마세요

이 단계에서 에러가 날 확률은 꽤 높습니다. 정상입니다. 이게 바이브 코딩의 현실이고, 여기서 포기하면 안 됩니다.

에러 대처 3단계 공식

어떤 에러든 이 순서로 해결합니다. 앞으로 이 시리즈 내내, 그리고 이 시리즈가 끝난 후에도 이 공식을 쓸 겁니다.

1단계: 에러 메시지를 AI에게 그대로 보내기

터미널이나 브라우저에 빨간 에러 메시지가 뜨면, 그 메시지를 통째로 복사합니다.

Cursor 채팅창(Ctrl+L)에 이렇게 보냅니다.

아래 에러가 발생했어. 원인을 분석하고 수정해줘.

[에러 메시지 전체를 여기에 붙여넣기]

AI가 원인을 분석하고 수정 코드를 제안할 겁니다. [Apply]를 누르세요.

2단계: 서버 재시작

AI가 수정한 후에도 에러가 계속되면 터미널에서 서버를 껐다 켭니다.

# Ctrl + C로 서버 중지 후
npm run dev

놀라울 정도로 많은 에러가 ‘껐다 켜기’로 해결됩니다.

3단계: 초기화 후 재설치

그래도 안 되면 의존성(라이브러리)을 깨끗이 다시 설치합니다.

# Ctrl + C로 서버 중지 후
rm -rf node_modules
rm -rf .next
npm install
npm run dev

이 세 단계로 해결이 안 되는 경우는 극히 드뭅니다. 만약 여전히 안 된다면 AI에게 “처음부터 다시 만들어줘”라고 해도 됩니다. 바이브 코딩의 장점은 AI가 지치지 않는다는 겁니다. 열 번이고 스무 번이고 다시 시킬 수 있습니다.

STEP 5: 폴더 구조 둘러보기 — 코드를 읽는 게 아니라 ‘지도’를 읽는 것 (5분)

블로그가 돌아가는 걸 확인했으니, AI가 만들어준 폴더 구조를 한 번 살펴봅시다. 코드를 한 줄 한 줄 이해할 필요 없습니다. ‘이 파일이 뭘 담당하는지’만 알면 됩니다.

Cursor 왼쪽의 탐색기(Explorer) 패널을 보면, 대략 이런 구조일 겁니다.

📁 my-blog/
├── 📁 app/                    ← 페이지들 (URL과 1:1 대응)
│   ├── 📄 layout.tsx          ← 모든 페이지의 공통 틀 (헤더+푸터)
│   ├── 📄 page.tsx            ← 홈페이지 (/)
│   ├── 📁 blog/
│   │   └── 📁 [slug]/
│   │       └── 📄 page.tsx    ← 포스트 상세 (/blog/글제목)
│   ├── 📁 about/
│   │   └── 📄 page.tsx        ← 소개 페이지 (/about)
│   └── 📁 category/
│       └── 📁 [name]/
│           └── 📄 page.tsx    ← 카테고리별 목록 (/category/개발)
│
├── 📁 components/             ← 재사용 부품들 (레고 블록)
│   ├── 📄 Header.tsx          ← 상단 네비게이션
│   ├── 📄 Footer.tsx          ← 하단 푸터
│   ├── 📄 Sidebar.tsx         ← 오른쪽 사이드바
│   ├── 📄 TOC.tsx             ← 자동 목차
│   ├── 📄 PostCard.tsx        ← 글 목록의 카드 한 장
│   └── 📄 AdPlaceholder.tsx   ← 광고 자리 표시
│
├── 📁 content/                ← 실제 글이 저장되는 곳
│   └── 📁 posts/
│       ├── 📄 first-post.md   ← 첫 번째 글 (마크다운)
│       ├── 📄 second-post.md  ← 두 번째 글
│       └── 📄 third-post.md   ← 세 번째 글
│
├── 📁 lib/                    ← 유틸리티 (글 불러오기 등)
│   └── 📄 posts.ts            ← 마크다운 파일 읽는 함수
│
├── 📄 tailwind.config.ts      ← Tailwind 디자인 설정
├── 📄 next.config.ts          ← Next.js 전체 설정
└── 📄 package.json            ← 프로젝트 정보 + 설치된 라이브러리 목록

AI가 만든 구조가 위와 100% 같지 않을 수 있습니다. 폴더 이름이나 파일 배치가 약간 다를 수 있지만, 큰 틀은 동일할 겁니다. 다르더라도 걱정하지 마세요. 중요한 건 구조가 아니라 ‘블로그가 돌아가느냐’입니다.

기억할 것은 딱 3가지

이 폴더 구조에서 앞으로 여러분이 직접 건드릴 곳은 딱 3군데입니다.

① content/posts/ — 글 쓰는 곳 여기에 마크다운 파일을 추가하면 블로그에 새 글이 올라갑니다. DAY 08에서 자세히 다룹니다.

② components/ — 디자인 바꾸는 곳 “헤더 색깔 바꿔줘”, “사이드바에 태그 클라우드 추가해줘” 같은 요청을 할 때 AI가 수정하는 파일들입니다.

③ app/ — 페이지 추가하는 곳 “문의 페이지 만들어줘” 같은 요청을 할 때 여기에 새 폴더와 파일이 추가됩니다.

나머지 파일은 건드릴 일이 거의 없습니다. 존재를 아는 것만으로 충분합니다.

STEP 6: 마크다운으로 글 하나 직접 써보기 (5분)

AI가 만들어준 더미 글만 보면 감이 안 옵니다. 직접 글 하나를 써봅시다.

6-1. 새 마크다운 파일 만들기

Cursor 왼쪽 탐색기에서 content/posts/ 폴더를 찾습니다. 폴더를 우클릭하고 [New File] 을 선택합니다.

파일 이름: my-first-real-post.md

파일 이름은 영어 소문자와 하이픈(-)만 사용합니다. 이 이름이 URL이 됩니다. (myblog.com/blog/my-first-real-post)

6-2. 글 작성

파일이 열리면 아래 내용을 붙여넣으세요. 물론 내용은 자유롭게 바꿔도 됩니다.

---
title: "나의 첫 블로그 글: 바이브 코딩으로 블로그를 만들다"
date: "2025-06-15"
category: "일상"
description: "코딩을 전혀 모르는 내가 AI와 대화만으로 블로그를 만든 후기"
thumbnail: ""
---

## 시작은 단순한 호기심이었다

티스토리에서 블로그를 운영하고 있었다. 나쁘지 않았다. 
하지만 광고 수익의 대부분을 플랫폼이 가져간다는 걸 알게 된 순간, 
내 소유의 블로그를 갖고 싶다는 생각이 들었다.

문제는 코딩을 전혀 모른다는 것.

## 바이브 코딩이라는 걸 알게 됐다

바이브 코딩은 AI에게 "이런 거 만들어줘"라고 말하면 
AI가 코드를 작성해주는 방식이다. 
나는 코드를 쓰는 대신 "무엇을 만들지"를 기획하고 지시하는 역할을 한다.

솔직히 반신반의했다. 그런데 진짜 됐다.

## 지금 이 블로그가 그 결과물

이 글을 읽고 있는 이 블로그가, 
바이브 코딩으로 만든 내 소유의 블로그다. 
서버비는 0원이고, 도메인 비용 월 1,000원만 든다.

다음 글에서는 어떤 과정으로 만들었는지 하나씩 풀어보겠다.

6-3. 저장하고 확인

Ctrl + S(Mac: Cmd + S)로 저장합니다.

브라우저에서 localhost:3000을 새로고침(F5)하세요. 글 목록에 방금 쓴 글이 추가되어 있을 겁니다.

클릭하면 상세 페이지가 열리고, 마크다운이 예쁘게 렌더링된 걸 확인할 수 있습니다.

이 순간을 기억하세요. 코드를 한 줄도 쓰지 않고, 마크다운 파일 하나를 추가했을 뿐인데, 블로그에 새 글이 올라갔습니다. 앞으로 글을 쓸 때마다 이 방식을 반복합니다. 파일 하나 만들고, 저장하고, 끝.

새 글이 안 보인다면? 개발 서버를 껐다 켜보세요 (Ctrl + C → npm run dev). 정적 사이트 방식이라 새 파일을 인식하는 데 재시작이 필요한 경우가 있습니다.

솔직히 말하면, 지금 블로그의 디자인은 완벽하지 않을 겁니다. 색상이 마음에 안 들 수도 있고, 레이아웃이 좀 어색할 수도 있습니다. 괜찮습니다. 2주차에 하나씩 다듬을 겁니다.

중요한 건 ‘되는구나’라는 확신이 생겼다는 겁니다.

오늘의 에러 119 🚨

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

에러 1: npx create-next-app@latest . 입력했는데 “directory is not empty”

→ my-blog 폴더 안에 이미 파일이 있다는 뜻입니다. DAY 03에서 AI와 대화하면서 파일이 생겼을 수 있습니다. 폴더 안의 모든 파일을 삭제하고 다시 시도하세요. 또는 새 빈 폴더를 만들어서 시작해도 됩니다.

에러 2: npm run dev 후 “Module not found” 에러

→ AI가 사용한 라이브러리가 아직 설치되지 않은 겁니다. 에러 메시지에 나오는 모듈 이름을 확인하고, AI에게 “이 에러 해결해줘”라고 보내세요. 대부분 npm install 모듈이름 한 줄로 해결됩니다.

에러 3: 페이지가 뜨긴 하는데 디자인이 완전히 깨져 보인다

→ Tailwind CSS가 제대로 적용되지 않았을 가능성이 높습니다. AI에게 “Tailwind CSS가 적용되지 않는 것 같아. tailwind.config.ts와 globals.css를 확인하고 수정해줘”라고 요청하세요. Tailwind의 content 설정에 파일 경로가 빠져 있는 경우가 많습니다.

에러 4: 마크다운 글을 추가했는데 목록에 안 나온다

→ 세 가지를 확인하세요. 첫째, 파일 위치가 content/posts/ 안이 맞는지. 둘째, 파일 확장자가 .md인지. 셋째, frontmatter(맨 위의 ---로 감싼 부분)의 형식이 기존 더미 파일과 동일한지. 특히 date 형식이 다르면 정렬에서 제외될 수 있습니다.

에러 5: “뭔가 다 꼬인 것 같아요. 처음부터 다시 하고 싶어요.”

→ 완전히 정상적인 감정입니다. 그리고 해결법도 간단합니다. my-blog 폴더를 통째로 삭제하고, 새 폴더를 만들고, STEP 1부터 다시 시작하세요. 10분이면 됩니다. 프로그래머들도 ‘처음부터 다시 만드는 게 빠르겠다’는 판단을 자주 합니다. 이건 실패가 아니라 전략입니다.