https://piccalil.li/blog/printing-the-web-making-webpages-look-good-on-paper/
웹 개발에서 중요한 부분은 반응형 경험을 제공하는 것입니다. 일반적으로 반응형 디자인이라고 하면 다양한 뷰포트 크기에 맞춰 사이트를 조정하는 것을 떠올리지만, 다양한 매체에 반응형으로 구현하는 것은 어떨까요?
CSS에는 잉크를 많이 소모하는 복잡한 문서를 깔끔하고 세련되며 읽기 쉬운 문서로 변환할 수 있는 잠재력이 숨겨져 있습니다. 하지만 좋은 오류 메시지를 작성하는 것과 마찬가지로 , 인쇄 스타일시트는 종종 간과되어 나중에야 작성되어 사용자의 불만을 사고 리소스가 낭비되는 결과를 초래합니다.
왜 신경 써야 하나요?
"모두가 멋진 고해상도 화면의 컴퓨터를 가지고 있잖아요!" "왜 인쇄용 디자인에 신경 써야 하죠?"라고 소리치는 게 들리는 것 같아요.
글쎄요, 이유는 많습니다.
첫 번째 주요 문제는 접근성입니다. 쉽게 말해서, 모든 사람이 장시간 화면을 볼 수 있는 것은 아니며, 콘텐츠를 소비할 수 있는 다른 방법이 필요합니다. 이와는 별개로, 어떤 사람들은 단순히 종이책을 읽는 것을 선호합니다. 많은 사람들이 전자책보다 종이책을 사용하고 선호하는 것처럼, 디스플레이를 읽는 것보다 종이책을 읽는 것을 선호하는 사람들도 있습니다.
여행의 경우도 있습니다. 특히 시골이나 다른 나라로 여행을 갈 경우, 인터넷 접속이 불가능할 가능성이 높으며 (전기도 전혀 없을 수 있습니다), 인쇄본을 인쇄하는 것은 유용할 뿐만 아니라 유일한 선택지가 될 수 있습니다.
일부 조직에서는 특정 경우에 콘텐츠의 인쇄본을 보관해야 하는 법적 의무가 있습니다. 많은 회사가 여전히 인쇄본 보관을 의무화하는 조직 정책을 가지고 있습니다. 이와 더불어, 특히 정부 기관을 위한 콘텐츠를 제작하는 경우, 페이지가 인쇄 가능한지 확인해야 할 법적 의무가 있을 수 있습니다.
인쇄용 스타일을 아는 것도 유용한 기술입니다. 디지털 출판 형식인 EPUB는 HTML과 CSS를 압축한 형태입니다. 즉, 인쇄용 웹사이트 디자인에 필요한 지식의 상당 부분이 전자책 디자인에도 적용되며, 그 반대의 경우도 마찬가지입니다.
더 자세히 설명할 수도 있지만, 굳이 그럴 필요는 없다고 생각합니다. 사람들은 웹사이트를 인쇄합니다. 즉, 여러분의 웹사이트도 인쇄할 것입니다. 웹사이트를 인쇄 가능하게 만들면 화면 경험을 향상시키는 유익한 부산물이 생깁니다.
인쇄 스타일 사용
@media미디어 쿼리에서 유형을 로 설정하면 print인쇄 미리 보기 모드에서 화면에 표시된 페이지 자료와 문서에 특정 스타일을 적용할 수 있습니다.
태그를 사용하여 CSS를 가져오는 경우 속성을 추가할 수 있습니다 media="print". 이렇게 하면 해당 스타일시트에 포함된 모든 스타일이 인쇄 컨텍스트에서만 적용됩니다 .
참고로
쿼리가 일치하지 않는 경우에도 이 CSS 파일이 다운로드되므로 파일 크기에 대해 여전히 주의해야 합니다.
HTML
클립보드에 복사
또 다른 방법은 CSS 파일 내에서 미디어 쿼리를 사용하는 것입니다. 다음과 같습니다.
CSS
클립보드에 복사
@media print {
/* Print styles here */
}
다음을 사용하여 미디어 쿼리를 지정할 수도 있습니다 @import.
CSS
클립보드에 복사
@import url("stylesheet.css") print;
위의 예는 미디어 유형인 print.을 사용하는 것을 기반으로 하지만, 스타일을 화면에만 적용하고 싶다면 . @media유형을 사용할 수 있습니다 screen.
참고로
반응형 디자인을 구현하기 위해 다음과 같이 폭이 넓은 미디어 기능을 사용하는 것은 일반적인 패턴입니다.
css
Copy to clipboard
@media screen and (min-width: 750px) {
/* Styles here */
}
min-width 이 설정은 과 를 지정 screen하므로 인쇄에는 적용되지 않습니다. 이 때문에 여러 번 곤란을 겪었습니다.
인쇄 스타일 테스트
브라우저와 기기에서 테스트하지 않고 기능을 배포할 수는 없듯이, 인쇄 스타일도 마찬가지로 세심한 주의가 필요합니다. 모든 변경 사항을 인쇄하거나 미리 보고 제대로 작동하는지 확인할 수도 있고, 더 현명한 방법으로 인쇄를 시뮬레이션하여 테스트할 수도 있습니다.
Microsoft는 Edge에서 인쇄 시뮬레이션을 활성화하기 위한 편리한 가이드를 편집했으며 Google은 Chrome에 대해 비슷한 가이드를 제공합니다.
Firefox에서는 '페이지의 인쇄 매체 시뮬레이션 전환' 버튼을 눌러야 합니다. 빨간색 테두리로 표시된 부분은 다음과 같습니다.
개발 도구가 열려 있는 Firefox 브라우저입니다. 규칙 섹션 아래에 인쇄 스타일시트 아이콘이 빨간색 원으로 표시되어 있습니다. 이 아이콘은 밝은 모드와 어두운 모드의 미디어 시뮬레이션 옵션 옆에 있습니다.
Safari에서는 '인쇄 미디어 스타일 강제 적용' 버튼을 눌러야 합니다. 이 버튼 역시 빨간색 테두리로 표시되어 있습니다.
개발 도구가 열려 있는 Safari 브라우저입니다. 개발 도구에는 강조 표시된 프린터 아이콘이 있습니다. '인쇄 미디어 스타일 강제 적용' 툴팁도 표시됩니다.
물론, Polypane은 다른 개발 도구와 함께 매우 눈에 띄는 옵션을 제공하여 작업을 매우 쉽게 만들어줍니다 .
이러한 인쇄 시뮬레이션은 시뮬레이션일 뿐이며, 예상과는 다르다는 점을 명심하세요 1:1. 예를 들어, 인쇄 시뮬레이션은 배경을 비활성화하지 않지만, 대부분의 브라우저는 기본적으로 배경을 인쇄하지 않도록 설정되어 있습니다. Firefox에서는 "배경 인쇄"라는 체크박스를 통해, Chrome에서는 "배경 그래픽"이라는 체크박스를 통해 이를 관리할 수 있습니다.
일반적으로 대부분 사용자는 기본값을 변경하지 않을 것이며, 대부분의 사람들이 프린터가 잉크를 많이 소모하는 것을 원하지 않을 것이라고 가정할 수 있습니다. 따라서 이 점을 염두에 두고 UI 요소에 배경이 필요 하지 않도록 하여 안전을 확보하는 것이 좋습니다 .
물리적, 절대적 단위
CSS를 작성할 때는 , 등과 같이 사용자 선호도 등에 따라 크기가 조절되는 상대적이고 반응형 단위를 사용하는 경향 이 있습니다 .remem
가끔 CSS에 표준 절대 측정 단위가 있다는 사실을 잊곤 합니다. 하지만 저희는 훌륭한 단위들을 보유하고 있습니다. 화면에서는 항상 정확한 것은 아니지만 , 실제로 인쇄하면 대개 정확하다는 점 을 명심하세요.
단위 이름 픽셀 미터법 제국(대략)
센티미터 센티미터 37.8픽셀 10mm 1인치의 25/64
mm 밀리미터 3.78픽셀 1mm 1인치의 3/64
큐 4분의 1밀리미터 0.945픽셀 0.25mm 1인치의 1/64
~에 인치 96 25.4 1인치
피씨 법규집 16 4.23* 1인치의 1/6
pt 가리키다 1.3* 0.3527* 1인치의 1/72
픽셀 픽셀 1 0.264583* 1/96의
상대 단위는 인쇄용으로는 크기가 조정되지만, 특정 경우에는 이러한 절대 단위를 염두에 두는 것이 좋습니다. 매우 구체적인 글꼴 크기(예: 법률 문서)를 구현하거나, 요소 간 충분한 간격이나 크기를 확보할 때(예: 너무 작아서 스캔되지 않고 가독성을 위해 약간의 테두리가 필요한 QR 코드), 또는 표준화된 페이지 크기나 실제 크기를 준수할 때 유용합니다.
추가 페이지 옵션
바로 이 부분에서 물리적인 절대 단위가 매우 유용합니다. 페이지 자체를 대상으로 하는 at-규칙( , )이 있는데 , 이 규칙은 여백, 페이지 방향, 페이지 크기를 설정하는 데 사용할 수 있습니다. Baseline에서@page 2024년 12월부터 '새롭게 제공' 되고 있으니 , 여기서는 용(dragon)을 다루겠습니다.
CSS
클립보드에 복사
@page {
size: 14.8cm 21cm;
margin: 4cm 2cm;
}
A5, A4, A3, Letter, Legal, Ledger 등 실제 용지 크기를 사용할 수도 있습니다.
CSS
클립보드에 복사
@page {
size: A4 portrait;
}
여백을 설정할 때 주의해야 할 점은 대부분의 프린터가 페이지 가장자리까지 인쇄할 수 없고, 대부분의 브라우저는 기본 여백에 날짜, 페이지 번호, 제목, URL과 같은 내용이 포함된 추가적인 꼬리말과 머리글을 추가하려 한다는 것입니다.
페이지 나누기
페이지 크기에 따라 페이지 나누기가 발생합니다. 웹은 적어도 일반적으로 연속적입니다. 즉, 스크롤하며 탐색하는 콘텐츠의 흐름입니다. 대부분의 사용자는 비교적 짧은 표준 용지 크기에 인쇄하기 때문에 페이지가 매겨진 출력물을 보게 될 가능성이 높습니다.
웹용 페이지를 개발할 때 뷰포트 크기에 관계없이 페이지가 반응형이 되도록 하는 것이 우리의 주요 업무인 것처럼, 인쇄용 페이지를 디자인할 때 우리의 업무는 페이지 나누기가 어색하고 부적절한 위치에서 발생하지 않도록 하는 것입니다.
충분히 긴 콘텐츠는 여러 페이지에 걸쳐 나눠 집니다 . 이러한 나누기가 어디에서 발생해야 하는지, 그리고 어떻게 자연스럽게 이어지도록 할지 정의해야 합니다. 다행히 break-after, break-before, 를 사용할 수 있으며 break-inside, 이를 통해 페이지를 어디로 나눌지 지정할 수 있습니다.
break-after그리고 break-before다소 복잡한 값이 많이 있지만 페이지 나누기와 관련하여 우리가 주로 관심을 갖는 값은 다음과 같습니다.
auto(기본값): 중단은 허용되지만 강제되지는 않습니다.
avoid: 페이지, 열 또는 영역에서 줄바꿈을 방지하세요.
avoid-page: 페이지 나누기를 피하세요
all: 가능한 모든 조각화 컨텍스트를 통해 페이지 나누기를 강제로 실행합니다.
page: 페이지 나누기 강제 실행
left: 다음 페이지가 왼쪽에 오도록 최대 2개의 페이지 나누기를 강제로 실행합니다.
right: 다음 페이지가 오른쪽에 오도록 최대 2개의 페이지 나누기를 강제로 실행합니다.
recto: 최대 2개의 페이지 나누기를 강제로 적용하여 다음 페이지가 왼쪽에서 오른쪽으로 펼쳐지는 경우 오른쪽 페이지가 되고, 오른쪽에서 왼쪽으로 펼쳐지는 경우 왼쪽 페이지가 되도록 합니다.
verso: 최대 2개의 페이지 나누기를 강제로 적용하여 다음 페이지가 왼쪽에서 오른쪽으로 펼쳐지는 경우 왼쪽 페이지가 되고, 오른쪽에서 왼쪽으로 펼쳐지는 경우 오른쪽 페이지가 되도록 합니다.
break-inside다음과 같은 가능한 값이 있습니다.
auto: 휴식은 허용되지만 강제로 휴식할 수는 없습니다.
avoid: 페이지, 열 또는 영역에서 줄바꿈을 방지하세요.
avoid-page: 페이지 나누기를 피하세요
avoid-column: 열 나누기를 피하세요
avoid-region: 지역 분리를 피하세요
이전 구문의 잔재가 page-break-*여기 저기에 남아 있을 수 있지만, 현재는 더 이상 사용되지 않습니다. 하지만 대부분의 브라우저에서 여전히 작동하고 있습니다. 여전히 널리 사용되고 있으므로, 여기서는 간략하게 자세히 설명하겠습니다.
page-break-before: always요소에 적용하면 페이지 나누기가 해당 요소 앞에 발생 하여 다음 페이지의 첫 번째 요소가 됩니다. 마찬가지로, 를 적용하면 page-break-after: always페이지 나누기가 해당 요소 뒤에 발생합니다 . 또한 , 를 사용하면 page-break-inside: avoid가능한 경우 요소가 여러 페이지에 걸쳐 분할되는 것을 방지할 수 있습니다. 이는 캡션이 항목과 함께 표시되도록 해야 하는 그림과 같은 항목에도 적용할 수 있습니다.
휴식 시간은 적절하고 적절하게 유지하세요. 너무 과열되어 종이를 낭비하지 않도록 하세요.
고아와 과부들
고아(orphan)를 도입하는 데 매우 신중해야 합니다. 인쇄 환경에서 CSS가 이해하는 고아는 다음 페이지로 넘어가는 줄을 의미합니다. 예를 들어, 문단 끝에 있는 한 줄이 다음 페이지에 단독으로 배치되는 것은 바람직 하지 않습니다 . 이는 사용자에게 혼란을 주고 보기에도 좋지 않습니다.
이를 방지하기 위해 고아 속성에 값을 추가할 수 있습니다. 텍스트가 분할될 때 항상 3줄이 다음 페이지로 넘어가도록 하려면 orphans: 3요소에 를 적용하면 됩니다. widows는 와 매우 유사 하지만, 는 아래쪽이 아닌 위쪽 의orphans 텍스트 줄입니다 .
orphans및 widows속성은 Firefox에 제공되지 않으므로 사용 가능 여부가 제한되어 있다는 점을 명심하세요 .
상자 장식
요소 테두리가 여러 페이지에 걸쳐 조각나면 약간 깨져 보일 수 있습니다. 를 사용하여 box-decoration-break좀 더 보기 좋게 만들 수 있습니다. 기본적으로 테두리가 할당되어 있어 slice보기 좋지 않지만, 를 사용하여 좀 더 일관성 있게 보이도록 만들 수 있습니다 box-decoration-break: clone.
-webkit-box-decoration-break현재 WebKit에서는 사용이 제한되어 있으므로 WebKit 접두사를 사용하는 것이 좋습니다 .
상호 작용
어떤 매체를 사용하든 그 매체의 한계를 이해해야 합니다. 당연한 말이지만, 종이는 인터랙티브하지 않습니다. 클릭하거나, 길게 누르거나, 마우스를 올려놓을 수 없습니다. 한 매체에서 다른 매체로 작업을 전환할 때는 고려해야 할 사항이 많습니다.
href예를 들어, 링크는 클릭할 수 없으므로 속성을 사용하여 링크 앞에 대괄호로 링크의 위치를 표시하는 것이 좋습니다 content.
CSS
클립보드에 복사
a[href]:after {
content: " (" attr(href) ")";
}
같은 맥락에서, 요소에 대한 제목을 만드는 것도 가치가 있지만 , 해당 요소가 얼마나 접근하기 어려운지 감안하면 제목에 중요한 정보를 넣어서는 안 됩니다 .
CSS
클립보드에 복사
abbr[title]:after {
content: " (" attr(title) ")";
}
사이트에 양식이 있고 사용자가 이를 종이로 작성할 수 있게 하고 싶다면, 사용자가 합리적으로 그렇게 할 수 있는지 확인하세요.
이와 관련하여 흔히 발생하는 오류는 양식 항목의 레이블이 상자 안에 있는데, 사용자가 입력하려고 할 때 레이블이 사라지는 것입니다. 인쇄된 용지를 사용하는 사용자는 이러한 상호 작용을 활용하지 못하는 것은 당연합니다. 양식 상자가 명확하게 정의되어 있고, 진행에 필요한 버튼 뒤에 숨겨진 것이 없는지 확인하세요.
overflow: visible스크롤 가능한 컨테이너 안에 있는 콘텐츠도 신중하게 고려해야 합니다. 컨테이너의 크기를 설정하거나 늘리려면 인쇄용 CSS를 적용하는 것이 좋습니다 .
항해
인쇄된 페이지에는 탐색 바, 바닥글, 사이드바가 필요하지 않습니다. 유용한 정보가 없다면 제거해도 됩니다.
문제의 각 요소에 를 적용할 수도 있고 display: none, 내가 선호하는 대로 에 없는 모든 것을 숨길 수도 있습니다 .
CSS
클립보드에 복사
body > *:not(main) {
display: none;
}
색상과 잉크
많은 프린터가 흑백으로만 인쇄하며, 컬러로 인쇄할 경우 추가 비용이 발생할 수 있습니다. 이는 주의해야 할 제약 사항입니다. 인쇄 스타일 테스트 에서 언급했듯이 대부분의 브라우저는 기본적으로 배경 그래픽을 비활성화합니다. 이는 좋은 시작이지만, 더 많은 기능을 제공할 수 있습니다.
가장 먼저 해야 할 일은 웹사이트를 흑백으로 확인하는 것입니다. 가독성이 좋고 콘텐츠의 대비가 충분한가요? 특별한 경우가 아니면 사람들은 사이트를 흑백으로 인쇄할 가능성이 높으므로, 꼭 확인해 보는 것이 좋습니다.
사용자의 잉크병을 존중하는 차원에서 불필요한 콘텐츠를 찾아보는 것도 좋습니다. 불필요한 탐색 기능은 이미 제거했습니다. 이미지가 크다면 꼭 필요한가요? 크기를 줄이는 것이 가치가 있을까요? 사이트에 광고가 있다면 (계약 조건이 허락한다면) 삭제하는 것을 고려해 보세요.
페이지는 대부분 흑백으로 인쇄될 것입니다. 브라우저는 기본적으로 라이트 모드로 인쇄하므로 웹사이트에도 라이트 모드를 적용하는 것이 중요합니다 . 사이트 접근성을 위해서는 라이트 모드가 필수적입니다 .
색상이나 음영이 있는 배경의 일부 블록을 테두리로 바꿀 수도 있습니다. 테두리가 너무 많아서 과하거나 너무 단조롭게 느껴질까 봐 걱정된다면, 다양한 획 두께와 스타일을 사용하여 분위기를 바꿀 수 있습니다. 이렇게 하면 잉크 낭비를 줄일 수 있을 뿐만 아니라 회색조의 대비를 강조하는 데에도 도움이 됩니다.
