본문으로 건너뛰기
CoderRed Blog

Article

Hugo 블로그 → 네이버 블로그 자동 변환기 만들기 | Claude Code와 4시간 바이브코딩 🎵

게시 읽기6분 분량1154자 작성CoderRed M2N마크다운변환기Hugo블로그네이버블로그Claude Code바이브코딩AI코딩Cloudflare Pages+4M2N마크다운변환기Hugo블로그네이버블로그+8
목차

😅 시작: Hugo는 편한데 네이버는…

요즘 Hugo로 블로그 운영하고 있잖아요? 마크다운으로 쓱쓱 쓰고 Git push 하면 끝! 정말 편하더라고요.

근데 문제가 하나 있었어요. 네이버 블로그에도 같은 글을 올리고 싶은데… 복붙하면 완전 망가져요.

복붙했을 때 벌어지는 일들:

  • 코드 블록? 포맷 다 날아감
  • 이미지? 경로 깨짐
  • 불릿 포인트? 사라짐
  • 인용구? 그냥 평범한 텍스트

“이걸… 매번… 손으로…?” 😤

생각만 해도 끔찍하더라고요. 그래서 결심했습니다.

“자동화 도구 만들자!”

🎯 M2N 탄생 배경

이름은 M2N (Markdown to Naver) 으로 지었어요. 간단명료하죠? ㅋㅋ

필요했던 기능들:

  • Hugo 마크다운 → 네이버 블로그용 HTML 변환
  • Hugo 프론트매터 파싱 (제목, 태그 추출)
  • Hugo figure 숏코드 → 이미지 변환
  • 코드 하이라이팅 유지
  • 원클릭 복사

“이 정도면 하루면 되겠지?” 하고 시작했는데… 🙃

🎵 Claude Code와 함께한 바이브코딩

요즘 바이브코딩이 유행이잖아요? AI 코딩 어시스턴트랑 함께 작업하는 거!

저도 Claude Code 쓰고 있어서, “이참에 같이 만들어보자!” 했어요.

작업 환경:

  • 개발자: 저 (요구사항 정리, 테스트, 피드백)
  • 코더: Claude Code (실제 코드 작성)
  • 기술 스택: React + TypeScript + Vite
  • 호스팅: Cloudflare Pages

작업 시작! ⏰

1단계: “쉽겠지?” (30분)

저: "React + TypeScript로 마크다운 에디터 만들어줘"
저: "왼쪽은 입력창, 오른쪽은 프리뷰"
Claude Code: "네! 만들겠습니다"

기본 구조는 금방 나왔어요. marked.js로 마크다운 파싱하고, highlight.js로 코드 하이라이팅 넣고…

“오! 쉽네?” 😊

2단계: “어…?” (30분)

변환된 HTML을 네이버 블로그에 붙여넣어봤어요.

결과: 모든 스타일이 날아갔습니다. 😱

저: "스타일이 다 날아갔어..."
Claude Code: "CSS 클래스 추가하겠습니다"
저: "안 돼... 네이버가 클래스를 무시하나봐"
Claude Code: "그럼 인라인 스타일로 변경하겠습니다"

알고 보니 네이버 블로그는 CSS 클래스를 무시하더라고요. 모든 스타일을 인라인으로 넣어야 했어요.

element.setAttribute('style', 'font-size: 2em; font-weight: bold;')

이런 식으로 일일이…

3단계: “개행 지옥” (2시간!!!)

이게 진짜… 진짜로… 힘들었어요. 😭

문제 1: 빈 줄이 너무 많아

저: "인용구 뒤에 빈 줄이 3개나 생겼어!"
Claude Code: "<p>&nbsp;</p> 하나만 추가하도록 수정하겠습니다"

문제 2: 빈 줄이 안 생겨

저: "이번엔 단락이 다 붙었어... 띄어쓰기가 없잖아"
Claude Code: "연속된 빈 줄을 &nbsp; 단락으로 변환하겠습니다"

문제 3: 엉뚱한 곳에 개행

저: "표 안에서 왜 줄바꿈이 돼?!"
Claude Code: "표 안의 <p> 태그 제거하겠습니다"
저: "코드 블록 마지막 줄은 왜 비어있어?"
Claude Code: "마지막 빈 줄 제거 로직 추가하겠습니다"

이 과정을 몇십 번 반복… ⏰⏰⏰

