콘텐츠로 이동

논문 그림에 수식 삽입하기

논문을 작성하다 보면 — 학위 논문, arXiv 프리프린트, IEEE 저널 투고, 워크샵 노트 — 다이어그램과 조판 수식이 동시에 필요한 그림을 만들어야 할 때가 있습니다. 흔히 사용되는 방법은 세 단계를 거칩니다: 다이어그램 작성 앱, LaTeX 수식 렌더러, 그리고 최종 합성 단계. 이 방법으로도 훌륭한 그림을 충분히 만들 수 있지만, 수식이 별도 파일에 존재하기 때문에 “저 아래 첨자 하나만 고쳐주세요” 같은 수정 요청이 오면 렌더러를 다시 거쳐야 합니다.

drawtonomy는 다이어그램과 수식을 하나의 캔버스에 올려두는 방식을 취합니다. 두 요소가 같은 벡터 파일 안에 있고, 수식은 최종 결정을 내리기 전까지 편집 가능한 LaTeX 소스로 남아 있습니다.

Maxwell's equations rendered as an align environment with equation numbers (1)–(4), directly on the drawtonomy canvas

KaTeX로 렌더링된 맥스웰 방정식 (align 환경, 수식 번호 (1)–(4)). 이 블록 전체가 하나의 편집 가능한 도형입니다 — 더블클릭하면 LaTeX 소스로 돌아갑니다.

각 도구는 설계 목적에서 탁월합니다. drawtonomy는 하나의 캔버스에서 다이어그램과 수식을 모두 편집한다는 조합에 특화되어 있습니다.

  • PowerPoint / Keynote는 슬라이드와 빠른 그림 작업에서 보편적인 선택입니다. 자체 수식 편집기가 내장되어 있어 편리하지만, LaTeX 소스를 나중에 편집할 수 있는 형태로 유지하지는 않습니다.
  • Inkscape / Illustrator는 뛰어난 벡터 편집 기능을 제공하며, 많은 논문의 최종 그림이 여기서 다듬어집니다. 별도의 LaTeX 렌더러에서 수식을 가져오는 경우, LaTeX 소스는 그림 파일과 별개로 관리해야 합니다.
  • Excalidraw / tldraw / Miro는 협업 화이트보드로서 탁월합니다. 다이어그램 중심으로 설계되어 있어 수식은 별도 렌더러에서 이미지로 붙여 넣는 방식이 일반적입니다.
  • TikZ / pgfplots는 완전 프로그래밍 방식의 LaTeX 네이티브 그림 제작에서 최고 표준입니다. 특히 정밀도가 중요할 때 강력합니다. 다만 수정마다 컴파일을 거쳐야 하는 반복 주기가 단점입니다.

drawtonomy는 슬라이드 도구와 TikZ 사이 어딘가에 위치합니다. KaTeX 렌더러를 내장한 2D 벡터 캔버스로, LaTeX 소스를 파일 안에 유지합니다. 다이어그램과 수식을 이미 별도 도구로 잘 관리하고 있다면 기존 워크플로우로도 충분합니다. drawtonomy가 가장 유용한 경우는 두 요소를 하나의 편집 가능한 파일에 함께 두고 싶을 때입니다.

  1. 캔버스에 다이어그램을 스케치합니다. 자율주행 논문이라면 차선·차량·보행자, 제어 논문이라면 직사각형과 화살표로 구성된 블록 다이어그램, 방법론 개요라면 폴리곤과 경로 화살표 등 drawtonomy의 어떤 도형 조합이든 활용할 수 있습니다. Math 도형도 그 중 하나입니다.

  2. Math (fx) 도구로 수식을 추가합니다. KaTeX 실시간 미리보기가 표시됩니다. 다중 줄 수식에는 \begin{align}을 사용하면 KaTeX가 수식 번호를 자동으로 처리합니다.

    Math editor showing the quadratic formula with fraction, square root, and ± rendered in the live KaTeX preview

    이차 방정식을 입력하는 중의 KaTeX 실시간 미리보기 — 위는 LaTeX 소스, 아래는 렌더링 결과.

  3. 인쇄용으로 스타일을 설정합니다. 대부분의 학술지는 여전히 흑백 인쇄를 사용합니다. 수식에는 검정 또는 진한 회색을 선택하고, 다이어그램 본문 텍스트와 크기를 맞추세요. 포스터 그림에는 Size 슬라이더로 200 px까지 키울 수 있습니다.

    Same equation in red at 60 px with the Math (LaTeX) attribute panel showing the color swatch and size slider

    Math (LaTeX) 패널에서 색상과 크기를 조정합니다 — 흑백 인쇄용에는 검정, 포스터용에는 더 큰 크기를 선택하세요.

  4. LaTeX 빌드용 PDF로 내보냅니다. \sqrt 빈쿨럼을 포함한 모든 글리프가 opentype.js를 통해 벡터 패스로 변환되므로, 파일이 자체 완결적입니다. 폰트 의존성이 없어 pdflatex 오류 없이 \includegraphics{...}로 그림에 바로 삽입됩니다.

  5. .drawtonomy.svg를 소스 파일로 보관합니다. 리뷰어가 ""\sigma\rho로 바꿔주세요”라고 요청하면, .drawtonomy.svg를 drawtonomy에서 다시 열고 수식을 더블클릭하여 LaTeX를 편집한 뒤 PDF를 다시 내보내면 됩니다. 다시 그릴 필요가 없습니다.

  • **\includegraphics{equation.pdf}**가 논문에서 가장 안정적인 방법입니다. drawtonomy의 PDF 내보내기는 패스 기반이므로 pdflatex, xelatex, lualatex 어느 엔진에서도 작동합니다.
  • SVG + svg 패키지 방식도 사용할 수 있지만, 빌드 환경에 Inkscape가 설치되어 있어야 합니다. 로컬 빌드에서는 안정적이지만 CI에서는 불안정할 수 있습니다. 로컬에서 PDF로 변환하여 저장소에 체크인하는 방법을 권장합니다.
  • EPS는 오래된 latex + dvips 툴체인용으로 제공됩니다. PDF와 동일한 패스 기반 품질을 유지합니다.
  • 폰트 관련. 텍스트가 패스로 변환되므로 논문 본문 폰트와 맞출 필요가 없습니다. 문서 폰트와 무관하게 수식은 KaTeX 스타일 (Computer Modern 계열)로 렌더링됩니다 — 대부분의 경우 이것이 원하는 결과입니다.

이 사례는 자율주행 문서에 분류되어 있지만, drawtonomy가 그 목적으로 시작되었기 때문입니다. Math 도형 자체는 분야를 가리지 않습니다. 동일한 워크플로우를 다음에도 적용할 수 있습니다.

  • 기계학습 방법론 그림 (네트워크 다이어그램 옆에 손실 함수 수식).
  • 제어 논문 (각 블록 옆에 LaTeX 전달함수가 표시된 블록 다이어그램).
  • 신호처리 그림 (푸리에 쌍 도식).
  • 물리학·화학 논문 (\ce{}로 반응식 포함).
  • 수학 논문 (정리 진술이 함께 조판된 증명 그림).

화이트보드에 그릴 수 있는 것은 drawtonomy에도 담을 수 있습니다.

  • 단락 본문 안에 있는 수식. 이런 수식은 그림이 아닌 LaTeX 소스 안에 있어야 합니다.
  • 데이터 기반 동적 그래프 — 그래프에는 matplotlib / pgfplots / TikZ를 계속 사용하세요.