# TikZ Editor: LaTeX 그림용 WYSIWYG 편집기 > Clean Markdown view of GeekNews topic #30798. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=30798](https://news.hada.io/topic?id=30798) - GeekNews Markdown: [https://news.hada.io/topic/30798.md](https://news.hada.io/topic/30798.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-06-25T00:45:08+09:00 - Updated: 2026-06-25T00:45:08+09:00 - Original source: [tikz.dev](https://tikz.dev/editor/) - Points: 1 - Comments: 1 ## Topic Body - **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](https://github.com/DominikPeters/tikz-editor)에 있음 - 웹에서 사용할 수 있으며, 일부 추가 기능을 포함한 가벼운 데스크톱 앱도 제공됨 ### 시각 편집과 TikZ 코드의 동기화 - 좌표를 직접 고치는 대신 **경로와 노드**를 원하는 위치로 드래그하면 코드가 바로 업데이트됨 - 새 요소 추가 도구로 다음 항목을 삽입할 수 있음 - 선, 화살표, 여러 구간으로 된 경로 - 노드, 사각형, 원 - 새 요소는 코드 끝에 삽입되며, 추가한 뒤 바로 이동하거나 크기를 조정할 수 있음 - 둥근 모서리와 경로 조인에는 `rounded corners`를 적용할 수 있고, `rounded corners=2pt`처럼 값과 함께 사용할 수 있음 ### TikZ에 맞춘 소스 편집기 - 소스 패널은 현재 소스를 항상 표시하고 **TikZ 구문 강조**를 제공함 - 스코프의 세부 내용을 숨기는 코드 접기를 지원함 - 마우스를 올리면 TikZ 매뉴얼의 관련 스니펫을 볼 수 있음 - 오류는 무엇이 잘못됐는지 알 수 있도록 설명과 함께 강조됨 - 앱이 TeX 컴파일러 없이 코드를 이해하기 때문에 가능한 기능임 - 소스 뷰에서 직접 입력하지 않아도 **색상과 숫자**를 조정할 수 있음 - 색상 선택기 지원 - 숫자 스크러빙 지원 ### 정렬, 그룹화, 다중 그림 편집 - 스냅 기능으로 요소를 세로·가로로 맞추거나 동일 간격으로 배치할 수 있음 - 자, 사용자 지정 가이드라인, 확대/축소, 돋보기 도구를 제공함 - 여러 객체를 선택해 그룹화할 수 있고, 그룹화는 TikZ 스코프로 구현됨 - 다중 선택 상태에서는 정렬과 분배 같은 **레이아웃 작업**이 가능함 - 전체 `.tex` 논문 파일을 열면 앱 하단의 그림 미리보기로 여러 `tikzpicture` 환경 사이를 전환할 수 있음 - 앱은 사용자의 많은 커스텀 매크로를 이해함 ### 지원하는 TikZ 기능과 도구 - 앱은 관용적인 TikZ 그림을 만들 수 있도록 설계됨 - 경로는 노드 앵커에 붙도록 쉽게 그릴 수 있음 - 노드 라벨, 핀, 엣지 라벨 편집을 지원함 - 제공 도구는 다음과 같음 - **Select**: 객체 이동, 크기 조정, 회전, 경로 편집, 다중 선택 편집 - **Magnify**: [TeXstudio](https://www.texstudio.org/)와 유사한 가상 돋보기 - **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](https://tauri.app/)를 사용하며, 가벼운 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](https://www.mathjax.org/)로 처리됨 - 여러 줄 텍스트를 지원하기 위해 TeX의 하이픈 처리 알고리듬과 [Knuth-Plass 줄바꿈 알고리듬](https://en.wikipedia.org/wiki/Knuth%E2%80%93Plass_line-breaking_algorithm)을 다시 구현함 - 이 구현 덕분에 앱에서 보이는 여러 줄 텍스트는 일반적으로 TeX가 같은 텍스트를 렌더링하는 방식과 정확히 일치함 - 커스텀 색상 선택기는 RGB 색상을 짧은 xcolor 문자열로 표현 가능한 가장 가까운 색으로 변환함 - 예: `#409a40`은 `violet!88!white!45!green`으로 변환됨 - 관련 코드는 npm 패키지 [xcolor-rgb-convert](https://www.npmjs.com/package/xcolor-rgb-convert)로 제공됨 - 다양한 파일 형식 가져오기는 별도 개발된 변환기를 기반으로 함 - [svg2tikz](https://www.npmjs.com/package/svg2tikz) - [pptx2tikz](https://www.npmjs.com/package/pptx2tikz), [pptxtojson](https://github.com/pipipi-pikachu/pptxtojson) 기반 - [ipe2tikz](https://www.npmjs.com/package/ipe2tikz) - 데스크톱 앱은 PowerPoint와 Keynote에서 객체를 직접 붙여넣을 수 있음 - Keynote 붙여넣기는 keynote 클립보드 형식 인터프리터를 사용하며, [keynote-clipboard](https://www.npmjs.com/package/keynote-clipboard) npm 패키지로 제공됨 - 데스크톱 앱의 AI 지원은 [Codex App Server](https://developers.openai.com/codex/app-server)를 통해 제공됨 - 소스 편집기는 [CodeMirror](https://codemirror.net/) 위에 구축됨 ## Comments ### Comment 60272 - Author: neo - Created: 2026-06-25T00:45:09+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=48645437) - 조금 써봤는데, **UI**가 아주 멋지고 프로젝트 자체도 좋음. 축하함 다만 생성되는 **TikZ 코드**는 별로라고 봄. 모든 것이 절대좌표를 쓰는데, TikZ에서는 그럴 필요가 거의 없음 예를 들어 노드 하나만 놓아도 절대좌표가 생기는데, `\node {Hello};`라고만 쓰면 TikZ가 경계 상자 중앙에 배치함. 테스트처럼 `(0.5,2.91)`에 있다고 지정할 필요가 없음 여러 노드를 선택해서 “아래 정렬” 같은 기능을 쓸 때도 절대좌표를 조작하기보다 TikZ의 정렬 기능, 즉 앵커 등을 활용해야 한다고 봄. 이런 코드 생성이 더 어렵다는 건 이해하지만, 다음 버전에서 고려할 만한 방향일 수 있음 - 좋은 피드백임. 어려운 부분은 코드 생성 자체보다 **사용자가 기대하는 동작**을 판단하는 데 있다고 봄 “아래 정렬” 버튼을 눌렀을 때 `\begin{tikzpicture} \draw (0,2) rectangle (1,1); \draw (1.5,2) rectangle (2.5,1); \end{tikzpicture}` 같은 코드가 갑자기 임의 이름의 `\coordinate`와 상대좌표 표기로 바뀌면 놀랄 것 같음 반대로 처음부터 “예쁜” 코드로 시작하면, 앱은 많은 경우 드래그를 허용하지 못함. 드래그가 무엇을 의미하는지 알 수 없거나, 실제로 알 수 없는 경우가 많기 때문임. 이름 붙은 좌표를 바꾸는 건지, 그 좌표에 대한 오프셋을 바꾸는 건지 같은 문제가 생김 이 논의의 다른 곳에서 “right of” 같은 배치 방식도 이야기했고, 좋은 제안들이 나왔음: [https://news.ycombinator.com/item?id=48647683]() - 그런 기능은 **CAD 스크립트 언어**들이 어떻게 하는지 참고할 수 있을 것 같음 - 궁금한 사람이 있을까 봐 쓰면, 이 프로젝트는 **2026년 2월부터** 비교적 꾸준히 작업해 옴 그동안 Codex를 통해 이 프로젝트에 약 **7억 토큰**을 썼고, 캐시 읽기는 제외한 수치임. API 요금으로는 1만 5천 달러 정도였겠지만, 실제로는 ChatGPT 구독료로 약 500달러만 냈음 - CircuitiTikZ를 정말 좋아함. 간단한 **텍스트 기반 회로도**를 그리는 유일한 방법에 가까움 [https://ctan.org/pkg/circuitikz?lang=en]() [https://github.com/circuitikz/circuitikz]() 몇 년 전 `asciidoctor-diagram`과 연결해서 Asciidoc 유지보수 매뉴얼에 간단한 회로를 넣을 수 있게 했음. 현장 기술자들이 정말 좋아했고, PDM/ERP가 던져주는 지옥 같은 도구 대신 Git 버전 관리 생태계 안에서 협업할 수 있었음 이미 훌륭한 WireViz의 아주 좋은 보완재이기도 함: [https://github.com/wireviz/WireViz]() - 멋짐. [https://q.uiver.app/]()도 좋았는데, [https://github.com/varkor]()가 만든 좀 더 특화된 도구임 - 맞음, 더 특화된 편집기가 여럿 있음. 좋은 예로 [https://tikzit.github.io/](), [https://www.circuit2tikz.tf.fau.de/designer/](), [https://tikzcd.yichuanshen.de/]()가 있음 - 대학 때 **LyX**를 썼고 정말 만족했음. 아직도 숙제와 강의 노트를 전부 갖고 있음 [https://www.lyx.org/]() - 아주 멋지지만, 결국 나올 수밖에 없는 질문을 해보자면 **cetz 지원**은 얼마나 어려울까? 피할 수 있다면 LaTeX는 안 건드리고 싶고, Typst는 항상 쓰고 있음 - 코딩 에이전트를 쓰면 꽤 가능할 것 같음 Typst 기반의 완전한 위지윅, 이른바 바이브 코딩으로 만든 발표 소프트웨어가 이미 있고, 그중 일부가 정확히 그런 기능을 구현함 [https://codeberg.org/presenst/presenst]() - 학생 때 이런 걸 정말 원했음. **오픈소스**로 만들어줘서 고마움 내 이론 컴퓨터과학 교수님이 우연히 TikZ를 만든 Till Tantau였음. 설명도 정말 잘하는 분이었음 - Schleswig-Holstein 사람들은 어디에나 있음 :) Till Tantau는 LaTeX 발표 자료를 만드는 **beamer 패키지**도 시작했음 beamer와 TikZ는 둘 다 과학 커뮤니케이션에 매우 중요한 기여임 - 멋짐 사람들이 좋아하는 건 알지만, TikZ를 직접 쓰는 건 정말 싫어서 기술적인 그림 대부분을 draw.io/diagrams.net으로 옮기고 PNG로 내보내고 있음. 세련되진 않지만 충분히 잘 작동하고, 보기 괜찮은 결과물을 쉽게 만들 수 있음. 원래는 텍스트로 정의되는 것들을 대체로 선호함 Markdown 안에 남을 그림이면 일부는 Mermaid로 옮겼지만, TeX에서 동작하게 해보진 않았음 그래도 LaTeX에서 다이어그램을 그리는 관용적인 방식이 TikZ에 가깝기 때문에, **위지윅 편집기**가 있으면 유용할 것 같음 제안 하나를 하자면, 화살표가 박스에 “붙을” 수 있으면 좋겠음. 박스를 움직이면 화살표 끝점도 같이 움직이는 방식임. draw.io가 그렇게 동작함 - 텍스트 노드에는 앵커가 있어서 **붙이기**가 동작함. 새 선을 그리거나 기존 선을 움직일 때 초록색 연결점을 볼 수 있을 것임 draw.io를 쓴다면 PNG 대신 PDF로 내보내는 걸 권함. 그래야 벡터 그래픽으로 유지됨 - draw.io 파일을 `.drawio.svg`로 저장할 수 있지 않나? 몇 번 다이어그램을 그렇게 만들었고, Computer Modern을 써서 그림이 본문과 비슷하게 보이게 했음. 그 정도면 충분했음 - 정말 보기 좋음. 시작하기 쉽게 **프리셋**을 몇 개 추가해도 좋을 것 같음. 흔한 신경망 구조나 TikZ의 다른 사용 사례 같은 것들 - 좋은 생각임. `File > Open Example`이 있긴 하지만 확장할 여지는 분명 있음. 데스크톱에서는 arXiv 논문을 바로 열 수도 있음 - 와, 정말 대단함. TikZ 다이어그램을 만들려고 **ChatGPT**를 써왔는데, 솔직히 TikZ 다이어그램 만들기가 쉽지 않고 잘 만들면 결과물은 정말 예쁨 다만 ChatGPT로 다이어그램을 세밀하게 수정하게 만드는 건 어렵기도 함. TikZ 문법과 동작에 대한 내 지식이 항상 충분히 정교하지 않아서 원하는 결과를 얻기 힘들 때가 있음. 그래서 이 도구가 그 답처럼 보임. 써보는 게 기대됨 참고로 블로그용 LaTeX 문서도 ChatGPT로 만들고 서버 쪽에서 렌더링하고 있음. 그 워크플로는 아주 잘 맞음