Show HN: WASM을 통해 브라우저에서 pdfTeX를 실행하는 LaTeX 에디터 TeXbrain

<img src="https://raw.githubusercontent.com/swimmingbrain/texbrain/HEAD/static/texbrain-logo-readme.svg" alt="texbrain logo" width="80" /> <h1 align="center">TeXbrain</h1> 브라우저에서 완전히 실행되는 무료 오픈 소스 LaTeX 에디터입니다. 계정 필요 없음. 설치 불필요. 서버도 없음. 탭을 열고 작성하기만 하면 됩니다. <a href="https://tex.swimmingbrain.dev">지금 사용해 보기 → tex.swimmingbrain.dev</a>

제가 이것을 만든 이유는 무료여야 할 기능에 돈을 내는 것에 지쳤기 때문입니다. 작년에 LaTeX로 논문을 작성하면서 실제로 글을 쓰는 것보다 도구와 싸우는 데 더 많은 시간을 썼습니다. 온라인 솔루션은 git 동기화를 유료 장벽 뒤에 가둡니다. 로컬 설정은 기기 간에 깨집니다. 저는 그냥 작동하는 것을 원했습니다. 브라우저를 열고, LaTeX를 작성하고, PDF를 얻는 것입니다.

그래서 제가 만들었습니다.

기능 소개 (What it does)

texbrain은 .tex 파일을 브라우저에서 직접 PDF로 컴파일하는 완전한 LaTeX 에디터입니다. 백엔드가 없습니다. 파일 처리를 위한 서버도 없습니다. 모든 것(에디터, 컴파일러, git 클라이언트)이 클라이언트 측에서 실행됩니다.

로컬 프로젝트 폴더를 열고, 파일을 편집하고, PDF가 업데이트되는 것을 보고, 변경 사항을 커밋하고, GitHub에 푸시할 수 있습니다. 이 모든 것이 하나의 탭에서 가능합니다.

입력하면, 잠시 후 PDF에 반영됩니다:

기능 (Features)

브라우저에서 LaTeX 컴파일. pdfTeX의 WebAssembly 포트(SwiftLaTeX)를 사용합니다. .tex 파일은 기기를 벗어나지 않고 PDF로 컴파일됩니다. 패키지는 필요할 때 로드되고 로컬에 캐시되므로, 첫 컴파일 시에는 문서가 실제로 사용하는 것만 다운로드합니다. 재컴파일 시간은 프로젝트 복잡도에 따라 1~5초가 소요됩니다.
CTAN의 대부분을 필요할 때 로드. 일반적인 패키지는 앱과 함께 제공됩니다. 그 외의 모든 것(memoir, abntex2, KOMA-Script 등)은 문서가 처음으로 필요로 할 때 TeX Live 미러에서 자동으로 해결되며, 이후 오프라인 사용을 위해 로컬에 캐시됩니다.
실시간 PDF 미리보기. pdf.js를 사용하여 렌더링합니다. 다중 페이지, 확대/축소 가능하며 텍스트 선택이 가능합니다.
완벽한 Git 통합. 리포지토리를 클론하고, 브랜치를 생성하고, 파일을 스테이징하고, 커밋하고, 푸시하고, 풀하고, 병합할 수 있습니다. 모든 기능은 브라우저에서 실행되는 isomorphic-git을 통해 프로젝트 폴더에 직접 적용되므로, 터미널과 TeXbrain이 동일한 리포지토리를 보게 됩니다. CLI가 필요 없습니다. Git, 단계별를 참조하세요.
로컬 파일 시스템 접근. File System Access API를 사용하여 디스크의 프로젝트 폴더에 직접 읽기 및 쓰기가 가능합니다 (Chrome/Edge).
다중 파일 프로젝트 지원. 파일 트리, 탭, 드래그 앤 드롭이 가능하며 .tex, .bib, .sty, .cls 등 다양한 확장자를 지원합니다.
CodeMirror 6 에디터. 구문 강조(Syntax highlighting), 70개 이상의 LaTeX 명령어 자동 완성(autocomplete), 중괄호 매칭, 코드 접기(code folding), 스니펫, 다크/라이트 테마를 제공합니다.
명령어 팔레트(Command palette). 키보드 단축키를 통해 다양한 액션에 빠르게 접근할 수 있습니다.
스니펫 선택기(Snippet picker). 수학 환경, 문서 구조, 그리스 문자, 일반 명령어 등을 지원하며 검색 및 카테고리화가 가능합니다.
오프라인 작동. 한 번 로드되면 인터넷 연결 없이도 앱을 사용할 수 있습니다. 컴파일은 로컬에서 이루어지며, 편집 또한 로컬에서 이루어집니다. 이전에 컴파일한 패키지는 캐시되며, 사용해 본 적 없는 패키지에만 네트워크가 필요합니다.
프로젝트 템플릿. 처음부터 시작하거나 다양한 템플릿(article, thesis, beamer, report, CV, letter, minimal) 중 하나를 선택하여 시작할 수 있습니다.

