TikZ Editor: LaTeX 그림용 WYSIWYG 편집기

2 hours ago 2

TikZ Editor v0.4.0은 LaTeX의 TikZ 다이어그램을 직접 조작해 편집하는 무료 MIT 라이선스 오픈소스 앱으로, 웹과 데스크톱에서 사용할 수 있음
기존 TikZ 그림이나 전체 .tex 논문 파일을 열어 요소를 드래그하면 TikZ 코드가 즉시 갱신되고, 줄바꿈·공백 같은 기존 서식은 유지됨
노드, 경로, 화살표, 도형, 행렬, \foreach 루프, 라벨, 핀, 엣지 라벨 등 자주 쓰는 TikZ 구성요소를 시각적으로 편집할 수 있음
소스 편집기는 구문 강조, 접기, 자동완성, 검색, 진단, 인라인 색상 스와치, 색상 선택기와 숫자 스크러빙을 제공하며 TeX 컴파일러 없이 오류를 분석함
TypeScript와 Tauri 기반으로 구현됐고, TikZ 코드 전체를 다시 쓰지 않고 작은 패치만 적용해 사용자의 들여쓰기와 줄바꿈을 보존함

TikZ 그림을 직접 조작하는 편집기

TikZ Editor v0.4.0은 LaTeX용 TikZ 다이어그램을 위한 WYSIWYG 편집기임
새 그림을 처음부터 만들거나 기존 TikZ 그림을 편집할 수 있으며, 전체 논문 .tex 파일을 열어 그 안의 이미지를 수정할 수 있음
요소를 이동하면 TikZ 코드가 즉시 갱신되고, 기존 코드의 줄바꿈과 공백 같은 서식은 흐트러지지 않음
위치를 미세 조정할 때 다시 컴파일하지 않아도 결과를 바로 확인할 수 있음
앱은 무료 MIT 라이선스 오픈소스로 공개되어 있고, 코드는 GitHub에 있음
웹에서 사용할 수 있으며, 일부 추가 기능을 포함한 가벼운 데스크톱 앱도 제공됨

시각 편집과 TikZ 코드의 동기화

좌표를 직접 고치는 대신 경로와 노드를 원하는 위치로 드래그하면 코드가 바로 업데이트됨
새 요소 추가 도구로 다음 항목을 삽입할 수 있음
- 선, 화살표, 여러 구간으로 된 경로
- 노드, 사각형, 원
새 요소는 코드 끝에 삽입되며, 추가한 뒤 바로 이동하거나 크기를 조정할 수 있음
둥근 모서리와 경로 조인에는 rounded corners를 적용할 수 있고, rounded corners=2pt처럼 값과 함께 사용할 수 있음

TikZ에 맞춘 소스 편집기

소스 패널은 현재 소스를 항상 표시하고 TikZ 구문 강조를 제공함
스코프의 세부 내용을 숨기는 코드 접기를 지원함
마우스를 올리면 TikZ 매뉴얼의 관련 스니펫을 볼 수 있음
오류는 무엇이 잘못됐는지 알 수 있도록 설명과 함께 강조됨
- 앱이 TeX 컴파일러 없이 코드를 이해하기 때문에 가능한 기능임
소스 뷰에서 직접 입력하지 않아도 색상과 숫자를 조정할 수 있음
- 색상 선택기 지원
- 숫자 스크러빙 지원

정렬, 그룹화, 다중 그림 편집

스냅 기능으로 요소를 세로·가로로 맞추거나 동일 간격으로 배치할 수 있음
자, 사용자 지정 가이드라인, 확대/축소, 돋보기 도구를 제공함
여러 객체를 선택해 그룹화할 수 있고, 그룹화는 TikZ 스코프로 구현됨
다중 선택 상태에서는 정렬과 분배 같은 레이아웃 작업이 가능함
전체 .tex 논문 파일을 열면 앱 하단의 그림 미리보기로 여러 tikzpicture 환경 사이를 전환할 수 있음
앱은 사용자의 많은 커스텀 매크로를 이해함

지원하는 TikZ 기능과 도구

앱은 관용적인 TikZ 그림을 만들 수 있도록 설계됨
경로는 노드 앵커에 붙도록 쉽게 그릴 수 있음
노드 라벨, 핀, 엣지 라벨 편집을 지원함
제공 도구는 다음과 같음
- Select: 객체 이동, 크기 조정, 회전, 경로 편집, 다중 선택 편집
- Magnify: TeXstudio와 유사한 가상 돋보기
- Node: TikZ \node로 텍스트 추가
- Shape: shape 라이브러리 기반 노드 추가, 다이아몬드·다각형·별·구름·화살표 등 지원
- Matrix: 행과 열 수를 지정해 노드 행렬 삽입
- Line, Arrow, Bezier, Path, Freehand: 직선, 화살표, 곡선, 다중 구간 경로, 스무딩된 자유곡선 생성
- Grid, Rectangle, Ellipse, Circle: 격자와 기본 도형 경로 생성
- Bucket: 기존 닫힌 영역에 채우기 색 적용

