2026.11.04 수
office-engine: 서버 없이 브라우저에서 큰 오피스 파일 열기
오늘의 픽: office-engine
office-engine 은 DOCX, XLSX, PPTX 파일을 브라우저 안에서 열고 편집하는 프로덕트다. 파일을 서버로 보내지 않는다. 큰 파일은 읽은 부분부터 화면에 보여 준다.
오늘의 픽으로 선정한 이유는 웹 앱에 문서 편집기를 넣을 때 변환 서버가 필요 없기 때문이다.

- 출처
- Show HN
- 만든 방식
- TypeScript, React, Bun, Vite
무엇이 문제인가
웹 앱에서 사용자가 올린 Word, Excel, PowerPoint 파일을 보여 주려면 파일을 읽어 화면에 그려야 한다. 행이 수십만 개인 스프레드시트는 끝까지 읽는 데 시간이 오래 걸린다. 다 읽은 뒤에 화면을 그리면 사용자는 그동안 기다려야 한다.
Google Drive 도움말에 따르면 Google Sheets 형식의 스프레드시트는 셀 20,000,000개나 100 MB 를 넘을 수 없다.
어떻게 해결했나
office-engine 은 2026년 11월 3일 Hacker News 에 Show HN 글로 올라왔다. 웹 앱에 office-engine 의 React 컴포넌트를 넣으면 DOCX, XLSX, PPTX 를 브라우저에서 열고 편집할 수 있다. 파일은 서버로 보내지 않고 브라우저에서 읽는다.
큰 파일은 끝까지 읽기 전에 화면을 그린다. DOCX, XLSX, PPTX 파일은 여러 XML 파일을 ZIP 으로 묶어 만든다. office-engine 은 그 가운데 화면에 보여 줄 시트나 슬라이드의 XML 파일부터 압축을 풀어 읽는다. XML 은 웹 워커브라우저에서 화면을 그리는 스레드와 별도의 스레드로 스크립트를 실행하는 기능이다. 오래 걸리는 작업을 맡겨도 화면이 멈추지 않는다.에서 파싱해 화면이 멈추지 않게 한다. 화면에는 보이는 셀과 페이지만 그린다. 제작자에 따르면 저장할 때는 편집한 부분만 다시 생성하고, 나머지 부분은 원본 바이트를 그대로 유지한다.
무엇이 다른가
첫째, 파일을 처리하는 곳이 다르다. Google Sheets 에서는 파일을 Google Drive 에 올린 뒤 Sheets 형식으로 변환해 편집한다. office-engine 은 브라우저 안에서 원래 형식 그대로 읽고 저장한다. 트레이드오프는 여는 속도가 사용자 컴퓨터의 성능에 따라 달라진다는 점이다.
둘째, 큰 파일을 여는 방식이 다르다. office-engine 은 파일을 끝까지 읽기 전에도 이미 읽은 행과 문단부터 화면에 보여 준다.
어떻게 만들었나
- 커밋 21개는 2026년 11월 2일과 3일에 개발자 한 명이 작성했다. 그중 19개에 Claude 와 함께 작성했다는 Co-authored-by 트레일러가 있다.
- 큰 시험 파일은 저장소에 넣지 않고, Python 스크립트로 만든다.
- Bun 으로 실행하는 테스트와 브라우저에서 실행하는 테스트가 있다.
실행해 보니
Bun 1.4.2 로 저장소의 의존성을 설치하고, 4코어 가상 머신의 headless창을 띄우지 않고 브라우저를 실행하는 방식이다. 테스트나 측정을 자동으로 할 때 사용한다. Chromium 에서 데모 페이지를 열었다.
- 설치.
bun install은 3초 만에 끝났다. - 시험 파일. 저장소의 Python 스크립트로 300,000행 × 12열 XLSX(24.8 MB), 문단 20,000개 DOCX, 305장 PPTX 를 만드는 데 42초가 걸렸다.
- 테스트.
bun test를 실행하자 127개가 31초 만에 모두 통과했다. - 열기. 데모 페이지를 프로덕션 빌드로 띄우고 파일마다 세 번 열었다. 데모는 파일을 열기 시작한 때부터 뷰어가 준비될 때까지 걸린 시간을 표시한다. 그 시간은 300,000행 XLSX 가 156~225 ms, 문단 20,000개 DOCX 가 93~113 ms, 305장 PPTX 가 68~95 ms 였다.
- 전체 로딩. 300,000행 XLSX 의 로딩 표시는 파일이 열린 뒤 4.1~4.4초 만에 사라졌다. README 의 측정표에서는 같은 크기의 파일을 끝까지 읽는 데 약 2초가 걸렸다. 오늘은 그 두 배쯤 걸렸다. README 의 수치는 Apple M 계열 컴퓨터의 Chromium 에서 측정한 값이다.
- 화면에 그린 셀. 다 읽은 뒤 표 안에 있는 DOM 요소는 829개, 그 가운데 셀 요소는 336개였다. 셀 3,600,000개 가운데 화면에 보이는 셀만 그렸다.

확인하지 못한 것
- 저장. 셀 하나를 편집해 저장한 뒤, 편집하지 않은 부분의 바이트가 원본과 같은지 비교해 보자.
- URL 로 열기. 범위 요청파일 전체가 아니라 지정한 바이트 구간만 보내 달라는 HTTP 요청이다. 큰 파일의 일부만 내려받을 때 사용한다.을 지원하는 서버에 큰 XLSX 를 올리고 URL 로 열어, 필요한 부분만 내려받는지 확인하자.
판정
작동한다. 300,000행 XLSX 가 0.23초 안에 열렸다. 다만 이 파일을 끝까지 읽는 데는 4초 넘게 걸렸다. 사용자가 올린 오피스 파일을 웹 앱 안에서 바로 보여 줘야 하는 경우에 써 볼 만하다.
시작하기
bun add @p10node/office-engineimport { DocViewer } from '@p10node/office-engine'
- 필요한 것
- React 18 이상. 저장소를 직접 빌드하려면 Bun 이 필요하다.
- 비용
- MIT, 무료.
제작자에 따르면 예전 바이너리 형식(.doc, .xls, .ppt)과 암호화된 파일은 열지 못하고, XLSX 의 차트와 피벗 테이블은 아직 편집할 수 없다.
실행해서 확인한 절차다.
진행
- 3일예정
- 7일예정
- 15일예정
- 30일예정
- 90일예정
- 180일예정
- 365일예정