슬라이드·블로그에 수식 넣기

슬라이드나 블로그에 조판된 수식을 삽입하려면 보통 두 단계가 필요합니다. LaTeX를 어딘가에서 렌더링한 뒤 결과를 이미지로 붙여 넣는 것입니다. 전용 LaTeX-이미지 변환 서비스, 블로그 템플릿에 MathJax 삽입, Overleaf 스크린샷 등 여러 방법이 있으며, 어느 쪽이 맞는지는 사용하는 플랫폼에 따라 다릅니다.

drawtonomy는 그 선택지 중 무료·설치 불필요·계정 불필요한 도구입니다. Math 도구가 KaTeX로 LaTeX를 렌더링하고, 색상과 크기를 자유롭게 조정해 투명 배경의 PNG 또는 SVG로 내보낼 수 있습니다. 모두 브라우저 안에서, 계정 없이 동작합니다.

$E = mc^2 KaTeX 실시간 미리보기 — 위에 LaTeX 소스, 아래에 렌더링 결과$

Math 도구 동작 화면 — 위에 LaTeX 입력, 아래에 KaTeX 렌더링 결과, 오른쪽에 색상·크기 패널.

2분 완성 워크플로

drawtonomy.com을 엽니다.
하단 툴바에서 fx 아이콘을 클릭합니다(/를 눌러도 됩니다).

$drawtonomy 하단 툴바에서 fx 아이콘이 강조된 화면$
캔버스를 클릭하고 LaTeX를 입력합니다. 아래쪽에 실시간으로 렌더링됩니다.

$이차방정식 근의 공식이 실시간 미리보기에 렌더링된 Math 에디터$
Esc를 누릅니다. 수식이 선택된 상태에서 오른쪽 패널로 색상과 크기를 설정합니다.

$같은 수식을 빨간색·60px로 변경한 화면$
Menu → Export → PNG(또는 SVG)를 선택해 저장합니다.
파일을 슬라이드나 블로그 포스트에 드래그해 넣습니다.

설치 불필요, 계정 불필요, LaTeX 환경 불필요. 이것으로 완성입니다.

대상 플랫폼별 권장 형식

대상	권장 형식	이유
Google Slides	PNG	SVG 지원이 부분적. PNG는 어디서나 동일하게 표시됨
Keynote	SVG(또는 PNG)	Keynote는 SVG를 지원. 확대해도 선명함
PowerPoint	PNG(Microsoft 365는 SVG도 가능)	구버전 PowerPoint는 SVG를 무시함
Notion	PNG	Notion 이미지 삽입은 래스터 전용
Medium	PNG	Medium은 SVG를 과도하게 다운스케일함
Substack	PNG	Substack 본문 업로드는 래스터만 허용
Ghost / WordPress	SVG	두 플랫폼 모두 SVG를 네이티브로 렌더링
Discord / Slack	PNG	채팅 앱은 SVG 처리가 일관되지 않음

어떤 형식을 고를지 모를 때는 투명 배경 PNG가 어디서나 통합니다. SVG가 더 선명하지만 삽입이 까다로울 수 있습니다.

슬라이드 테마에 맞춘 색상 변경

기본 색상은 흰색 슬라이드에 어울리는 검정입니다. 다크 테마 슬라이드라면 Color 패널에서 흰색이나 브랜드 강조색을 선택하면 즉시 재렌더링됩니다.

색상을 바꿀 때마다 별도의 실행 취소 단계가 생성되므로 부담 없이 여러 가지를 시도해볼 수 있습니다.

다른 방법들과의 비교

아래 방법들은 각자 적합한 상황에서 잘 동작합니다. 어떤 것을 고를지는 초기 설정에 들이는 시간과 결과물을 사용할 플랫폼으로 대부분 결정됩니다.

LaTeX-이미지 변환 웹 서비스(CodeCogs, QuickLaTeX 등)는 일회성 수식에 빠르고 결과물이 깔끔합니다. 반복 사용에도 잘 맞는 서비스가 많지만 기능이나 조건이 바뀌는 경우도 있으니 사용 시점에 현황을 확인하는 것이 좋습니다.
블로그에 MathJax 삽입은 수식 소스를 포스트 안에 유지할 수 있어 이상적입니다. 플랫폼이 테마 커스터마이징을 얼마나 허용하는지에 따라 설정 자유도가 달라집니다.
Overleaf 스크린샷은 이미 LaTeX를 작성해 두었다면 가장 빠른 경로입니다. 캡처 DPI에 따라 품질이 결정됩니다.
유니코드 직접 입력(x² + y² = r²)은 분수나 적분이 필요 없는 단순한 수식이라면 오히려 가장 빠릅니다.

drawtonomy는 수식을 벡터로 렌더링해 깔끔하게 내보내며, .drawtonomy.svg를 보관해 두면 나중에 다시 편집할 수 있습니다.

수식 하나를 넘어서

Math 도구는 무한 캔버스 위에서 동작합니다. “수식 세 개를 나란히 놓고 사이에 다이어그램을 배치하는” 슬라이드 한 장을 만들고 싶다면, 전체를 drawtonomy에서 구성하고 이미지 한 장으로 내보낼 수 있습니다. 슬라이드 도구의 레이아웃 그리드와 씨름할 필요가 없습니다.