‘Markdown → 이미지’를 만들어본 사람이라면 누구나 이 함정을 밟아봤을 거예요:
TEXT
Markdown → HTML → 浏览器 → 截图
그러면 이런 문제가 생깁니다:
- chromium이 매우 무겁다(배포이 번거로움)
- 페이지 분할이 불안정함(매번 결과가 달라질 수 있음)
- 대량 렌더링 성능이 나쁨
- serverless 환경에서는 거의 처리하기 힘듦 최근 이 파이프라인이 너무 답답해서 직접 하나 만들어봤습니다: marknative ---
핵심 아이디어(기존 방식과 완전히 다릅니다)
HTML도, DOM도, 브라우저도 거치지 않습니다.
대신:
TEXT
Markdown → AST → 自定义文档模型 → layout → 分页 → canvas 绘制
간단히 설명하자면:
“브라우저 레이아웃” 기능을 아주 단순한 버전으로 직접 구현했습니다(Markdown 전용).
---
무엇을 할 수 있나요?
1. PNG / SVG 직접 출력
TypeScript
import { renderMarkdown } from 'marknative'
const pages = await renderMarkdown('# Hello')
await Bun.write('page-1.png', pages[0].data)
필요하지 않은 것:
- puppeteer
- headless chrome
- 스크린샷 ---
2. 페이지 분할을 기본 지원하며, 결과도 안정적
기본값은 다음과 같습니다:
- 1080 × 1440
- 카드와 비슷한 비율 그리고 페이지 분할 결과는 항상 동일합니다:
- 같은 Markdown 문서
- 어떤 환경에서든
- 렌더링 결과가 동일함 --- ### 3. 대량 콘텐츠 생성에 적합 예를 들면:
- Xiaohongshu용 카드
- 기술 문서용 이미지
- AI가 자동으로 생성한 콘텐츠 이미지 puppeteer와 비교하면:
- 시작 속도가 더 빠름
- 메모리를 더 적게 사용
- 수평 확장이 더 쉬움 --- ## 이 방향, 해볼 만합니다
본질적으로, 이런 요구는 결국:
“구조화된 텍스트 → 제어 가능한 레이아웃 → 이미지 출력” 하지만 브라우저는:
- 너무 범용적임(웹페이지용으로 설계됨)
- 제어하기 어려움(CSS + layout이 너무 복잡함)
- 비용이 너무 큼 반면 Markdown에서는:
- 구조가 고정됨
- 제약 가능함
- “전용 레이아웃 엔진”에 매우 적합함 --- ## 기술 포인트(재미있는 몇 가지만 간단히 소개)
micromark+mdast를 사용해 파싱- block / inline layout 직접 구현
skia-canvas로 직접 그리기- layout과 render를 완전히 분리 따라서 이론적으로는 다음도 가능합니다:
- renderer 교체(SVG / PDF / WebGL)
- 커스텀 테마 시스템 구축
- 시각적 에디터 개발(향후) --- ## 프로젝트 링크
👉 https://github.com/liyown/marknative