손님은 가끔 화면을 '종이'로 바꾼다
홈페이지는 화면으로 보라고 만들지만, 손님은 생각보다 자주 인쇄 버튼을 누릅니다. 받은 견적서를 사장님께 보여드리려고, 주문 내역을 챙겨 두려고, 오늘의 메뉴나 쿠폰을 들고 오려고요. 그런데 그렇게 뽑은 종이를 보면 위쪽엔 메뉴바가, 옆엔 배너 광고가, 뒤엔 짙은 배경색이 그대로 찍혀 있습니다. 정작 필요한 내용은 반쪽만 나오고, 잉크만 잔뜩 먹은 종이가 나오죠.
화면과 종이는 애초에 다른 매체다
이유는 단순합니다. 대부분의 홈페이지는 화면용 스타일만 갖고 있어서, 인쇄할 때도 화면 그대로를 종이에 욱여넣기 때문입니다. 화면에선 자연스러운 짙은 배경과 흰 글씨가 종이에선 잉크 낭비와 가독성 저하로 바뀌고, 스크롤로 넘기던 긴 페이지가 종이에선 문장 한가운데서 뚝 끊깁니다. 손님 눈엔 그저 '엉성한 가게'로 보일 뿐입니다.
해법은 인쇄 전용 스타일, @media print
웹에는 인쇄할 때만 적용되는 별도의 스타일을 지정하는 방법이 있습니다. 화면은 그대로 두고 종이에 찍힐 모습만 따로 다듬는 것이죠. 이 인쇄용 규칙을 제대로 갖추는 데는 다섯 가지 원칙이 있습니다.
1. 안 나와도 되는 것은 숨긴다
메뉴바, 사이드 배너, 공유 버튼, 채팅 위젯처럼 종이에선 쓸모없는 요소는 인쇄 시 감춥니다. 손님이 실제로 원하는 본문 한 덩어리만 남기는 것이 첫걸음입니다.
2. 색과 배경은 잉크를 아낀다
짙은 배경은 흰색으로, 글씨는 검은색으로 되돌립니다. 화면의 화려함보다 종이에서의 또렷함이 우선입니다. 컬러 잉크를 아끼면서도 읽기 편해집니다.
3. 링크는 주소를 함께 찍는다
종이에선 파란 밑줄을 눌러도 아무 일이 없습니다. 중요한 링크는 실제 주소가 괄호로 함께 인쇄되게 해, 손님이 나중에 그 주소를 직접 입력할 수 있게 합니다.
4. 페이지가 끊기는 자리를 통제한다
제목과 본문이 서로 다른 장으로 갈라지거나, 표가 중간에서 잘리지 않도록 페이지 넘김 지점을 지정합니다. 견적서·주문서처럼 한눈에 봐야 하는 문서일수록 중요합니다.
5. 만들었으면 실제로 뽑아 본다
브라우저의 인쇄 미리보기로 A4 한 장이 어떻게 나오는지 꼭 확인합니다. 화면에선 완벽해도 종이에선 전혀 다르게 나오는 경우가 많기 때문입니다.
사소해 보여도, 손님 손에 남는 건 그 종이 한 장이다
홈페이지에서 손님이 유일하게 '들고 가는' 것이 바로 인쇄물입니다. 잘 정돈된 견적서 한 장은 사장님이 자리에 없을 때도 대신 회사를 설명해 줍니다. CYAN 에이전시는 웹사이트를 만들 때 화면뿐 아니라 이런 인쇄 화면까지 챙깁니다. 손님이 어떤 방식으로 우리를 마주하든 단정해 보이도록, 눈에 잘 안 띄는 곳까지 손을 대는 것이 결국 신뢰를 만든다고 믿기 때문입니다.
