안녕하세요. 김용성입니다.
웹페이지를 통째로 인쇄해본 경험이 있으신가요?
보통은 안에 있는 내용을 별도로 word 파일에 넣는다거나 해서 출력을 하는데, 만약 그렇게 복사가 되지 않는 페이지이고 페이지 내부에 필요한 내용이 많다면 그냥 웹페이지를 출력하는 것이 편리하겠죠?
그렇지만 그렇게 웹페이지를 출력하게 되면 상당히 지저분할겁니다.

이러한 것을 CSS로 어느정도 해결해줄 수 있다는 점 아시나요?
이번 포스팅에서는 만약 사람들이 인쇄를 많이 해갈만한 페이지를 구성한다면 CSS에서 어떤 처리를 해줘야하는지 한번 알아보고자 해요.

과정

시작하기

가장 먼저, 소스 웹페이지와 인쇄되는 페이지가 어떻게 다를지에 대해 체크를 해보아야 합니다.
고려해야할 것들은 다음과 같은 것들이 있어요.

• 웹페이지는 무한대로 스크롤할 수 있지만, 인쇄된 페이지는 종이 크기에 제한됩니다.
• 웹페이지가 비디오, 오디오, 접촉을 통한 피드백도 가능한 접근성을 갖는 반면, 인쇄된 페이지는 철저하게 Read(보기)만 가능한 페이지입니다.
• 웹페이지는 비트맵 데이터(사진, 그래픽)와 벡터 데이터(서체, SVG)를 표현할 수 있지만, 일단 인쇄되면 종이 위의 정적인 비트맵 데이터일 뿐입니다.
• 웹페이지는 인터랙티브하고 스크린 상의 엘리먼트를 변경할 수 있지만, 인쇄된 페이지는 이러한 인터랙티브한 동작이 불가능합니다.

이러한 것들이 인쇄된 페이지의 컨텐츠에 대한 결정을 하는 요인이 되기 때문에 고려해보셔야 할 사항입니다.

결론적으로 페이지를 출력하는 사용자들은 어떠한 것을 원할까요?

바로 컨텐츠입니다. 내부에 컨텐츠에 해당하는 부분만 온전히 인쇄가 된다면 문제 없는 것이죠.

페이지를 볼 때 사용자가 보길 원하는 것은 단 하나: 컨텐츠. 내 사이트이므로, 사용자가 인쇄할 때 유지해야할 페이지 상의 엘리먼트를 확실하게 하고 싶다:

그렇다면 우리가 제거하거나 단순화해야하는 것들이 무엇이 있을까요?

• 색상(특히 모노 프린터를 위해)
• 배경 이미지
• 타이밍/상호작용하는 엘리먼트
• 로고와 같은 화이트 이미지

더 많은 것들이 있겠지만 이 정도면 충분하다고 생각해요.

CSS 적용

프린트 스타일이 호출되기 위한 CSS를 설정하는 것이 첫번째 할일입니다.
우리가 반응형을 구현할 때 사용하던 @media를 이용하면 되는데요.
이런식의 CSS를 생성해주면 됩니다.

@media print {
  /* insert your style declarations here */
}

혹여나 오버헤드를 고려해서 print용 CSS파일을 분리해주실 수도 있는데,
프린트 스타일은 매우 적은 선언만을 포함할 수 있기 때문에 Print용 CSS파일을 분리한다고 해서 추가적인 HTTP 오버헤드와 렌더링 지연이나 이벤트 작동을 고려할 필요성이 조금 떨어지기 때문에, 굳이 분리해서 작성해줄 필요는 없다고 생각합니다!

그리고 기본적으로 적용하기 좋은 것들을 알려드리도록 하겠습니다.

body {
    background: #fff;
    color: #000;
    font-size: 8pt;
    line-height: 150%;
    margin: 0px;
  }
  hr {
    color: #ccc;
    background-color: #ccc;
  }
  h1, h2, h3, h4, h5, h6, code, pre {
    color: #000;
    text-transform: none; /* because sometimes I set all-caps */
  }
  h1 {
    font-size: 11pt;
    margin-top: 1em;
  }
  h2 {
    font-size: 10pt;
  }
  h3 {
    font-size: 9pt;
  }
  h4, h5, h6 {
    font-size: 8pt;
  }
  code, pre {
    font-size: 8pt;
    background-color: transparent;
    /* just in case the user configured browser to print backgrounds */
  }
  a {
    text-decoration: underline;
    color: #000;
  }

이 정도의 코드가 프린트 되는 웹페이지를 단순화시켜 줄 수 있습니다.
어느정도 설명을 보태자면 위 코드로 인해 우리가 출력하는 페이지는

• 컨텐츠 주변의 여백이 제거됩니다.(사용자는 인쇄 설정에서 페이지 여백을 다룰 수 있습니다.)
• 서체 크기를 재설정하고 텍스트를 검정색으로 설정합니다. (흑백 용이)
• a태그의 text-decoration을 남겨 놓는 것은 사용자가 해당 텍스트가 링크였음에 대해 알 수 있게끔 하기 위함입니다.

체크하기

이후에는 pdf로 출력하기를 선택하여, pdf파일로 먼저 인쇄되는 사이트가 어떤식으로 생겼을지에 대해 체크하는 것이 좋습니다.

🙌 마무리

요즘 HTML/CSS에 푸욱 빠져버린 터라, 이러한 것들만 찾아보고 그렇게 되네요. ㅎㅎ
이번 인쇄용 웹페이지 같은 경우에는 '요즘 누가 페이지를 통째로 출력을해?' 라는 생각에 그냥 건너 뛸 수도 있는 부분이지만 프론트엔드 면접에 나왔던 질문이기도 하다는 점! 꼭 알아두셨으면 좋겠어요. 쉬운 상식이니까요. 🤗
읽어주셔서 감사합니다.