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

🚀 알리익스프레스에서 전 세계 상품을 만나보세요

😅 시작: 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 클래스를 무시하더라고요. 모든 스타일을 인라인으로 넣어야 했어요.

1
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 (마크다운)
  (네이버가 가끔 무시)
 (네이버가 무시)
  (이건 인식)
\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의 색상 클래스를 하나하나 매핑해서 인라인 스타일로 변환했어요:

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

노가다의 연속… 🥲

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

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

프론트매터 파싱:

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

이걸 파싱해서:

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

figure 숏코드 변환:



      
  캡션

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

복사 버튼:

1
document.execCommand('copy')

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

🎉 완성!
#

총 작업 시간: 약 4시간

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

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

지원 기능:

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

사용 방법:

왼쪽에 마크다운 입력 (Hugo 프론트매터 포함 가능)
우측에서 미리보기 확인
“서식 복사” 버튼 클릭
네이버 블로그 글쓰기에서 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 꿀팁 아시는 분 계신가요? 댓글로 공유해주세요! 🙏

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

🎯 M2N 탄생 배경#

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

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

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

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

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

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

🎉 완성!#

💡 이번에 배운 것들#

기술적 교훈#

삽질 방지 교훈#

🚀 바이브코딩의 장단점#

👍 좋았던 점#

👎 아쉬운 점#

🎯 결론: 협업이 답!#

🤔 다음 계획#

추가하고 싶은 기능#

아직 남은 이슈#

🎁 오픈소스?#

💬 마무리#