Imposia 문서
React HTML을 브라우저 페이지로 만들어 미리보고, 인쇄하고, PDF로 저장합니다.
사용자가 내용을 편집하고 인쇄하는 기능을 만들다 보면, 대개 "같은 문서"를 주장하는 문서가 세 개 생깁니다. 에디터가 내용을 렌더링하고, 미리보기가 그것을 복제하고, 인쇄 경로가 다른 곳에서 다시 조립합니다. 그러다 미리보기는 12페이지인데 PDF는 13페이지가 되고, 어느 쪽이 맞는지 아무도 답하지 못합니다. 어느 문서가 기준인지 정한 적이 없기 때문입니다.
Imposia는 이 질문 자체를 없앱니다. 이미 사용하던 HTML과 CSS를 브라우저 안에서 하나의 페이지 문서로 나누고, 미리보기·네이티브 인쇄·PDF로 저장이 모두 그 완성된 문서 하나를 바라봅니다.
첫 페이지 만들기
React 패키지를 설치하고 10분 안에 HTML을 A4 페이지로 표시합니다.
이미지와 글꼴 불러오기
외부 리소스가 들어오는 유일한 경로인 assetResolver를 구현합니다.
퍼블리싱 모델
미리보기, 인쇄된 페이지, PDF가 항상 서로 일치하는 이유를 설명합니다.
API 레퍼런스
React 핸들, Core 컨트롤러, Viewer 탐색, 수명 주기 규칙입니다.
HTML을 넘기면 일어나는 일
- 앱이 HTML, CSS, 페이지 옵션을 Imposia에 전달합니다.
- Core가 임시 iframe에서 다음 버전을 페이지로 나눕니다.
- 페이지네이션이 끝나면 화면에 보이는 문서를 한 번에 교체합니다.
페이지네이션이 실패하거나 더 새로운 갱신이 먼저 도착하면 마지막으로 완성된 문서가 그대로 남습니다. 완성되지 않은 레이아웃은 화면에 나타나지 않습니다.
확정된 원본 하나로 만들 수 있는 출력
| 출력 | 얻는 방법 | 받는 것 |
|---|---|---|
| 미리보기 | React Viewer | 화면 표시와 인쇄의 기준인 canonical iframe에서 그대로 표시되는 완성된 페이지입니다. |
| 인쇄 또는 PDF | print() | 브라우저의 기본 인쇄 창입니다. 여기서 사용자가 프린터나 PDF로 저장을 선택합니다. |
| EPUB | exportEpub() | 선택 사항입니다. 확정된 원본의 의미 구조로 만든 리플로우형 EPUB 3.3 Blob입니다. |
크기와 속도
| 사용 경로 | gzip 크기 | gzip 예산 |
|---|---|---|
| Core · PageDocument | 63.2 KiB | 63.5 KiB |
| Core · Publication | 67.5 KiB | 68 KiB |
| Viewer · PageDocument | 11.8 KiB | 13 KiB |
| Client · PageDocument | 71.8 KiB | 72 KiB |
| React · PageViewer | 73.6 KiB | 74 KiB |
번들 크기는 2026년 9월 27일 0.6.0에서 측정했으며 React와 React DOM은 제외합니다. Core 전체 브라우저 파일은 gzip 68.4 KiB입니다. 페이지네이션 정확성 수정에 따른 증가분을 반영해 예산을 1~1.5 KiB 높였습니다. 크기 최적화 결과는 아닙니다. 측정 방법과 예산 변경 근거.
| 항목 | 결과 |
|---|---|
| 99페이지 문서 페이지네이션 | 127 ms |
| 그 문서에서 단어 하나를 바꾸고 다시 확정 | 127 ms |
| 확정 직후 첫 화면 렌더링 | 2.0 ms |
항목마다 <style>이 있는 100개 항목 Publication 페이지네이션 | 97 ms |
실행 시간은 2026년 9월 24일 Apple M4·Chromium 149에서 7회 측정한 중앙값입니다. 크기는 pnpm build 후 pnpm bundle:size, 시간은 pnpm benchmark로 다시 측정할 수 있습니다.
경계를 확인하세요
Imposia는 PDF 바이트를 만들지 않습니다
print()는 브라우저 자체의 인쇄 흐름을 엽니다. PDF 렌더러도, Node·CLI 렌더러도, 서버 퍼블리싱 API도 없습니다. 서버에서 PDF 바이트가 필요한 앱이라면 Imposia는 맞는 도구가 아닙니다. 헤드리스 브라우저나 서버 사이드 렌더러를 사용하세요.
Imposia는 브라우저에서 ESM으로 실행됩니다. 이 범위가 앱에 맞다면 첫 페이지 만들기로 이어가세요.