브라우저에서는 읽기 쉬웠던 안내가 종이로 나오면 어색해진다. 메뉴가 첫 장을 차지하고 표는 오른쪽에서 잘리며, 링크를 누르라는 문장만 남는다. 인쇄용 화면을 준비한다는 것은 화면을 축소하는 일보다, 클릭할 수 없는 상태에서도 내용을 이해하게 만드는 일에 가깝다.
Brennen Puth의 Websites Should Be Printable는 2026년 10월 24일 글이다. 간단한 인쇄 스타일을 제시하면서도 코드 블록의 페이지 나눔은 아직 어려운 문제로 남긴다. 이를 완성된 해법으로 가져오기보다, 내 페이지에서 무엇을 확인할지 정하는 출발점으로 읽을 수 있다.
먼저 종이에 남을 질문을 고르기
가령 행사 안내 페이지를 인쇄한다고 하자. 독자는 휴대전화 연결이 불안정한 현장에서 장소와 시작 시각을 보려 한다. 화면에서는 접힌 메뉴와 지도 링크로 해결했던 정보가 인쇄물에서는 본문에 있어야 한다. 신청 버튼을 크게 남기는 것보다 행사 이름, 날짜, 주소가 빠지지 않는 편이 이 장면에서는 중요하다.
이는 실제 행사를 조사하거나 인쇄한 결과가 아닌 설계 예시다. 다른 페이지에는 다른 목적이 있다. 개발 문서라면 적용 버전과 예제의 전제, 학습 자료라면 그림 설명과 문제의 조건을 먼저 살펴야 한다. 모든 사이트에서 지울 요소 목록을 먼저 정하면 필요한 정보까지 사라질 수 있다.
화면의 링크 문구도 다시 읽는다. 여기에서 확인하세요라는 표현은 종이에서 목적지가 없다. 독자가 나중에 원문으로 돌아가야 한다면 읽을 수 있는 짧은 주소나 문서 식별 정보를 남기는 방법을 검토할 수 있다. 긴 추적 매개변수나 로그인 전용 주소를 무조건 출력하는 방식은 피하고, 실제 독자에게 도움이 되는지 판단한다.
인쇄 전용 규칙은 작게 시작하기
MDN의 인쇄 안내는 인쇄 매체용 규칙과 페이지 설정을 설명한다. 아래 코드는 탐색 영역을 숨기고 본문의 색과 폭을 정리하는 간단한 예시다. 실제 사이트의 클래스나 우선순위에 맞춰 조정하고 미리보기로 확인해야 한다.
@media print {
.site-nav { display: none; }
main { max-width: none; }
body { color: #000; background: #fff; }
}
@page { margin: 18mm; }이 코드를 붙였다고 인쇄 품질이 검증되는 것은 아니다. 페이지 안에 같은 영역을 다시 표시하는 더 구체적인 규칙이 있을 수 있고, 배경을 제외하면 의미가 사라지는 범례도 있을 수 있다. 빨간색과 초록색만으로 상태를 나눴다면 글자나 형태로도 차이를 설명할 수 있는지 보아야 한다.
여백 수치 역시 권장 표준으로 제시한 값이 아니다. 가상의 출발값이다. 종이 크기, 브라우저, 사용자가 지정한 배율과 머리글 설정에 따라 결과는 달라진다. 여백 하나를 모든 출력 환경의 보증으로 삼기보다 가장 많이 쓰는 조합부터 실제 결과를 남기는 편이 낫다.
페이지 경계에서 다시 읽기
인쇄 미리보기에서는 첫 장만 보기 쉽다. 그러나 내용이 깨지는 곳은 종종 다음 장의 첫 줄이다. 소제목만 앞 장 끝에 남고 설명이 다음 장으로 넘어가거나, 표의 머리글이 사라져 열의 의미를 알 수 없게 된다. 긴 코드와 넓은 표는 별도의 확인 대상으로 삼는 것이 좋다.
페이지 나눔을 막는 규칙을 넓게 적용하는 것도 해결책은 아닐 수 있다. 큰 블록 전체를 한 장에 붙잡아두면 빈 공간이 과하게 생기거나 다른 내용이 밀린다. 짧은 제목과 첫 문단을 함께 두는 문제, 긴 표를 여러 장에 나누는 문제는 다르게 다루어야 한다. 한 줄의 규칙으로 둘을 모두 해결했다고 판단하지 않는다.
검토 기록에는 페이지 전체가 나온다는 말보다 구체적인 위치가 유용하다. 두 번째 표의 마지막 열이 보인다, 세 번째 장의 코드가 중간에서 누락되지 않는다, 원문으로 돌아갈 정보가 남아 있다는 식이다. PDF 저장과 실제 프린터 출력의 차이도 필요하면 별도로 확인한다. 이 글에서는 특정 페이지의 출력 시험을 수행했다고 주장하지 않는다.
출력용 문서에 날짜가 필요하다면 무엇의 날짜인지도 명확히 한다. 행사 날짜, 문서 수정일, 인쇄한 시각은 서로 다르다. 오래된 종이가 남을 수 있는 안내라면 다시 확인해야 할 원문 위치를 적는 편이 좋다. 날짜를 장식처럼 넣는 것과 정보의 유효 범위를 알려주는 것은 다른 일이다.
작은 수정의 검토 범위를 정하는 방법을 인쇄 스타일에도 적용할 수 있다. 메뉴를 숨기는 수정이라면 메뉴 안에만 있던 연락처나 주의사항도 함께 사라지는지 보는 것이다. 화면을 건드리지 않았다는 이유로 내용의 변화가 없다고 단정하기 어렵다.
인쇄 버튼을 누르는 독자는 새 디자인을 구경하려는 사람이 아닐 수 있다. 화면을 떠나서도 그 내용을 쓰려는 사람이다. 첫 장의 모양을 예쁘게 정리한 뒤에는 마지막 장까지 읽어보자. 종이만 들고 있는 사람이 무엇을 알고 무엇을 할 수 있는지, 그 질문이 인쇄용 CSS의 완료 조건이 될 수 있다.
공개 원문을 참고해 AI의 도움으로 구성·작성한 글입니다. 가상 예시는 실제 수행 결과와 구분했으며, 표지는 Google Gemini로 만든 개념 일러스트입니다.
