Capturing web page by command-line tools.

온라인상에서 어떤 특정 웹사이트의 화면을 이미지나 PDF 등으로 만들려면 어떻게 해야 할까요? ColdFusion에서는 <cfhttp>태그로 해당 웹페이지의 filecontent를 가져와 html문서로 만들고 그것을 pdf나 flashpaper로 <cfdocument>태그를 이용해서 간단하게 만들 수 있지만 HTML의 문서규격이나 CSS, Javascript 그리고 Flash나 Silverlight와 같이 플러그인이 남발된 웹사이트는 정확하게 캡쳐할 수 없습니다.(이는 ColdFusion의 문제라기 보다 내장 iText의 문제입니다.)

Adobe ColdFusion에서 생성한 PDF(naver.com 메인화면 캡쳐) 미리보기

그래서 몇가지 ColdFusion 뿐만 아니라 PHP등에서도 활용할 수 있도록 Linux기반의 Command-line 웹사이트 캡쳐 툴들을 찾아봤는데요.. 우선 ColdFusion이 Java기반이다보니 이왕이면 Java로 만들어진 라이브러리를 찾았습니다.

java-html2image라는 것이 있는데 품질은 그야말로 조잡했습니다. OpenBD에서 테스트했지만 OpenBD의 lib 디렉토리에 java-html2image의 jar파일을 넣고ColdFusion에서 쉽게 createObject로 불러와 웹사이트를 렌더링 해봤는데 이건 정말 Adobe ColdFusion의 <cfhttp>-<cfdocument> 조합보다 더 열악했습니다.

테스트 대상이 네이버의 메인페이지를 가장 근접하게 렌더링하는 것이 목표였습니다. 대부분의 Command-line 웹사이트 캡쳐 툴들이 webkit에 기반하고 있고 작성된 언어만 다를 뿐이라서 IE에 최적화된 웹사이트는 일단 제외합니다. ( IE에 최적화된 웹사이트는 쓰레기라고 말할 수 있습니다. IE 자체가 쓰레기이니까..IE끼리의 버전호환된 안되는 그야말로 이건 뭐 MS의 최악의 역작이지 않나 싶습니다. 그 쓰레기를 한국인들이 참 좋아하지요. 왜 쓰레기인지 따지지 마시고 공부를 좀 하시면 압니다.)

문제는 Command-line 웹사이트 캡쳐 툴들이 뭐가 있냐 이건데요. 찾아본건 Take-webpage-screenshot-from-command-line-in-ubuntu-linux 에서 소개하고 있는 툴들을 모두 테스트 해 봤습니다. 테스트 환경은 Ubuntu Server 10.04 LTS 64bit입니다. 

wkhtmltopdf는 html을 pdf로 만들어주기 때문에 이후에 ColdFusion에서 pdf를 image로 변환하거나(역시 약간 느리고 메모리도 많이 소모됨) Imagemagick과 같은 또다른 command-line 툴을 써서 이미지로 만들어줘야 함(속도면이나 성능면에서 제일 좋음)

wkhtmltoimage는 결론적으로 오늘의 주인공. 나머지 파이썬으로 작성된 Mac용 webkit2png를 리눅스용으로 포팅한 python-webkit2pngPyWebShot 그리고 KDE환경에서 사용하는 khtml2png, QT를 사용하는 cutycapt 등등 나름대로의 장단점이 있었습니만 Javascript나 Flash, 또는 jQuery, CSS 등의 최신 웹기법을 적용한 동적인 움직임이 많은 웹사이트의 경우 렌더링이 제대로 안되거나 일부 화면이 나오지 않는 단점이 있었습니다.


<wkhtmltoimage로 렌더링한 네이버의 메인화면 이미지-클릭하면 생성된 원본을 보실 수 있습니다>

특히, 한국어 웹사이트의 경우 서체처리, 한자 등의 문제가 아주 많았죠. Adobe의 Browser Lab처럼 다양한 브라우저를 이용해서 직접 화면을 렌더링해서 이미지로 변환할 수 도 있겠지만 실제 Linux에서는 IE 등은 설치가 불가능한데다 브라우저를 직접 command shell로 실행하고 parameter로 url 등을 전송해서 화면을 캡쳐(firefox의 addon을 이용하는 방법)할 수 있겠지만 브라우저 프로세스를 띄운다는게 메모리 관리 등 여러 사용자의 요청을 효과적으로 처리하기에는 현명한 방법은 아니기에 이 방법은 제외했습니다.

Ubuntu에서는 wkhtmltopdf를 apt관리자로 쉽게 설치하고 이용할 수 있습니다. 하지만 아까도 말씀드렸듯이 wkhtmltopdf는 결과물이 pdf라는 점. 그리고 pdf이기때문에 html렌더링이 약간 정확하지 않는 점. 그리고 한글서체의 고질적 문제, 별도의 이미지변환 등등 100%의 대안은 아닙니다. 하지만 결과물을 쉽게 만들어 낸다는 점이 장점입니다. 

다만, wkhtmltopdf를 사용하려면 Ubuntu Server와 같이 xorg(X-Window)가 설치되지 않은 환경이나 설치해서는 아니되는 환경에서는 바로 사용할 수 없어서 xvfb라는 가상 X-Window를 설치해서 사용해야 합니다. 두 패키지의 설치는 다음과 같이 쉽게.

sudo apt-get install wkhtmltopdf
sudo apt-get install xvfb

간단하게 네이버의 메인화면을 위 두 패키지를 위와 같이 설치한 후 만들어 보면 다음과 같이 할 수 있습니다. 

