애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

프로덕트를 준비할 때 목업 활용도는 범위가 정말 넓습니다. 서비스를 기준으로 하면, 주요 기능을 알리기 위해 사용되기도 하고 새로 등장할 서비스 자체를 알리는 과정에서도 중요한 역할을 할 수 있습니다. 다만, ‘이미지' 중심의 목업은 정적인 느낌이 강하기 때문에 주목도가 낮은 한계를 가지기 마련입니다. 오늘은 영상 또는 이미지를 업로드해 다양한 애니메이션 효과를 추가, 훨씬 동적인 목업 콘텐츠를 제작할 수 있는 ‘Animockup’를 소개하고자 합니다.

화려한 목업으로 주목도를 높여보자

‘Animockup’은 애니메이션과 목업을 합성한 단어로, 오늘 소개할 서비스 이름입니다. 이름에서 알 수 있듯이 애니메이션이 접목된 다양한 목업을 제작할 수 있도록 도와줍니다. 위 화면은 기본 편집 화면으로 왼쪽 영역을 통해 디바이스, 이미지 및 영상 첨부, 배경 컬러 지정, 시작과 끝에 해당하는 애니메이션 효과 등을 지정할 수 있습니다. 설정한 값은 오른쪽 영역을 통해 미리 볼 수 있습니다. 그럼, 각 편집 도구를 하나씩 자세히 살펴보겠습니다.

‘Animockup’에서 사용 가능한 디바이스 목록입니다. 다만, 무료 버전과 프로 버전(유료)이 나뉘어 있어 프로 라벨이 붙은 디바이스는 무료 버전에서 사용이 어렵습니다. 개인적으로 이런 목업 서비스에서 가장 먼저 살펴보는 건 ‘디바이스 종류'입니다. 하나의 서비스를 여러 장치에서 사용할 가능성이 높기 때문입니다.

총 26개 디바이스가 제공되며, 이중 무료로 사용 가능한 것은 17개로 우리가 자주 쓰는 장치는 대부분 사용이 가능합니다. 목록에는 스마트폰은 물론 스마트워치와 태블릿, 랩톱 등 다양한 대상이 포함되어 있어 목적에 따라 사용하기 좋습니다. 리스트 내 디바이스 간 구분이 용이하도록 배경 컬러를 다르게 지정해 놓은 점이 눈에 띕니다. 어떤 장치가 등록되어 있는지 쉽게 구분하고 선택할 수 있습니다.

보통 목업 제작 서비스는 디바이스 자체에 초점을 맞추는 경우가 많습니다. 디바이스 별 담고자 하는 대상의 모습을 각기 다르게 보여주기 위해서입니다. 그런데 ‘Animockup’은 우리가 ‘Canva’나 ‘망고보드' 등에서 자주 본 ‘디자인 템플릿'을 선택하는 과정이 포함되어 있습니다.

덕분에 목업을 SNS 등에 업로드할 때, 별도 편집 과정을 거치지 않고 맞춤형 사이즈에 따라 한 번에 편집하고 다운로드할 수 있습니다. 예를 들어 인스타그램 일반 포스트로 제작할 경우, ‘Instagram square post’를 선택해 해당 사이즈 내 원하는 디바이스를 배치하고 애니메이션을 적용해 받을 수 있습니다. 이후 별도의 편집 과정 없이 바로 인스타그램에 업로드하면 됩니다. 특정 템플릿을 선택하지 않고, 직접 너비와 높이 등을 지정해 편집을 시작하는 것도 가능합니다.

템플릿과 디바이스 외 우리가 ‘Animockup’에서 활용할 수 있는 편집 도구입니다. 먼저, ① 선택한 디바이스에 적용할 이미지 및 영상을 첨부하는 기능입니다. 주목할 점은 이미지 외 영상 첨부를 지원한다는 점입니다. 이 경우, 애니메이션 효과를 주지 않아도 이미 편집되었거나 기능 사용 방법 등을 촬영한 콘텐츠를 있는 그대로 사용할 수 있다는 장점이 있습니다. 적절한 애니메이션이 추가되면 더 동적인 콘텐츠의 하나로 활용이 가능합니다.

