Hacker News

Websites Should Be Printable

웹사이트는 인쇄할 수 있어야 합니다

Brennen Puth는 CSS 인쇄 스타일을 적용해 웹페이지에서 머리글을 숨기고 글자 크기와 링크 색을 조정하는 방법을 공유합니다. 종이 출력과 PDF 저장을 활용하는 독자들의 사례도 이어지며, 인쇄 지원은 콘텐츠와 사용 맥락에 따라 우선순위를 정할 문제로 드러납니다.

에디터 노트

인쇄용 CSS는 기본적인 읽기 환경을 개선하는 데 유용하지만, 페이지 나눔까지 잘 처리한다는 뜻은 아닙니다. 글자 크기와 색, 화면 전용 요소를 조정하는 방법은 간단해도 코드 블록이나 긴 문서의 경계 처리는 별도 과제로 남습니다. 댓글의 차량 매물 사례처럼 출력물이 구매 비교에 실제로 쓰이는 사이트라면 몇 시간의 CSS 작업이 사용자 불편을 줄이는 직접적인 개선이 됩니다. 반면 모든 웹페이지에 같은 우선순위를 적용할 근거는 없습니다. 글자 중심 콘텐츠와 오프라인 보관, PDF 내보내기가 필요한 업무 도구에서는 인쇄 지원이 실용적입니다. 댓글에서 제기한 글자 크기 설정 문제도 고려할 만합니다. 작성자가 인쇄용 크기를 고정하면 사용자가 설정한 기본값을 덮을 수 있으므로, 인쇄 레이아웃을 정돈하되 사용자 설정을 불필요하게 제한하지 않는 설계가 적절합니다.

AI 요약

Brennen Puth는 종이 문서에 메모하며 읽는 경험을 선호해 자신이 쓴 웹페이지의 인쇄 화면을 손봤습니다. 브라우저에서 바로 인쇄했을 때 글자가 지나치게 크고 머리글이 어수선했으며 흑백 출력에서 링크가 흐리게 보였기 때문입니다.

CSS로 인쇄 화면 조정

CSS의 @media print 규칙으로 화면용 요소를 숨기고 인쇄 전용 요소를 표시합니다. Puth는 .noPrint 클래스를 머리글에 붙여 인쇄에서 제외하고 .onlyPrint 클래스로 인쇄물에만 저자 표시를 넣었습니다. 본문과 목록은 12pt, 제목은 단계별로 13~16pt로 설정했으며 코드 블록 테두리를 검은색으로 바꾸고 링크 색도 검정으로 지정했습니다. 화면에서 쓰는 가변 크기 글꼴은 인쇄에 적합하지 않았다고 설명합니다. 코드 블록이 페이지 경계에서 나뉘지 않게 처리하는 방법은 여전히 고민거리라고 덧붙입니다.

인쇄 지원이 쓰이는 상황

Puth는 자신의 사이트가 복잡하지 않은데도 인쇄용 요소를 정리하는 데 오전 시간을 꽤 썼다고 합니다. 그래도 텍스트 중심 사이트라면 사용자가 선호하는 매체로 글을 읽도록 돕는 일이 의미 있다고 주장합니다. 댓글에는 자동차 매물과 부동산을 비교하려고 출력한다는 사례, 종이 문서에 표시하며 읽는다는 경험, 인쇄 대화상자를 PDF 저장에 쓴다는 의견이 나왔습니다. 반면 출력은 드물고 자원 낭비라는 반응도 있습니다. 여러 댓글은 앱이나 웹페이지의 데이터와 콘텐츠를 PDF로 내보내려 해도 결과가 망가지거나 별도 작업이 필요하다고 지적합니다.

Hacker News 반응

  • @nkrisc — 차량 매물 사이트에서 실제 사용자들이 여러 사이트의 차량 정보를 출력해 식탁에서 비교한다고 반복해서 들었습니다. React 페이지를 새로 개편할 때마다 인쇄 결과가 망가졌고 사용자 불만도 이어졌습니다. 인쇄 수정은 우선순위가 낮아 UX 디자이너인 저와 개발자가 CSS만 고치도록 며칠 쓸 수 있게 관리자에게 비공식 허가를 받아야 했습니다. 29,000달러가 큰돈인 구매자라면 차량을 출력해 아주 신중하게 비교한다고 봐도 됩니다.
  • @dofm — 저는 자주 종이에 인쇄하지는 않지만 글을 PDF로 보관하려고 인쇄 기능을 꽤 씁니다. 앱을 만들 때 오프라인으로 볼 인쇄용 데이터도 요구사항에 넣은 적이 있습니다. 인쇄 지원은 보통 머리글과 사이드바를 숨기고 로고 대신 텍스트를 넣으며 페이지 나눔과 색을 손보는 정도입니다. 처음부터 기본적인 인쇄를 고려하면 PDF 다운로드 기능 요구에 대응하기도 쉽습니다.
  • @bigblind — 시간이 한정돼 있다면 인쇄보다 화면 UX와 접근성에 먼저 집중하겠습니다. 다만 티켓이나 청구서처럼 사이트에서 PDF를 제공하는 기능을 인쇄 지원으로 대체할 수 있는 경우도 있다고 봅니다.
  • @beej71 — 글자 크기 변경을 인쇄 CSS에서 일괄 처리하는 데는 동의하기 어렵습니다. 사용자가 플랫폼에서 기본 글자 크기를 이미 키우거나 줄였을 수 있으니 설정을 다시 덮어쓰지 않는 편이 낫습니다.
  • @swiftcoder — 이 사이트에서 CMD-P를 눌렀더니 네 페이지가 나왔습니다. 첫 페이지는 대부분 비어 있고 세 번째 페이지에는 CSS 코드 샘플이 화면 왼쪽의 좁은 띠처럼 들어갔습니다.
  • @pmlnr — 이 인쇄 CSS에는 미디어 크기 조정, 요소가 페이지 중간에서 쪼개지지 않게 하는 처리, 줄바꿈과 링크 출력 같은 부분이 빠졌습니다. 인쇄를 제대로 지원하려면 손볼 것이 더 많습니다.

원문: Brennen Puth / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