웹문서와 인쇄된 매체

• 인쇄된 매체

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

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

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

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

최적의 글자수

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

인쇄에서 가능한 것으로는

• 가장 적합한 방법이 박스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 마크업을 하지만 정적인 페이지로 생각하여 SUMMARY와 CAPTION은 없는 것이 이득 일수 있습니다. 따라서 제목을 포함한 게시판을 인쇄 할 때는 CAPTION을 함께 출력할 필요가 없습니다.
  • 표(TABLE) 마크업 방법 : http://lab.must.or.kr/Tables-in-Html.ashx
  • MWSF(머스트 웹사이트 프레임워크)에서 사용하는 표(TABLE) 마크업 방법 : http://lab.must.or.kr/Html-Table.ashx
• 같은 블록은 함께 출력되어야 합니다.

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

• 동적인 페이지의 처리

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

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

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

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

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

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

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