웹문서 인쇄

웹문서를 PC화면에서는 열람하기에 별 문제가 없는데 인쇄 시에는 본문내용과 무관한 부분이 함께 인쇄되거나, 필요한 요소들은 인쇄가 되지 않아 제대로 된 문서 열람에 애로가 있어 실 사용자들에게 도움을 줄 수 있는 웹문서 인쇄술의 필요성을 느끼게 되었습니다.

이 문서는 웹문서 프린트에 대해 연구한 내용을 간략하게 정리한 문서입니다.

웹문서와 인쇄된 매체

  • 인쇄된 매체

    신문이나 잡지 등 인쇄된 매체를 위해서는 텍스트 사이즈를 셋팅 할 때, 물리적으로 명시되어 고정되어 있고 변경이 되지 않습니다.

  • 동적인 웹문서
    • 스크린에 보여 지는 웹문서는 근본적으로 인쇄된 매체와 다릅니다.
    • 웹문서는 일반 인쇄 문서와 달리 내부의 메뉴, 링크, 이미지, 영상자료 등 동적인 요소를 가진 문서로 동작합니다.
    • 동적인 요소를 포함하고 있으면서 텍스트 사이즈나 페이지의 크기를 변경 할 수 있어 사용자들에 의해 조정이 가능합니다.
    • 따라서 PC버전에서 보이는 메뉴, 서브메뉴, 코멘트 등 문서내용과는 관계없는 불필요한 요소가 존재하기 때문에 인쇄를 해서 보는 화면이 달라야 합니다.

사용자가 웹문서의 내용을 이해하는데 도움을 주기 위한 웹문서 인쇄술이 필요합니다.

웹문서와 그 웹페이지의 인쇄

