프린트 레이아웃과 함께 웹 디자인하기 🖨️🕸️🎨

FEConf 2024 라이트닝 토크에서 인쇄 전용 CSS 웹 기술을 활용해서 A4 규격 인쇄를 같이 지원하는 웹 디자인 방법을 소개했습니다. 주요 내용으로 프린트 웹 디자인을 고민하게 된 동기, 작업 과정, 브라우저 지원 문제, 인쇄된 결과를 다루었습니다.

원본 프레젠테이션 아웃 링크: https://slides.com/muhun/css-paged-media/

Transcript

1. 프린트 레이아웃과 함께 웹 디자인하기 🖨 🕸 🎨 CSS Paged Media 를 활용한 웹 이력서 프린트 디자인 사례 소개 FEConf 2024 Lighting Talk - 김무훈 iam@muhun.kim 1 원본 프레젠테이션 아웃 링크
2. 프린트 레이아웃 디자인 동기 저는 이력서를 채용 지원 외에도 즉석에서 보여줘야 하는 다양한 상황을 경험했습니다. 이런 경우에 대비하여 디지털 환경에서 빠르게 열람할 수 있고, 멀티미디어와 함께 보여줄 수 있 는 웹 이력서를 만들고자 했습니다. read.cv - Amsterdam site template 마치 명함 교환처럼.. 간편한 이력 공유 2
3. 실제로 인쇄하여 검토하지 않더라도 자주 사용되고 있는 규격입니다. 채용을 진행하는 입장에서 간편한 서류 선별을 위해 선호되기 때문입니다. A4 size PDF = 구직 서류 규격 그러나, 3
4. 실제로 인쇄하여 검토하지 않더라도 자주 사용되고 있는 규격입니다. 채용을 진행하는 입장에서 간편한 서류 선별을 위해 선호되기 때문입니다. A4 size PDF = 구직 서류 규격 그러나, 이전에 받아본 웹 이력서가 느렸던 경험이나 정해지지 않은 형식에 대한 거부감도 있습니다. 3.1
5. 해결책 - 웹으로 프린트 문서 조판하기 웹 페이지는 스크린 외에도 인쇄 매체의 조판에 활용할 수 있습니다. 4
6. 해결책 - 웹으로 프린트 문서 조판하기 는 W3C 에서 논의 중인 인쇄 전용 CSS 표준입니다. 이 표준은 2004 년부터 논의되고 있는 꽤 오래된 기능입니다.1 CSS Paged Media 1: https://www.w3.org/TR/2004/CR-css3-page-20040225/ 웹 페이지는 스크린 외에도 인쇄 매체의 조판에 활용할 수 있습니다. 4.1
7. 해결책 - 웹으로 프린트 문서 조판하기 이 CSS 표준을 사용하면 웹 브라우저 인쇄 결과물의 레이아웃을 조정할 수 있습니다. A4, B4, Letter 등 규격, 여백, 페이지 넘김, 방향 등 거의 모든 요소를 지원합니다. 는 W3C 에서 논의 중인 인쇄 전용 CSS 표준입니다. 이 표준은 2004 년부터 논의되고 있는 꽤 오래된 기능입니다.1 CSS Paged Media 1: https://www.w3.org/TR/2004/CR-css3-page-20040225/ 웹 페이지는 스크린 외에도 인쇄 매체의 조판에 활용할 수 있습니다. 4.2
8. 해결책 - 웹으로 프린트 문서 조판하기 이 CSS 표준을 사용하면 웹 브라우저 인쇄 결과물의 레이아웃을 조정할 수 있습니다. A4, B4, Letter 등 규격, 여백, 페이지 넘김, 방향 등 거의 모든 요소를 지원합니다. 는 W3C 에서 논의 중인 인쇄 전용 CSS 표준입니다. 이 표준은 2004 년부터 논의되고 있는 꽤 오래된 기능입니다.1 CSS Paged Media 1: https://www.w3.org/TR/2004/CR-css3-page-20040225/ 웹 페이지는 스크린 외에도 인쇄 매체의 조판에 활용할 수 있습니다. 앞서 언급한 문제는 텍스트 중심으로 내용을 구성하면 해결될 것이라고 생각했습니다. 이러한 콘텐츠를 보통 관련 커뮤니티에서 web-to-print( 인쇄를 위해 만든 웹 콘텐츠) 라고 불립니다. 4.3
9. 약 3 년 간 web-to-print 개인 이력서 변천사 프린트 결과물 시연 2019 2021 2023 5
10. 스크린 화면 시연 , 이 주소를 방문하셔서 인쇄를 바로 시도해보실 수 있습니다. https://frontend.moe/resume?print 6
11. @page { size: A4 portrait; margin: 3cm 2cm; } * { break-inside: avoid; } 1 2 3 4 5 6 7 8 노션 기본 PDF 출력 결과물 오른쪽 코드 스니펫 추가 후 결과물 CSS Paged Media 스니펫 일부 ↔ 번외 - 웹 서핑 시 PDF 아카이빙 팁 어때요? 콘텐츠 정보가 인쇄 규격에 더 잘 어울리게 배치되었나요? 7
12. IE 8(2009 부분 지원), 크롬(2011), 파이어폭스(2013 년부터 부분 지원) 부터 지원: https://caniuse.com/?search=paged media CSS 속성 환경 @page: margin break-inside: avoid @page size @page: page- orientation 브라우저 지원 문제 *FireFox Nightly 8
13. 앞서 설명한 바와 같이, 모든 브라우저에서 완전히 지원하지 않습니다. 간단한 개인 용도를 넘어 제대로 사용하려면 표준을 철저히 준수하는 컨버터를 사용해야 합니다. 찾아보면 , , 등 여러 기업용 서비스가 있습니다. 이들은 외부 요청이 필요한 API 또는 헤드리스 브라우저 형태로 제공됩니다. WeasyPrint PrinceXML PDFreactor https://printcss.live/ 9
14. web-to-print 이력서 디자인 과정 소개 몇 가지 유용한 CSS Paged Media 기능을 소개하겠습니다. 10
15. 핵심 요구사항 A4 스크린과 프린트 각각에 최적화된 레이아웃과 기능 을 설계해야 합니다. 스크린 프린트 11
16. 핵심 요구사항 A4 스크린과 프린트 각각에 최적화된 레이아웃과 기능 을 설계해야 합니다. 프린트에서는 헤더, 푸터, 댓글 등 스크린 상에 보이는 UI 를 포함해서는 안됩니다. 스크린 프린트 11.1
17. 핵심 요구사항 A4 스크린과 프린트 각각에 최적화된 레이아웃과 기능 을 설계해야 합니다. 프린트에서는 헤더, 푸터, 댓글 등 스크린 상에 보이는 UI 를 포함해서는 안됩니다. 프린트는 텍스트 중심으로 구성하고, 스크린에 서는 이미지와 영상 등 멀티미디어를 추가로 표 시합니다. 스크린 프린트 https://www.frontend.moe /resume/ 11.2
18. 웹 디자인 작업 CSS: em, px, pt, cm, in… - Web Style Sheets CSS tips & tricks - W3C 권장 가끔 사용 비권장 스크린 em, px, % ex pt, cm, mm, in, pc 프린트 em, cm, mm, in, pt, pc, % px, ex 인쇄 매체는 스크린과 달리 레이아웃의 너비가 고정되어 있으며, 픽셀이 아닌 cm, mm, pt 와 같은 실제 물리적 단위가 표준으로 사용됩니다. 따라서 프린트 목업은 pt( 포인트) 단위를 기준으로 디자 인했습니다. 12
19. 단일 진실의 원천, em = 공통 계층 동일한 콘텐츠에 대해 프린트와 스크린 스타일의 분기를 각각 정의하 는 것은 번거롭고 유지보수가 어려워지는 작업이라 생각했습니다. 이 문제를 해결하기 위해 em 단위를 활용하여 프린트 및 스크린 디 자인을 통합하는 방식을 채택하였습니다. 13
20. 단일 진실의 원천, em = 공통 계층 *CSS media query 는 @media screen 만 있는 것이 아니라, @media print 도 있습니다. 동일한 콘텐츠에 대해 프린트와 스크린 스타일의 분기를 각각 정의하 는 것은 번거롭고 유지보수가 어려워지는 작업이라 생각했습니다. 이 문제를 해결하기 위해 em 단위를 활용하여 프린트 및 스크린 디 자인을 통합하는 방식을 채택하였습니다. 프린트: 모든 요소의 크기를 rem 단위로 계산하여 일관된 디자인 을 유지합니다. (1rem=11pt) 스크린: 브라우저에서 대개 1rem=16px 인데, 별도의 추가 설정 없이도 반응형 디자인이 구현됩니다. @media print { :root { font-size: 11pt; } } :root { // rem 기본 픽셀 크기는 브라우저 설정 에 달렸는데, 대개 16px 입니다. font-size: 16px; } // 예시: 헤드라인 영역 및 하단 구분선 #header { h1 { font-size: 3.8rem; margin-bottom: 2rem; } hr { max-width: 22.5rem; margin-top: 1rem; margin-bottom: 3rem; height: 0; border-top: solid 0.06rem var(--primary); } } 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 13.1
21. 단일 진실의 원천, em = 공통 계층 *CSS media query 는 @media screen 만 있는 것이 아니라, @media print 도 있습니다. 동일한 콘텐츠에 대해 프린트와 스크린 스타일의 분기를 각각 정의하 는 것은 번거롭고 유지보수가 어려워지는 작업이라 생각했습니다. 이 문제를 해결하기 위해 em 단위를 활용하여 프린트 및 스크린 디 자인을 통합하는 방식을 채택하였습니다. 프린트: 모든 요소의 크기를 rem 단위로 계산하여 일관된 디자인 을 유지합니다. (1rem=11pt) 스크린: 브라우저에서 대개 1rem=16px 인데, 별도의 추가 설정 없이도 반응형 디자인이 구현됩니다. @media print { :root { font-size: 11pt; } } :root { // rem 기본 픽셀 크기는 브라우저 설정 에 달렸는데, 대개 16px 입니다. font-size: 16px; } // 예시: 헤드라인 영역 및 하단 구분선 #header { h1 { font-size: 3.8rem; margin-bottom: 2rem; } hr { max-width: 22.5rem; margin-top: 1rem; margin-bottom: 3rem; height: 0; border-top: solid 0.06rem var(--primary); } } 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 em 의 가변성이라는 특징 덕에 최적화된 비율을 유지할 수 있습니다. 13.2
22. 세부 항목 프린트 레이아웃 우선 디자인하기 1. 인쇄 레이아웃 설정 - 규격 및 여백 @page { size: A4 portrait; margin: 3rem 4rem; } @media print { :root { font-size: 11pt; } } 1 2 3 4 5 6 7 8 9 10 14
23. 세부 항목 프린트 레이아웃 우선 디자인하기 1. 인쇄 레이아웃 설정 - 규격 및 여백 2. 웹 페이지 보이는 헤더, 푸터, 댓글 UI 는 print media query 로 숨김 처리 .header, .footer, .comments { display: none; } } @page { 1 size: A4 portrait; 2 margin: 3rem 4rem; 3 } 4 5 @media print { 6 :root { 7 font-size: 11pt; 8 } 9 10 11 12 13 14 15 16 15
24. 세부 항목 프린트 레이아웃 우선 디자인하기 1. 인쇄 레이아웃 설정 - 규격 및 여백 2. 웹 페이지 보이는 헤더, 푸터, 댓글 UI 는 print media query 로 숨김 처리 3. 페이지 넘김 방지 설정하기 웹 문서를 프린트 시 중간에 이미지, 텍스트 등 내용이 다른 페이지에 이어서 나눠어지는 문제 가 흔합니다. avoid-page 속성 값 명시로 피할 수 있습니다. break-inside: avoid; } } @page { 1 size: A4 portrait; 2 margin: 3rem 4rem; 3 } 4 5 @media print { 6 :root { 7 font-size: 11pt; 8 } 9 10 .header, 11 .footer, 12 .comments { 13 display: none; 14 } 15 16 .project { 17 18 19 20 16
25. 페이지 넘김 방지 적용 전후 비교 적용 전 적용 이후 17
26. 인쇄 결과물 전용 UI 인쇄물에서만 표시되는 요소를 설정할 수 있습니 다. 원본 웹 페이지 주소 QR 코드 .print { display: none; } @media print { .print { &:after { margin-left: 0.5rem; content: url(https://api.qrserver.com/v1/create-qr- code/?size=64x64&data=https://www.frontend.moe/resume); } } } 1 2 3 4 5 6 7 8 9 10 11 12 스크린 프린트 18
27. 작업 팁 브라우저 개발 도구에는 print media 에뮬레이션 기능이 있습니다. 이 기능은 웹 페이지의 콘텐츠를 프린트 미디어로 에뮬레이션합니다. Chrome: More tools - Rendering - Emulate CSS media type print media query 와 CSS Paged Media 는 별개의 웹 표준 기능입니다. 오른쪽 사진과 같은 Paged Media 로 설정된 결과물의 페이지 마진과 페이지별 내용은 개발 도구로 확인할 수 없지만, 각 요소의 스타일을 시각적으로 확인하는 용도로 유용합니다. 19
28. 프린트 미디어 에뮬레이션 Firefox: 스타일 편집기 - " 페이지에 인쇄 미디어 시뮬레이션 전환" 버튼 20
29. 프린트 미디어 에뮬레이션 Safari: 요소 인스펙터 - " 프린트 미디어 스타일 강제 적용" 프린터 아이콘( 🖨 ) 버튼 21
30. 요약 CSS Paged Media 는 웹 브라우저의 인쇄 레이아웃을 디자인하기 위한 기능입니다. 규격, 여백, 페이지 넘김, 방향 등 조판에 필요한 거의 모든 요소를 지원하고 있습니다. 22
31. 요약 CSS Paged Media 는 웹 브라우저의 인쇄 레이아웃을 디자인하기 위한 기능입니다. 규격, 여백, 페이지 넘김, 방향 등 조판에 필요한 거의 모든 요소를 지원하고 있습니다. 이 발표에서는 해당 기술의 응용을 인쇄 매체 저작으로만 한정하지 않고, 인쇄와 화면, 두 가지 환경을 같이 지원하는 통합적인 웹 디자인 방법을 소개했습니다. 22.1
32. 요약 CSS Paged Media 는 웹 브라우저의 인쇄 레이아웃을 디자인하기 위한 기능입니다. 규격, 여백, 페이지 넘김, 방향 등 조판에 필요한 거의 모든 요소를 지원하고 있습니다. 이 발표에서는 해당 기술의 응용을 인쇄 매체 저작으로만 한정하지 않고, 인쇄와 화면, 두 가지 환경을 같이 지원하는 통합적인 웹 디자인 방법을 소개했습니다. 인쇄와 화면 간의 시각적 일관성을 rem 단위를 공통 디자인 시스템으로 활용하여 유지하 고, media query 를 활용하여 각 매체에 최적 레이아웃을 제공했습니다. 22.2
33. 요약 CSS Paged Media 는 웹 브라우저의 인쇄 레이아웃을 디자인하기 위한 기능입니다. 규격, 여백, 페이지 넘김, 방향 등 조판에 필요한 거의 모든 요소를 지원하고 있습니다. 이 발표에서는 해당 기술의 응용을 인쇄 매체 저작으로만 한정하지 않고, 인쇄와 화면, 두 가지 환경을 같이 지원하는 통합적인 웹 디자인 방법을 소개했습니다. 인쇄와 화면 간의 시각적 일관성을 rem 단위를 공통 디자인 시스템으로 활용하여 유지하 고, media query 를 활용하여 각 매체에 최적 레이아웃을 제공했습니다. 드래프트 웹 표준으로 모든 브라우저를 지원하는 하위 기능이 제한적이라, 이를 주의하셔 야 합니다. 모든 기능을 제대로 활용하려면 전용 컨버터를 찾으셔야 합니다. 22.3
34. 다음의 자료와 사례가 도움이 되었습니다. 제가 이 웹 표준을 알게 된 계기입니다. , Smashing Magazine 가이드 포스팅 세부 명세 PyCon KR 2018 프로그램북을 웹으로 조판하기 발표 영상 Designing For Print With CSS — Smashing Magazine CSS paged media - MDN 아웃링크 23