마크다운 이미지 변환기

마크다운 이미지 변환 - 스크린샷 없이 .md를 공유용 PNG로 변환하기

브라우저에서 바로 실행되는 마크다운 이미지 변환 도구입니다. 가공되지 않은 Markdown을 그대로 공유하기에는 지저분하고, 화면을 일일이 캡처하기에는 번거로운 순간에 사용하세요. README, 릴리스 노트, 코드 스니펫, 아키텍처 다이어그램, 체크리스트를 붙여 넣으면 Twitter/X, LinkedIn, Slack, Discord, GitHub Issue, 슬라이드에 바로 올리기 좋은 깔끔한 PNG를 만들 수 있습니다.

한국어 사용자는 보통 "마크다운 이미지 변환", "Markdown PNG 변환", "MD를 PNG로 변환", "마크다운을 이미지로 변환", "마크다운 스크린샷", "코드 스니펫 이미지", "Carbon 대체 Markdown 도구" 같은 말로 찾습니다. 표현은 달라도 목표는 같습니다. Markdown을 보기 좋은 이미지로 렌더링하고, 수동 캡처 없이 안정적인 PNG로 공유하는 것입니다.

왜 Markdown을 HTML이나 PDF가 아니라 이미지로 변환하나요?

Markdown을 HTML로 변환하는 작업은 게시 시스템이 마크업을 계속 렌더링할 때 적합합니다. Markdown을 PDF로 변환하는 작업은 문서를 열람, 제출, 보관할 때 적합합니다. Markdown을 이미지로 바꾸는 일은 그 중간쯤에 해당합니다. 채팅 스레드, 소셜 타임라인, 슬라이드, 현황 공유, 버그 리포트처럼 받는 사람이 별도의 렌더링 과정 없이 내용을 바로 확인할 수 있어야 하는 상황에서 유용합니다.

마크다운 이미지 변환을 찾는 대표적인 이유는 다음과 같습니다.

• 정리된 문서 조각을 Twitter/X, LinkedIn, Bluesky, Threads, Mastodon에 올리면서 원시 *별표*와 # 해시를 그대로 보이고 싶지 않을 때
• 코드 리뷰 요약, 스택 트레이스, 오류 로그를 Slack, Discord, Microsoft Teams에 한 장의 이미지로 공유할 때
• 렌더링된 .md 스냅샷을 GitHub Issue, Linear 티켓, Notion 페이지에 붙여 서식 깨짐을 줄일 때
• GitHub README 미리보기, VS Code 미리보기, 문서 사이트의 수동 스크린샷을 재현 가능한 이미지 내보내기로 대체할 때
• 코드 블록, Mermaid 다이어그램, LaTeX 수식을 슬라이드나 강의 자료에 넣을 독립 이미지로 만들 때

Carbon이나 ray.so는 짧은 코드 스니펫에는 적합하지만 전체 Markdown을 렌더링하지는 못합니다. 표, 작업 목록, 수식, Mermaid, 인용문이 함께 들어 있는 콘텐츠라면 마크다운 이미지 변환 전용 흐름이 더 잘 맞습니다.

스크린샷을 찍지 않는 Markdown 스크린샷 도구

마크다운 이미지 변환의 핵심은 운영체제 캡처 도구에 의존하지 않는 것입니다. 출력 PNG는 모니터 픽셀을 잘라낸 결과가 아니라 렌더링된 미리보기에서 직접 만들어집니다.

• 내보내기는 렌더링된 미리보기를 직접 읽기 때문에 브라우저 확대/축소나 창 크기에 관계없이 제목, 표, 코드 블록 레이아웃이 유지됩니다.
• 긴 콘텐츠는 세로로 긴 이미지로 만들고, 브라우저 캔버스 한계를 넘으면 여러 PNG로 자동 분할합니다.
• 이미지는 **2배 디바이스 픽셀(device pixel)**로 렌더링되어 고해상도 화면, 발표 슬라이드, 소셜 플랫폼 재압축 후에도 텍스트가 선명합니다.
• PNG에는 워터마크, 로고, 서명을 넣지 않습니다. 다운로드한 파일이 그대로 최종 이미지 자산입니다.

// PNG export reads the rendered preview, not the screen
export async function shareSnippet(markdown: string) {
  const png = await renderToPng(markdown, { theme: 'paper', scale: 2 });
  return png; // clean, watermark-free image
}

전체 Markdown을 이해하는 Carbon / ray.so 대체 도구

Carbon, ray.so, polacode 같은 코드 이미지 도구는 하나의 펜스 코드 블록을 중심으로 설계되어 있습니다. 제목, 목록, 표, 설명 문단, Mermaid 다이어그램이 코드와 함께 들어가면 표현하기 어렵습니다.

이 변환기는 GitHub Flavored Markdown 전체를 기준으로 하므로 하나의 이미지에 다음 요소를 함께 담을 수 있습니다.

