Home 디자인 UX/UI 이렇게 다양한 목업을, 스케치와 포토샵 그리고 XD 버전으로 사용할 수 있다면?

이렇게 다양한 목업을, 스케치와 포토샵 그리고 XD 버전으로 사용할 수 있다면?

5589

앱스토어와 구글 플레이 스토어에서의 전환율 높이기, ‘스크린샷’의 역할!을 정리하며, 담당하고 있는 프로덕트의 국가별 ‘스토어 등록 정보’ 최적화 작업을 1차로 진행했는데요! 로컬 서비스가 아니라, 다양한 국가에서 사용자를 확보하고 있기에 주요 업데이트에 따라 스크린샷, 디스크립션, 간단 설명 등을 최적화 해야하기 때문입니다. 잘 준비했다고 생각했는데, 결과는 그리 좋지 않았습니다. 어제 오후에 기획, 디자인, 운영 담당 인원들이 모여 왜 실패했을까, 라는 이야기를 한참 했네요 🙂 

핀터레스트(iOS 기준) 스크린샷 1,2번

인스타사이즈(iOS 기준) 스크린샷 1,2번

예전에는 단순히 기능을 나열하는 정도로 스크린샷을 활용했는데, 앱스토어는 물론 플레이 스토어의 구조가 바뀌면서 리스트에서도 스크린샷이 눈에 띄어야 하는 등 고려해야할 점들이 많아지고, 경쟁 서비스들이 늘어나면서 매우 중요한 역할을 하고 있습니다. 뜬금없이 다시 ‘스크린샷’ 이야기를 하는 이유는 ‘목업’ 그러니까 스크린샷을 구성하는 ‘레이아웃’도 실패 이유에 포함될 수 있겠다는 생각을 했기 때문입니다. 미팅을 하며 우리에게도 잘 알려진 글로벌 서비스들을 보니 그 생각이 더 강해졌죠. 그럼 이런 스크린샷의 ‘구조’에 대한 힌트는 어떻게 얻을 수 있을까. 위의 인스타사이즈와 핀터레스트의 사례를 직접 찾아보는게 가장 좋지만, 목업에 따른 레이아웃을 참고하는 것도 많은 도움이 됩니다. 

Vector Mockups Library 에서 제공하는 목업 중 일부

그 동안 ‘지금 써보러 갑니다‘를 통해 ‘목업 제작’ 관련 서비스들도 여럿 소개드린 바 있는데요! 가장 최근에는 ‘이미지 2장을 업로드, 손쉽게 디바이스에 따른 목업을 제작할 수 있는 ‘CLEANMOCK’에 대한 내용을 정리했습니다. 쉽게 목업을 제작할 수 있다는 장점이 첫 번째지만, 앞서 말씀드렸던 것처럼 우리는 ‘목업 제작 서비스’를 통해 스크린샷을 포함, 서비스를 소개하는 이미지를 제작하는데 많은 도움을 받을 수 있죠. 그 중에서도 오늘 소개드릴 ‘Vector Mockups Library’는 정말 다채로운 목업 레이아웃을 제공합니다.

아 이런 서비스를 무료로 제공해주다니 ㅠㅠ

Vector Mockups Library’는 ‘무료’입니다.(와우!) 아주 중요한 포인트 중 하나죠. 그런데 서비스를 자세히 살펴보면, 구성이 정말 탄탄합니다. 다양한 디바이스와 구성에 따라 스케치, 피그마, 포토샵, XD에서 해상도에 맞는 이미지만 삽입해 손쉽게 목업을 만들 수 있죠. 

강조하고 싶은 화면 중 일부만 사용하거나, 동일한 컨셉 내 다양한 화면을 활용하거나, 같은 수의 화면을 활용하지만 대칭을 달리하는 등 다채로운 레이아웃이 포함되어 있습니다.

아이패드는 물론 아이폰, 맥, 애플워치 시리즈, 안드로이드, 브라우저 등 여러 상황이나 디바이스에 따라 레이아웃을 확인하고 제작할 수 있다는 점도 매력적! 같은 구조라 하더라도 배경 컬러를 달리하거나 대칭을 달리하면 그 자체로도 다른 느낌과 영감을 얻을 수 있기에 더더욱 매력적으로 다가오네요.

해상도에 맞는 이미지만 끌어다 넣어주세요!

(아 빨리 테마를 바꿔야 하는데) 이 허접한 ‘지금 써보러 갑니다’도 ‘있어 보이는’ 목업으로 만들어주기에 – (저는 XD에서 제작) 제게는 더 소중하게 다가온 서비스!

갤럭시 시리즈도 최신 버전인 ‘9’까지 지원하고 있네요. 픽셀도 포함되어 있고요. 목업 제작도 제작이지만 저는 스크린샷과 연관지어 많은 힌트를 얻을 수 있어 더 좋았습니다. 목업 제작은 물론 레이아웃, 구성에 대한 힌트가 필요하다면 지금 바로 확인해보시길!

함께 보면 분명 도움이 될거에요!

다양한 디바이스, 화면, 조건에 따른 목업 제작이 필요하다면? ‘SHOTSNAPP’

5초만에 ‘모바일 앱 목업, 모바일 목업’ 제작이 가능한 서비스

고퀄리티의 디자인 목업을 무료로 다운 받을 수 있는 ‘DESIGN MOCKUP CLUB’

URL만 입력하면 스크린샷을 페이지 또는 영상으로 만들어주는 서비스 2

글에 대한 피드백 또는 기타 문의 등은 zagmaster@13.125.82.244로 보내주세요!