최적의 글자수
  • 독자를 위한 각 라인별 최적의 글자 연구 [http://ctproject.wordpress.com/2008/03/20/optimal-characters-per-line-for-readers/]에 따르면 사용자들이 내용을 읽기 쉽게 하기 위해 텍스트 한 줄에 있는 글자의 수는 60에서 70개 정도(영문기준)의 범위여야 합니다.
  • 그 범위는 45에서 75개 글자 정도 될 수도 있지만, 주로 66개 글자(글자와 공백 둘 다 합산해서)가 이상적인 숫자로 여겨집니다.
  • 이보다 훨씬 짧으면 각 라인사이에서 눈이 황급히 왔다, 갔다 해야 합니다.
  • 이보다 훨씬 길면, 너무 멀리 건너뛰어 돌아와 보아야 할 때 다음 줄의 시작을 찾아내기가 힘듭니다. 같은 줄을 두 번 읽거나 다음 줄을 무심코 건너뛰게 될 수 있습니다.
  • 복수 칼럼에서 이상적인 글자 수는 대략 45개(플러스, 마이너스 5정도 해서) 글자입니다. 신문이나 잡지 등 인쇄매체를 보면 이해가 쉬울 것입니다. 신문의 경우 전체 페이지에 한 줄씩 사용하지 않고 복수 칼럼으로 구성되어 독자들이 읽기 쉽게 글자 수가 구분 되어 있음을 알 수 있습니다.
  • 그러나 웹문서인 HTML은 칼럼 그 자체의 개념을 가지고 있지 않고 텍스트는 박스 안에 존재 합니다. CSS안에서 박스의 폭 길이의 유닛과 함께 폭의 속성을 사용하여 세팅되어 있습니다.
  • 예제. 박스1
    div#box1 {width:400px}

    박스1은 400픽셀 폭으로 세팅된 고정된 폭을 가지고 있습니다. 텍스트 크기를 12픽셀로 표현 할 때, 대략 한 줄 당 66개 글자의 수치가 됩니다. 만약 사용자가 텍스트 사이즈를 16픽셀로 확대한다면, 그 수치는 한 줄당 50개 글자로 줄어듭니다. 이런 식으로 텍스트 크기가 변할 때 수치도 변하게 됩니다.

  • 예제. 박스2
    div#box2 {width:50%}
    • 박스2는 화면 해상도에 따른 퍼센티지 형식의 50% 폭으로 세팅된 유동적 폭을 가지고 있습니다. 사용자가 윈도우 해상도 가로 1000픽셀의 모니터를 사용한다고 가정하면, 박스는 500픽셀 폭을 가진 상태가 되어 한줄 당 약 83글자가 표시됩니다. 83글자는 사용자에게 너무 넓을 수 있어 다음 줄을 찾기가 어려 울 수도 있습니다.
    • 하지만 박스가 유동적이기 때문에, 사용자는 화면 해상도를 800픽셀로 줄 일 수 있어서 박스를 400픽셀 로 좁히고, 각 글 줄 당 66글자의 표시로 더욱 편한 수치로 만들 수 있습니다.
  • 예제. 박스3
    div#box3 {width:33em}

    박스3은 융통성 있는 폭을 가지고 있습니다. 이것은 상대적 수치로 33em 폭으로 세팅되어 있습니다. 평균적으로 글자 하나는 0.5em을 차지합니다. 그래서 이 박스는 각 글 줄당 66개 글자 수치를 가질 것입니다. 만약 사용자가 텍스트 사이즈를 확대한다면, 박스의 폭은 그에 따라서 증가할 것이고, 수치 또한 텍스트 사이즈에 관계없이 66으로 남아 있습니다.

인쇄에서 가능한 것으로는
  • 가장 적합한 방법이 박스3과 같이 융통성 있는 layout에서 박스 폭을 설정하는 것입니다. 왜냐하면 그것이 그 수치를 항상 개발자의 명세 사항에 맞추어 세팅하기 때문입니다.
  • 박스2와 같은 퍼센티지(유동적 layout)로 박스 폭을 세팅하는 것은 인쇄에 있어 수치에 대해 대략적으로 제어 할 수 있게 제공하고 사용자들의 편리에 맞추어 layout을 조정하도록 합니다.

따라서 화면으로 제공되는 웹사이트의 레이아웃에 있어서는 사용자들이 제어 할 수 있도록 유동적 레이아웃으로 디자인 되어야 하고, 인쇄를 위해서는 융통성 있는 레이아웃이 되는 것이 바람직합니다.

이러한 레이아웃의 제공을 위해 개발자들에게는 다소 힘든 문제이겠지만, 사용자들은 자신의 읽기 환경을 자신의 필요 요구에 맞도록 조정가능하게 제공하는 이점이 있습니다.

머스트에서 생각하는 프린트

인쇄매체(도서, 신문, 잡지)등 과는 다른 여러 가지 요소(이미지, 링크, 메뉴 등)를 포함 웹문서 인쇄방법에 대해 머스트에서는 다음과 같이 프린트 화면이 갖추어야 할 요건을 정리 했습니다.

  • 인쇄할때는 Ctrl+P

    프린트를 하기 위한 방법은 Ctrl+P입니다. 모든 브라우저에서 제공하는 기능입니다.

  • 프린트를 위한 별도의 폴더나 별도의 파일을 만들지 않아야 합니다.

    브라우저에서 제공하는 프린트와 별개의 프린트를 적용한다면 사용자들에게 혼란만 줄수 있는 여지가 있습니다. 사용자들의 편의를 위해서 브라우저에서 기본 제공하는 프린터(Ctrl+P)를 사용하여야 합니다.

  • 문서의 내용만 출력 되어야 합니다.
    • 많이 알려진 방법으로 아래와 같이 CSS를 사용하여 타겟으로 media=”print” 를 지정 합니다.
    • <link rel="stylesheet" type="text/css" href="print.css" media="print" />
    • 홈페이지 내에서 인쇄기능이 제공된다면 대게의 경우 이방법을 많이 사용할 것입니다.
    • 내용에 영향을 미치지 않는 불필요한 요소는 제거되어야 합니다.
    • 상단메뉴, 왼쪽 또는 오른쪽의 서브메뉴, 저작권을 포함하는 바텀 영역, 자바스크립트 등은 불필요한 요소이므로 인쇄 시에는 제거되어야 합니다. 이것은 print.css 로 어느 정도 가능한 부분입니다.
  • 필요한 부분은 인쇄시 출력되어야 합니다.
    • 본문 내에 링크를 포함하면 오른쪽에 링크주소(URL)를 함께 출력 되어야 향후 출력 문서를 볼 때 외부 링크가 확인 가능 합니다.
    • 본문에 링크주소가 URL로 링크 될 경우에는 링크주소를 함께 출력할 필요가 없습니다. 예) <a href="{url}">{url}</a>
    • 이미지를 포함하는 문서일 경우 이미지 오른쪽에 설명 출력(ALT)한다면 이미지에 대한 설명을 알 수 있을 것입니다.
    • 제목, 타이틀을 위해 만들어진 텍스트 형식의 이미지와 의미 없는 이미지일 경우 이미지 설명(ALT)은 필요가 없습니다. 이미지 파일로 되어 있지만 텍스트 자체로 의미전달이 확실히 되기 때문입니다.
    • 웹페이지에서 표(TABLE)를 포함한 문서가 많이 있습니다. 표(TABLE)를 포함하는 문서일 경우 표(TABLE)의 제목(CAPTION)을 출력하면 표(TABLE)를 이해하기가 쉬울 것입니다. 요약(SUMMARY)은 웹접근성을 위한 부분이므로 인쇄 시에는 불필요 합니다.
    • 고민해야 할 부분은 게시판일 경우 대게 TABLE 마크업을 주로 사용하는데 이 경우 요약(SUMMARY)과 제목(CAPTION)에 대해 생각할 필요성이 있습니다. 게시판의 요약(SUMMARY)에는 무엇을 채워 넣어야 할지, 동적으로 움직이는 게시판의 경우 제대로 된 표(TABLE) 요약(SUMMARY)을 채워 넣기가 어렵습니다. 어떤 게시물이 등록 될지 예측 할 수 없기 때문 입니다. 이것은 의미해석이 가능한 강력한 sid nlp check! (NLP)시스템이 있어야 가능 한 일입니다. 게다가 게시판일 경우 십중팔구 페이징 처리가 되기 때문에 각 페이지마다 표의 요약은 달라져야 할 것입니다. 간혹 정보전달에 도움을 주지 않는 의미 없는 장문의 SUMMARY를 넣는 경우가 있습니다. 이는 오히려 스크린리더를 통해서 듣는 사람들에게 제대로 된 정보를 제공하지 못하여 듣는 사람들로 하여금 짜증을 일으킬 수가 있습니다. 어떤 면에서는 게시판은 TABLE 마크업을 하지만 정적인 페이지로 생각하여 SUMMARYCAPTION은 없는 것이 이득 일수 있습니다. 따라서 제목을 포함한 게시판을 인쇄 할 때는 CAPTION을 함께 출력할 필요가 없습니다.
    • 표(TABLE) 마크업 방법 : http://lab.must.or.kr/Tables-in-Html.ashx
    • MWSF(머스트 웹사이트 프레임워크)에서 사용하는 표(TABLE) 마크업 방법 : http://lab.must.or.kr/Html-Table.ashx
  • 같은 블록은 함께 출력되어야 합니다.

    한 개의 블록은 인쇄 되었을 때 떨어지지 않아야 문서를 이해하기 쉽습니다. 예를 들면 이미지와 리스트가 함께 있는 경우 이미지와 리스트가 한 용지에 출력이 다 출력되지 않고 분리 인쇄되어 내용을 이해하가기 어려운경우가 있습니다. 이런 경우에는 다음 장에 함께 출력되는 것이 보기도 좋을뿐더러 문서이해에 도움을 줄 것입니다.

  • 동적인 페이지의 처리

    웹문서는 데이터베이스와 함께 동적으로 작동되는 페이지가 많습니다.게시판 또는 검색을 할 수 있는 곳에서 검색결과를 출력코자 할 때 검색결과를 유지하여 프린트를 할 때 반영 되어야 합니다.

  • 출력 용지의 크기에 맞게 100%로 출력되어야 할 것입니다.

    이를 위해서는 유동적 레이아웃과, 융통성 있는 레이아웃이 조합되어야 합니다.

  • 글자색은 선명해야 합니다.

    간혹 페이지 디자인상 글자색이 선명하지 않은 글자색으로 인쇄 후 결과물은 해상도가 흐려 인식을 잘 못하는 경우가 있습니다.

  • PC모드에서만 프린터가 가능

    프린트 모드는 PC버전의 화면 모드와 관련이 있기 때문에 텍스트, 모바일 모드에서는 프린트 모드가 필요 없습니다.

공유
QR link to local page