결국 케이스별로 하나하나 예외 처리했어요:

  • blockquote 뒤: 빈 단락 추가
  • 이미지 앞뒤: 불필요한 빈 단락 제거
  • 코드 블록: 마지막 빈 줄 제거
  • 표 안:

    태그 제거

  • 연속 빈 줄: 각각   단락으로

개행의 정체:

  • \n (마크다운)
  • <br> (네이버가 가끔 무시)
  • <p></p> (네이버가 무시)
  • <p>&nbsp;</p> (이건 인식)
  • \u00A0 (non-breaking space, 코드 블록용)

일관성이 없어요! 😤

4단계: “더 많은 문제들” (1시간)

리스트가 안 보여!

저: "불릿 포인트가 안 보이네?"
Claude Code: "list-style 속성 추가하겠습니다"
저: "안 돼... 네이버가 list-style도 무시해"
Claude Code: "그럼 ul/ol을 p 태그로 변환하고 • 이모지 넣겠습니다"
저: "오! 이제 되네!"

코드 블록 색상이 날아가!

저: "코드 하이라이팅 색상이 다 사라졌어"
Claude Code: "CSS 클래스에 스타일 추가하겠습니다"
저: "클래스 자체를 무시한다니까!"
Claude Code: "highlight.js 결과를 파싱해서 인라인 style로 변환하겠습니다"

결국 highlight.js의 색상 클래스를 하나하나 매핑해서 인라인 스타일로 변환했어요:

const colorMap: { [key: string]: string } = {
  'hljs-keyword': '#d73a49',
  'hljs-built_in': '#005cc5',
  'hljs-string': '#032f62',
  // ... 20개 넘게...
}

노가다의 연속… 🥲

5단계: “거의 다 왔다!” (30분)

마지막으로 Hugo 특화 기능들 추가:

프론트매터 파싱:

---
title: "글 제목"
tags: ["태그1", "태그2"]
---

이걸 파싱해서:

  • 제목은 별도 영역에 표시
  • 태그는 글 하단에 #태그1 #태그2 형식으로

figure 숏코드 변환:




        설명
      
캡션

이걸 마크다운 이미지로 변환!

복사 버튼:

document.execCommand('copy')

HTML 서식 그대로 클립보드에 복사되게!

🎉 완성!

총 작업 시간: 약 4시간

그 중 절반은 개행 문제… ㅋㅋㅋ

최종 결과물: 👉 https://m2n.coderred.com

지원 기능:

  • Hugo 프론트매터 자동 파싱
  • figure 숏코드 → 이미지 변환
  • 코드 하이라이팅 유지 (GitHub 스타일)
  • 표, 인용구, 리스트 완벽 변환
  • 제목/태그 자동 추출
  • 원클릭 복사

사용 방법:

  1. 왼쪽에 마크다운 입력 (Hugo 프론트매터 포함 가능)
  2. 우측에서 미리보기 확인
  3. “서식 복사” 버튼 클릭
  4. 네이버 블로그 글쓰기에서 Ctrl+V

끝! 🎊

💡 이번에 배운 것들

기술적 교훈

네이버 블로그의 까다로운 제약:

  • CSS 클래스 완전 무시 → 모든 스타일은 인라인으로
  • list-style 속성 무시 → 리스트를 p 태그로 변환
  • 일부 HTML 태그만 허용 → blockquote는 div로 변환
  • 공백 처리가 까다로움 → non-breaking space 활용

마크다운 파싱의 함정:

  • --- (수평선)이 setext 헤딩으로 잘못 인식
  • 코드 블록과 이미지를 먼저 보호해야 안전
  • 연속된 빈 줄 처리가 생각보다 복잡

Cloudflare Pages의 장점:

  • GitHub 연동 자동 배포
  • 무료 호스팅
  • 빠른 CDN
  • 커스텀 도메인 지원

삽질 방지 교훈

1. 개행은 정말 정말 복잡하다

처음엔 “빈 줄 넣으면 되겠지?” 했는데… 케이스가 너무 많아요:

  • 일반 단락 사이
  • 요소 앞뒤 (blockquote, 표, 이미지)
  • 특수 요소 안 (코드 블록, 표)

각각 다르게 처리해야 했어요.

2. 테스트, 또 테스트, 끝없는 테스트

마크다운 작성 → 변환 → 네이버 붙여넣기 → 확인

이 사이클을 몇십 번 반복했어요. 다양한 케이스를 테스트하지 않으면 엣지 케이스에서 터져요.

3. AI 도구도 명확한 지시가 중요

