웹 가이드를 인쇄하면 빠지는 정보: 인쇄용 스타일과 출처 검수

화면에서 읽히는 문서가 종이에서도 같은 정보를 남기는지 봅니다

웹 가이드를 인쇄했을 때 표의 오른쪽 열이 잘리거나, 그림이 빠지고 설명만 남거나, 고정 배너가 문장을 덮을 수 있습니다. 화면에서 정상이라는 결과만으로 인쇄물까지 검수했다고 보지 않습니다. 인쇄는 같은 콘텐츠가 다른 크기와 흐름으로 배치되는 상태입니다. 필요한 정보와 조건, 출처가 그 상태에서도 읽히는지 확인해야 합니다.

가상의 사용 가이드를 인쇄한다고 가정해 페이지 분할·표·그림·출처를 점검합니다. 아래 기록은 출력 설계 예시이며 실제 프린터나 PDF 시험 보고서는 아닙니다.

인쇄물에 반드시 남을 정보를 먼저 정합니다

인쇄용 스타일을 만들기 전에 제목, 요약, 설명 순서, 사양과 조건, 표와 이미지, 참고 자료, 작성·수정 정보 등 문서에서 중요한 항목을 적습니다. 화면의 메뉴와 실행 버튼은 인쇄물에서 다른 역할을 가질 수 있지만, 본문을 이해하는 데 필요한 조건과 자료를 함께 숨기면 안 됩니다. 요소 이름만 보고 무조건 삭제하지 않습니다.

푸터에도 문의 창구나 문서 버전이 있을 수 있습니다. 화면상 위치보다 인쇄물에서 필요한 정보를 기준으로 남길 요소를 고릅니다.

인쇄 상태의 스타일과 화면 스타일을 구분합니다

CSS에서는 print 매체에 적용할 스타일을 별도로 정할 수 있습니다. MDN의 인쇄 안내는 인쇄 스타일시트와 media query 등을 설명합니다. 다음은 원리를 보여주는 예제이며 클래스 이름은 설명용입니다. 실제 페이지의 구조와 다른 이름을 그대로 복사해도 같은 결과가 나온다고 보지 않습니다.

@media print {
  .screen-only-controls { display: none; }
  .guide-body { max-width: none; }
  .guide-body img { max-width: 100%; height: auto; }
}

화면용 컨트롤을 숨길 때 같은 영역의 문의 창구와 적용 조건까지 사라지지 않는지 확인합니다.

인쇄 규칙을 추가해도 기존 고정 위치·높이·넘침·색상 규칙이 남을 수 있습니다. 실제 미리보기에서 해당 요소를 찾아 대조하세요.

용지와 여백은 실제 출력 조건으로 확인합니다

@page는 용지 크기·방향·여백 등을 다루는 CSS 규칙입니다. 지원 조건은 MDN 문서를 확인하고, 실제 선택한 용지와 출력 설정으로 결과를 대조합니다.

용지·방향·배율·여백·머리말과 꼬리말·배경 그래픽 설정을 기록합니다. 이 조건이 다르면 같은 문서도 페이지 수와 배치가 달라질 수 있습니다.

페이지 수를 줄이기 위해 배율을 작게 만들면 조건 문장과 표의 숫자가 읽기 어려워질 수 있습니다. 반대로 본문을 크게 하면 표나 이미지가 여러 페이지로 나뉠 수 있습니다. 문서의 주요 과업을 기준으로 읽기와 분할을 검토하고 중요한 정보를 잘라내는 방식으로 분량을 맞추지 않습니다.

제목과 설명이 다른 페이지로 떨어지는지 봅니다

페이지 끝에 제목만 남고 설명은 다음 장에서 시작하면 읽는 순서가 끊길 수 있습니다. 제목과 첫 문단, 표 제목과 표, 도식과 캡션이 어떤 위치에서 분리되는지 확인합니다. 화면의 세로 흐름을 봤다는 사실만으로 페이지 분할 상태를 검증하지 않습니다.

제목의 크기를 바꿔도 H1·H2와 본문의 관계는 유지합니다. 번호와 이름을 따라 읽을 때 같은 설명 순서가 남는지 확인하세요.

분할을 피하도록 설정한 영역이 용지보다 길면 다른 문제가 생길 수 있습니다. 긴 표나 여러 문단을 모두 한 덩어리로 묶는 방식이 항상 좋은 결과를 내는 것은 아닙니다. 실제 문서에서 어디를 나눌 수 있는지와 어떤 관계를 유지해야 하는지 판단하고 출력 미리보기의 전체 페이지를 확인해야 합니다.

가로로 넓은 표는 화면의 스크롤을 사용할 수 없습니다

웹페이지에서는 표 영역을 가로로 이동해 모든 열을 볼 수 있어도 종이에서는 같은 방식으로 읽을 수 없습니다. 오른쪽 열이나 단위, 조건이 잘리는지 확인하고 데이터 의미를 유지하는 배치를 검토합니다. 글자를 무조건 작게 줄이거나 일부 열을 인쇄에서 숨긴 뒤 전체 자료라고 표시하지 않습니다.

표를 나누는 경우에는 각 조각이 어떤 대상을 비교하는지 알 수 있어야 합니다. 이전 페이지의 제목을 기억해야만 값을 해석할 수 있는 형태인지 살펴봅니다. 표를 이미지로 바꾸면 검색과 복사, 읽기 관계가 달라질 수 있으므로 단순히 레이아웃을 맞추는 수단으로 선택하지 않습니다.

