Marklog - 네이버 블로그를 위한 마크다운 커스터마이징 변환기

안녕하세요, 생산적회계사(PROCPA) 입니다.

블로그를 운영을 시작해보니 '글쓰기'보다 '옮겨 적기'에 더 많은 에너지를 쏟곤 했습니다. 특히 마크다운(Markdown) 을 네이버 블로그 에 적용하기란 여간 번거로운 일이 아니었습니다.

오늘은 이러한 비효율을 해결하기 위해 제가 직접 개발한 네이버 블로그 마크다운 변환 도구, Marklog를 소개합니다.

https://marklog.procpa.co.kr

1. 제작 동기

저는 기록과 글쓰기에 마크다운을 애용합니다. 서식에 신경 쓰지 않고 글에만 집중할 수 있어 생산성이 높기 때문입니다. 하지만 이를 네이버 블로그로 옮길 때면 늘 문제에 부딪혔습니다.

스타일 초기화: 마크다운 뷰어의 깔끔한 스타일이 네이버 에디터에선 밋밋한 텍스트가 됩니다.
커스터마이징 한계: "헤더 스타일을 바꾸고 싶다", "폰트 크기를 키우고 싶다", "하이라이트 색상을 바꾸고 싶다"와 같은 디테일한 수정이 어려웠습니다.
반복적인 수작업: 매번 포스팅할 때마다 서식을 다시 잡는 과정에서 불필요한 에너지가 소모됩니다.

"원하는 스타일대로, 클릭 한 번으로 완벽한 포스팅을 만들 순 없을까?" 이 질문이 Marklog의 시작이었습니다.

2. 주요 기능

React와 TypeScript로 개발된 Marklog는 네이버 블로그 스마트에디터에 최적화된 HTML 변환과 강력한 실시간 커스터마이징을 지원합니다.

2.1. 기존 방식 비교

일반 붙여넣기: 마크다운 문법이 그대로 노출되거나 서식이 완전히 깨져서 일일이 수동으로 수정해야 하는 번거로움이 있습니다.
타 변환 서비스: HTML 변환은 가능하지만 스타일이 고정되어 있어, 마크다운 문법 요소에 대해 사용자의 취향에 맞는 커스터마이징이 불가능합니다.
Marklog: 사용자가 설정한 스타일을 완벽하게 유지할 뿐만 아니라, 실시간 스타일 수정 및 프리셋 기능을 통해 나만의 개성 있는 블로그 포스팅을 완성할 수 있습니다.

2.2. 핵심 기능

강력한 마크다운 파싱: GFM(GitHub Flavored Markdown) 문법을 완벽 지원하며, highlight.js를 내장해 개발자에게 친숙한 코드 하이라이팅을 제공합니다.
스타일 프리셋 저장: '클래식', '모던', '미니멀' 등 기본 테마를 제공할 뿐만 아니라, 나만의 설정을 브라우저에 저장하고 언제든 불러오기 할 수 있습니다.
디테일한 스타일 설정:
- 폰트 및 로직: 네이버 블로그 호환 폰트(나눔고딕, 나눔명조 등) 및 줄간격(Line Height) 설정
- 헤더 스타일: H1 ~ H5 제목의 크기와 색상, 구분선(Divider line)과 세부 스타일까지 상세 설정
- 표(Table): 헤더/본문 배경색, 테두리 색상, 텍스트 정렬(왼쪽/가운데/오른쪽) 설정
- 마크다운 요소: 인용구, 인라인 코드, 형광펜(Highlight), 강조(Bold/Italic), 각주 등의 색상 커스텀
사용자 편의성:
- 실시간 미리보기: 입력창과 미리보기 화면의 1:1 매칭
- 반응형 디자인: 모바일/데스크탑 최적화 UI
- 원클릭 복사: 버튼 하나로 변환된 HTML 복사
즉시 초기화: 작성 중 내용 빠른 삭제

3. 사용 방법

복잡한 설정 없이 원본을 넣고 결과를 가져오면 됩니다.

마크다운 작성: 왼쪽 입력창에 글을 작성합니다. (이미지 주소, 코드 블록 등 자유롭게 사용)
스타일 커스텀: 오른쪽 상단 [설정 열기] 버튼을 눌러 원하는 폰트와 색상으로 디자인을 변경합니다.
미리보기 확인: 오른쪽 미리보기 화면에서 실제 블로그에 적용될 모습을 확인합니다.
HTML 복사: 오른쪽 상단 [HTML 복사] 버튼을 클릭합니다.
블로그 발행: 네이버 블로그 글쓰기 화면으로 이동하여 붙여넣기(Ctrl+V) 하면 완료됩니다.

4. 참고

4.1. 기술적 해결 (Troubleshooting)

네이버 블로그의 스마트에디터는 보안상의 이유로 외부 CSS나 스크립트를 제한적으로 허용합니다. Marklog는 이러한 제약을 다음과 같이 기술적으로 해결했습니다.

문제 현상 (Problem)	해결 방법 (Solution)
외부 CSS 무실행	네이버는 외부 스타일시트를 막으므로, 모든 스타일을 태그 내 `style="..."` 속성(Inline Style)으로 직접 주입하여 디자인을 강제 적용했습니다.
코드 블록 깨짐	`pre`, `code` 태그에 배경색과 폰트 스타일을 인라인으로 강제 지정하여, 개발 블로그의 핵심인 코드 블록이 깨지지 않고 박스 형태를 유지하도록 했습니다.
줄간격 이상	헤더(H1~H5)와 본문의 `line-height`를 분리하여, 글의 가독성을 해치지 않으면서도 네이버 에디터와 호환되는 줄간격을 적용했습니다.

4.2. 프로젝트 구조 (Project Structure)

Marklog는 Vite를 기반으로 한 React 프로젝트로 구성되어 있으며, 주요 로직은 utils 폴더에서 관리됩니다.

Markdown2Naver/
├── public/              # 정적 에셋 (폰트, 아이콘 등)
├── src/
│   ├── components/
│   │   └── StyleEditor.tsx  # 스타일 설정 UI 컴포넌트
│   ├── utils/
│   │   ├── styleConverter.ts # 마크다운 → HTML 변환 로직 (Inline Style 적용)
│   │   └── stylePresets.ts   # 스타일 프리셋 데이터 및 관리 로직
│   ├── App.tsx          # 메인 애플리케이션
│   ├── main.tsx         # React 진입점
│   └── index.css        # 전역 스타일 (Tailwind CSS)
├── index.html           # HTML 진입점
├── package.json         # 프로젝트 의존성 관리
├── tailwind.config.js   # Tailwind CSS 설정
└── vite.config.ts       # Vite 빌드 설정

4.3. 사용 기술 (Tech Stack)

Marklog는 최신 웹 기술을 활용하여 빠르고 안정적인 서비스를 제공합니다.

Library: React 18, TypeScript, Vite
Styling: Tailwind CSS
Core Logic: marked (Markdown Parser), DOMPurify, highlight.js

코드파일은 GitHub 저장소에서 자세히 확인할 수 있습니다.

Marklog가 여러분의 생산적인 블로그 운영에 도움이 되기를 바랍니다.
기능 제안이나 버그 제보는 언제든 환영입니다.