HTML을 DOCX로 변환

고정된 페이지가 흐르는 문서가 되기까지

HTML은 요소를 배치하고, Word 문서는 요소를 흘려보냅니다. 이것이 핵심적인 차이이며, 여기서 생기는 모든 의외의 결과의 원인입니다. 웹 페이지는 왼쪽에 사이드바를, 오른쪽에 패널을 고정해 길이와 상관없이 그 자리에 둘 수 있지만, .docx는 서로를 페이지 아래로 밀어내는 문단의 흐름입니다. 그래서 CSS 위치 지정, flexbox 열, 그리드로 만든 레이아웃은 읽는 순서대로 하나로 흐르는 단일 열로 기록됩니다. 레이아웃을 측정할 수 없어서가 아니라, Word 문서에 상자를 고정하면 아무도 편집할 수 없는 결과물이 되어 변환하는 의미 자체가 사라지기 때문입니다.

깔끔하게 옮겨지는 것은 원래 문서 형태였던 모든 것입니다. 제목은 Word 제목 스타일이 되어 탐색 창이 작동하고 목차를 만들 수 있으며, 문단, 굵게와 기울임꼴, 목록, 인용 블록, 테두리가 있는 표, 하이퍼링크는 모두 그대로 대응되는 것이 있습니다. 이미지는 문서에 포함되어 파일 하나로 완결됩니다. 블로그 글, 기사, 보고서는 거의 완벽하게 변환되지만, 랜딩 페이지는 그렇지 않습니다.

이미지는 변환 시점에 접근할 수 있어야 합니다. 내 컴퓨터를 가리키는 경로는 읽을 수 없고(브라우저 속 페이지는 파일 시스템에 접근할 수 없습니다), 웹 주소는 그 서버가 다른 사이트의 파일 가져오기를 허용해야만 작동하는데, 많은 서버가 일부러 허용하지 않습니다. 해결책은 그림을 data URI로 포함하거나, 공개적으로 가져올 수 있다고 확실한 주소를 쓰는 것입니다. 포함하지 못한 이미지는 조용히 빠지지 않고 알려 드립니다.

예상해 둘 만한 작은 누락이 두 가지 더 있습니다. 웹 글꼴은 포함되지 않으므로 텍스트는 Word에 있는 글꼴로 조판되고 느낌이 달라집니다. CSS 배경 이미지도 옮겨지지 않습니다. Word에는 문단 배경 그림에 해당하는 개념이 없기 때문입니다. 스크립트는 절대 실행되지 않으므로, JavaScript로 스스로를 구성하는 페이지는 실행 전 마크업 그대로 변환됩니다.

다른 작업이 필요할 때

Pandoc은 렌더링된 마크업으로 작업하는 어떤 변환기보다 이 일을 잘합니다. pandoc page.html -o page.docx --extract-media=.는 HTML 구조를 Word 스타일에 제대로 대응시키고, 이미지를 추출하며, 참조 문서를 받아 출력물을 내 템플릿에 맞춥니다. 제목, 글꼴, 간격이 모두 Word 기본값이 아닌 회사 스타일로 나옵니다. 설치할 가치가 있는 이유가 바로 이 마지막 부분입니다.

파일이 아니라 라이브 웹 페이지라면 먼저 저장하거나(“다른 이름으로 페이지 저장 → 웹 페이지, 전체”) curl로 가져온 뒤 변환하세요. 여기서는 네트워크로 나가서 가져오지 않기 때문입니다. 그리고 편집 가능한 문서가 아니라 페이지가 보이는 모습을 충실히 복사하고 싶다면 HTML PDF 변환이 맞는 도구입니다. PDF는 Word 문서와 달리 상자를 제자리에 고정할 수 있기 때문입니다.