HTML을 인쇄용으로 페이지 매김하려는 시도를 멈췄더니 (드디어 성공했다)
Source: Dev.to
근본적인 문제
몇 달 동안 나는 많은 개발자들이 겪는 문제와 씨름했다: HTML 콘텐츠를 여러 페이지에 걸쳐 레이아웃을 깨뜨리지 않고 올바르게 인쇄하는 것. 다른 사람들처럼 나는 일반적인 접근 방식을 시도했다:
- CSS
page-break-* @print미디어 쿼리- 헤드리스 브라우저
- HTML → PDF 생성기
이들은 어느 정도까지는 작동한다. 하지만 콘텐츠가 조금이라도 복잡하거나 동적이거나 편집 가능해지면 모든 것이 무너진다: 예측할 수 없는 페이지 나눔, 잘린 요소, 일관성 없는 여백, 여기저기 흩어진 고아와 고아 페이지들.
전환점
어느 순간 나는 HTML을 “설득”해서 제대로 페이지 매김하도록 하려는 시도를 멈췄다. 콘텐츠를 자르는 대신, 나는 논리를 뒤집었다: 각 페이지를 더 크고 연속적인 콘텐츠 조각을 바라보는 창으로 만든다면 어떨까? 바로 그때 나는 흔히 밀접하게 결합된 두 책임을 분리했다:
- 콘텐츠 렌더링
- 페이지 매김
다른 접근 방식
구체적으로, 아이디어는 CSS에서 논리적인 A4 페이지를 만들어 더 큰 HTML 문서에 대한 창으로 사용하고, 그 페이지를 필요에 따라 여러 번 복제하는 것이다. 각 페이지는 수직 오프셋을 사용해 동일한 콘텐츠의 다른 부분을 동적으로 표시함으로써 하나의 통합된 다중 페이지 문서처럼 보이게 만든다. 콘텐츠는 절대 “깨지”거나 임의로 분할되지 않는다: 단순히 연속적인 창을 통해 관찰될 뿐이며, 창의 크기와 주변 메타데이터는 완전히 제어할 수 있다. 화면에 보이는 것이 인쇄되는 것과 정확히 일치하지 않을 수도 있는데, 이는 의도된 바이다.
이것이 바꾸는 점
이 분리를 통해 다음을 구현할 수 있다:
- 안정적이고 예측 가능한 다중 페이지 출력
- 인쇄 전에도 완전히 편집 가능한 문서
- 복잡한 콘텐츠에서도 결정론적인 페이지 매김
구현은 기술적인 관점에서 의도적으로 단순하다(순수 바닐라 JavaScript), 하지만 문제에 접근하는 근본적으로 다른 방식을 기반으로 한다.
PS: 이 접근 방식은 특허로 보호받고 있음을 알려드립니다. 혼란을 방지하기 위해 사전에 명확히 밝히고자 합니다.