좋은 프린팅을 위해

egloos가 print.css를 추가했다.
아주 바람직하고 좋은 시도. 불필요한 장식도 없고, 컨텐트에만 집중할 수 있고, 별도의 인쇄하기 버튼따위가 들어있지도 않다.

그러나 여전히 약간의 아쉬움이 남는다.

과연 인쇄를 위해서는 어떠한 UX가 더 필요할까?

1. 인쇄 전용 CSS
어떤 면에서 프린터는 브라우저보다 CSS를 더 잘 구현해내기도 한다.
이글루스의 경우 print.css를 붙이기는 했는데, 실상 상당히 단순한 속성들로 구성되어 있다. 프린트 전용 CSS라기 보다는, 마치 초단순 스킨이라고 불리워도 무방할 정도로.

기왕 프린트를 위한 CSS라면 프린트 전용 CSS를 맘껏 사용해보는 것도 좋았을 텐데.
(이 print.css가 이글루스 스킨 시스템에 포함되어 사용자가 마음껏 고칠 수 있는 종류의 것인지는 모르겠다. 그렇다면, 심플한 CSS만 제공하고, 기교를 부리는 건 사용자에게 맡기도록 하는 것은 좋은 방법일 수 있다.)

아무튼, 인쇄 전용으로 사용가능한 방법으로는,

셀렉터
@page : .페이지 단위의 셀렉터. 하나의 페이지로 이루어진 모니터와는 달리, 인쇄는 물리적인 여러개의 페이지로 이루어진다.
@bottom-left-corner, @bottom-left, @bottom-center, @bottom-right, @bottom-right-corner : 페이지의 푸터영역 셀렉터(bottom-margin이 있는 경우)
@top-left-corner, @top-left, @top-center, @top-right, @top-right-corner : 페이지의 헤더 영역 셀렉터 (top-margin이 있는 경우)

속성
page-break-after, page-break-before, page-break-inside : 보기좋은 인쇄를 위해 강제로 페이지 브레이크를 걸어야 할 때 사용.
content : 해당 셀렉터에 인쇄시 내용을 추가할 때 사용한다. (예를 들어 @page:first의 @top-left-corner에 저자 이름을 따로 적어둔다거나 하는 식.)
counter-increment, counter-reset : 인쇄물의 페이지 번호등을 조절할 때 사용.

이외에도 더 많은 테크닉들이 있으나 프린터 및 프린터 확장 호환장비들에 따라 미세하게 다르므로 대충 이정도로 소개만. 더 자세히 알고 싶으신 분은, 여기를 참고.

기타 주의사항 :
프린터는 최소한 16가지의 색상을 구별이 가능하도록 다른 형태로 인쇄할 수 있다-인쇄해야 한다.(흑백이라 하더라도 패턴등의 방법을 사용하여.)
프린터는 인쇄물에 대한 페이지 사이즈를 지정할 수 있어야 한다.

2. 링크
링크는 웹문서의 기본이며, 문서의 가장 중요한 컨텐트 요소중 하나이다.
그런데 인쇄를 하면 이러한 링크정보가 사라지게 된다.
링크가 사라진 문서에, '링크였던' 부분에 밑줄만 쳐져 있어 봤자 무슨 소용이 있을까.

erehwon님의 포스팅으로 보아 아마도 이 문서를 참조한 것 같은데, 해당 문서 중에 좋은 팁이 들어있다.
[css]
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
[/css]

못보고 지나쳤을리는 없을 텐데, 왜 안들어 있을까.
아마도 링크를 인쇄물에 포함시켰을 때 인쇄물이 너무 지저분해지기 때문이었으리라. 또, IE에서는 통용되지 않는 다는 점도 고려되었을테고.

그럼에도 불구하고, 링크의 인쇄는 미관적인 이유로 빼버리기에는 너무 중요한 요소이다.

좋은 방법이 있을까?

몇십줄의 자바스크립트의 추가로 더 유용한 인쇄물을 만들 수 있다.
지금 보고 있는 이 페이지를 인쇄하고 그 결과를 이글루스의 그것과 비교해보자. 대부분 거의 비슷하겠지만,
단 한군데 다른 점을 발견할 수 있을 것이다.
(예시로 들기에는 이 블로그의 디자인이 너무 심플한데다가, 본인은 디자이너도, 퍼블리셔도 아니기에. 더 좋은 예시를 들지 못함이 아쉽다.)

3. 더 생각해 볼 만한 것 - selective print.
개인적으로는 그다지 좋은 방법이라고는 할 수 없기에 간단히 링크만 걸어둔다.

프린터용 CSS를 만드는 간단한 방법.

1. 인쇄에서는 사용할 수 없는 기능이 담긴 엘리먼트(검색창, 메뉴등)를 display:none;으로 감춘다.
2. 폰트타입을 바꾼다. 인쇄시에는 작은 글씨의 경우 모니터와는 달리 serif 종류의 폰트들이 더 가독성이 높다. 인쇄물의 특성을 고려하여 폰트를 바꿔준다.
3. 장식용 이미지가 필요하다 해서 HTML코드를 다시 고치지 말고, :after, :before등의 pseudo-element를 사용해 인쇄용 이미지를 추가한다.
4. 대개의 경우, 공용 CSS등에서 bullet 스타일을 지워버렸을 수 있다. 인쇄시에는 까먹지 말고 다시 bullet스타일을 지정해주자.
5. position, float을 사용한 블록들은 인쇄시에 의도한 곳과는 다른 곳에 인쇄될 수 있다. 되도록이면 복잡하지 않은 인쇄레이아웃을 잡도록 한다.

다음은, W3C에서 제공하는 인쇄용 CSS 샘플이다. 이걸 그대로 쓰라는 것이 아니라, 일종의 초기화 가이드라인 삼아 제작하면 좋을 것이다.

[css]
th { font-weight: bolder; text-align: center }
caption { text-align: center }
body { line-height: 1.33 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .83em 0 }
h3 { font-size: 1.17em; margin: 1em 0 }
h4, p,
blockquote, ul,
form,
ol, dl { margin: 1.33em 0 }
h5 { font-size: .83em; line-height: 1.17em; margin: 1.67em 0 }
h6 { font-size: .67em; margin: 2.33em 0 }
h1, h2, h3, h4,
h5, h6, b,
strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,
var, address { font-style: italic }
pre, tt, code,
kbd, samp { font-family: monospace }
pre { white-space: pre }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
ol, ul, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol,
ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
br { content: "\A" }

@media print {
@page { margin: 10% }
blockquote,
pre { page-break-inside: avoid }
}
[/css]