파일, 내보내기, 패널 기능

파일과 내보내기 기능은 다음을 포함함
- .tex와 .tikz 파일 열기 및 편집
- SVG, Ipe .ipe, PowerPoint .pptx에서 그림 가져오기
- SVG, PNG, PDF, 독립 실행 LaTeX로 내보내기
- 탭으로 여러 문서를 동시에 작업
논문과 그림 편집 기능은 다음을 포함함
- 여러 그림이 있는 전체 논문 열기
- 썸네일 미리보기로 그림 사이 이동
- 노드, 도형, 행렬, 화살표, 경로, 곡선, 격자, 사각형, 타원, 원 그리기
- 그림 안의 텍스트와 수식 직접 편집
직접 편집 기능은 다음을 포함함
- 이동, 크기 조정, 회전, 복제, 그룹화, 정렬, 분배, 뒤집기, 순서 변경
- 포인트 핸들로 경로 편집
- 분할·결합, 반전, 열기·닫기, 모서리, 부드러운 포인트 명령
- 격자, 가이드, 객체 포인트, 객체 간격에 스냅
패널 기능은 다음을 포함함
- Inspector에서 선, 채우기, 화살표, 텍스트, 변환, 도형, 스타일 편집
- Objects 패널에서 객체 표시 여부, 그룹, 이름 변경, 레이어 순서 관리
- Styles 패널에서 브라우저 개발자 도구의 CSS 편집과 비슷하게 TikZ 스타일 편집

루프, 구조, AI 보조

Repeat 대화상자로 선택 영역을 여러 행과 열로 복사하는 \foreach 루프를 추가할 수 있음
이미 \foreach를 사용하는 그림도 열고 편집할 수 있으며, 중첩 루프도 포함됨
트리 다이어그램은 자식 추가 방식으로 편집할 수 있음
행렬은 행·열 명령과 전치 명령으로 수정 가능함
데스크톱 버전에서 OpenAI Codex가 설치되어 있으면 앱 안에서 그림 편집을 요청할 수 있음
- 어시스턴트는 TikZ 전용 도구 여러 개에 접근함
- 사용량은 사용자의 ChatGPT 계정에서 차감됨
- 이미지 첨부를 포함한 편집 도움도 지원함

내부 구현 방식

앱은 TypeScript로 작성됨
데스크톱 버전은 Tauri를 사용하며, 가벼운 Rust 백엔드를 포함함
초기 코드베이스는 Codex가 3개월 동안 작성했고, 사용된 모델은 gpt-5-3-codex, gpt-5-4, gpt-5-4-mini, gpt-5-5임
Claude의 일부 기여도 포함됨
TeX 코드 파싱은 매우 어렵지만, TikZ Editor는 임의의 TeX 전체가 아니라 TikZ 그림 제작에 자주 쓰이는 명령만 파싱함
- 매우 “hacky”한 코드는 올바르게 해석되지 않을 가능성이 있음
- 지원 범위는 꽤 좋고 시간이 지나며 늘어나고 있음
앱은 TikZ 코드를 파싱해 내부 표현을 만들고, 이 표현으로 좌표, 스타일, 변환, 루프, 노드, 경로, 텍스트를 편집 가능한 장면 요소로 해석함
내부 표현은 줄과 문자 범위 태그로 구문 입력과 밀접하게 연결됨
코드 전체를 표준 형식으로 다시 쓰지 않고 작은 패치로 일부만 바꾸기 때문에 사용자의 들여쓰기와 줄바꿈을 충실히 보존할 수 있음
장면은 SVG로 렌더링됨

렌더링과 변환기

텍스트와 수식 렌더링은 MathJax로 처리됨
여러 줄 텍스트를 지원하기 위해 TeX의 하이픈 처리 알고리듬과 Knuth-Plass 줄바꿈 알고리듬을 다시 구현함
이 구현 덕분에 앱에서 보이는 여러 줄 텍스트는 일반적으로 TeX가 같은 텍스트를 렌더링하는 방식과 정확히 일치함
커스텀 색상 선택기는 RGB 색상을 짧은 xcolor 문자열로 표현 가능한 가장 가까운 색으로 변환함
- 예: #409a40은 violet!88!white!45!green으로 변환됨
- 관련 코드는 npm 패키지 xcolor-rgb-convert로 제공됨
다양한 파일 형식 가져오기는 별도 개발된 변환기를 기반으로 함
- svg2tikz
- pptx2tikz, pptxtojson 기반
- ipe2tikz
데스크톱 앱은 PowerPoint와 Keynote에서 객체를 직접 붙여넣을 수 있음
- Keynote 붙여넣기는 keynote 클립보드 형식 인터프리터를 사용하며, keynote-clipboard npm 패키지로 제공됨
데스크톱 앱의 AI 지원은 Codex App Server를 통해 제공됨
소스 편집기는 CodeMirror 위에 구축됨