Silurus/ooxml: 브라우저에서 Office 문서를 pixel-faithful하게 렌더링하는 라이브러리

Who Should Read

브라우저에서 Office 문서 미리보기 기능을 구현해야 하는 프론트엔드/풀스택 개발자, 또는 LLM 파이프라인에서 Office 파일을 이미지로 변환해 처리하고 싶은 AI 서비스 개발자.

Core Mechanics

• DOCX, XLSX, PPTX 세 가지 Office 포맷을 브라우저의 Canvas 2D API로 직접 렌더링한다. 서버 사이드 변환 없이 클라이언트에서 완전히 처리된다.
• 파서는 Rust로 작성된 후 WebAssembly로 컴파일된다. 번들 크기는 docx 458KB(gzip 217KB), pptx 574KB(gzip 253KB), xlsx 601KB(gzip 269KB)로 예상보다 작다.
• 포맷별로 독립된 wasm 번들로 분리되어 있어서, 필요한 포맷만 import하면 나머지는 tree-shake된다. 예를 들어 `@silurus/ooxml/pptx`만 import하면 docx/xlsx 관련 번들은 포함되지 않는다.
• MathJax + STIX Two Math 수식 엔진이 옵션으로 제공되며 약 3MB인데, 이건 별도 엔트리(`@silurus/ooxml/math`)로 분리되어 있어서 사용하지 않으면 번들에 포함되지 않는다.
• headless 엔진(DocxDocument / XlsxWorkbook / PptxPresentation)을 직접 사용할 수 있어서, 빌트인 뷰어 UI에 종속되지 않고 스크롤 뷰, 썸네일 그리드, master-detail 패널 등 원하는 UI를 직접 구성할 수 있다.
• Vite에서는 `vite-plugin-wasm`, webpack에서는 `experiments.asyncWebAssembly` 설정이 필요하다.
• 이 프로젝트의 코드 전체(Rust 파서, TypeScript 렌더러, 테스트, 툴링)가 Claude(Anthropic)를 통해 반복적인 프롬프팅으로 작성됐으며, 사람이 직접 작성한 애플리케이션 코드는 없다고 README에 명시되어 있다.

Evidence

• 'pixel-faithful'이라는 제목이 과장됐다는 지적이 있었다. PPTX에서 슬라이드 이미지 배경, 불릿 포인트 이미지가 실제로 동작하지 않고 일부 텍스트 색상이 반전되는 등 현재 상태와 제목 간 괴리가 있다는 의견이 나왔다.
• 실제로 내부 테스트 파일에 돌려봤더니 전부 실패했다는 경험담도 있었고, 복잡한 Word 문서에서는 렌더링이 심하게 틀렸다는 의견도 있었다. 반면 컨설팅 회사들의 공개 PPTX 파일을 테스트해봤더니 pixel-perfect하진 않지만 레이아웃이 읽기에 충분히 좋았다는 긍정적인 경험도 있었다.
• 지난주에 '브라우저에서 Office 파일 미리보기' 문제를 직접 겪었던 개발자가 결국 서버에서 headless LibreOffice로 PDF 변환하는 방식으로 해결했다고 공유했다. 이 라이브러리와 비교하면 PPTX/DOCX는 LibreOffice 변환이 약간 우세하지만(텍스트 선택 가능), XLSX 미리보기는 AI 코딩된 것치고 인터랙티브하게 잘 동작해서 놀랐다고 했다.
• Office 문서의 pixel-perfect 렌더링이 실제로 얼마나 중요한지에 대한 맥락이 공유됐다. 수십 년 된 Word 템플릿을 쓰는 기업들이 LibreOffice에서 딱 두 픽셀 어긋나는 문제 때문에 120페이지 문서 전체 레이아웃이 틀어지는 상황을 겪고, 그 이유로 Microsoft 365 구독을 계속 유지한다는 것이다.
• LLM 파이프라인 활용 가능성에 대한 의견도 있었다. PowerPoint 파일을 이미지로 렌더링하면 LLM이 이해하기 좋고, Cloudflare Workers 환경에서 돌려서 Office 파일을 이미지로 변환 → OCR → Markdown 파이프라인을 저렴하게 구성할 수 있지 않겠냐는 아이디어가 나왔다.

How to Apply

