Formfeed 편집기가 PDF와 같은 페이지 나눔을 미리 보여준다

Formfeed의 페이지 미리보기는 Paged.js의 기본 설정과 달리 PDF와 카드별 페이지 배치 및 페이지 수가 일치한다. 다만 Chromium이 페이지에 맞추려고 문서 전체를 축소하는 경우는 미리보기에서 그대로 재현할 수 없으며, 편집기는 이 문제를 찾아 크기와 축소율을 표시한다.

Formfeed는 A4 문서에 제목, 배너, 카드 24개를 배치해 비교했다. 카드에는 height: 22mm, padding: 5mm, 테두리를 적용하고 break-inside: avoid로 페이지 사이에서 나뉘지 않게 했다. 위아래 여백은 20mm, 좌우 여백은 18mm로 설정하고 페이지 번호를 넣었다. PDF는 렌더링 작업 서버의 헤드리스 Chromium으로 만들고, Paged.js 기본 설정과 Formfeed의 페이지 미리보기 결과를 비교했다.

차이는 Paged.js 스타일시트의 .pagedjs_pagebox * { box-sizing: border-box } 규칙에서 생겼다. 이 선택자는 페이지 상자뿐 아니라 템플릿 안의 요소에도 적용된다. border-box에서는 높이에 패딩과 테두리가 포함되지만, Chromium이 인쇄에 사용하는 기본값인 content-box에서는 패딩과 테두리가 높이에 더해진다. 그 결과 카드가 Paged.js 기본 설정에서는 22mm, PDF에서는 32mm를 조금 넘는 높이로 계산돼 페이지마다 들어가는 카드 수가 달라졌다.

Formfeed는 레이아웃을 시작하기 전에 스타일시트의 해당 규칙을 [class*="pagedjs_"]에만 적용되도록 바꾼다. 그러면 템플릿 요소는 PDF에서 적용될 박스 모델을 유지한다. 인쇄 스타일 초기화에서도 미리보기의 머리글과 바닥글 상자는 제외한다. Chromium의 머리글·바닥글 템플릿에도 초기화 규칙이 적용되지 않기 때문이다.

하지만 배너에 width: 100%와 padding: 5mm 10mm를 함께 주면 다른 문제가 생긴다. content-box에서는 배너가 여백 사이의 공간보다 20mm 더 넓어진다. Paged.js 기본 설정은 패딩을 너비에 포함해 문제를 표시하지 않지만, Formfeed 미리보기는 배너가 오른쪽 여백을 넘는 모습을 보여준다. Chromium은 PDF 전체를 축소해 가장 넓은 요소를 페이지에 맞춘다. 이 사례에서는 89.7%로 줄어 카드 제목의 글자 크기도 10pt에서 8.97pt가 됐다. 축소는 배너가 있는 페이지만이 아니라 모든 페이지에 적용돼 페이지별 카드 수가 7 · 8 · 8 · 1개로 바뀐다. 앞서 비교한 미축소 PDF의 6 · 7 · 7 · 4개와도 달라진다.

레이아웃을 100% 크기로 만드는 미리보기는 Formfeed를 포함해 이 전체 문서 축소를 재현할 수 없다. 대신 Formfeed는 레이아웃이 끝난 뒤 가장 넓은 요소를 확인해 여백을 넘는 요소를 편집기의 문제 목록에 표시한다. 이 사례에서는 초과 너비 20mm와 PDF 축소율 89.7%를 알리고 템플릿의 해당 태그로 연결한다. Formfeed는 이런 요소에 box-sizing: border-box를 지정하거나 너비를 따로 설정하지 않는 방법을 제시한다. 블록 요소는 별도로 너비를 지정하지 않아도 컨테이너 너비에 맞는다.

Formfeed는 미리보기의 신뢰도를 같은 문서와 용지 크기에서 페이지마다 배치되는 항목 수를 세어 측정할 수 있다고 설명한다. 편집기의 True render는 초안을 PDF를 만든 것과 같은 렌더링 작업자로 보내며, 비용은 들지 않는다고 밝혔다. 미리보기 방식과 True render는 편집기 안내에서 확인할 수 있고, 시험용 문서는 송장 예시에서 볼 수 있다.

측정은 2026년 9월 21일 렌더링 작업 서버의 Chromium 153.0.8010.12와 Paged.js 0.4.3으로 진행했다.