또 ② 배경 컬러도 변경할 수 있습니다. 그라데이션이 적용된 기본 컬러 구성은 물론, 원하는 컬러 값을 직접 입력(컬러 선택 화면 오른쪽 아래 +버튼 클릭 시 가능)하는 것도 가능합니다. 단순 목업은 다소 투박하게 느껴질 수 있는데, 업로드 대상에 대한 사이즈를 미리 지정하고 소개하고자 하는 내용 또는 서비스의 대표 컬러 등을 쉽게 지정할 수 있어 훨씬 다채로운 모습으로 목업을 제작할 수 있습니다.

마지막으로 컬러와 더불어 ‘Animockup’의 핵심 기능 중 하나인 ③ ‘애니메이션’을 지정할 수 있습니다. ‘시작-끝'에 해당하는 설정을 각각 할 수 있으며, 애니메이션 타입과 적용 시간 등을 정해진 범위 내 선택할 수 있습니다.

저는 우선 맥북 프로 디바이스와 인스타그램 정방형 포스트를 선택한 뒤 이미지를 첨부했습니다. 여기서 한 가지 아쉬운 건(혹은 고려해야 할 건) 이미지가 정확하게 삽입되지 않는 점입니다. 또한 디바이스 별 적합한 해상도를 정보로 제공하면 좋겠지만, 그 역시 아직 미비합니다. 다행히 첨부한 이미지를 클릭해 사이즈를 디바이스에 맞추는 기능을 제공해 큰 불편은 없습니다. 이미지 첨부 등의 작업 후 배경 컬러를 변경하거나 애니메이션을 추가해 화면 아래 가운데 위치한 ‘플레이' 버튼으로 미리보기를 할 수 있습니다.

‘Animockup’이 매력적인 또 하나의 이유는 텍스트와 추가 이미지를 첨부하는 작업이 가능하기 때문입니다. ① 앞서 선택한 템플릿 사이즈 내 텍스트를 추가할 수 있습니다. ② 텍스트 사이즈를 조절하는 건 어렵지만 폰트 종류나 컬러, 기울기나 굵기, 밑줄, 좌우 정렬 등의 기본적인 텍스트 편집이 가능합니다. ③ 또 디바이스 내 포함된 이미지 외 추가 이미지를 등록할 수도 있습니다. 이런 기능들로 인해 ‘목업을 제작한다’라기보다, ‘목업이 포함된 하나의 디자인 콘텐츠를 제작한다’라는 느낌이 들기도 합니다.

편집이 완료된 목업은 ‘미리 보기 및 다운로드'버튼을 통해 저장할 수 있습니다. 무료 버전은 WEBM video 포맷, 720p까지 지원합니다. 최근에 WEBM 포맷을 MP4 등으로 변환하는 웹 서비스는 쉽게 찾아볼 수 있기에 우선 무료 버전으로 목업을 몇 개 제작해보는 것을 추천합니다.

한 번은 꼭 써봐야 하는 이유

작년 10월 ‘빠른 목업 제작을 위해 알아두면 좋은 서비스들’을 정리한 적 있습니다. 당시 소개한 4개의 서비스는 모두 이미지 중심의 ‘정적인' 목업 제작에 초점이 맞춰져 있었습니다. 다양한 디바이스에 따라 빠르게 목업을 제작해야 하는 환경이라면 적합하지만, 하나의 목업을 통해 여러 각도의 모습을 보여줘야 하는 상황에서는 상대적으로 부족하게 느껴질 수도 있습니다.

이런 상황에서 ‘Animockup’은 무료 버전으로도 충분히 영상 또는 애니메이션이 적용된 목업을 제작할 수 있다는 점이 가장 큰 장점입니다. 영상 자체를 지원한다는 점, 첨부한 이미지 외 텍스트와 추가 이미지를 추가한 상태에서 애니메이션을 적용할 수 있다는 점은 개인적으로 큰 만족으로 다가왔습니다. 게다가 우리가 자주 사용하는 소셜미디어에 최적화된 사이즈 역시 제공하니 앞서 소개한 4개 서비스와 함께 활용한다면 각 상황에 맞는 목업 제작이 필요한 환경에 더없이 좋은 선택지가 되지 않을까 싶습니다.

<참고자료>

Animockup

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.