What I Do

바이브 코딩으로 개인 블로그 만들기 | Next.js 기반 기획부터 배포까지

바이브 코딩AI디지털 마케팅
바이브 코딩으로 개인 블로그 만들기 | Next.js 기반 기획부터 배포까지

Next.js 16, Tailwind CSS, MDX를 활용한 개인 블로그를 AI 도구로 기획부터 배포까지 만든 과정을 정리합니다. 이 글에서는 왜 직접 블로그를 만들기로 했는지, 어떤 기술 스택을 선택했는지, 그리고 Claude Code를 어떻게 활용했는지를 실제 제작 과정 중심으로 공유합니다.

왜 블로그 플랫폼 대신 직접 만들었을까요?

티스토리, 브런치, 워드프레스 같은 블로그 플랫폼은 글쓰기에 집중할 수 있다는 장점이 있습니다. 하지만 마케팅 실무자의 관점에서 몇 가지 아쉬운 점이 있었습니다.

첫째, SEO를 세밀하게 제어하기 어렵습니다. 사이트맵 구조, robots.txt, JSON-LD 구조화 데이터, OG 이미지 등을 원하는 대로 설정하려면 직접 만드는 것이 확실합니다. 둘째, GTM과 GA4를 자유롭게 연동하고 싶었습니다. 이벤트 설계부터 A/B 테스트까지, 실무에서 다루는 도구를 블로그에 직접 적용해보고 싶었습니다. 셋째, 디자인과 구조를 완전히 제어할 수 있어야 했습니다.

블로그 플랫폼 vs 직접 제작 비교

물론 직접 만들면 개발 리소스가 필요합니다. 하지만 바이브 코딩 덕분에 그 리소스가 크게 줄었습니다. 이전 글에서 소개한 GA4 개인정보 처리방침 생성기를 만들면서 바이브 코딩의 가능성을 확인했고, 이번에는 한 단계 더 나아가 완성도 높은 웹사이트를 만들어보기로 했습니다.

기술 스택은 어떻게 선택했을까요?

블로그의 기술 스택을 선택할 때 세 가지 기준을 세웠습니다. 빠른 페이지 속도(SSG 기반), 콘텐츠 관리의 편의성(마크다운 기반), 배포와 유지보수의 간편함(무료 호스팅)이 그것입니다.

블로그 기술 스택 구성도

프레임워크: Next.js 16

Next.js는 React 기반의 웹사이트 제작 프레임워크입니다. 블로그처럼 콘텐츠가 자주 바뀌지 않는 사이트에 적합한데요, 미리 페이지를 만들어두기 때문에 로딩 속도가 매우 빠릅니다. 폴더 구조만으로 페이지가 자동 생성되어 관리도 편합니다.

콘텐츠: MDX

MDX는 마크다운(Markdown)에 JSX 컴포넌트를 삽입할 수 있는 포맷입니다. 일반 마크다운으로 글을 작성하면서도, 필요한 경우 인터랙티브한 컴포넌트를 본문에 넣을 수 있습니다. next-mdx-remote를 사용하면 MDX 파일을 content/ 폴더에서 관리하고 빌드 시 정적 페이지로 변환할 수 있습니다. CMS 없이도 파일 기반으로 콘텐츠를 관리할 수 있는 셈입니다.

스타일링: Tailwind CSS (네오브루탈리즘 디자인)

Tailwind CSS는 유틸리티 클래스 기반의 CSS 프레임워크입니다. 디자인 시스템을 따로 구축하지 않아도 일관된 스타일을 빠르게 적용할 수 있어 바이브 코딩과 궁합이 좋습니다. 블로그의 디자인 컨셉은 네오브루탈리즘(Neobrutalism) 으로 잡았는데요, 굵은 테두리, 선명한 색상, 드롭 섀도우가 특징인 스타일입니다. AI에게 "네오브루탈리즘 스타일로 카드 컴포넌트를 만들어줘"라고 요청하면 Tailwind 클래스 조합으로 바로 구현해줍니다.