• 코드 스니펫의 맥락을 설명하는 제목
• 무엇을 하는지 알려 주는 본문 문단
• 실제 구문 강조 코드 블록
• 이어지는 표, 작업 목록, 콜아웃
• 필요하면 Mermaid 다이어그램 또는 LaTeX 수식

// Tables, code, and prose all export together
function highlight(snippet: string): string {
  return shiki.codeToHtml(snippet, { lang: 'ts' });
}

기능	Carbon / ray.so	이 마크다운 이미지 변환기
펜스 코드 블록 렌더링	지원	지원
제목, 목록, 표, 인용문	미지원	지원
GFM 작업 목록 - [ ]	미지원	지원
LaTeX 수식 (KaTeX)	미지원	지원
Mermaid 다이어그램	미지원	지원
긴 Markdown 자동 분할	미지원	지원
워터마크 / 브랜드 표시	선택적	없음

PNG 내보내기용 세 가지 테마

마크다운 이미지 변환 결과는 미리보기에서 고른 테마를 그대로 사용합니다. 화면에서 확인한 스타일이 출력 파일에 반영됩니다. 워크벤치에는 세 가지 프리셋이 준비되어 있습니다.

• Paper — 따뜻한 문서 스타일로 튜토리얼, 뉴스레터, 제품 설명처럼 읽기 좋은 마크다운 이미지 변환 결과가 필요한 상황에 적합합니다.
• Blueprint — 대비가 높은 기술 문서 스타일로 변경 로그, RFC, 엔지니어링 공지에 적합합니다.
• Nocturne — 코드 밀도가 높은 글과 개발자용 소셜 공유 이미지에 어울리는 다크 모드입니다.

내보내기 전에 테마를 고르면 렌더링된 PNG가 미리보기와 같은 톤으로 만들어집니다.

Markdown을 PNG로 바꿀 때 유지되는 콘텐츠

내보내기는 별도의 "이미지 모드"가 아니라 렌더링된 미리보기를 그대로 레스터라이즈(rasterize)합니다. 화면에서 보이는 Markdown 기능은 PNG 안에도 그대로 들어갑니다.

GitHub Flavored Markdown

• 제목과 일관된 세로 리듬
• 표의 열 정렬
• 작업 목록의 - [ ], - [x] 체크박스
• 펜스 코드 블록의 언어별 구문 강조
• 인용문과 콜아웃
• 각주, 자동 링크, 취소선

LaTeX 수식

$E = mc^2$ 같은 인라인 수식과 블록 수식은 KaTeX로 렌더링된 뒤 이미지에 들어갑니다. PDF 리더에서 수식을 다시 캡처하지 않아도 학술 메모를 깔끔한 PNG로 내보낼 수 있습니다.

$$\sigma(x) = \frac{1}{1 + e^{-x}}$$

Mermaid 다이어그램

플로차트와 시퀀스 다이어그램은 미리보기에서 SVG로 표시되고 PNG 생성 시에도 선명하게 변환됩니다.

flowchart LR
  Source[Markdown] --> Preview[테마 미리보기]
  Preview --> Slice[길면 자동 분할]
  Slice --> PNG[.png 다운로드]
  PNG --> Share[Twitter / Slack / GitHub]

출력 세부 정보: 크기, 분할, 품질

• 너비는 브라우저 창이 아니라 미리보기 영역을 기준으로 하므로 같은 Markdown은 더 예측 가능한 폭으로 출력됩니다.
• 긴 콘텐츠는 자동 분할되어 단일 캔버스 한계를 넘는 README나 변경 로그도 중간에서 잘리지 않습니다.
• 해상도는 2배 디바이스 픽셀로 렌더링되어 고해상도 화면과 소셜 플랫폼 재압축에도 잘 버팁니다.
• 형식은 PNG만 지원합니다. 작은 글자와 코드 배경, 가는 표 선은 JPG보다 PNG에서 더 선명하게 유지됩니다.
• 개인정보 보호: 마크다운 이미지 변환 과정의 렌더링과 PNG 생성은 브라우저 안에서 처리됩니다. 공유 링크를 만들지 않는 한 Markdown 원문과 이미지가 기기 밖으로 나가지 않습니다.

내보내기 전 체크리스트

• Markdown을 붙여 넣거나 .md / .markdown 파일 업로드
• Paper, Blueprint, Nocturne 중에서 테마 선택
• 코드 블록, 표, Mermaid 주변 여백을 미리보기에서 확인
• LaTeX 수식과 이모지가 의도대로 렌더링되는지 확인
• 워크벤치 상단의 Export에서 Image (PNG) 선택
• 미리보기가 길다면 번호가 붙은 여러 PNG 파일이 나올 수 있음을 확인
• 완성된 이미지를 Twitter/X, LinkedIn, Slack, Discord, GitHub, 슬라이드에 붙여 넣기

위 샘플을 자신의 Markdown으로 바꾸고 테마를 고른 뒤, 미리보기가 원하는 모습이면 내보내면 됩니다.