캔버스에 LaTeX 수식 입력하기

이 튜토리얼에서는 툴바의 fx 아이콘인 Math 도구 사용법을 익힙니다. LaTeX 수식을 입력하면 KaTeX 실시간 미리보기가 바로 렌더링되고, 색상·크기를 조정한 뒤 SVG나 PNG로 내보낼 수 있습니다. 내보낸 파일은 논문 그림, 슬라이드, Notion 페이지, 블로그 포스트에 바로 활용됩니다.

Math 도구는 drawtonomy의 무한 화이트보드 위에서 동작하므로, 같은 캔버스에 차선·차량·보행자를 함께 배치하는 것도 가능합니다. 다이어그램 옆에 수식을 나란히 놓아야 할 때 특히 편리합니다. 물론 빈 캔버스에 수식만 단독으로 입력하는 독립형 에디터로도 충분히 활용할 수 있습니다.

1. Math 도구 선택

drawtonomy.com을 엽니다. 하단 툴바에서 fx 아이콘을 클릭합니다. Text(T) 도구와 Freehand 도구 사이에 있습니다.

$하단 툴바에서 Math 도구(fx)가 활성화된 상태$

키보드 단축키를 선호한다면 /를 누르세요. Notion 스타일의 Math 도구 단축키입니다.

2. 수식을 놓을 위치 클릭

캔버스 빈 곳을 클릭합니다. 그 자리에 인라인 에디터가 열립니다. 위쪽 절반은 LaTeX 입력 텍스트 영역, 아래쪽 절반은 KaTeX 실시간 미리보기 창입니다. 흐릿하게 표시되는 플레이스홀더는 이차방정식 근의 공식 예시입니다.

$빈 Math 에디터 — 위쪽은 LaTeX 소스 입력창, 아래쪽은 KaTeX 실시간 미리보기, 예시 플레이스홀더 포함$

에디터 하단의 키 힌트 Del: delete · Arrows: move · Esc: deselect는 에디터가 열린 상태에서 사용할 수 있는 조작을 안내합니다.

3. LaTeX 수식 입력

실제 수식을 입력해 봅니다. 먼저 가장 유명한 공식부터:

E = mc^2

입력하는 즉시 아래쪽 미리보기가 업데이트됩니다. 별도의 “렌더” 버튼은 없습니다. 키 입력마다 실시간으로 반영됩니다.

$입력창에 E = mc^2, 아래쪽에 KaTeX 렌더링이 표시된 Math 에디터$

이번엔 조금 더 복잡한 수식을 입력해 봅니다. 입력창을 지우고 이차방정식 근의 공식을 입력하세요.

x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}

\frac, \sqrt, \pm, ^ 모두 논문과 동일하게 렌더링됩니다.

$분수, 제곱근, ± 기호가 미리보기에 렌더링된 이차방정식 근의 공식$

Math 도구는 KaTeX의 전체 명령어를 지원하며, 화학 반응식을 위한 mhchem 확장도 포함합니다. 전체 목록은 Math 레퍼런스를 참조하세요.

4. 확정: Esc 키

Esc를 누르거나(또는 에디터 바깥을 클릭하면) 편집이 완료됩니다. 텍스트 입력창이 사라지고 렌더링된 수식만 캔버스에 남습니다. 크기는 내용에 맞게 자동 조정됩니다.

$캔버스에 확정된 수식 — 선택 박스가 표시된 렌더링 결과만 남은 상태$

파란색 외곽선은 선택 박스입니다. 빈 곳을 클릭하면 선택이 해제됩니다.

다시 편집하려면 수식을 더블클릭합니다. 원래 LaTeX 소스가 그대로 에디터에 복원됩니다. drawtonomy는 렌더링된 이미지뿐 아니라 소스 자체를 저장하므로, 모든 수식을 언제든지 수정할 수 있습니다.

5. 색상과 크기 조정

수식을 선택한 상태에서 오른쪽 상단의 Math (LaTeX) 패널을 확인합니다.

Color — 색상 스워치를 클릭해 색을 변경합니다. 논문용 검정, 회색 계열, 빨강/주황/노랑/초록/파랑/보라 중에서 선택할 수 있습니다. 브랜드 전용 색상이 필요하면 More… 에서 전체 팔레트를 불러옵니다.
Size — 슬라이더로 8 px(각주 크기)부터 200 px(포스터 헤드라인)까지 조정합니다. 수식 전체가 비율을 유지하며 확대·축소됩니다.

색상을 빨강, 크기를 60 px으로 설정해 봅니다.

$빨간색 60 px로 설정된 수식과 Math (LaTeX) 패널 — 빨간 스워치와 60 px 슬라이더가 표시됨$

6. 내보내기

수식이 완성되면 Menu → Export로 내보냅니다.

형식	적합한 용도
SVG	LaTeX (`\includegraphics`), Notion, 웹사이트, 슬라이드. 벡터 형식이므로 어떤 크기에서도 선명합니다.
PNG	SVG를 지원하지 않는 환경(Word, 일부 채팅 앱 등).
PDF	PDF 그림을 요구하는 LaTeX 빌드. 텍스트가 패스로 변환되어 폰트 의존성이 없습니다.
EPS	구형 LaTeX 툴체인(`latex` + `dvips`). 마찬가지로 패스 변환됩니다.
.drawtonomy.svg	drawtonomy 네이티브 형식. 일반 SVG이므로 drawtonomy에서 다시 열어 LaTeX 소스를 편집할 수 있습니다.

일상적인 용도라면 SVG와 PNG로 거의 모든 상황을 커버합니다. LaTeX 논문에는 PDF가 가장 안정적입니다.

Math 도구 추가 기능

짧게 살펴볼 기능들입니다.

화학식 (mhchem) — \ce{2 H2 + O2 -> 2 H2O}를 입력하면 반응 화살표가 올바르게 렌더링됩니다.

$mhchem 화학 반응식이 실시간 미리보기에 렌더링된 모습$
번호가 붙은 다중 행 수식 — \begin{align} ... \end{align}으로 감싸면 논문 스타일의 수식 번호가 붙습니다. 수식 본체와 태그 (1)(2)(3)이 크기가 커져도 서로 겹치지 않습니다.

$align 환경으로 수식 번호 (1)–(4)가 붙은 맥스웰 방정식$
긴 수식 — 입력창이 자동으로 줄바꿈되고 미리보기 창이 스크롤되므로, 반 페이지 분량의 유도 과정도 문제없이 편집할 수 있습니다.
Cmd+A 후 Delete — 캔버스의 모든 오브젝트(수식 포함)를 선택하고 삭제합니다.
입력창 드래그 — 편집 중에 클릭하고 5 px 이상 드래그하면 입력 위치를 잃지 않고 에디터를 이동할 수 있습니다.
실행 취소 / 다시 실행 — Cmd+Z / Cmd+Shift+Z. 색상·크기 변경은 각각 별도의 실행 취소 스텝으로 기록됩니다. 크기 슬라이더를 드래그한 경우에는 하나의 스텝으로 합쳐집니다.