배포: Vercel

Vercel은 Next.js를 만든 회사에서 운영하는 호스팅 플랫폼입니다. GitHub 저장소와 연결하면 코드를 push할 때마다 자동으로 빌드와 배포가 진행됩니다. 개인 프로젝트 규모에서는 무료 플랜으로 충분하고, CDN을 통한 전 세계 배포, HTTPS 자동 적용 등이 기본 제공됩니다.

AI 도구는 어떻게 활용했을까요?

이번 프로젝트에서는 Claude Code를 메인 도구로 활용했습니다. Claude Code는 터미널 기반의 AI 코딩 도구로, 프로젝트 전체 코드베이스를 이해하고 대화하듯이 기능을 만들어 나갈 수 있습니다. 이번 프로젝트에서는 다음 작업을 모두 Claude Code로 진행했습니다.

예를 들어, "MDX 파일의 frontmatter에서 keywords를 읽어서 각 포스트 페이지의 meta 태그에 반영해줘"라고 요청하면, 필요한 라이브러리를 활용해 코드를 한 번에 작성해줍니다. 구조 설계부터 디자인, SEO, 분석 도구 연동까지 하나의 도구로 전부 해결할 수 있다는 점이 바이브 코딩의 가장 큰 장점이었습니다.

블로그 제작, 어떤 순서로 진행했을까요?

전체 작업은 크게 5단계로 나눌 수 있습니다.

블로그 제작 5단계 프로세스

1단계: 기획과 구조 설계

가장 먼저 블로그에 필요한 기능과 페이지를 정리했습니다. 홈, 카테고리별 목록, 개별 포스트, 소개 페이지가 기본 구조이고, 여기에 검색 기능과 카테고리 네비게이션을 추가했습니다. 카테고리는 콘텐츠 성격에 따라 5개로 나누었습니다.

이 구조를 Claude Code에 전달하고, 폴더 구조와 페이지 자동 생성 설정을 요청했습니다.

2단계: MDX 콘텐츠 시스템 구축

블로그의 핵심인 MDX 콘텐츠 시스템을 구축했습니다. content/ 폴더 아래에 카테고리별 폴더를 만들고, 각 MDX 파일의 frontmatter에 제목, 날짜, 썸네일, 요약, 키워드를 정의하는 구조입니다.

content/
├── what-i-do/
│   ├── ga4-privacy-policy-generator.mdx
│   └── vibe-coding-blog-build.mdx
├── what-i-think/
├── what-i-like/
├── where-i-go/
└── what-i-listen/

gray-matter로 frontmatter를 파싱하고, next-mdx-remote로 MDX 본문을 렌더링하며, rehype-pretty-code로 코드 블록에 구문 강조를 적용했습니다. reading-time 라이브러리로 예상 읽기 시간도 자동 계산됩니다.

3단계: 디자인과 UI 구현

네오브루탈리즘 컨셉에 맞춰 UI를 구현했습니다. Claude Code에 "이 카드 컴포넌트에 3px 검은 테두리와 4px 오프셋 그림자를 추가해줘"처럼 구체적인 스타일 지시를 내리면 Tailwind 클래스로 바로 반영해줍니다.

framer-motion을 활용한 페이지 전환 애니메이션도 추가했습니다. "페이지 진입 시 아래에서 위로 슬라이드하면서 페이드인하는 애니메이션을 넣어줘"라고 요청하면, motion.div와 적절한 initial/animate 속성을 설정해줍니다.

4단계: SEO 최적화

마케팅 블로그인 만큼 SEO에 특히 신경을 썼습니다. 다음 항목들을 Claude Code로 구현했습니다.

이 작업들은 "사이트맵을 자동 생성하는 sitemap.ts 파일을 만들어줘. content 폴더의 모든 MDX 파일을 순회해서 URL 목록을 생성해야 해"처럼 요구사항을 구체적으로 전달하면, Claude Code가 적절한 코드를 생성해줍니다.

