Next.js와 MDX로 동작하는 개인 블로그 한 벌을 45분 안에 완성합니다. Claude Code에게 “MDX 지원 붙여주세요”, “목록 페이지 만들어주세요” 같은 한국어 요청만으로 프로젝트 생성부터 frontmatter 파싱·동적 라우팅·Tailwind Typography 스타일·SEO 메타까지 차근차근 붙여보는 흐름이에요. 소요 시간 45분, 난이도 ★★☆, 준비물은 Node.js와 Claude Code 정도. 각 단계 끝에 “이 신호가 보이면 다음으로” 기준이 있어서 중간에 막혀도 되짚어 가기 쉽게 구성했습니다.
📑 목차
🤔 내 글을 정리할 공간 하나쯤은 있었으면
공부한 걸 정리하거나, 만들어본 프로젝트의 회고를 남기고 싶을 때 대부분 먼저 떠올리는 선택지가 있어요. Tistory, Velog, Notion, Brunch 같은 호스팅 서비스들이요. 가입 한 번으로 글쓰기 창이 열리니 시작이 쉽죠. 문제는 조금 쓰다 보면 벽에 부딪힌다는 점이에요. 디자인이 마음에 안 들어도 손댈 수 있는 범위가 정해져 있고, 어느 순간 플랫폼 정책이 바뀌면 내 글이 예상 못한 위치에 놓이기도 하거든요.
그래서 “직접 만든 내 블로그”에 대한 갈증이 생기는데, 이번엔 다른 벽이 옵니다. “이거 개발자가 하는 일 아닌가?” 생각이 들면서 손이 멈추는 거예요. 예전이라면 맞는 말이었어요. React·Next.js·MDX·배포까지 전부 혼자 공부해서 짜야 했으니까요. 지금은 사정이 꽤 달라졌습니다. 프레임워크 설정·데이터 읽기·라우팅 같은 기계적인 코드는 Claude Code 같은 AI에게 한국어로 부탁하면 상당 부분 알아서 만들어줘요.
이 글에서는 그 흐름을 실제로 밟아봅니다. Next.js 프로젝트를 만들고, MDX 파일로 글을 관리하고, 목록과 개별 페이지를 붙여서 45분 뒤엔 “파일 하나 추가 = 새 글 한 편”이라는 구조를 손에 쥐는 게 목표예요. 완성 시점에는 Vercel에 그대로 올릴 수 있는 블로그 코드와, AI에게 확장 기능을 요청할 수 있는 감각이 남습니다.
👀 45분 뒤 완성될 블로그 모습
완성본은 네 가지 화면이 자연스럽게 엮인 Next.js 블로그예요. 홈(/)에서는 최근 글 몇 편이 미리보기로 뜨고, 목록 페이지(/posts)에서는 모든 글을 카드 형태로 날짜 역순으로 볼 수 있어요. 개별 글 페이지(/posts/[slug])에서는 MDX 파일의 본문이 제목·날짜·태그와 함께 잘 읽히는 타이포그래피로 열립니다. 상단 네비게이션과 하단 푸터는 공통 레이아웃으로 묶여 있어서, 어떤 글을 읽든 내비게이션이 유지돼요.
가장 중요한 부분은 글 추가 방식이에요. content/posts/ 폴더에 my-post.mdx 같은 파일 하나만 새로 만들고 상단에 제목·날짜·요약 메타데이터를 적으면 끝입니다. 관리자 페이지에 로그인할 필요도, 데이터베이스를 다룰 필요도 없어요. 글 쓰는 감각은 Notion이나 에디터 앱과 거의 같고, 결과물은 완전히 내 소유의 정적 사이트로 나오는 거죠.
🤝 왜 Next.js + MDX인가 — 다른 선택지와의 비교
개인 블로그를 만드는 방법은 생각보다 많아요. 각각 장단점이 또렷하니, 이 글의 스택을 고른 이유도 같이 짚어드릴게요.
| 방법 | 시작 난이도 | 디자인 제어 | 비용 | 확장성·생태계 |
|---|---|---|---|---|
| Tistory·Velog·Brunch | ★☆☆ (가입 즉시) | 제한적 (정해진 테마) | 무료(광고 포함) | 플랫폼 내 기능에 종속 |
| Hugo·Jekyll (정적 사이트 생성기) | ★★☆ | 테마 기반 + 커스텀 | Netlify·GitHub Pages 무료 | 중간·Ruby·Go 생태계 |
| Next.js + MDX | ★★☆ (이 글에서 해결) | 완전 제어 | Vercel 무료·광고 없음 | React 생태계 전체 활용 |
| WordPress | ★★☆ (호스팅 필요) | 플러그인·테마 | 호스팅비 월 1~2만원대 | 플러그인 생태계 방대 |
경험상 비전공자가 처음 블로그를 만들 때 가장 효과가 큰 조합이 Next.js + MDX예요. 디자인을 본인 취향대로 쥐고 갈 수 있으면서, 글 자체는 마크다운 파일로 가볍게 관리할 수 있거든요. Vercel 무료 배포까지 붙이면 광고 한 줄 없는 깔끔한 사이트가 URL 하나로 뜹니다. 무엇보다 React 컴포넌트를 글 안에 직접 꽂을 수 있어서, 나중에 “인터랙티브 예제”, “커스텀 임베드” 같은 걸 얹기가 다른 방식보다 훨씬 유연해요.
📦 시작 전 체크할 세 가지
본격적으로 들어가기 전에 아래 세 가지가 준비돼 있으면 “45분”이 현실적으로 맞아 떨어집니다. 이미 다 있으시면 바로 다음 섹션으로 넘어가셔도 돼요.
🟢 Node.js (LTS)
Next.js를 돌리려면 Node.js가 있어야 해요. 버전은 LTS(22.x 계열 이상) 기준이면 충분합니다. 설치 여부는 터미널에서 node --version을 쳐서 숫자가 나오면 OK. 아직이라면 바이브코딩 Node.js 설치 가이드부터 끝내주세요.
🤖 Claude Code
이 글은 Claude Code를 기본 도구로 가정합니다. 설치·로그인이 완료돼 있어야 해요. Cursor로도 같은 흐름을 따라갈 수 있지만, 예시 프롬프트는 Claude Code 대화형 세션 기준입니다. 준비가 아직이라면 Claude Code 설치부터 첫 코딩까지 가이드를 먼저 보고 오시면 편해요.
📝 VS Code
파일을 열고 편집하는 에디터예요. 내장 터미널에서 claude를 바로 실행할 수 있어서 흐름이 끊기지 않거든요. Next.js 기본 구조가 처음이시면 바이브코딩 Next.js 프로젝트 만들기를 한 번 훑어보시면 45분 공약이 훨씬 편해집니다.
🧑💻 바이브코딩 블로그 만들기 — 45분 5단계
지금부터는 순서대로 따라오시면 됩니다. 각 단계 끝에 “이 신호가 보이면 다음으로” 기준이 있어요. 신호가 안 맞는 채로 진도를 빼면 뒤에서 원인을 찾기가 까다로워지니, 급하셔도 중간 확인은 꼭 한 번씩 해주세요.
🚀 단계 1. Next.js 프로젝트 생성하기 (5분)
첫 단계는 블로그가 올라탈 프레임워크 뼈대를 깔아두는 일이에요. VS Code에서 터미널을 하나 연 뒤 바탕화면이나 원하는 작업 폴더로 이동해서 아래 명령어를 실행해주세요.
npx create-next-app@latest my-blog중간에 몇 가지를 묻습니다. TypeScript·ESLint·Tailwind CSS는 모두 Yes, App Router도 Yes, Turbopack은 기본값 그대로 두시면 됩니다. 설치가 끝나면 cd my-blog && npm run dev로 서버를 띄우고, 브라우저에서 http://localhost:3000을 열었을 때 Next.js 기본 화면이 보이면 첫 단계는 끝입니다.
📝 단계 2. MDX 지원과 폴더 구조 추가하기 (7분)
이번 단계부터는 Claude Code에게 일을 시킵니다. VS Code의 내장 터미널을 하나 더 열어 claude로 세션을 시작한 뒤 아래 프롬프트를 그대로 붙여 넣어보세요.
이 Next.js 프로젝트에 MDX 블로그 기능을 추가해주세요. 필요한 패키지(@next/mdx, @mdx-js/loader, @mdx-js/react, @types/mdx, gray-matter)를 설치하고, next.config.ts에서 pageExtensions에 mdx를 추가한 다음 MDX 플러그인을 등록해주세요. 그리고 프로젝트 루트에 content/posts 폴더를 만들고 샘플 글 2개(hello-world.mdx, first-post.mdx)를 생성해주세요. 각 파일은 상단에 frontmatter(title, date, summary, tags 배열)가 있고 그 아래 마크다운 본문이 들어갑니다. 마지막으로 tailwindcss/typography 플러그인을 설치해 tailwind.config에 등록해주세요.
app/에는 “어떤 URL에서 무엇을 보여줄지”가 들어가고, content/posts/에는 “실제 글”이 들어가요.Claude가 수정을 제안하면 승인해주세요. VS Code 탐색기에 content/posts/ 폴더가 생기고 그 안에 샘플 .mdx 파일 두 개가 보이면 두 번째 단계는 끝난 겁니다. 이 순간부터 “새 글 = 새 파일” 구조가 생겼다고 보시면 돼요.
📚 단계 3. 목록 페이지 만들기 (10분)
이제 방문자가 글 목록을 보게 될 페이지를 만듭니다. Claude Code 세션에 아래 프롬프트를 이어서 보내주세요.
app/posts/page.tsx를 작성해주세요. 서버 컴포넌트에서 fs로 content/posts 폴더의 모든 .mdx 파일을 읽고, gray-matter로 frontmatter를 파싱한 뒤, 날짜 역순으로 정렬해 렌더링합니다. 각 글은 카드 형태로 제목·날짜·요약·태그를 보여주고, 제목을 클릭하면 /posts/[slug]로 이동해야 합니다. Tailwind로 깔끔한 세로 레이아웃, 카드 간 여백은 넉넉히 부탁합니다.
브라우저에서 http://localhost:3000/posts를 새로고침해서 샘플 글 두 개가 최신 날짜 순으로 목록에 보이면 세 번째 단계는 끝난 상태입니다. 카드 디자인이 아쉬우면 “카드 테두리를 둥글게 하고 호버 시 살짝 올라가는 효과를 넣어주세요” 같은 후속 요청으로 다듬을 수 있어요.
📄 단계 4. 개별 글 페이지 만들기 (13분)
이 단계가 가장 재미있으면서도 초보자분들이 살짝 막히는 구간이에요. 동적 라우트·정적 파라미터 생성·MDX 컴파일이 한꺼번에 들어가거든요. 다행히 이 전부를 한 문장 프롬프트로 요청할 수 있습니다.
app/posts/[slug]/page.tsx를 작성해주세요. 동적 세그먼트 slug를 받아 content/posts/{slug}.mdx 파일을 읽고, MDX 본문을 렌더링합니다. frontmatter의 제목·날짜·태그를 본문 위에 출력하고, 본문은 prose(Tailwind Typography) 클래스로 감싸 읽기 좋게 보여주세요. generateStaticParams로 content/posts의 모든 .mdx 파일에 대한 slug를 미리 생성해 정적 빌드가 가능하게 해주시고, 해당 파일이 없으면 notFound()를 호출합니다.
Claude의 변경을 승인한 뒤 목록 페이지에서 샘플 글 제목을 클릭해보세요. 개별 글 페이지가 뜨고 본문이 prose 스타일(적당한 줄 간격·헤딩 크기·코드 블록 스타일 등)로 보이면 네 번째 단계까지 잘 온 겁니다. 이 시점에서 블로그의 핵심 뼈대는 전부 완성된 상태예요. 나머지는 보기 좋게 다듬는 작업입니다.
✨ 단계 5. SEO·스타일 마무리 (10분)
마지막 단계에서는 검색 엔진과 공유 플랫폼(카카오톡·트위터 등)에서 잘 보이도록 메타데이터를 붙이고, 홈 화면과 공통 레이아웃을 정리합니다.
app/posts/[slug]/page.tsx에 generateMetadata를 추가해 각 글의 title·description·openGraph 태그가 frontmatter에서 자동 생성되게 해주세요. app/layout.tsx에 공통 헤더(로고 + ‘홈/글/소개’ 네비게이션)와 푸터를 추가하고, app/page.tsx(홈)에는 블로그 소개 한 문단과 최근 글 3편 미리보기 카드를 보여주세요. 디자인은 단정한 블로그 느낌으로, 본문은 읽기 좋은 세리프나 sans-serif로 통일합니다.
브라우저를 새로고침했을 때 홈에 소개 문구와 최근 글 카드 세 장이 보이고, 개별 글 페이지의 브라우저 탭 이름이 각 글 제목으로 바뀌어 있으면 다섯 번째 단계까지 완주하신 겁니다. 축하드려요. 이제 나만의 블로그 한 벌이 손에 들어왔습니다.
✅ 제대로 만들어졌는지 확인하는 다섯 가지
완성된 블로그가 의도대로 동작하는지 아래 다섯 가지를 차례로 점검해보세요. 하나라도 어긋나면 다음 섹션의 진단 가이드를 참고하시면 됩니다.
localhost:3000에 홈이 뜨고 상단 네비게이션·하단 푸터가 모든 페이지에 공통으로 보인다./posts목록 페이지에 샘플 글 두 편이 최신 날짜가 위로 오도록 정렬돼 있다.- 목록에서 글 제목을 클릭하면 개별 글 페이지로 이동하고, 본문이 Tailwind Typography 스타일로 읽히기 좋게 렌더링된다.
content/posts/에 새.mdx파일을 하나 더 만들고 브라우저를 새로고침하면 목록에 자동으로 추가된다.- 각 글 페이지의 브라우저 탭 제목이 frontmatter의 title과 일치한다.
🧩 자주 막히는 세 가지 상황과 해결법
같은 흐름으로 블로그를 만들어본 분들이 실제로 자주 멈춰 서는 지점만 추려봤습니다. 증상이 비슷하면 해당 해결법부터 먼저 시도해보세요.
| 증상 | 가장 흔한 원인 | 해결 |
|---|---|---|
| 새 글을 추가했는데 목록에 안 보여요 | 파일 확장자가 .md거나 frontmatter YAML 문법 오류 |
확장자 .mdx 확인, frontmatter 따옴표·콜론 공백 점검, dev 서버 재시작 |
| 본문이 스타일 없이 단정한 평문처럼 보여요 | Tailwind Typography 플러그인 미등록 또는 className="prose" 누락 |
tailwind.config의 plugins 배열에 require('@tailwindcss/typography') 확인 후 본문 래퍼에 prose 적용 |
| MDX에서 import나 JSX가 에러를 뱉어요 | next.config의 pageExtensions에 mdx 미추가 또는 MDX 플러그인 설정 빠짐 |
Claude에 “next.config 설정이 제대로 돼 있는지 확인해주세요” 요청 후 dev 서버 완전 재시작 |
📂 새 글이 목록에 안 올라와요
경험상 이 증상의 대부분은 두 가지 중 하나예요. 파일 확장자를 .md로 저장했거나(반드시 .mdx), 아니면 frontmatter의 YAML 문법이 미세하게 어긋난 경우(콜론 뒤 공백 누락, 따옴표 짝 안 맞음 등)입니다. VS Code 상단 탭 이름 옆 점(●)이 사라졌는지 먼저 확인하시고, frontmatter 부분을 파일 맨 위로 올려 앞뒤 --- 세 대시가 정확히 두 쌍 있는지 보세요. 그래도 안 되면 npm run dev를 Ctrl+C로 완전히 끈 뒤 다시 띄우시면 해결되는 경우가 많습니다.
🎨 본문 스타일이 아예 안 먹어요
Tailwind Typography는 등록과 적용 두 군데를 모두 맞춰야 동작해요. 먼저 tailwind.config.ts의 plugins 배열에 require('@tailwindcss/typography')가 있는지 확인하고, 개별 글 페이지에서 본문을 감싸는 <article className="prose"> 같은 구조가 있는지 보세요. 두 쪽이 다 맞는데도 이상하면 Claude에게 “타입 오류 없이 tailwind.config와 layout.tsx 설정을 다시 점검해주세요”라고 한 줄 요청하시면 대부분 잡아줍니다.
💥 MDX 컴파일 에러가 나요
주로 next.config.ts 설정이 덜 된 상태에서 MDX 파일을 읽으려고 할 때 벌어지는 현상이에요. Claude에게 “next.config.ts의 pageExtensions에 mdx가 포함돼 있는지, @next/mdx 플러그인이 감싸져 있는지 확인해주세요”라고 부탁하면 설정을 정리해줍니다. 설정을 고친 뒤엔 반드시 dev 서버를 완전히 재시작해야 반영되니 그 부분도 같이 체크해주세요.
🪜 여기서 어디로 더 갈 수 있나
블로그 뼈대가 완성됐으니 다음 세 갈래 중 원하는 쪽부터 이어가시면 돼요. 각자 투자 대비 체감 변화가 큰 방향들입니다.
🚀 Vercel에 무료로 배포하기
지금 만든 블로그는 본인 컴퓨터에서만 보여요. Vercel에 올리면 URL 하나로 누구에게나 공유할 수 있고, 새 글을 GitHub에 push만 해도 자동 배포됩니다. 무료 플랜으로 충분하고, 절차는 바이브코딩 Vercel 무료 배포 가이드에서 이어집니다.
💬 댓글 시스템 붙이기
GitHub 이슈를 댓글창으로 쓰는 Giscus가 설치·유지 비용 대비 효과가 제일 큰 편이에요. Claude에게 “이 블로그 글 페이지에 Giscus 댓글 컴포넌트를 추가해주세요. 저장소 이름은 OOO으로 설정합니다”라고 요청하면 5분 안에 붙습니다. Utterances 같은 대안도 같은 흐름으로 가능해요.
📡 RSS 피드와 사이트맵 자동 생성
검색 노출과 구독자 확보에 직접적으로 도움이 되는 요소예요. Next.js에서는 app/rss.xml/route.ts와 app/sitemap.ts를 만드는 게 표준 방식이고, 역시 Claude에게 “frontmatter 기반으로 RSS 피드와 사이트맵 자동 생성 코드를 추가해주세요”로 한 번에 붙일 수 있습니다.
💡 블로그 바이브코딩에서 특히 쓸모있는 세 가지 습관
투두앱이나 게임 만들 때와 블로그 만들 때는 AI에게 부탁하는 방식이 조금 다릅니다. 블로그는 “데이터 구조와 라우팅”이 핵심이라, 아래 세 가지 습관이 특히 효과가 커요.
| 덜 좋은 요청 | 더 나은 요청 |
|---|---|
| “블로그 만들어줘” | “Next.js App Router + MDX + gray-matter + Tailwind Typography 스택으로 content/posts 폴더의 .mdx를 읽는 블로그를 만들어주세요” |
| “목록을 예쁘게 해주세요” | “각 글 카드에 1rem padding, 1rem 간격, hover 시 그림자 강조(shadow-md → shadow-lg), 카드 안은 제목 크기 text-xl / 날짜 text-sm text-gray-500 / 요약 text-base로 잡아주세요” |
| “태그 기능 넣어주세요” | “frontmatter의 tags 배열에서 고유값을 모아 /tags/[tag] 동적 라우트로 해당 태그가 붙은 글만 보여주는 페이지를 추가해주세요” |
🧱 “데이터 → 렌더” 두 층으로 나눠 요청하기
블로그의 모든 기능은 “MDX 파일에서 뭘 꺼낼지”와 “그걸 어떻게 보여줄지” 두 층으로 쪼개집니다. 이 둘을 한 프롬프트에 섞어 던지면 결과가 섞여서 수정이 어려워져요. “먼저 데이터 유틸 함수(getAllPosts, getPostBySlug)를 lib/posts.ts에 만들어주세요”로 데이터 층을 먼저 확정한 뒤, “그 유틸을 사용해 /posts 페이지 UI를 그려주세요”로 렌더 층을 잇는 식이 깔끔합니다.
📋 frontmatter 필드를 미리 정해두기
처음에 title·date·summary·tags만 쓰다가 나중에 “썸네일 이미지·읽기 예상 시간·발행 여부” 같은 걸 추가하려 하면 기존 글들을 모두 고쳐야 하는 일이 생겨요. 시작 시점에 “최소 필드” + “나중에 붙일 수 있는 선택 필드”까지 미리 정해두시면 나중 수고가 확 줄어듭니다. Claude에게 “TypeScript로 PostMeta 타입을 정의해서 필수·선택 필드를 구분해주세요”라고 요청해두시는 것도 방법이에요.
🔁 글 하나 완성할 때마다 커밋 남기기
블로그는 글이 쌓일수록 구조가 조금씩 바뀌게 돼요. 새 기능 붙일 때 이전 상태로 돌아가고 싶은 순간이 반드시 옵니다. 글 하나를 완성하거나 기능 하나를 붙일 때마다 git add . && git commit -m "..."으로 작은 커밋을 남겨두면, 나중에 “며칠 전 Giscus 붙이기 전 상태로 돌아가고 싶다” 같은 니즈가 생겼을 때 두 줄 명령으로 해결됩니다.
블로그 외에 시작하기 좋은 작품들은 만들 만한 프로젝트 10가지에서 볼 수 있어요.
🪧 면책 조항
여기까지 따라오시느라 수고 많으셨어요. 블로그 뼈대가 한 번 손에 들어오면 이후엔 글을 쓰는 데 집중하실 수 있을 거예요. 첫 글 한 편을 오늘 바로 써보시길 권합니다.
❓ FAQ
질문을 누르면 답변이 펼쳐집니다.
🔰 시작하기 전 궁금한 것들
Q. 코딩을 처음 접하는데 정말 45분 안에 되나요?
Q. 왜 Next.js인가요? Hugo나 Jekyll은 안 되나요?
Q. MDX는 Markdown과 뭐가 다른가요?
<YouTubeEmbed id="..." /> 같은 임베드 컴포넌트를 바로 쓸 수 있습니다. 인터랙티브한 블로그를 만들고 싶으실 때 MDX의 장점이 또렷하게 드러나요.
🛠 작업 중 자주 마주치는 상황
Q. 새 글을 추가했는데 목록 페이지에 안 뜹니다
.md로 저장했거나(반드시 .mdx), frontmatter YAML 문법이 어긋난 경우입니다. 파일 맨 위의 세 대시(---)가 앞뒤로 정확히 한 쌍씩 있고, 각 필드가 title: 제목처럼 콜론 뒤에 공백이 있는지 확인해주세요. 그래도 안 되면 dev 서버를 완전히 껐다 다시 켜보세요.Q. MDX 안에서 React 컴포넌트 import가 안 돼요
@next/mdx 설정이 완전히 붙어 있어야 해요. next.config.ts의 pageExtensions에 mdx가 들어가 있는지, MDX 플러그인으로 감싸져 있는지 확인하세요. Claude에게 “next.config 설정을 점검해주세요”라고 한 줄 요청하면 대부분 잡아줍니다.Q. 본문 스타일이 아예 적용이 안 돼요
className="prose"가 없는 경우가 가장 흔해요. tailwind.config의 plugins에 require('@tailwindcss/typography')를 확인하고, 개별 글 페이지에서 <article className="prose prose-lg"> 같은 구조로 감싸 주세요.Q. 이미지는 어떻게 넣나요?
public/images/ 폴더에 파일을 두고 MDX 안에서 로 참조하는 게 가장 간단합니다. 더 최적화된 이미지를 원하시면 next/image의 Image 컴포넌트를 MDX 안에 직접 import해서 쓰시면 돼요. 원격 이미지는 next.config의 images.remotePatterns에 도메인을 추가해야 합니다.
🚀 확장과 운영
Q. Vercel에 무료로 올릴 수 있나요?
Q. 댓글 기능도 바로 붙일 수 있나요?
Q. RSS 피드도 필요한가요?
🔗 관련 글
- 바이브코딩 투두앱 만들기 — 30분이면 비전공자도 완성 (2026)
- AI 랜딩 페이지 만들기 5단계 — 디자인 감각 없어도 1시간 완성
- 바이브코딩 Next.js 프로젝트 만들기 — 10분 완성 가이드
- AI에게 코딩 요청하는 프롬프트 작성법 10가지
- 바이브코딩 Vercel 무료 배포 가이드
📑 참고 자료
- Next.js — App Router 공식 문서
- Next.js — MDX 통합 가이드
- gray-matter — frontmatter 파싱 라이브러리
- Tailwind CSS Typography 플러그인
IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작
Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.
