캡춰한 아이폰 화면을 실제 폰 사진의 화면 영역과 합성하는 방법

By | 2013-08-21

업무상 모바일 앱이나 모바일 웹 화면을 캡춰할 때가 종종 있습니다. 대개는 캡춰한 화면을 그대로 사용하게 되는데 그렇게 하는 편이 편하기도 하고 또 기획서 등에 사용할 때 공간도 절약되고 문서도 깔끔하지요.
다만 가끔 폰을 실제로 보듯 단말기의 껍데기를 씌우고 그 안에 캡춰한 화면을 넣어야 할 때가 있는데요. 고객이 볼 매뉴얼이나 튜토리얼 등에 사용한다거나 내부적으로도 앱이 실제로 어떤 느낌일지를 조금 더 실제와 비슷하게 화면상으로 보고 싶을 때가 그렇습니다. 아무래도 다양한 단말기와 화면 해상도가 있다보니 네모난 화면만 있을 때보다 단말기의 모양이 그려져 있으면 더 현실감 있게 실제 모양을 이해하는데 도움이 됩니다.
손재주좋고 포토샵을 사용할 수 있는 환경이라면 여기저기에서 단말기 프레임 이미지를 가져다가 합성하면 되겠습니다만 그렇지 못한 경우에도 충분히 단말기과 앱의 화면을 한번에 만들 수 있습니다.
제가 찾아본 몇가지 방법과 바로 아래 직접 그 방법으로 만든 이미지를 첨부했습니다.
웹페이지에서 만들기
http://placeit.breezi.com/productshots/
위쪽 샘플 이미지 목록에서 사용할 화면을 선택하고 아래쪽 영역에 캡춰 이미지를 드래그 앤 드랍으로 던져 넣으면 합성해줍니다. 보시면 아시겠지만 자연스러운 스냅 사진처럼 만들어주는 것이 특징입니다.
screenshot_with_frame_breezi

http://www.appdemostore.com/frameapp
사용할 단말기 선택하고 화면으로 뿌려줄 스크린샷 선택하면 바로 나타납니다. 단순하고 빠르군요.
screenshot_with_frame_appdemo
아이폰용 앱
아이폰용 앱으로 Screenshot – Frame Maker – Neoos가 있습니다. 단말에서 캡춰한 것에 바로 프레임을 씌울 수 있는데 아이폰용 앱이다보니 아이폰용 테두리만 지원하고 있습니다. 위 웹 인터페이스로 만든 것보다 깔끔한 테두리와 모서리쪽의 반사효과가 장점이랄 수 있겠습니다. 앱스토어에서 무료로 받을 수 있으며 다섯번까지 저장할 수 있습니다. 무제한 저장 기능을 0.99$ 앱 내 구매(In App Purchase)하면 저장 횟수 제한이 풀립니다.
screenshot_with_frame_screenshot
맥용 앱
맥용으로 Screentaker – Fabian Kreiser가 있습니다. 가격이 $4.99 로 선뜻 구매하기는 망설여지는 앱입니다. 기본 기능은 단순한데 플러그인으로 몇가지 효과를 더 추가할 수 있는 점이 장점이랄 수 있겠습니다.
screenshot_with_frame_screentaker
이메일로 만들기
스크린 샷 잡은 화면을 이메일로 발송하면 잠시 후 해당 폰의 프레임을 씌운 사진을 회신보내줍니다. 이거 자동이겠지요? 설마 수동이라면.. ㄷㄷㄷ… 전 아이폰4로 보냈는데 받은건 아이폰5 프레임으로 만들어 보내왔더군요. 화면이 세로로 좀 늘어나서 합성되어서 왔지요. 캡춰한 이미지를 smartphones@mailchimp.com 으로 첨부해서 보내면 됩니다. 몇번 테스트 해보았는데 회신받는 시간이 1분에서 10분까지 편차가 있었습니다. 저처럼 폰 기종과 이미지 해상도를 못맞춰서 찌그러져 합성된 경우에는 강제로 단말 기종을 지정할 수 있습니다. 제목에 아이폰4인 경우는 iphone4 라고 쓰면 됩니다. 더 많은 지원 기종은 제목에 /help 라고 써서 보내면 아실 수 있습니다. 강제로 iphone4 로 지정해서 다시 받은 파일인데 보시다시피 화면과 프레임 사이에 미세하게 틈이 보입니다. 다른 기종일때는 어떨지 모르겠습니다.
screenshot_with_frame_mailchimp
전 이거저거 테스트해보다가 결국 아이폰용 Screenshot을 앱내구매하고 마음의 평안을 얻었습니다.;;