Silurus/ooxml: 브라우저에서 Office 문서를 Canvas로 그리는 AI 제작 뷰어
Silurus/ooxml: Pixel-faithful Office documents, rendered in the browser
TL;DR Highlight
AI 에이전트만으로 만든 Rust+WASM 기반 Office 문서 Canvas 뷰어
Who Should Read
서버 LibreOffice 변환 없이 브라우저에서 docx·xlsx·pptx 미리보기를 붙이려는 프론트엔드·백엔드 개발자
Core Mechanics
- 코드 전부를 AI 에이전트가 썼다
- Rust 파서, TypeScript 렌더러, 테스트, 툴링까지 주로 Claude와 Codex에게 반복 프롬프트로 만들었다고 README에 적혀 있다.
- 사람이 직접 쓴 애플리케이션 코드는 없다고 밝힌다.
- 스펙과 정답이 있어서 AI에 잘 맞는다고 본다
- OOXML은 ECMA-376 / ISO-29500 명세가 있고, 비교 대상인 Word·Excel·PowerPoint가 정답 역할을 한다.
- 작성자는 읽기 전용으로 범위를 좁혀 사용자 파일을 망가뜨릴 위험도 피했다고 쓴다.
- 파서는 WASM, 렌더링은 Canvas 2D
- 파서는 Rust로 짜서 WebAssembly로 컴파일한다.
- DocxDocument, XlsxWorkbook, PptxPresentation 헤드리스 엔진으로 내 캔버스에 직접 그려 UI를 자유롭게 구성할 수 있다.
- 읽기 전용 뷰어로 범위를 못박았다
- 편집 UI, 변경 API, 저장·왕복 변환은 범위 밖이다.
- 선택, 복사, 검색, 히트 테스트 같은 읽기 동작은 범위 안이다.
- 설치와 사용이 간단하다
- npm install @silurus/ooxml 후 DocxViewer, XlsxViewer, PptxViewer를 import해서 load()로 파일을 연다.
- 수식(MathJax 약 4MB), ChartEx, 3D 차트, TIFF는 옵트인 모듈이라 쓰지 않으면 번들에 안 들어간다.
- AI/MCP 요청용 선택 영역 컨텍스트를 준다
- xlsx.getSelectionContext()가 선택된 셀을 직렬화 가능한 읽기 전용 형태로 돌려준다.
- 셀 수와 텍스트 길이 상한(maxCells, maxTextCharacters)을 지정할 수 있다.
Community Reactions
- 복잡한 문서에서는 많이 틀린다는 경험
- 중간 복잡도 문서 여러 개로 돌려 보니 크게 틀렸다는 댓글이 있다.
- 사내 테스트 파일 전부에서 실패했다는 댓글도 있다.
- PPTX 기능 누락을 짚은 반론
- 슬라이드 이미지 배경과 글머리표 이미지가 동작하지 않고 일부 텍스트 색이 반전된다는 의견이 있다.
- 제목의 pixel-faithful 표현이 저장소에서 보이지 않는다는 지적도 있다.
- XLSX 미리보기가 인상적이라는 경험
- 서버에서 headless LibreOffice로 PDF 변환하는 방식을 쓰던 댓글 작성자는 PPTX·DOCX는 변환 쪽이 낫다고 했다.
- PDF 변환은 텍스트 선택이 되지만 이 라이브러리는 안 된다는 점도 언급했다.
- XLSX 미리보기는 상호작용까지 되어 놀라웠다고 한다.
- 번들 크기와 대안에 대한 정보
- DevTools로 보니 WASM이 docx 458kb(gzip 217kb), pptx 574kb(253kb), xlsx 601kb(269kb)였다는 댓글이 있다.
- 비슷한 프로젝트로 eigenpal/docx-editor와 superdoc-dev/superdoc이 언급됐다.
How to Apply
- 내 문서 샘플로 먼저 렌더링 비교하기
- 오늘 실제 서비스에서 쓰는 docx·pptx·xlsx 5~10개를 데모 사이트(ooxml.silurus.dev)에 올려 Office 원본과 눈으로 비교하라.
- 배경 이미지, 글머리표, 표처럼 댓글에서 문제로 나온 항목을 체크하라.
- 미리보기 기능에 Canvas 뷰어 붙이기
- 서버 PDF 변환을 대체할 곳에 DocxViewer, XlsxViewer, PptxViewer를 넣고 load()로 파일 URL을 넘겨라.
- 텍스트 선택이 필수인 화면은 기존 PDF 변환을 그대로 두어라.
- AI 요청에 XLSX 선택 영역 전달하기
- 스프레드시트 화면에서 사용자가 셀을 고르면 getSelectionContext({maxCells})로 직렬화해 LLM 프롬프트나 MCP 요청에 넣어라.
- maxCells와 maxTextCharacters로 토큰 사용량 상한을 걸어라.
- 번들과 WASM 경로 설정 점검하기
- Vite 7 dev 서버는 vite.config에 optimizeDeps.exclude로 '@silurus/ooxml'을 추가하라.
- esbuild·Angular CLI는 .wasm을 복사하고 wasmUrl 옵션으로 경로를 지정하라.
Try It
// 브라우저 프로젝트 터미널에서: npm install @silurus/ooxml
// 아래는 TypeScript. 캔버스와 파일 경로만 바꿔 넣는다
import { DocxViewer } from '@silurus/ooxml/docx';
const canvas = document.getElementById('docx-canvas') as HTMLCanvasElement;
const docx = new DocxViewer(canvas);
await docx.load('/document.docx');
docx.nextPage();Terminology
관련 논문
WhatsApp 도움말 페이지에 숨겨진 LLM 지시문: 규제기관을 추천하지 말라
WhatsApp 도움말에 화면엔 안 보이는 AI 지시문 102개가 숨어 있었다
같은 시뮬레이션, 다른 근거: 도구 출력을 파일로 넘기면 LLM 에이전트 정확도가 어디서 깎이나
긴 툴 출력을 파일로 넘기자 GPT-5.1은 정확도 11.3%p 하락, 정식 출력 지정하니 회복
가짜 뉴스가 진짜 폭락을: LLM 트레이딩 에이전트 대상 정보 주입 공격
가짜 헤드라인 한 줄로 LLM 트레이딩 에이전트 62%를 조종했다(프롬프트 주입은 14%)
Harness Engineering 101: LLM은 뇌, harness는 몸
에이전트는 JSON 배열을 관리하는 루프이고, 16개 챕터로 직접 만들어 본다
Harness²: 에이전트 harness를 스스로 고쳐 쓰는 재귀 최적화 프레임워크
모델은 고정하고 harness를 재귀로 고쳤더니 벤치마크 점수가 최대 11.8%p 올랐다
Ask HN: 이해 못 하는 AI 작성 코드를 배포할 때 어떻게 하나
설계는 내가, 구현은 LLM이: 이해 못 하는 코드를 다루는 개발자들의 방법
해고된 Savannah 경찰관, ICE 요원 남편에게 Flock 계정 공유
경찰관이 Flock 계정을 남편(ICE 요원)에게 공유했고, 감사에서 983건 검색이 드러나 해고됐다
tmux와 Claude Code: 세션, send-keys, 그리고 한계선
tmux로 Claude Code 여러 개를 돌리면 편하지만 에이전트 4개쯤에서 한계가 온다