화면용 표와 인쇄용 표는 같은 정보원으로 관리하거나 두 표시 위치를 연결해 둡니다. 값을 고친 뒤 한쪽만 이전 버전으로 남지 않아야 합니다.

화면용 표의 구조를 먼저 고쳐야 한다면 모바일 비교표의 행·열 제목과 스크롤 구성을 참고하세요. 화면에서는 스크롤이 가능해도 인쇄에서는 전체 값이 용지에 남아야 합니다.

그림의 선과 캡션, 본문 정보가 함께 남는지 봅니다

배경색이나 그래픽이 빠지는 출력 설정에서는 옅은 선과 흰 글자, 색상으로만 구분한 범례가 사라질 수 있습니다. 도식의 핵심 관계와 숫자, 화살표 끝점이 읽히는지 확인합니다. 화면의 고해상도 파일을 사용했다는 사실이 인쇄에서 모든 정보가 명확하다는 뜻은 아닙니다.

생성 이미지 등 설명용 그림의 캡션도 인쇄에 남깁니다. 그림과 역할 안내가 다른 페이지로 떨어지는지 확인하세요.

이미지 안의 중요한 수치와 조건은 본문이나 표에서도 읽을 수 있게 두면 축소나 이미지 누락 때 대조할 수 있습니다.

눌러야 알 수 있는 출처를 인쇄에서도 구분합니다

인쇄물에서는 “더 보기”라는 링크 이름만 남아 실제로 어떤 자료인지 알기 어려울 수 있습니다. 기관과 문서 이름, 확인한 버전이나 날짜, 필요한 경우 주소 등의 정보를 남기는 방식을 검토합니다. 모든 긴 주소를 그대로 문장에 붙이면 줄바꿈과 읽기를 방해할 수 있으므로 문서 목적에 맞춰 구조를 정합니다.

자료의 발행일·적용 버전과 편집자가 확인한 날짜를 구별해 남깁니다. 출력물만 봐도 어떤 원문을 사용했는지 찾을 수 있어야 합니다.

문서 이름·개정 버전·내용 확인일을 함께 표시합니다. PDF 저장일은 내용의 검토 날짜와 다르므로 별도로 취급합니다.

다운로드 파일의 이름과 형식·버전을 어떻게 안내할지는 파일을 누르기 전에 알려야 할 정보에서 이어서 다룹니다.

상호작용 도구의 기본 화면을 실제 결과로 쓰지 않습니다

웹 계산기나 선택 도구를 인쇄하면 기본 입력과 현재 화면이 남을 수 있습니다. 그 값이 설명용인지 사용자가 입력한 결과인지, 어떤 계산 범위와 한계를 갖는지 인쇄에서도 알 수 있어야 합니다. 색상 상자나 인터랙션 상태가 빠졌는데 결과 숫자만 남는 상황을 확인합니다.

인쇄용 결과 요약에는 현재 입력값·계산 기준·결과를 함께 둡니다. 실행 버튼을 종이에 남기는 대신 결과를 읽는 데 필요한 조건을 제공합니다.

예제 입력이나 계산 기준을 바꾸었다면 화면 본문과 인쇄 요약을 함께 갱신합니다. 기본 결과가 인쇄 영역에 고정돼 남지 않았는지도 확인합니다.

PDF 저장과 실제 종이 출력은 다른 확인입니다

브라우저의 PDF 저장 기능으로 만든 파일과 실제 프린터 출력은 같은 조건이 아닐 수 있습니다. PDF에서 페이지 분할과 텍스트 표시를 확인했다면 그 결과를 기록하고, 종이에서 색과 선이 어떻게 보이는지는 해당 출력 환경에서 따로 확인합니다. 하나의 결과를 모든 장치의 검수로 확대하지 않습니다.

PDF에서 필요한 텍스트를 찾고 표·도식·문서 버전을 대조합니다. PDF 파일이 열린다는 사실만으로 읽기 품질이나 접근성 검토를 마치지는 않습니다.

출력 조건과 정보 누락을 한 장부에서 관리합니다

문서 주소와 버전, 용지·배율·여백·배경 설정을 기록합니다. 출력물 전체를 원문의 표·그림·출처 목록과 대응시키고 누락과 분할을 표시하면 다음 수정에서 같은 조건으로 다시 확인할 수 있습니다. PDF 저장과 실제 프린터 결과는 별도 행으로 남깁니다.

인쇄물에서 사라진 정보와 페이지 분리를 기록하는 예시

아래는 가상의 출력 검수 기록입니다. 실제 프린터 시험·PDF 제작 결과가 아닙니다.

표의 셀·그림·캡션·출처 목록을 출력물과 항목별로 대응시킵니다. 스타일 수정 뒤에는 원래 보이던 값이 빠지지 않았는지도 확인하고, PDF와 종이의 관찰은 별도 행에 남깁니다.

참고 자료와 예제의 범위

• MDN: 인쇄용 CSS — 화면과 인쇄 상태의 스타일 구분.
• MDN: @page — 인쇄 페이지 설정의 맥락과 지원 조건.
• W3C WAI: 제목 구조 — 문서 내용의 관계와 읽기 순서.