요즘 웹사이트에도 '인쇄용 CSS'를 굳이 공들여 넣는 이유

요약 컴퓨터 과학과 사이버 보안을 전공하는 한 개발자가 요즘 종이로 인쇄된 글을 읽는 데 푹 빠졌다며 웹페이지 인쇄 스타일에 관한 글을 공유했습니다. 노트북 화면으로 글을 읽는 것도 좋지만, 출력된 종이에 직접 펜으로 표시해가며 읽을 때 집중이 훨씬 잘되고 화이트보드 앞에 서서 종이를 쥐고 있을 때 비로소 중요한 작업을 하는 듯한 느낌을 받는다는 이유였습니다. 그는 자신의 블로그 글도 다른 독자들이 종이로 편하게 읽을 수 있도록 해보고 싶어 무작정 `Ctrl + P`를 눌러 인쇄 미리보기를 실행해 보았습니다. 하지만 별다른 설정 없이 출력된 페이지의 상태는 엉망이었습니다. 글자 크기는 두 단계나 지나치게 컸고, 상단 헤더 영역은 인쇄물에 어울리지 않게 자리만 차지했으며, 화면에서 보던 파란색 링크는 흑백 인쇄 시 어색한 회색조로 뭉개져 가독성이 크게 떨어졌습니다. 이에 작성자는 CSS의 미디어 쿼리(`@media print`)를 활용해 인쇄 전용 스타일링 작업에 착수했습니다. 화면에서는 숨기고 인쇄할 때만 저자 정보를 표기하는 `.onlyPrint` 클래스와, 인쇄물에서는 불필요한 헤더를 감추는 `.noPrint` 클래스를 추가했습니다. 또한 본문 글자 크기를 인쇄에 적합한 12pt로 고정하고, 헤더 크기를 단계별로 재조정했으며, 파란 링크 텍스트도 흑백 인쇄에서 선명하게 나오도록 검은색으로 강제 지정했습니다. 코드 블록의 테두리도 정돈했으나 여러 페이지로 넘어갈 때 깔끔하게 잘리지 않는 점은 여전히 아쉬운 부분으로 남았습니다. 그는 사이트 구조가 단순함에도 불구하고 인쇄 화면을 깔끔하게 맞추는 데 오전 시간을 꼬박 썼다며, 왜 많은 개발자들이 인쇄 스타일을 신경 쓰지 않는지 충분히 이해한다고 털어놓았습니다. 요즘 웹페이지를 실제로 출력해 보는 사람이 과연 몇이나 될까 싶지만, 주로 텍스트를 다루는 사이트라면 독자가 선호하는 매체로 글을 읽을 수 있게 배려하는 것은 결코 나쁜 일이 아니라고 강조했습니다. 그는 좋은 소프트웨어란 개발자가 사용자를 위해 베푸는 작은 친절들이 쌓여 만들어지는 것이며, 훗날 누군가 이 작은 배려를 발견하고 찰나의 미소를 짓는다면 그것만으로도 충분히 가치 있는 일이라고 전했습니다.