• 브라우저에서 XLSX 파일 미리보기가 필요한 경우, `@silurus/ooxml/xlsx`만 import해서 Canvas에 렌더링하면 서버 변환 없이 클라이언트에서 바로 처리할 수 있다. 커뮤니티 반응 기준으로 XLSX 렌더링 품질이 가장 좋다고 평가됐다.
• LLM에 Office 문서를 이해시켜야 하는 파이프라인을 만들 때, 이 라이브러리로 PPTX/DOCX를 Canvas 이미지로 렌더링한 뒤 Vision 모델에 넘기는 방식으로 구성할 수 있다. 서버리스 환경(예: Cloudflare Workers)에서 WebAssembly가 지원된다면 별도 서버 없이 파이프라인을 구성할 수 있다.
• headless 엔진(DocxDocument 등)을 사용하면 빌트인 UI 없이 Canvas만 받아서 직접 렌더링할 수 있으므로, 기존 앱에 썸네일 그리드나 슬라이드 프리뷰 같은 커스텀 UI를 붙이고 싶을 때 적합하다.
• 현재 서버에서 LibreOffice headless로 Office → PDF 변환을 하고 있다면, XLSX의 경우 이 라이브러리로 클라이언트 사이드 렌더링으로 대체해 서버 부하를 줄이는 것을 고려해볼 수 있다. 단, 복잡한 DOCX/PPTX는 아직 LibreOffice 변환이 더 정확할 수 있다.

Code Example

// 설치
npm install @silurus/ooxml
// 또는
pnpm add @silurus/ooxml

// 필요한 포맷만 import (tree-shaking 적용)
import { XlsxWorkbook } from '@silurus/ooxml/xlsx';
import { DocxDocument } from '@silurus/ooxml/docx';
import { PptxPresentation } from '@silurus/ooxml/pptx';

// vite.config.ts - wasm 플러그인 설정 필요
import wasm from 'vite-plugin-wasm';
export default { plugins: [wasm()] };

// webpack - asyncWebAssembly 활성화 필요
module.exports = {
  experiments: { asyncWebAssembly: true }
};

Terminology

관련 논문

• Tokenomics: 에이전트 기반 소프트웨어 개발에서 토큰이 어디에 쓰이는지 정량 분석

  LLM 멀티에이전트 시스템으로 소프트웨어 개발을 자동화할 때 토큰의 59.4%가 Code Review 단계에서 소비된다는 연구 결과로, AI 에이전트 비용 구조를 처음으로 체계적으로 측정한 논문이다.

• Lowfat – CLI 출력을 필터링해서 LLM 토큰을 91.8% 절약한 도구

  AI 에이전트가 CLI 명령어 출력을 읽을 때 불필요한 노이즈를 제거해 토큰 사용량을 줄여주는 Rust 기반 CLI 필터 도구. Claude Code, OpenCode 등 주요 AI 코딩 에이전트와 통합 가능하다.

• 1-bit/Ternary Bonsai Image 4B: 로컬 디바이스용 이미지 생성 모델

  4B 파라미터 이미지 생성 모델의 가중치를 1비트/3값으로 극단적으로 압축해서 iPhone에서도 돌아가게 만든 모델. 7.75GB짜리 diffusion transformer를 0.93GB까지 줄였다.

• Tiny-vLLM: C++와 CUDA로 만드는 고성능 LLM 추론 엔진

  vLLM의 핵심 기능을 C++와 CUDA로 직접 구현하며 배울 수 있는 교육용 LLM 추론 엔진 프로젝트로, 소스코드와 단계별 강의가 함께 제공된다.

• 일반 데이터센터 GPU에서 요청당 3,000 tokens/s 실시간 LLM 추론

  Kog AI가 8× AMD MI300X에서 요청당 3,000 tokens/s를 달성하는 LLM 추론 엔진을 공개했고, 기존 소프트웨어 스택의 병목을 GPU 메모리 대역폭 최대화로 풀어냈다는 내용이다.

• LLM을 위한 수면과 유사한 컨텍스트 통합 메커니즘

  LLM이 긴 컨텍스트를 처리할 때 발생하는 Attention 비용 문제를 해결하기 위해, 사람의 수면처럼 주기적으로 컨텍스트를 fast weight에 압축·저장하는 새로운 메커니즘을 제안한 논문이다.

• CODA: Transformer 블록을 GEMM-Epilogue 프로그램으로 재작성하기

Related Resources

• office-open-xml-viewer GitHub 원본
• Storybook 데모
• docx-editor (사람이 직접 작성한 유사 프로젝트)
• HN 원문 댓글 스레드