웹사이트에 프린트 버튼을 만드는 방법에 대하여 알아봅니다. 인쇄하기... 출력에 필요한 프린트 버튼을 만들기 위해서 무엇이 필요할까요? 코드는 어떻게 작성해야할까요?


! 프린트 버튼이 왜 필요할까...
프린트 버튼은 보통 많은 글을 보여주는 콘텐츠 제공 웹사이트에서 주로 제공됩니다. 콘텐츠를 공유하는 기능 버튼과 함께 출력할 수 있는 버튼을 제공하죠. 이렇게 하면 방문자가 콘텐츠를 더 편하게 읽고 관리할 수 있도록 도움을 주며 모니터를 이용해 읽을 수도 필요해의해 출력해서 읽도록 도와줍니다.

Webisfree.com 역시 프린트 버튼이 존재합니다. 동작하는 기능은 간단합니다. 버튼을 누르면 방문자가 출력할 수 있도록 기능을 제공합니다. 하지만!! 프린트 버튼을 위해서는 몇 가지 필요한 필수 작업들이 있습니다. 기능만으로는 제대로된 출력 기능을 제공할 수 없죠.

쉽게 출력할 수 있는 기능의 프린트 버튼




# 프린트 버튼을 만들자
앞에서 언급한 것처럼 프린트 버튼을 만들때 생각할 부분은 무엇일까요? 일단 기능적인 부분에서 스크립트를 사용하여 출력하도록 해야합니다. 이때는 간단하게 아래 코드 한줄이면 가능합니다.
window.print();

코드를 실행하면 Ctrl + P 버튼을 누른 것처럼 출력창이 나타나게됩니다. 하지만 문제가 있는데 프린트에 출력될 모습이 실제 모니터에 나타나는 부분과 많이 다릅니다.

그 이유는 출력물에 적용되는 CSS와 디스플레이 모니터에 적용되는 CSS가 다른 부분도 있을 수 있으며 기본적으로 웹사이트가 출력될때는 시스템에 따라 적용되는 부분들이 존재하기 때문입니다. 즉 이런 부분들을 수정해야만 이상적인 출력버튼을 구현할 수 있습니다. 이를 위해서 아래의 두 가지 방법을 알아야합니다.

- 미디어 쿼리 print CSS
- Link 영역 등의 레이아웃 겹치는 부분 해결

CSS 미디어 쿼리를 사용하면 출력에 필요한 부분만 CSS style 적용하는 것이 가능합니다. 이를 사용하여 콘텐츠 영역을 수정할 필요가 있습니다. 주로 아래의 과정들이 필요합니다.

  • 불필요한 콘텐츠 및 광고 제거
  • 인쇄 목적에 맞는 콘텐츠 크기 조절(텍스트 및 이미지 크기 조절)
  • 기타 출력물에 어울리지 않는 부분 스타일 조정

그럼 CSS의 @media 쿼리에서 print, 출력시 어떻게 적용해야하는지 알아봅니다.



# CSS media 쿼리로 print에 대하여 설정하기
아래 코드는 실제 webisfree.com에 적용된 css입니다. 출력을 위해서 불필요한 광고와 aside 영역등을 안보이도록 변경하는 코드가 추가되어 있습니다.
@media only print {
  /* Code는 여기에... */
};

미디어 쿼리는 위와 같이 only print나 print의 값을 사용하여 인쇄시에만 적용되는 스타일을 설정합니다. 이 부분이 매우 중요하며 특히 광고 영역이나 주요 콘텐츠가 아닌 부분 등은 과감히 숨기도록 합니다. display: none;을 사용하면 좋겠죠?


! 인쇄시 링크 주소 제거하기
반드시 필요한 작업 중 하나가 바로 인쇄시 나타나는 링크주소입니다. 이는 시스템에 기본으로 적용되므로 media 쿼리 안에 사용하는 것이 좋습니다. 아래와 같이 a 태그에 적용될 수 있도록 추가합니다.
@media only print {
  a[href]::after {
    content: none !important;
  }
}




# 마치면서
여기까지 웹사이트에 필요한 출력, 인쇄 버튼을 만드는 방법에 대하여 자세하게 알아보았습니다. 블로그나 읽는 콘텐츠 제공 사이트... 주로 매체의 경우에는 이런 버튼이 있는 경우 사용자에게 매우 친숙한 인터페이스를 제공할 수 있습니다. 어렵지 않은 간단한 코드이지만 출력 기능을 제공하는 사이트와 아닌 사이트를 비교한다면 그 효과는 매우 크다 할 수 있겠죠.