다른 서비스
NEW
기획
디자인
개발
프로덕트
아웃소싱
프리랜싱
비즈니스
최근 검색어
전체 삭제
최근 검색어가 없습니다.

디자인

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

프로덕트를 준비할 때 목업 활용도는 범위가 정말 넓습니다. 서비스를 기준으로 하면, 주요 기능을 알리기 위해 사용되기도 하고 새로 등장할 서비스 자체를 알리는 과정에서도 중요한 역할을 할 수 있습니다. 다만, ‘이미지' 중심의 목업은 정적인 느낌이 강하기 때문에 주목도가 낮은 한계를 가지기 마련입니다. 오늘은 영상 또는 이미지를 업로드해 다양한 애니메이션 효과를 추가, 훨씬 동적인 목업 콘텐츠를 제작할 수 있는 ‘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의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

다양한 컬러 생성과 활용으로 색 조합을 도와주는 ‘Coolors’

디자인

배경, 효과 등을 마음대로 조합해 아이콘을 만드는 ‘Iconray’

디자인

디자인 아이디어를 구체화할 수 있는 캔버스 ‘Easel’

디자인

이미지를 중심으로 다양한 피드백을 주고받는 ‘Picflow’

디자인

스크린샷을 목업 이미지로 편집하는 서비스, ‘Pika’

디자인

2억 개 이상 조합이 가능한 3D 아바타 생성 서비스, ‘Peeps’

디자인

업무에 바쁜 당신을 위한 기본 아이콘 제공 서비스, ‘heroicons’

디자인

앱 설치율을 높이기 위한 스크린샷 제작 서비스, PWA Screenshots Generator

디자인

“특정 주제 이미지를 한 번에!”…스톡 이미지 제공 사이트 모음

디자인

선택이 어려운 당신을 위한 컬러 조합 서비스, Reverb

디자인

구글 폰트보다 더 빠르고 쾌적하게, Bunny Fonts

디자인

여섯 가지 디자인 패턴을 제작하는 웹 서비스, Heazy Studio

디자인

다섯 가지 프로필을 쉽게 생성하는 피그마 플러그인, Avatarg

디자인

정적인 SVG 파일에 생동감을 더해주는, Designstripe

디자인

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

커버 이미지 제작이 쉬워지는 서비스, Coverview

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.