스크린샷을 그대로 문서에 삽입하는 것 보다 위와 같이 조금더 깔끔한 형태로 만들어 넣는 것에는 많은 차이가 존재하는데요. 디자인 툴을 활용해 만든 목업에 비하면 상대적으로 퀄리티가 떨어질 수 밖에 없지만, 시간을 절약하면서도 성의 있는 모습을 보여주기 좋은 서비스라고 볼 수 있습니다. 오늘 소개드릴 서비스 역시 비슷한 맥락에서의 ‘장점’을 지니고 있는데요! 모바일앱, 모바일화면을 위한 목업을 쉽게 제작할 수 있는 서비스입니다.
‘Mobile Mockup(모바일 목업)’이라는 서비스명에서 알 수 있듯이, 이 서비스는 웹상에서 스크린샷을 업로드하여 모바일앱 또는 모바일 화면을 위한 목업 제작을 도와줍니다. 위의 화면은 서비스 랜딩페이지로 정말 간단하게(?) 구성되어 있습니다.
스크린샷 업로드와 별개로 우리가 선택할 수 있는 옵션은 크게 세 가지입니다.
1. 스크린샷 업로드 후, 이미지 옵션 선택이 가능합니다. 목업 사이즈에 맞춰 이미지를 크롭하거나, 딱 맞추거나, 늘리는 등 세 가지
2. 배경화면 색을 선택할 수 있습니다. 기본적으로 제공되는 색은 클릭으로, 추가로 원하는 컬러는 값을 직접 입력해서!
3. 디바이스 색을 변경할 수 있습니다 검정색, 흰색, 금색을 기본 선택 가능하며, 추가로 컬러값을 입력해 변경하는 것도 가능!
이미 눈치채셨겠지만! 첫 번째, 두 번째 그리고 위의 이미지 배경색을 보면 모두 다른값이 적용됐다는 것을 알 수 있는데요! 이와 같이 목업을 돋보이게 해줄 배경색을 직접 설정할 수 있습니다. 디바이스의 색도 처음 검정색에서 흰색으로 바뀐 모습이네요.
원하는 컬러로의 설정이 완료되었다면! 이제 ‘스크린샷’을 업로드 해봐야겠죠? ‘지금 써보러 갑니다‘를 모바일 사이즈로 캡쳐 해 등록한 모습입니다. 사이즈를 딱 맞춰 업로드 할 수 없기에(그 정도의 시간적 여유가 있다면 굳이 이 서비스를 사용할 이유도 없을 것 같습니다) 대략적인 사이즈로 저장한 후, 이미지 옵션을 ‘fit’로 설정했습니다. 얼추 맞게 들어간 모습이네요.
모든 설정이 완료 되었다면, 이제 다운로드를 받아 문서 등 목적에 따라 사용할 차례입니다. 위의 이미지는 실제로 다운로드 받은 ‘목업’으로, 투자한 시간 대비 상당히 깔끔하게 결과물이 제공되고 있습니다.
![](https://openads-real.s3.amazonaws.com/openadsAdmin/new/preConts/2018-07-10_09-32-31_382.png)
![](https://openads-real.s3.amazonaws.com/openadsAdmin/new/preConts/2018-07-10_09-32-35_972.png)
배경컬러와 디바이스 컬러에 따라 엇박자가 나는 부분도 있었지만, 앞서 여러번 말씀드렸던 것처럼 투자한 시간 대비 만족스러운 결과물이라는 것을 다시 한 번 확인할 수 있었습니다. 개인적으로는 제안서 및 기획안을 작성할 때 상당히 유용하게 쓰이지 않을까 라는 생각을 하게 되었는데요! 저와 같은 상황 또는 급하게 모바일 화면이 포함된 목업을 제작해야 한다면 한 번쯤 도움을 받을 수 있는 서비스가 아닐까 싶습니다. 더 자세한 내용은 이 곳을 통해 확인해주세요!