작동 원리 (How it works under the hood)

마법도 없고 백엔드도 없습니다.

에디터(Editor). CodeMirror 6(CodeMirror 6)을 기반으로 하며, 사용자 정의 LaTeX 문법(Lezer 파서), 자동 완성 제공자, 테마 시스템이 적용되었습니다. 이 에디터는 탭을 통해 여러 파일을 열고 디스크의 파일에 직접 작성하며, 이는 git이 확인하는 위치와도 같습니다.

컴파일러(Compiler). LaTeX 컴파일은 SwiftLaTeX의 pdfTeX 엔진을 WebAssembly로 컴파일하여 사용합니다. 이 엔진은 메모리 파일 시스템(MEMFS) 내에서 실행되며, 여기서 각 컴파일 전에 프로젝트 파일이 작성됩니다. 엔진이 가지고 있지 않은 파일(클래스, 패키지, 폰트 등)을 요청하면, 서비스 워커가 다음과 같은 체인을 통해 이를 해결합니다: 먼저 이전에 캐시된 파일, 다음으로 앱에 번들링된 패키지 서브셋, 마지막으로 TeX Live 미러(jsDelivr의 texmf-dist 미러이며, 커뮤니티 SwiftLaTeX 서버가 폴백 역할을 함). 해결된 모든 파일은 브라우저의 캐시 스토리지에 저장되므로, 각 패키지는 최대 한 번만 다운로드됩니다. 첫 번째 성공적인 컴파일 후에는 번들링된 서브셋이 백그라운드에서 미리 가져와져(prefetch) 핵심 패키지 세트가 오프라인에서도 작동할 수 있게 합니다.

Git. 모든 git 작업은 순수 JavaScript로 구현된 git인 isomorphic-git을 사용합니다. 이는 파일 시스템 접근 API(File System Access API) 주변의 작은 어댑터를 통해 프로젝트 폴더에 직접 실행되므로, .git 디렉터리가 터미널에서처럼 .tex 파일 옆에 위치하며, 이미 리포지토리인 폴더는 그대로 인식됩니다. 원격 작업(push/pull/clone)은 브라우저가 git 프로토콜을 직접 처리할 수 없기 때문에 CORS 프록시를 거칩니다.

PDF 뷰어(PDF viewer). Mozilla의 PDF 렌더링 라이브러리인 pdf.js로 렌더링됩니다. 선택 및 검색을 위한 텍스트 레이어를 지원하는 다중 페이지 렌더링이 가능합니다.

파일 시스템. 이 앱은 File System Access API를 사용하여 디스크에 있는 실제 파일을 읽고 쓸 수 있습니다. 이를 위해서는 Chromium 기반 브라우저(Chrome, Edge, Arc, Brave)가 필요합니다. 다른 브라우저의 경우 Origin Private File System (OPFS)을 사용한 대체 방안이 있습니다.

프론트엔드. 정적 어댑터와 함께 SvelteKit을 사용했습니다. 전체 앱은 정적 HTML/CSS/JS로 미리 빌드되어 GitHub Pages에 배포됩니다. SSR(Server-Side Rendering)도, API 라우트도, 서버도 없습니다. 스타일링은 Tailwind CSS가 처리합니다.

컴파일 오류 발생 시