5단계: 분석 도구 연동과 배포

마지막으로 GTM과 GA4를 연동하고 Vercel에 배포했습니다. GTM 컨테이너 스크립트를 삽입하고, 페이지 조회, 글 읽기 완료, 태그 클릭 등 GA4에서 추적할 이벤트를 설정했습니다. 블로그의 어떤 콘텐츠가 인기 있는지, 방문자들이 어떤 경로로 유입되는지를 파악할 수 있게 됩니다.

Vercel 배포는 GitHub 저장소를 연결하는 것만으로 완료됩니다. 이후에는 새 글을 작성하고 git push만 하면 자동으로 빌드와 배포가 진행되는 워크플로우가 완성됩니다.

바이브 코딩으로 블로그를 만들며 느낀 점

기획 문서가 코드의 품질을 결정합니다

이전 글에서도 강조했지만, 바이브 코딩에서 가장 중요한 것은 기획입니다. "블로그 만들어줘"라고 하면 평범한 결과가 나오지만, "Next.js 블로그, 마크다운 콘텐츠, 5개 카테고리, 네오브루탈리즘 디자인"처럼 구체적으로 요구사항을 전달할수록 결과물의 완성도가 올라갑니다.

AI 도구를 조합하면 생산성이 극대화됩니다

Claude Code 하나로 구조 설계부터 디자인, SEO, 분석 연동까지 전부 처리할 수 있었습니다. 필요할 때 기획 문서를 정리하는 용도로 다른 AI 도구를 보조적으로 활용하는 정도였습니다. 도구를 많이 쓰는 것보다, 하나의 도구에 명확한 요구사항을 전달하는 것이 바이브 코딩의 핵심이라고 볼 수 있습니다.

실무 지식이 있어야 좋은 결과물이 나옵니다

AI가 코드를 작성해주더라도, SEO 전략이나 GA4 이벤트 설계 같은 실무 지식은 사람이 가지고 있어야 합니다. "JSON-LD에 FAQPage 스키마를 적용해줘"라고 요청하려면, 그것이 왜 필요한지 알고 있어야 하기 때문입니다. 바이브 코딩은 구현 능력의 제약을 없애주지만, 무엇을 만들어야 하는지는 여전히 사람의 몫인 셈입니다.

자주 묻는 질문

바이브 코딩으로 블로그를 만드는 데 얼마나 걸리나요?

기획 단계를 포함해서 기본 구조를 완성하는 데 약 1~2주 정도 소요되었습니다. 다만 이 기간은 SEO 최적화, GA4 연동, A/B 테스트 등 부가 기능까지 포함한 것입니다. 단순히 글을 쓰고 보여주는 블로그라면 하루 이내에도 충분히 만들 수 있습니다. 중요한 것은 한 번에 완성하려 하지 말고, 기본 기능부터 만든 뒤 점진적으로 기능을 추가해 나가는 것입니다.

개발 경험이 없어도 Next.js 블로그를 만들 수 있을까요?

가능합니다. 다만 HTML, CSS의 기본 개념 정도는 이해하고 있으면 AI가 생성한 코드를 검토하고 수정 요청을 하기가 훨씬 수월합니다. 완전히 코드를 모르더라도 AI 도구에게 "이 부분의 간격을 넓혀줘", "이 버튼 색상을 바꿔줘" 같은 요청은 할 수 있지만, "페이지가 왜 안 뜨지?" 같은 문제를 해결하려면 기본적인 이해가 도움이 됩니다. 개발 경험보다는 자신이 만들고자 하는 것을 명확하게 설명할 수 있는 기획 능력이 더 중요합니다.

참고 자료

이 글이 도움이 되셨다면, 바이브 코딩으로 GA4 개인정보 처리방침 생성기를 만든 과정도 함께 확인해보세요.