2018년 겨울, 대기업 클라이언트에게 연말 성과 보고용 웹 대시보드를 만들어 납품했던 날이 생생합니다. 클라이언트가 “이거 그대로 출력하게 PDF로 좀 뽑아주세요”라고 무심코 던진 요청에, 저는 당연히 ‘Ctrl+P(인쇄)’를 눌렀죠. 하지만 결과물은 처참했습니다. 화려했던 CSS 스타일은 다 사라지고 텍스트만 앙상하게 남은, 말 그대로 ‘깨진 문서’가 나왔으니까요. 식은땀을 흘리며 밤새 변환 툴을 찾아 헤매던 기억이 납니다.
아마 지금 이 글을 클릭하신 여러분도 저와 비슷한 답답함을 느끼고 계실 겁니다. 애써 만든 HTML 문서나 잘 정리된 웹 페이지를 PDF로 저장해야 하는데, 자꾸만 레이아웃이 틀어지는 문제 말이죠. 오늘 이 글을 끝까지 읽으시면, 더 이상 스타일 깨짐 없이 원본 그대로의 고해상도 PDF를 추출하는 확실한 방법을 얻어 가실 수 있습니다.
1. 브라우저 기본 기능으로 완벽하게 저장하는 ‘숨겨진 옵션’
가장 빠르고 설치가 필요 없는 방법은 크롬, 엣지 등 웹 브라우저의 기본 ‘인쇄’ 기능을 활용하는 것입니다. 단축키 Ctrl + P(맥은 Cmd + P)를 누른 뒤 대상을 ‘PDF로 저장’으로 바꾸면 되죠. 하지만 대부분 여기서 그냥 저장을 누르기 때문에 결과물이 망가집니다.
“솔직히 고백하자면, 저도 처음엔 이 부분을 놓쳤습니다. 웹페이지의 ‘화면용 스타일(Screen)’과 ‘인쇄용 스타일(Print)’이 다르다는 걸 몰랐거든요. 브라우저는 잉크를 아끼려고 배경색을 자동으로 제거해 버립니다.”
이 문제를 해결하는 열쇠는 바로 ‘설정 더보기’ 메뉴 안에 숨어 있습니다.
- ✅ 배경 그래픽(Background graphics) 체크: 이 옵션을 켜야 CSS로 입힌 배경색과 이미지, 박스 디자인이 PDF에 포함됩니다.
- ✅ 머리글 및 바닥글 해제: 브라우저가 자동으로 넣는 날짜와 URL 정보를 없애 깔끔한 문서를 만듭니다.
- ✅ 여백(Margins) 설정: ‘기본값’ 대신 ‘없음’을 선택하면, 여백 없이 꽉 찬 풀스크린 디자인을 저장할 수 있습니다.
2. 코딩 없이 활용 가능한 무료 온라인 변환 툴 2가지
브라우저 설정만으로 한계가 있는 복잡한 스크립트 기반의 페이지이거나, HTML 파일 여러 개를 한 번에 합쳐서 PDF로 만들어야 할 때는 전문 컨버터 툴이 훨씬 효율적입니다. 보안 걱정 없고 품질이 검증된 두 가지를 추천합니다.
첫째, iLovePDF (HTML to PDF)입니다. HTML 파일을 업로드하거나 웹페이지 URL만 입력하면 서버에서 렌더링을 거쳐 PDF로 구워냅니다. 광고가 좀 뜨지만, 뷰포트(Viewport) 사이즈를 모바일/태블릿/데스크탑 중 선택해서 변환할 수 있다는 게 강력한 장점입니다.
둘째, Sejda PDF입니다. 이 사이트는 단순 변환뿐만 아니라 변환 전 CSS 스타일이나 페이지 나누기(Page break) 지점을 미세하게 조정할 수 있는 기능을 제공합니다. 특히 한글 폰트가 깨지지 않고 잘 유지되는 편입니다.
💡 코드캠의 실전 TIP
많은 분들이 놓치는 디테일이 있습니다. 바로 반응형 웹페이지의 함정입니다. 변환 툴에 그냥 URL을 넣으면 모바일 화면으로 렌더링 되어 길게 늘어진 PDF가 나오기도 합니다. 반드시 툴 옵션에서 ‘화면 너비(Screen Width)’를 1920px 이상으로 설정해야 우리가 PC에서 보는 것과 동일한 비율의 PDF를 얻을 수 있습니다.
3. 개발자라면? wkhtmltopdf & Puppeteer 라이브러리
만약 단순히 한두 번 변환하는 게 아니라, 회원가입 시 약관이나 월간 리포트를 자동으로 PDF로 생성해야 하는 실무자라면 브라우저나 온라인 툴로는 한계가 있습니다. 이때는 자동화 라이브러리를 사용해야 합니다.
가장 전통적이고 가벼운 방식은 wkhtmltopdf라는 오픈소스 툴입니다. 커맨드라인에서 HTML 파일을 툭 던지면 PDF로 바꿔줍니다. 하지만 최신 CSS3나 자바스크립트 렌더링에는 약점이 있습니다.
그래서 최근엔 구글에서 만든 Puppeteer(퍼피티어)를 표준처럼 사용합니다. 크롬 브라우저를 백그라운드에서 띄워(Headless mode) HTML을 그대로 캡처하고 PDF로 찍어냅니다. 우리가 크롬에서 보는 것과 100% 동일한 결과물을 얻을 수 있는 끝판왕 방법입니다.
PDF 변환 전 반드시 체크해야 할 CSS 코드 (@media print)
지금까지 소개한 도구들을 써도 원하는 결과물이 안 나온다면, 그건 툴의 문제가 아니라 여러분의 HTML 코드 내부에 ‘인쇄용 스타일’이 정의되어 있지 않기 때문일 확률이 높습니다.
웹 페이지는 화면용이지만, PDF는 결국 ‘인쇄 매체’의 속성을 가집니다. 따라서 CSS 파일 하단에 @media print { ... } 코드를 넣고 불필요한 내비게이션 바, 팝업, 광고 영역에 display: none;을 걸어주세요. 그리고 페이지가 어정쩡하게 잘리는 것을 막기 위해 강제로 페이지를 넘길 부분(예: 각 챕터 제목 앞)에 break-before: page; 속성을 주면 됩니다.
오늘 제가 알려드린 크롬 설정법부터 CSS 최적화까지, 순서대로 하나씩 적용해 보세요. 분명 어제와는 다른 깔끔한 PDF를 얻으실 수 있을 겁니다.
혹시 적용하다가 폰트가 깨지거나 특정 레이아웃이 자꾸만 틀어지는 부분이 있으신가요? 댓글로 상황을 남겨주시면 제가 아는 선에서 최대한 도와드리겠습니다!
