이메일 마케팅

이메일 본문 전체를 깔끔하게 캡처하는 방법

스크롤이 있는 이메일을 캡처하는 건 꽤 귀찮고 까다로운 일입니다.

Feb 28, 2017 • 4 min read

업의 특성상 이메일을 캡처할 일이 매우 많습니다. 스크롤이 있는 이메일을 캡처하는 건 꽤 귀찮고 까다로운 일입니다.

일반적인 웹페이지는 스크롤이 있는 경우에도 페이지 전체를 한 번에 캡처할 수 있는 도구들이 많습니다. 저는 Nimbus Screenshot이라는 크롬 플러그인을 사용합니다.

하지만 이런 도구들은 이메일을 캡처할 때는 별다른 도움이 되지 않습니다. 웹메일에서는 대부분 이메일이 특정 프레임 안에 표시되기 때문입니다. 예를 들어 Gmail 웹에서 이메일 전체를 Nimbus Screenshot으로 캡처하면 이렇게 됩니다.

스크롤이 되면서 중간에 잘리는 부분이 생깁니다. 이걸 뭔가 편집해서 사용해보려고 한다면 프레임 바깥에 있는 요소들을 삭제해야됩니다.

Litmus Scope을 사용하면 Gmail 웹에서 이메일 본문에 해당하는 코드만 추출할 수 있습니다. 저는 이렇게 추출한 코드를 웹페이지로 저장한 뒤 캡처하고 있습니다.

코드 추출 → 웹페이지 저장 → 캡처라는 복잡한 단계를 거치긴 하지만, 본문 전체를 오롯이 캡처하는 가장 손이 덜 가는 방법입니다.

1

Litmus Scope 웹사이트에서 북마클릿을 추가합니다. “Get the Bookmarklet”이라는 버튼을 브라우저의 북마크바로 드래그앤드롭하면 됩니다. (“javascript:…”로 시작하는 버튼의 링크 주소를 북마크에 직접 추가해도 됩니다.)

Gmail 웹에서 이메일이 표시된 상태에서, 1에서 추가한 북마클릿을 실행합니다.

Litmus Scope이 실행되고 이메일 본문만 추출됩니다. “code/design” 토글을 “code”로 변경하면 코드가 표시됩니다.

이 코드 전체를 복사한 뒤, 임의의 HTML 파일을 생성하여 붙여넣고 저장합니다. 저는 Sublime Text를 사용했고, email.html로 저장했습니다.

저장한 HTML 파일을 브라우저에서 연 뒤, 스크롤이 있는 웹페이지를 캡처하는 것과 동일한 방법으로 캡처합니다.

저는 다시 Nimbus Screenshot를 사용했습니다. 이 때 Window Resizer 등의 크롬 플러그인으로 브라우저 창을 이메일 본문이 표시되기에 적절한 크기(보통 가로 700–800px)로 고정시킵니다.

모바일 버전이 필요할 때는 Windows Resizer로 브라우저 창을 모바일 화면 크기로 변경합니다.

지금까지 설명한 방법으로 캡처한 이메일 본문입니다.

필요한 도구를 순서대로 다시 정리하면,