xvfb-run --server-args="-screen 0, 1024x768x24" wkhtmltopdf --dpi 300 --page-size A4 http://www.naver.com naver.pdf

xvfb를 이용해 가상의 X윈도우를 만들고 해상도를 1024로 색상수를 24bit로 만든 다음 300dpi의 해상도와 A4문서규격으로 네이버의 메인화면을 pdf로 만드는 명령줄입니다. 생성된 pdf의 샘플을 맨위에서 설명드린 Adobe ColdFusion(iText)에서 생성한 것과 비교해서 보시길 바랍니다.

wkhtmltopdf에서 생성한 PDF (naver.com 메인화면 캡쳐) 미리보기

위에서 만든 Adobe ColdFusion(iText)의 것보다 정확하고 비교적 화면이 올바르게 pdf로 변환된 것을 확인할 수 있습니다. 이제 imagemagick과 같은 command-line 이미비변환 툴로 png 등으로 pdf를 변환하면 됩니다. 

그러나 wkhtmltoimage를 사용하면 바로 이미지로 웹사이트를 렌더링할 수 있습니다. 그런데 문제는 wkhtmltoimage가 아직 RC버전이어서 Ubuntu의 패키지 저장소에 등록이 안되어 있어서 APT관리자로 설치 할 수 없습니다. 그래서 소스를 받아서 직접 컴파일하거나 바이너리 파일을 받아 실행해야 합니다.

wkhtmltopdf의 웹사이트에서 같이 배포하므로 해당 wkhtmltoimage를 다운로드 받아 압축을 푼 후 /usr/bin 아래로 이동시킨 후 chmod로 실행권한을 주고 실행파일인 wkhtmltoimage-amd64를 다음과 같이 실행하면 되겠죠.

xvfb-run --server-args="-screen 0, 1024x768x24" wkhtmltoimage-amd64 --width 1024 http://www.naver.com naver.jpg

wkhtmltoimage은 결과물을 png, jpg 등의 이미지 파일로 출력할 수 있는데 png는 비압축으로 저장되어 용량이 평균 8~9mb에 이러더군요. 그래서 jpg로 지정했습니다. 자, 결과물인 jpg 파일을 한번 보도록 하죠. 

wkhtmltoimage에서 생성한 JPG (naver.com 메인화면 캡쳐) 미리보기

샘플로 다음과 네이트에 대한 화면도 비교적 정확하게 나오는 것 같습니다. 무엇보다 Ubuntu에 msttcorefont(우분투용 MS기본서체 패키지 )가 설치되어 있다면 한글도 정확하게 나오는 군요. 다만 인터파크, 11번가 등 쇼핑몰은 일부 정확하게 렌더링 되는 것도 있고 세그먼트오류를 내어 안되는 것도 있습니다. 특히 아직 버그가 있어서 그런지 소스컴파일을 직접하지 않은 바이너리 wkhtmltoimage-amd64는 QPixmap: Cannot create a QPixmap when no GUI is being used 라는 경고메시지를 계속 나타내더군요. 하지만 결과물에는 이상이 없으니 곧 개선되리라 봅니다. 

실제로 본격적인 웹어플리케이션에서 웹사이트 렌더링용으로 사용하기에는 아직 대부분의 툴들이 성능이 부족합니다. 왜냐하면 실제 웹페이지는 브라우저에서 해석되어야 정확하게 렌더링되는 것이기 때문입니다. 다만 브라우저를 직접 띄워 렌더링하기엔 서버의 부담이 많이 가고 악성코드등을 배포하는 웹사이트를 렌더링하다가 서버가 감염될 ㅅ수 있는 취약점도 분명 존재하기 때문에 내부 인트라나 저처럼 가벼히 테스트 목적으로 봐주시길 바랍니다.

<다음(daum.net)과 네이트(nate.com)의 렌더링 예 - 이미지를 클릭하면 원본을 보실 수 있습니다>

4 responses so far

장창학

장창학 - 3월 9, 2012 at 오후 5:07

Windows용 IE엔진 기반의 웹사이트캡쳐 툴은 IECapt(http://iecapt.sourceforge.net)을 참고하시길 바랍니다. 확실히 Windows/IE라 그런지 한국 웹사이트를 잘 렌더링 하네요.

한나

한나 - 12월 10, 2015 at 오전 1:13

한글이 나오지 않는 문제는 어떻게 해결해야 하는지요? 폰트를 따로 설치해야 하는지? 참고로 저는 ubuntu를 사용하고 있습니다.

장창학

장창학 - 12월 11, 2015 at 오전 10:03

한글이 나오지 않는 문제는 우분투 시스템에 한글폰트들이 (MS의 폰트들 가령 돋움이나, 굴림과 같은 서체) 없기 때문일 겁니다. 굴림, 돋움, 궁서, 바탕 등의 서체는 ttc폰트라 바로 설치하기 힘들고 ttc를 ttf로 변환하여 /usr/share/fonts/truetype/ 경로에 적절한 디렉토리를 생성 후 ttf 형식의 한글서체파일들을 올려주세요. 그런다음 sudo fc-cache -f -v 와 같이 서체캐시를 갱신하시면 됩니다.

장창학

장창학 - 12월 11, 2015 at 오전 10:05

참고로 이 포스트후에 추가로 작성한 포스트(http://blog.nooree.com/post.cfm/capturing-web-page-by-command-line-tools-2)를 보시면 서체관련된 내용도 있으니 참조하시길 바랍니다.

Leave a Comment

Leave this field empty:




Powered by

© 2010-2018 NOOREE.COM