LaTeX 렌더러

2026년 10월 15일

Paul Ford와 Aboard Foundary의 새로운 웹 앱 Tiny Little Office에서 영감을 받았습니다. 이 앱은 일련의 웹 앱 콘텐츠 에디터(워드 프로세서, 아웃라이너, 프레젠테이션 빌더, 스프레드시트, 계산기, 드로잉 도구, 다이어그램 메이커, 애니메이터, 캘린더, 여행 플래너)를 제공합니다.

Tiny Little Office의 특징적인 트릭은 모든 문서 데이터를 URL의 #fragment 섹션에 저장하는 것입니다. 따라서 이 앱을 사용하여 생성된 모든 문서는 북마크 가능하고 공유 가능한 링크가 됩니다.

또한 에이전트들에게 어떤 URL을 구성해야 문서를 렌더링할 수 있는지 알려주는 llms.txt 파일도 가지고 있습니다. Claude는 이 파일을 사용하여 URL 형식이 어떻게 작동하는지 설명하는 데크로 연결되는 이 링크를 생성했습니다:

Screenshot of a slide deck editor in a web app with a dark-themed presentation open. The document title field reads "How a Tiny Little Office link works", with a progress ring, share icon and menu icon at top right. Below is a formatting toolbar with an "Insert" dropdown followed by icon buttons for play, bold, italic, underline, strikethrough, highlight, code, link, superscript, emoji, outdent, indent, layout and color palette. The main canvas shows slide 1 with a blue chain-link icon and the text: "The whole document is the link" "No server, no database, no account" "Everything after the # stays in your browser" and a slide counter "1 / 9". Below the canvas is a "SPEAKER NOTES" heading. A sidebar on the right shows slide thumbnails. Slide 1 (selected): "The whole document is the link" "No server, no database, no account" "Everything after the # stays in your browser". Slide 2: "Anatomy of a link" with bullets "tinylittleoffice.com/#/v1/deck/y7Vj..." "v1: the format version" "deck: which app opens it" "y: the mode letter" "7Vj...: the document, compressed and encoded". Slide 3: "Step 1: write it as text" with bullets "Every document is TLO, a Markdown variant" "Slides split on --- lines" "Charts, drawings and animations are fenced blocks" "This deck is about 1 KB of plain text". Slide 4: "Step 2: squeeze it" with bullets "Raw DEFLATE, the same algorithm as zip and gzip" "z: plain DEFLATE" "y: DEFLATE with a preset dictionary" "r: no compression at all".

Tiny Little Office는 저에게 Claude Code (Opus 5.5 Extra)가 LaTeX와 함께 작동하는 유사한 도구를 구축하도록 영감을 주었습니다. 제가 사용한 프롬프트 순서는 다음과 같습니다:

#code-here라는 fragment hash로 연결할 수 있고, 이 코드를 LaTeX로 간주하여 매우 효과적으로 렌더링하는 도구가 필요합니다. 또한 LaTeX가 커스텀 압축 사전으로 최적화된 접두사(prefix)를 지원해야 합니다. CDN에서 사용 가능한 최고의 LaTeX 렌더 라이브러리(WebAssembly도 고려해 주세요)를 사용하세요. fragment hash 없이 로드되면, LaTeX를 붙여넣을 수 있는 에디터를 보여주고 '렌더링됨' 보기로 전환할 수 있어야 합니다. 이 렌더링된 보기는 북마크 가능해야 합니다. #fragment 뷰에서는 소스 편집으로도 전환할 수 있게 해주세요.

이것이 제 도구 저장소에서 작동하고 있었기 때문에, 기존 SVG를 사용하는 Markdown 도구에서 XSS 위험에 대한 보호책으로 사용되는 `<iframe sandbox=

• Hello Python 3.15, goodbye 3.10, and now I can use 3.11 - 12th October 2026
• 블로그에 새 기능 추가 (내 목소리를 사용해 제작) - 9th October 2026
• Claude Haiku 5.5 - 7th October 2026
• 거의 모든 것에 기본 하드 예산 상한선(default hard budget caps)이 필요할 것 같습니다 - 3rd October 2026