LaTeX 오류는 읽기 어렵기로 유명하기 때문에 TeXbrain이 대신 해석해 줍니다. Problems 탭은 로그를 카드 형태로 변환합니다: 일반적인 단어로 된 제목(

프로젝트 추적 시작하기. 폴더를 열고 Git 버튼(또는 Ctrl+G)을 누른 다음, 이름과 이메일을 한 번 입력하고 'Start'를 누릅니다. TeXbrain은 LaTeX 컴파일 과정에서 남겨지는 파일들을 위한 .gitignore 파일을 제공합니다.
커밋하기. 파일을 저장하고 'Changes' 탭을 열어 커밋할 내용을 스테이징(stage)하거나 모두 스테이징한 후, 수행한 작업에 대한 설명을 한 줄 작성하고 'Commit'를 누릅니다. 모든 파일에는 diff 보기와 폐기 버튼이 있습니다.
온라인으로 올리기. 'Sync' 탭에서 과정을 안내받을 수 있습니다: GitHub(또는 GitLab, Codeberg 등)에 빈 리포지토리를 생성하고, 해당 HTTPS 주소를 붙여넣은 다음, 개인 접근 토큰(personal access token)을 추가하고 푸시(push)합니다. 그 이후로는 이 탭에서 푸시하거나 풀할 커밋 개수를 보여주며, Fetch, Pull, Push는 각각 한 번의 클릭으로 처리됩니다.
클론하기. 환영 화면이나 사이드바에서 리포지토리를 클론(clone)합니다. 비공개 리포지토리인가요? 대화 상자에서 먼저 'Private repository? Add a token'을 열어야 하며, 이 토큰이 브라우저가 접근할 수 있게 해주는 역할을 합니다.
브랜치(Branches). 재작성을 위한 브랜치를 만들고, 전환(switch)하며, 병합(merge back)합니다. 브랜치 전환은 다른 브랜치의 파일들을 폴더에 기록하므로, 에디터에서 보는 내용은 항상 디스크에 있는 내용과 일치합니다. 저장되지 않은 수정 사항은 유지되며 사용자에게 알려줍니다.

알아두면 좋은 몇 가지 사항:

브라우저는 git 프로토콜을 직접 처리할 수 없기 때문에, 클론(clone), 페치(fetch), 풀(pull), 푸시는 CORS 프록시를 거쳐 진행됩니다. 기본값은 isomorphic-git 프로젝트에서 실행하는 cors.isomorphic-git.org이며, 토큰이 이 경로를 통해 전달됩니다. git 설정에서 TeXbrain을 사용자의 자체 프록시에 연결할 수 있으며, 이는 작은 node 앱입니다.
토큰은 브라우저의 localStorage에만 저장되며 다른 곳에는 저장되지 않습니다. 공유 컴퓨터를 사용할 때는 설정에서 제거해 주세요.
양쪽 모두 같은 줄을 수정했을 경우, 아무것도 건드리지 않으며 어떤 파일이 충돌했는지 알려주므로 터미널에서 해결할 수 있습니다. 에디터 내의 충돌 해결(Conflict resolution) 기능은 목록에 있습니다.

Bridge

이 브릿지는 TeXbrain을 컴퓨터의 작은 서버인 brainBRIDGE에 연결하여, 코딩 에이전트가 프로젝트에 내용을 작성하고, 컴파일하며, PDF를 확인하도록 합니다. 예를 들어, braiNOTES의 손글씨 노트를 페이지로 작성하는 데 사용할 수 있습니다.

팔레트에서 tex.swimmingbrain.dev/editor?bridge를 열거나 명령어 팔레트에서 Bridge: connect을 실행합니다. 브라우저가 요청할 때 로컬 연결을 허용하면 상태 표시줄의 Bridge 부분이 녹색으로 변합니다. Bridge: disconnect로 비활성화할 수 있습니다.
팔레트에서 'Link braiNOTES notebook'을 사용하면 프로젝트를 노트북에 연결하고, 상단 바의 braiNOTES 버튼이 해당 노트북을 엽니다.
브릿지를 통해 들어오는 모든 편집 내용은 에디터에서 하나의 되돌리기(undo) 단계가 됩니다.
소켓은 127.0.0.1로만 연결되므로, 파일이 컴퓨터를 벗어나는 일은 절대 없습니다.

알려진 제한 사항

pdfTeX 전용입니다. XeTeX나 LuaTeX는 지원하지 않으므로, fontspec, polyglossia, TikZ의 graphdrawing 라이브러리 등 이들이 필요한 내용은 컴파일되지 않습니다.
bibtex나 biber를 지원하지 않습니다. 엔진 자체에 포함되어 있지 않습니다. biblatex를 사용하는 문서는 .bib 파일에서 생성된 일반적인 thebibliography로 대체되므로, 참고문헌은 표시되지만 인용 스타일은 무시됩니다. 클래식한 bibtex 워크플로우에는 프로젝트 내에 .bbl 파일이 필요합니다. WASM 환경에서의 실제 bibtex 지원은 다음 목록입니다.
TeX Live 2020 시대의 기능들입니다. 패키지들은 엔진의 형식 파일과 같은 시대로 고정되어 있어, 더 최신 버전의 패키지는 사용할 수 없습니다.
Git 원격 저장소는 CORS 프록시가 필요합니다. 브라우저는 git 프로토콜을 직접 처리할 수 없습니다. 기본 프록시는 설정 가능하며, 아래를 참조하십시오.
편집기에서 병합 충돌 해결 기능은 없습니다. 충돌이 발생한 풀(pull)이나 머지(merge)는 중단되며 어떤 파일들이 문제가 되었는지 알려줄 뿐입니다. 나머지 작업은 터미널에서 해야 합니다. 서브모듈, 심볼릭 링크(symlinks), git LFS도 지원되지 않습니다.
직접 폴더 접근은 Chromium 브라우저에서만 가능합니다. Firefox와 Safari는 가상 파일 시스템으로 대체되므로, 브라우저 지원을 참조하십시오.

보안 및 개인 정보 보호

모든 것이 브라우저 내에서 실행됩니다. 사용자가 원격 저장소로 명시적으로 푸시하지 않는 한, 파일은 절대 기기를 벗어나지 않습니다.