Claude Code가 아무리 똑똑해도, 제약사항을 명확히 알려줘야 해요:

  • “네이버는 CSS 클래스를 무시해”
  • “list-style이 안 먹히니까 p 태그로 바꿔”
  • “공백은  로 처리해”

이런 구체적인 정보 없이는 삽질만 늘어나요.

4. 100% 완벽은 불가능

지금도 이미지 앞뒤 간격이 가끔 이상할 때가 있어요. 네이버가 HTML 스펙을 공개하지 않으니까… 완벽한 대응은 불가능해요.

실용적으로 접근:

  • 80% 케이스: 완벽 변환
  • 20% 케이스: 수동 조정

이 정도면 충분히 시간 절약!

🚀 바이브코딩의 장단점

👍 좋았던 점

빠른 프로토타이핑: 기본 구조 30분 만에 완성! 혼자 했으면 2-3시간 걸렸을 거예요.

반복 작업 자동화: “이거 다른 요소에도 똑같이 적용해줘” 하면 금방 해줘요. 복붙 반복 안 해도 돼서 좋았어요.

즉각적인 피드백: “이렇게 바꿔봐” → 바로 결과 확인 → “아니야, 다시” → 바로 수정

이 사이클이 정말 빠르더라고요.

👎 아쉬운 점

도메인 지식 필요: “네이버는 list-style 무시해"를 제가 알아야 Claude Code한테 알려줄 수 있어요. 이건 직접 테스트해봐야 알 수 있죠.

반복 설명: 비슷한 문제가 다른 곳에서 또 생기면, 또 설명해줘야 해요. 컨텍스트가 길어지면 가끔 헷갈려하기도 하고요.

디버깅은 직접: 에러가 나면 결국 제가 코드 읽고 원인 찾아야 해요. 이건 AI가 못해주더라고요.

🎯 결론: 협업이 답!

AI가 모든 걸 해주진 않아요. 하지만 잘 활용하면 생산성이 확실히 올라가요.

  • 제가 잘하는 것: 요구사항 정리, 문제 파악, 테스트
  • Claude Code가 잘하는 것: 빠른 코드 작성, 반복 작업

각자 역할 분담해서 협업하니까 4시간 만에 완성!

🤔 다음 계획

추가하고 싶은 기능

LocalStorage 저장: 새로고침해도 작성 중이던 내용 유지. 실수로 탭 닫아도 안심!

다크모드: Tailwind 쓰니까 dark: 클래스만 추가하면 될 것 같은데… 밤에 쓸 때 눈 편할 것 같아요.

샘플 템플릿: “예제 불러오기” 버튼으로 기능 이해하기 쉽게.

이미지 업로드: 로컬 이미지를 imgur 같은 곳에 자동 업로드? 이건 백엔드 필요해서 고민 중…

아직 남은 이슈

이미지 간격 문제: 이미지 앞뒤 개행이 가끔 이상해요. 대부분은 괜찮은데, 특정 케이스에서…

완벽한 해결은 어려울 것 같고, 네이버에서 수동 조정하는 걸로! 😅

표 안의 마크다운: 표 셀 안에 볼드, 이탤릭 같은 거 넣으면 가끔 이상해져요. 이것도 추가 작업 필요.

🎁 오픈소스?

일단은 Private으로 두고 있어요. 코드가 좀 더 정리되면 오픈소스로 공개할 생각이에요.

지금은 커뮤니티에 공유해두었고, 관심 있으신 분들 쓰고 계세요!

피드백 받으면서 개선하다가, “이 정도면 괜찮네?” 싶을 때 GitHub에 올릴 예정입니다.

💬 마무리

Hugo 블로그 쓰면서 네이버 블로그에도 올리고 싶으신 분들 많을 거예요. 저처럼요!

일일이 복붙하고 포맷 맞추느라 시간 낭비하지 마시고, M2N 한번 써보세요:

👉 https://m2n.coderred.com

버그 발견하시거나 개선 아이디어 있으시면 댓글로 알려주세요! 😊

그리고 요즘 바이브코딩 안 해보신 분들, 한번 도전해보세요. AI 코딩 어시스턴트랑 협업하는 거… 생각보다 재밌어요! 🎵

“개행 문제는 인생과 같다. 간단해 보이지만 실제론…” - 개행과 4시간 씨름한 CoderRed

혹시 비슷한 도구 만들어보신 분, 또는 네이버 블로그 HTML 꿀팁 아시는 분 계신가요? 댓글로 공유해주세요! 🙏

댓글