티스토리 뷰
728x90
반응형
모든 브라우저에는 인쇄 기능이 포함되어 있습니다.
보통 메뉴에서 파일→인쇄하기 기능을 통해서 현재 보고 있는 웹페이지를 인쇄할 수 있고
인쇄미리보기 기능을 지원하는 브라우저에서는
인쇄미리보기 기능을 통해서 종이에 인쇄될 내용을 미리 볼 수 있습니다.
웹2.0이 국내 웹퍼블리싱에도 웹표준이라는 새바람을 몰고 오면서
print.css 라고 불리는 인쇄용 스타일시트의 활용을 강조했습니다.
css 스펙에는 미디어타입이라는 속성이 있습니다.
예를 들면 아래와 같은 코드에서는
print.css가 media="print" 라는 속성에 사용되고 있습니다.
즉 인쇄용으로 print.css 를 사용한다는 것입니다.
print.css에는 보통 다음과 같은 스타일 선언이 들어갑니다.
글자크기, 색상, 글꼴 : 종이에서 잘 읽히는 폰트와, 모니터를 통해 잘 읽히는 폰트는 차이가 있습니다. 그리고 대부분의 인쇄가 흰 종이에 출력된다는 것을 감안할때 검은 색의 글자색을 쓰는것이 가장 좋다고 알려져 있습니다.
불필요한 부분 제거(header, footer 등) : 사용자가 웹페이지를 인쇄할 때 거의 대부분은 해당 페이지의 콘텐츠가 필요해서 인쇄를 하는 것이지 header 영역이나 footer 영역, 메뉴를 인쇄하고자 해서 인쇄기능을 사용하는 경우는 그리 많지 않습니다. 그렇기에 불필요한 부분을 제거하여 사용자가 원하는 콘텐츠만 출력할수 있도록 하여 만족도를 높이고 잉크도 절약할 수 있게 합니다.
백그라운드이미지 제거, 배경색 지정 : 웹페이지를 접근성 있게 만들었다면, 모든 배경이미지는 해당 배경이미지를 제거해도 콘텐츠의 인식에 지장이 없습니다. 인쇄시 과도하게 잉크만 낭비하는 백그라운드 이미지를 제거하고, 배경색도 보통 흰색으로 지정합니다.
IE의 경우는 인터넷옵션→고급탭→인쇄설정에
배경색 및 이미지 인쇄 라는 옵션이 있어서 이 옵션을 체크 해제하면
인쇄기능 이용시 배경색 및 이미지 인쇄가 되지 않습니다.
링크 밖으로 빼내기 : 웹브라우저를 통해 보는 웹문서는 링크의 존재로 인해 더욱 풍부해집니다. 우리는 단순히 그 링크를 클릭하는 것만으로도 주소표시줄에 복잡한 url을 입력할 필요가 없습니다. 또한 텍스트나 이미지에 링크가 걸려있음으로해서 이 링크를 통해 이동한 웹문서의 내용이 내가 보고 있는 내용과 관련있는 웹문서라는 사실을 알 수 있습니다. 하지만 웹문서가 종이로 옮겨질때 사용자는 링크를 클릭할 수 없으므로 사용자에게 관련 링크 주소를 직접 명시하여 보여주어야 할 필요가 있습니다.
이것은 위의 CSS 선언을 통해 해결할 수 있습니다.
이 경우 웹문서의 링크는 인쇄용 화면에서 링크(http://daum.net) 이렇게 표시됩니다.(IE6은 지원안됨)
이렇게 인쇄용 스타일시트를 선언함으로서
손쉽게 인쇄용 표현을 지정할 수 있음에도 불구하고
여전히 인쇄를 위한 팝업창이나 레이어를 띄우는 경우가 많습니다.
그리고 의외로 인쇄를 위해서는 팝업창 같은것을 꼭 띄워야 하는 걸로 알고 계신 기획자 분들도 많더군요.
그리고 그동안의 누적된 국내 사용자들의 웹 경험이
인쇄시 브라우저의 인쇄하기 메뉴를 이용하는 것이 아닌
웹페이지내의 인쇄하기 버튼을 이용하는 경우가 많고
인쇄하기 버튼을 누르면 인쇄될 화면이 미리 보여지길 기대하는 사용자(클라이언트)가 많습니다.
수천페이지가 넘는 프로젝트라면
모든 페이지에서 일일이 인쇄용 화면을 만들고 앉아있을 여유가 없습니다.
그렇기 때문에 어쩔수 없이 자바스크립트의 도움을 받아 콘텐츠 내용을 innerHTML로 가져와
인쇄용 팝업창이나 팝업레이어에 작성하는 경우도 많습니다.
인쇄용 레이어를 만들지 않고 곧바로 인쇄기능을 제공하는 것이나,
인쇄용 화면 레이어를 띄워서 그 부분만 출력하게 하는 것이나
안타까운 문제점이 있습니다.
브라우저마다 인쇄 페이지 설정의 여백차이와 개개인 마다 설정된 여백의 차이는
픽셀에 민감한 디자인된 콘텐츠가 있는 경우
float, position:absolute 등으로 디자인된 콘텐츠의 경우는
콘텐츠가 담긴 큰 이미지가 사용된 경우
인쇄용 화면이 조금씩 틀어지게 마련입니다.
아무리 내용을 구조화를 잘하여 콘텐츠 인식에는 무리가 없더라도
표현(CSS) 계층에서 디자인이 픽셀이 어긋나 틀어지기라도 한다면
클라이언트의 눈치를 보고 어떻게서든 맞추는 수밖에 없습니다.
여기에 더해 웹페이지의 콘텐츠 가로길이가 650px을 넘고
가로 길이 650px의 이상의 콘텐츠이미지 등이 많이 사용된 경우라면
IE6에서 이미지의 오른쪽이 잘려 출력되는건 자명한 사실입니다.
그렇기에 콘텐츠 이미지는 650px 이내로 작업하고
IE6에서 인쇄될 화면이 잘리지 않게 추가적인 노력을 기울여야 합니다.
하지만 이런 웹퍼블리셔들의 고충을 도와주는 기능이 있습니다.
바로 "용지 크기의 맞춤"
최신 브라우저에 있는 이 기능은 인쇄될 콘텐츠를 브라우저가 직접 용지 크기에 맞춰줍니다.
IE7이상과 최신 브라우저들은 이 기능을 탑재하고 있습니다.
그래서 이 기능을 이용하면
우리는 인쇄용 화면을 위한 부가적인 노력을 더하지 않더라도
사용자들에게 웹페이지와 동일한 디자인적인 요소까지 제공해줄수 있습니다.
IE6은 용지맞춤기능이 없어 정말 곤혹스럽습니다.
제목은 선정적으로 IE6을 버려라라고 썼지만 완전히 버린다는 의미가 아니라
1px 어긋나는 것까지 IE6까지 현실적으로 100%맞추기란 불가능하다는 것을 말합니다.
웹퍼블리셔 분들은 충분히 웹페이지를 구조화 잘 하셨다면
IE6에서 이러한 문제는 프로젝트 구성원과 클라이언트에게 양해를 구하고
공감대를 형성해야할 것입니다.
그리고 가급적 콘텐츠 이미지를 사용하지 않는것도 중요합니다.
예전 프로젝트에서 콘텐츠 영역이 가로가 700px을 훨씬 넘고
이미지 콘텐츠를 많이 사용했는데
이미지가 700px 이상을 차지하고 있는 바람에
인쇄용 화면에서도 텍스트가 700px의 공간을 콘텐츠 영역으로 인식하여 퍼지는 바람에
IE6에서 인쇄용화면에 이미지 오른쪽이 잘려 보이고,
큰 이미지로 인해 텍스트까지 오른쪽 부분이 잘려보이는 현상으로 인해
클라이언트를 만족시키기 위해서 큰 고생을 한 경험이 있습니다.
참 IE6 때문에 모두가 고생이 많습니다.
보통 메뉴에서 파일→인쇄하기 기능을 통해서 현재 보고 있는 웹페이지를 인쇄할 수 있고
인쇄미리보기 기능을 지원하는 브라우저에서는
인쇄미리보기 기능을 통해서 종이에 인쇄될 내용을 미리 볼 수 있습니다.
웹2.0이 국내 웹퍼블리싱에도 웹표준이라는 새바람을 몰고 오면서
print.css 라고 불리는 인쇄용 스타일시트의 활용을 강조했습니다.
css 스펙에는 미디어타입이라는 속성이 있습니다.
"스타일쉬트의 가장 중요한 기능 중의 하나는 문서를, 스크린, 종이 위, 음성 합성장치, 점자(braille) 장치, 등, 다른 메디아에 표현하는 방법을 지정할 수 있다는 것이다."
예를 들면 아래와 같은 코드에서는
<html>
<head>
<title>상세보기</title>
<link rel="stylesheet" type="text/css" media="print" href="print.css">
</head>
<body>
<p>본체 부분...</p>
</body>
</html>print.css가 media="print" 라는 속성에 사용되고 있습니다.
즉 인쇄용으로 print.css 를 사용한다는 것입니다.
print.css에는 보통 다음과 같은 스타일 선언이 들어갑니다.
글자크기, 색상, 글꼴 : 종이에서 잘 읽히는 폰트와, 모니터를 통해 잘 읽히는 폰트는 차이가 있습니다. 그리고 대부분의 인쇄가 흰 종이에 출력된다는 것을 감안할때 검은 색의 글자색을 쓰는것이 가장 좋다고 알려져 있습니다.
불필요한 부분 제거(header, footer 등) : 사용자가 웹페이지를 인쇄할 때 거의 대부분은 해당 페이지의 콘텐츠가 필요해서 인쇄를 하는 것이지 header 영역이나 footer 영역, 메뉴를 인쇄하고자 해서 인쇄기능을 사용하는 경우는 그리 많지 않습니다. 그렇기에 불필요한 부분을 제거하여 사용자가 원하는 콘텐츠만 출력할수 있도록 하여 만족도를 높이고 잉크도 절약할 수 있게 합니다.
백그라운드이미지 제거, 배경색 지정 : 웹페이지를 접근성 있게 만들었다면, 모든 배경이미지는 해당 배경이미지를 제거해도 콘텐츠의 인식에 지장이 없습니다. 인쇄시 과도하게 잉크만 낭비하는 백그라운드 이미지를 제거하고, 배경색도 보통 흰색으로 지정합니다.
IE의 경우는 인터넷옵션→고급탭→인쇄설정에
배경색 및 이미지 인쇄 라는 옵션이 있어서 이 옵션을 체크 해제하면
인쇄기능 이용시 배경색 및 이미지 인쇄가 되지 않습니다.
링크 밖으로 빼내기 : 웹브라우저를 통해 보는 웹문서는 링크의 존재로 인해 더욱 풍부해집니다. 우리는 단순히 그 링크를 클릭하는 것만으로도 주소표시줄에 복잡한 url을 입력할 필요가 없습니다. 또한 텍스트나 이미지에 링크가 걸려있음으로해서 이 링크를 통해 이동한 웹문서의 내용이 내가 보고 있는 내용과 관련있는 웹문서라는 사실을 알 수 있습니다. 하지만 웹문서가 종이로 옮겨질때 사용자는 링크를 클릭할 수 없으므로 사용자에게 관련 링크 주소를 직접 명시하여 보여주어야 할 필요가 있습니다.
#content a:link:after, #content a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}이것은 위의 CSS 선언을 통해 해결할 수 있습니다.
이 경우 웹문서의 링크는 인쇄용 화면에서 링크(http://daum.net) 이렇게 표시됩니다.(IE6은 지원안됨)
이렇게 인쇄용 스타일시트를 선언함으로서
손쉽게 인쇄용 표현을 지정할 수 있음에도 불구하고
여전히 인쇄를 위한 팝업창이나 레이어를 띄우는 경우가 많습니다.
그리고 의외로 인쇄를 위해서는 팝업창 같은것을 꼭 띄워야 하는 걸로 알고 계신 기획자 분들도 많더군요.
그리고 그동안의 누적된 국내 사용자들의 웹 경험이
인쇄시 브라우저의 인쇄하기 메뉴를 이용하는 것이 아닌
웹페이지내의 인쇄하기 버튼을 이용하는 경우가 많고
인쇄하기 버튼을 누르면 인쇄될 화면이 미리 보여지길 기대하는 사용자(클라이언트)가 많습니다.
수천페이지가 넘는 프로젝트라면
모든 페이지에서 일일이 인쇄용 화면을 만들고 앉아있을 여유가 없습니다.
그렇기 때문에 어쩔수 없이 자바스크립트의 도움을 받아 콘텐츠 내용을 innerHTML로 가져와
인쇄용 팝업창이나 팝업레이어에 작성하는 경우도 많습니다.
인쇄용 레이어를 만들지 않고 곧바로 인쇄기능을 제공하는 것이나,
인쇄용 화면 레이어를 띄워서 그 부분만 출력하게 하는 것이나
안타까운 문제점이 있습니다.
브라우저마다 인쇄 페이지 설정의 여백차이와 개개인 마다 설정된 여백의 차이는
픽셀에 민감한 디자인된 콘텐츠가 있는 경우
float, position:absolute 등으로 디자인된 콘텐츠의 경우는
콘텐츠가 담긴 큰 이미지가 사용된 경우
인쇄용 화면이 조금씩 틀어지게 마련입니다.
아무리 내용을 구조화를 잘하여 콘텐츠 인식에는 무리가 없더라도
표현(CSS) 계층에서 디자인이 픽셀이 어긋나 틀어지기라도 한다면
클라이언트의 눈치를 보고 어떻게서든 맞추는 수밖에 없습니다.
여기에 더해 웹페이지의 콘텐츠 가로길이가 650px을 넘고
가로 길이 650px의 이상의 콘텐츠이미지 등이 많이 사용된 경우라면
IE6에서 이미지의 오른쪽이 잘려 출력되는건 자명한 사실입니다.
그렇기에 콘텐츠 이미지는 650px 이내로 작업하고
IE6에서 인쇄될 화면이 잘리지 않게 추가적인 노력을 기울여야 합니다.
하지만 이런 웹퍼블리셔들의 고충을 도와주는 기능이 있습니다.
바로 "용지 크기의 맞춤"
최신 브라우저에 있는 이 기능은 인쇄될 콘텐츠를 브라우저가 직접 용지 크기에 맞춰줍니다.
IE7이상과 최신 브라우저들은 이 기능을 탑재하고 있습니다.
그래서 이 기능을 이용하면
우리는 인쇄용 화면을 위한 부가적인 노력을 더하지 않더라도
사용자들에게 웹페이지와 동일한 디자인적인 요소까지 제공해줄수 있습니다.
IE6은 용지맞춤기능이 없어 정말 곤혹스럽습니다.
제목은 선정적으로 IE6을 버려라라고 썼지만 완전히 버린다는 의미가 아니라
1px 어긋나는 것까지 IE6까지 현실적으로 100%맞추기란 불가능하다는 것을 말합니다.
웹퍼블리셔 분들은 충분히 웹페이지를 구조화 잘 하셨다면
IE6에서 이러한 문제는 프로젝트 구성원과 클라이언트에게 양해를 구하고
공감대를 형성해야할 것입니다.
그리고 가급적 콘텐츠 이미지를 사용하지 않는것도 중요합니다.
예전 프로젝트에서 콘텐츠 영역이 가로가 700px을 훨씬 넘고
이미지 콘텐츠를 많이 사용했는데
이미지가 700px 이상을 차지하고 있는 바람에
인쇄용 화면에서도 텍스트가 700px의 공간을 콘텐츠 영역으로 인식하여 퍼지는 바람에
IE6에서 인쇄용화면에 이미지 오른쪽이 잘려 보이고,
큰 이미지로 인해 텍스트까지 오른쪽 부분이 잘려보이는 현상으로 인해
클라이언트를 만족시키기 위해서 큰 고생을 한 경험이 있습니다.
참 IE6 때문에 모두가 고생이 많습니다.
728x90
반응형
'WEB2.0 > 웹표준' 카테고리의 다른 글
| 한눈에 보는 font-size em 차트 (0) | 2010.05.12 |
|---|---|
| input type="text"에 text-align:right 적용시 마우스 커서가 사라질때 (0) | 2010.05.11 |
| 사파리에서 이미지맵 동작하지 않을땐 (0) | 2010.04.05 |
| 웹접근성 품질마크 인증 유료화를 바라보며 (3) | 2010.03.24 |
| 프린트시 이용되는 IE용 이벤트 (0) | 2010.02.04 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 아이폰
- 아이디어
- AWS
- 공모전
- android
- Apple
- 스마트폰
- CSS
- 네이버
- 트위터
- 자바스크립트
- JavaScript
- 어플리케이션
- 모바일
- 앱스토어
- php
- 안드로이드
- 게임
- 벤처
- 소프트웨어
- 대학생
- 구글
- 경진대회
- 웹표준
- iPhone
- 앱
- 애플
- 창업
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | |||||
| 3 | 4 | 5 | 6 | 7 | 8 | 9 |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 |
| 17 | 18 | 19 | 20 | 21 | 22 | 23 |
| 24 | 25 | 26 | 27 | 28 | 29 | 30 |
글 보관함