목업에 영상 넣기 - mog-eob-e yeongsang neohgi

포토샵 실전 열다섯번 강좌입니다. 포토샵으로 애니메이션 목업을 직접 만드는 방법을 알려드릴게요. 이번 강좌의 준비물은 딱 두가지입니다. 목업 이미지로 사용될 무료 이미지 찾는것과 영상으로 사용될 ui 프로토타이핑 영상(mp4) 파일입니다.
여기서 중요한 것은 작업한 ui 프로토타이핑 영상 사이즈와 목업에 사용될 이미지 속 스마트폰 종류와 같은 걸로 제작하는게 좋습니다.
아이폰 사이즈로 제작된 ui 프로토타이핑을 갤럭시에 맞추려면 이상하게 보이겠죠?!

무료 이미지 사이트 : //unsplash.com/
예제에 사용된 원본 소스와 완성된 psd는 멤버십 회원 분들을 대상으로 커뮤니티에 다운받을 수 있는 링크를 제공합니다.

*디자인 베이스 강좌는 Mac OS를 기준으로 해서 윈도우 사용자와 일부 차이가 있을 수 있습니다. 윈도우 사용자분들은 영상에서 커맨드(Cmd)라는 단축키 대신 컨트롤(Ctrl)을, 옵션(Option) 대신 알트(Alt)를 눌러주세요.

핵심 요약

움직이는 목업을 만들기 위해서는 준비물이 필요해요. 합성을 하고 싶은 목업 이미지 그리고, 여러분이 제작한 움직이는 ui 영상파일입니다.
그리고 여기서 주의해야 할 점은 목업 이미지에 활용할 디바이스 해상도와 본인이 만든 ui 영상파일과 같아야겠죠. 저는 아이폰 11pro 기준으로 375*812로 제작을 했기 때문에 아이폰 X가 나온 이미지를 사용했습니다.

01. 합성하기
해상도를 만든 후 스마트 오브젝트로 변동 후 해당 레이어를 사진 속 디바이스에 맞게 수정해 줍니다.
그리고 디바이스 프레임 혹은 손가락 같은 부분을 마스크로 합성해 줍니다.

02. 스마트 오브젝트 레이어 안에 영상 불러오기
Layer > Video Layers > New Video Layer from File

03. 영상 저장하기
file > export > render video

84

요즘만큼 스토어 등록 정보에 많은 준비를 하는 적도 없는 것 같습니다. 그동안 여러 스타트업에서 기획자로 일을 해왔지만, 지금 당담하고 있는 프로덕트만큼 다양한 국가, 언어로 제공된 적이 없기에 더더욱! 앱스토어와 구글 플레이 스토어에서의 전환율 높이기, ‘스크린샷’의 역할! 과 같은 글을 별도로 발행, 공부하고 있는 이유도 국가에 따라 스토어 등록 정보를 받아들이는데 있어 많은 차이가 존재하기 때문입니다.

작년 하반기 구글 콘솔에서는 많은 변화가 있었는데요. 그 중 가장 큰 변화는 사용자들이 어떤 ‘검색어’를 입력해 우리 서비스를 찾아 들어오는지에 대한 데이터를 제공해준다는 점이었습니다. 이를 통해 ASO 작업에는 물론 스토어 등록 정보를 구성하는 스크린샷, 타이틀, 서브타이틀, 설명, 아이콘 등을 더 정교하게 작업하고 실험을 진행할 수 있는 환경이 갖춰지게 되었습니다. 이를 통해 한국과 일본이란 국가를 대상으로 특정 검색어로 스토어 등록 정보 도달 시 다운로드 전환율을 높이기 위한 1차 실험을 진행하였는데요. 각 국가별 특성은 물론 콘솔을 통한 데이터를 직접 비교해볼 수 있어 많은 도움을 받았고, 실제 좋은 성과를 낼 수 있었죠. 지금은 해당 내용을 바탕으로 타 국가로 확대 하기 위한 실험을 진행하고 있는 상황입니다.

