Web Guide인쇄 스타일프린트 CSS출력
프린트(인쇄) 스타일 고려하기
홈페이지를 출력해 결재를 올리는 경우가 생각보다 많습니다.
그런데 출력하면 메뉴와 배너가 같이 나오고 정작 내용은 잘립니다.

01누가 출력하는가
B2B 사이트에서는 담당자가 제품 정보나 견적 안내를 출력해 상사에게 보고하는 경우가 많습니다. 공공기관 관련 사이트도 마찬가지입니다.
또 오시는 길, 행사 안내, 신청 확인서처럼 종이로 가지고 다니는 경우도 있습니다.
제품 정보나 견적 안내를 출력해 올립니다.
여러 업체를 비교하기 위해 출력합니다.
오시는 길, 행사 안내를 종이로 가져갑니다.
신청 완료, 접수 확인 화면.
출력 대신 PDF로 저장해 보관하는 경우도 많습니다.
02출력하면 무엇이 문제인가
화면용으로 만든 페이지를 그대로 출력하면 불필요한 요소가 잔뜩 나오고 정작 내용은 읽기 어렵습니다.
특히 어두운 배경은 잉크를 많이 쓰고 글자가 안 보입니다.
불필요한 요소
메뉴, 배너, 푸터, 광고가 함께 출력됩니다.
잘림
가로가 넓은 요소가 종이 폭을 넘어 잘립니다.
어두운 배경
잉크를 많이 쓰고 글자가 안 보입니다.
링크
'자세히 보기'가 종이에서는 의미가 없습니다.
페이지 나뉨
표나 이미지가 중간에서 잘립니다.
03인쇄용 스타일을 따로 만든다
웹 페이지는 인쇄할 때 다른 스타일을 적용할 수 있습니다. 화면용과 별개로 인쇄용 설정을 만들어 두면 됩니다.
구현이 복잡하지 않고, 필요한 페이지에만 적용해도 충분합니다.
점검 항목
불필요한 요소 숨기기
메뉴, 배너, 푸터, 버튼을 출력에서 제외합니다.
배경 제거
흰 배경에 검은 글자로. 잉크를 아끼고 읽기 좋습니다.
폭 조정
종이 폭에 맞게 레이아웃을 한 단으로 바꿉니다.
링크 주소 표시
필요하면 링크 옆에 주소를 괄호로 표시합니다.
페이지 나눔 제어
표나 이미지가 중간에서 잘리지 않게 합니다.
회사 정보 추가
출력본에 회사명과 연락처가 들어가게 합니다.
04어디에 적용할까
모든 페이지에 적용할 필요는 없습니다. 실제로 출력될 가능성이 있는 페이지에만 적용하면 충분합니다.
제품 상세, 견적 안내, 오시는 길, 신청 확인 페이지가 대표적입니다.
적용할 페이지
제품·서비스 상세 · 가격·견적 안내 · 오시는 길 · 신청·접수 확인 · 자료실 문서 · 공지사항
적용 안 해도 되는 페이지
메인 화면 · 이미지 갤러리 · 목록 페이지 · 출력할 이유가 없는 페이지
CHECK POINT
□ 우리 사이트에서 출력될 만한 페이지를 파악했는가
□ 해당 페이지에 인쇄용 스타일이 적용되어 있는가
□ 출력 시 메뉴와 배너가 제외되는가
□ 배경이 흰색으로 바뀌는가
□ 가로로 넓은 요소가 잘리지 않는가
□ 출력본에 회사명과 연락처가 포함되는가
□ 실제로 출력해 보고 확인했는가
#인쇄 스타일#프린트 CSS#출력#PDF 저장#B2B#결재 자료#사용성#홈페이지 디자인#웹비스타#홈페이지 제작