M2N (Markdown to Naver)

마크다운을 네이버 블로그 호환 HTML로 변환하는 웹 애플리케이션입니다.

🎯 프로젝트 소개

네이버 블로그는 HTML/CSS에 엄격한 제한이 있어 일반적인 마크다운 변환기로는 제대로 표시되지 않습니다. M2N은 네이버 블로그의 제약 조건을 고려하여 인라인 스타일이 적용된 HTML을 생성합니다.

✨ 주요 기능

1️⃣ Hugo 프론트매터 지원

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

• 프론트매터에서 제목과 태그를 자동으로 추출
• 추출된 태그는 글 하단에 #태그1 #태그2 형식으로 자동 추가

2️⃣ Hugo Figure 숏코드 변환

{{< figure src="/image.png" alt="이미지" caption="캡션" >}}

• Hugo의 figure 숏코드를 이미지로 자동 변환

3️⃣ 다양한 마크다운 요소 지원

• 텍스트 스타일링: 볼드, 이탤릭, 취소선
• 헤딩: H1 ~ H6
• 링크: 외부 링크
• 코드 블록: 구문 강조 지원 (JavaScript, Python 등)
• 인라인 코드: 코드 강조
• 인용구: 강조된 인용 블록
• 리스트: 순서 있는/없는 리스트
• 표: 테이블
• 수평선: 구분선
• 빈 줄 공백: 여러 줄 공백 보존

🚀 사용 방법

1. https://m2n.coderred.com 접속
2. 왼쪽 편집기에 마크다운 입력 (Hugo 프론트매터 포함 가능)
3. 우측에서 미리보기 확인
4. "서식 복사" 버튼 클릭
5. 네이버 블로그 글쓰기 화면에서 붙여넣기 (Ctrl+V)

🛠️ 기술 스택

• Frontend: React 18, TypeScript
• Build Tool: Vite
• Styling: Tailwind CSS v3
• Markdown Parser: marked
• Syntax Highlighting: highlight.js
• Sanitization: DOMPurify
• Hosting: Cloudflare Pages

💻 로컬 개발

필수 요구사항

• Node.js 18 이상
• npm 또는 yarn

설치 및 실행

# 의존성 설치
npm install

# 개발 서버 시작 (http://localhost:5173)
npm run dev

# 프로덕션 빌드
npm run build

# 빌드 미리보기
npm run preview

# 코드 린트
npm run lint

🏗️ 아키텍처

단일 컴포넌트 애플리케이션

전체 로직이 src/App.tsx에 포함되어 있으며, 단순성을 위해 별도의 컴포넌트로 분리하지 않았습니다.

변환 파이프라인

1. 프론트매터 추출 → 제목과 태그 파싱
2. Hugo 숏코드 변환 → {{< figure >}}를 이미지로 변환
3. 마크다운 전처리 → 빈 줄, 수평선 처리
4. 마크다운 파싱 → marked 라이브러리로 HTML 변환
5. HTML 정제 → DOMPurify로 sanitization
6. 네이버 블로그 변환 → 인라인 스타일 적용
7. 태그 추가 → 본문 하단에 해시태그 추가

🔧 네이버 블로그 제약사항 해결

제약사항	해결 방법
CSS 클래스 무시	모든 스타일을 인라인 style 속성으로 적용
list-style 무시	리스트를 일반 단락으로 변환하고 텍스트 마커 사용
white-space: pre 무시	코드 블록은 줄당 하나의 <div> 사용
많은 HTML 태그 제거	호환 가능한 대안 사용 (<blockquote> → <div>)
빈 <p> 태그 제거	공백 유지를 위해 &nbsp; 포함

📝 라이선스

MIT License

👨‍💻 개발자

Made with ❤️ by coderred

☕ 후원

이 프로젝트가 도움이 되었다면 커피 한 잔 후원해주세요!