국가별 인기 앱들의 스토어 등록 정보를 살펴보는 것은 물론, 특징을 파악하기 위해 여러 곳을 뒤지던 중 ‘스토어 등록 정보’ 내 ‘영상’ 콘텐츠의 중요성 또한 다시 한 번 알게 되었습니다. 물론 현재도 앱스토어와 플레이 스토어 내 영상을 활용하고 있긴 하지만 새로운 기능이 업데이트 되었을 때 해당 기능을 어떻게 활용하는지 정도로만 활용하고 있죠. 그래서 이 영상을 어떻게 하면 더 효율적으로 활용할 수 있을까 생각하다가, 이미지를 활용한 목업과 같이 영상으로도 쉽게 같은 맥락의 콘텐츠로 제작할 수 없을까 라는 생각이 들었습니다. 혹시나 하는 마음에 열심히 구글링을 해봤는데 영상 파일만 있으면 2-3개 화면에 해당하는 목업을 쉽게 만들어주는 서비스를 알게 되어 오늘 간단하게 소개하고자 합니다!

영상으로 목업을 제작할 수 있는 ‘Live Mockups’

‘Live Mockups’는 이미지가 아닌 ‘영상’을 통해 목업을 제작할 수 있는 웹 서비스입니다. 다만 구성 자체는 우리가 기존에 자주 활용하던 목업 서비스(지금 써보러 갑니다에서 소개한 목업 서비스 모아보기) 와 크게 다르지 않습니다. 그래서 더 쉽게 활용할 수 있죠.

스마트폰, 스마트폰과 웹, 태블릿과 스마트폰 등 다양한 조합을 선택 가능

특정 디바이스 단독으로 영상 목업을 제작하는 것도 가능

아이폰 X 해상도의 목업도 이렇게 많지요!

서비스 내 적용되어 있는 목업들이 생각보다 많았는데요! 스마트폰 뿐만아니라 웹, 태플릿PC 등 다양한 디바이스에 해당하는 목업을 영상으로 제작할 수 있습니다.

제작 과정도 간단해요!

검색 또는 리스트 내 원하는 목업이 있다면 선택해주세요. 그럼 위와 같이 영상 업로드 화면을 만나볼 수 있습니다. 만약 2개의 화면이 들어가는 목업이라면 왼쪽, 오른쪽에 해당하는 영상을 각각 업로드 하고 (물론 이미지 등록도 가능합니다!) 아웃풋을 어떤 포맷으로 할 것인지(영상 또는 GIF), 배경을 어떻게 할 것인지(컬러 또는 이미지), 영상 속도는 어떻게 할 것인지 등을 선택한 후 목업 생성 버튼을 클릭하면 됩니다.

완성된 목업들은 대시보드에서 모아보기 가능!

완성된 목업은 나의 목업 메뉴에서 언제든 확인이 가능합니다. 다만 무료 버전의 경우에는 일주일 동안만 보관이 된다는 점은 꼭 기억을! 목업의 경우 다운로드가 바로 가능하기에 완성된 후 미리 다운로드 받아두면 저장 기간은 크게 문제가 되지 않을 것 같네요.

업그레이드 비용은 월 5달러

‘Live Mockups’를 ‘영상’에 초점을 맞춰 설명했지만, 이미지로도 동일한 목업을 제작할 수 있습니다. 그 관점에서 봤을 땐 일단 목업을 만들 수 있는 ‘레이아웃 – 구성’ 자체가 다양하게 준비되어 있다는 점이 이 곳의 매력이라고 할 수 있고요. 영상, 이미지 등을 활용한 목업을 자주 제작하신다면 유료 계정으로의 업그레이드도 고려해볼만 합니다. 월 5달러의 가격에 무제한 목업 제작이 가능하며, 1GB까지의 영상 업로드가 가능하고, 60일 동안 제작한 목업을 저장햊둘 수 있기 때문이죠. 게다가 상업적 목적으로 목업을 활용하는 것도 가능합니다. (링크 입력 필수)

이미지 뿐만아니라 영상을 활용한 목업 제작이 필요하다면, 그리고 별도의 설치 없이 웹상에서 가능한 서비스가 필요하시다면! ‘Live Mockups’를 활용해보시는 것도 방법일 것 같네요. 아래의 영상은 제가 기존에 갖고 있던 샘플 영상으로 1분 만에 제작한 목업 샘플입니다 🙂

두 개의 영상으로 제작한 목업 샘플 모습

영상, 이미지를 활용한 목업 제작하러 가기!

목업 관련 서비스 더보기

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

이미지 2장을 업로드, 손쉽게 디바이스에 따른 목업을 제작할 수 있는 ‘CLEANMOCK’

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

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

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

Toplist

최신 우편물

태그