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

7분

2021.10.13.

32.1K

우리가 디자인 작업을 하며 자주 접하게 되는 '목업(Mockup)'은 '실물 모형'을 의미합니다. 실제 작동은 어렵더라도 어떤 모습을 갖고 있는지 실제 사이즈에 맞춰 제작, 사용자 피드백 등을 위해 사용되는데요. 모바일 앱을 기획, 디자인하는 과정에서도 디바이스 목업은 여러 용도로 활용될 수 있습니다.

서비스 소개 페이지 내 주요 기능 소개
주요 디바이스 별 해상도 확인
실제 디바이스 내 적용된 모습 확인

카카오스타일 소개 페이지에 적용된 모바일 앱 목업

특정 서비스를 확인하거나 사용할 수 있는 웹사이트에 들어갔을 때, 웹 환경이지만 모바일에서 어떤 모습으로 활용할 수 있는지 이미지로 볼 수 있는 경우가 많은데요. 이렇듯 목업은 사용자에게 아직 접하지 못한 디바이스에 대한 간접적인 경험과 안내를 제공합니다. 목업은 모바일 앱 등 서비스가 업데이트될 때 새롭게 제작하거나 교체하는 작업이 필요한데요. 오늘은 특정 프로그램을 사용하지 않고, 웹상에서 이미지 첨부를 기준으로 디바이스 별 목업을 빠르게 제작할 수 있는 서비스를 정리하고자 합니다.

1. 서비스 미리 보기

Mockmagic: 디바이스 및 컬러, 방향 등 핵심 기능을 활용해 목업을 제작하고 무료로 내려받을 수 있는 곳
Pixdltrue: 다양한 각도로 제공되는 템플릿을 활용해 디바이스 별 목업을 쉽게 제작할 수 있는 곳

(1) Mockmagic

첫 번째 소개 서비스는 'Mockmagic'입니다. 한 개의 디바이스를 기준으로 컬러와 방향 등을 선택해 목업을 제작할 수 있는 서비스입니다. 가장 큰 장점은 꼭 필요한 기능만 담아 별도 학습과정 없이 누구나 원하는 이미지와 디바이스에 따른 목업을 빠르게 제작할 수 있다는 점입니다. 회원가입 후 목업 제작 화면으로 들어가면 선택한 디바이스를 왼쪽으로, 목업 제작에 필요한 도구를 오른쪽으로 확인할 수 있습니다.

편집 도구는 크게 네 가지로 구성되어 있으며, 제작 과정(순서)에 따라 구성되어 있어 사용이 편리합니다.

디바이스 선택(스마트폰, 태블릿, 스마트워치, 랩톱, TV, 데스크톱 등)
디바이스 별 컬러 선택
디바이스 방향 선택(세로가 기본이며, 가로 선택 가능)
원하는 파일 첨부

각각 아이폰 12프로, 아이폰 12, 갤럭시 S20을 선택해 동일한 이미지를 삽입 후 목업을 다운로드한 모습입니다. 원하는 이미지만 잘 선택해 등록하면 정말 빠르게 원하는 디바이스 별 목업을 만들 수 있습니다.

스마트폰뿐만 아니라 랩톱이나 데스크톱 목업도 제작할 수 있습니다. 이번에는 아이맥 프로, 맥북 프로에 이미지를 첨부해 목업을 제작한 모습입니다. 'Mockmagic'은 이미지 첨부 한 번으로 디바이스 별 목업을 빠르게 제작할 수 있다는 장점이 뚜렷한 서비스입니다. 다만, 아쉬운 점도 있는데요. 디바이스 종류가 많지 않다는 점입니다. 아이폰은 12까지 잘 반영되어 있지만, 갤럭시는 S20이 가장 최신 버전으로 적용되어 있으며 유일한 갤럭시 모델입니다.

기능 단위 이미지를 동일한 디바이스로 제작하는 것이 목적이라면 'Mockmagic'는 30초 이내에 원하는 결과물을 확인할 수 있다는 점에서 충분히 활용 가치가 있다고 생각합니다.

(2) Pixeltrue

두 번째 소개 서비스는 'Pixeltrue'입니다. 'Mockmagic'와 가장 큰 차이라면, 다양한 각도로 구성된 템플릿을 제공해 준다는 점인데요. 스마트폰, 랩톱, 데스크톱, 스마트워치 등 4가지 종류로 제공되는 디바이스를 단순 평면으로 제공하는 것이 아니라, 1개 이상의 조합과 다양한 구성으로 확인할 수 있습니다. 덕분에 조금 더 다채로운 목업을 제작할 수 있다는 장점이 있습니다.

'Pixeltrue'의 편집 도구는 2가지로 나뉩니다. 먼저 목업(디바이스)을 선택할 수 있으며 선택한 목업을 상세 편집할 수 있도록 구분되어 있습니다. 디바이스 선택은 크게 4가지로 가능합니다. 별도 구분을 선택하지 않으면 등록된 전체 목업을 리스트로 확인할 수 있습니다. 또 스크린 구성 방법을 필터 형태로 제공하고 있습니다. 1개, 2개, 3개, 3개 이상 목업 개수에 따라 내용을 볼 수 있도록 구성되어 있습니다.

다음은 'Pixeltrue'에서 선택할 수 있는 목업 리스트입니다. 확실히 다양한 구성을 갖고 있다는 것을 알 수 있는데요. 같은 목업이라 하더라도 방향이나 각도가 달라 목적에 따라 다양하게 활용할 수 있다는 장점이 있습니다. 예를 들어, 서비스 소개 또는 기능 소개 텍스트를 입력한 뒤 왼쪽을 바라보고 있는 목업을 배치하면 조금 더 집중할 수 있는 환경을 제공할 수 있습니다.

원하는 목업을 선택했다면, 이제 조금 더 상세한 편집을 할 수 있습니다. 목업 내 디바이스 개수에 따라 각각 이미지를 첨부할 수 있으며, 목업 스타일을 변경할 수 있습니다. 또 디바이스 컬러와 위치를 변경하는 것도 가능합니다. 제가 가장 마음에 들었던 기능은 이미지를 첨부한 뒤 그대로 삽입하는 것이 아니라 원하는 영역을 지정할 수 있다는 점입니다. 저는 갤럭시 폴드 3를 쓰고 있어 해상도가 기존 디바이스와 조금 다르게 적용되어 있는데요. (가로는 길고, 세로는 짧은) 영역을 지정할 수 있어 다른 디바이스에 적용하기 훨씬 수월했습니다.

또한 편집이 완료된 목업은 최대 5000x5000 해상도로 무료 다운로드할 수 있습니다. 고해상도를 지원한다는 것 역시 장점 중 하나입니다. 2개 디바이스가 포함된 목업을 제작 후, 위치를 변경해 다시 한번 다운로드한 모습인데요. 고해상도를 지원하기에 웹페이지 등에 바로 적용할 수 있다는 점 역시 매력적으로 다가옵니다.

다만, 'Mockmagic'와 같이 'Pixeltrue'도 디바이스의 종류가 다양하지 않다는 점은 아쉽습니다. 게다가 갤럭시 시리즈는 아예 제공되지 않아 iOS 디바이스로만 제작이 가능합니다. 그럼에도 불구하고, 무료로 고해상도 다운로드가 가능하다는 점과 다채로운 템플릿이 제공된다는 점에서 사용 가치가 충분한 서비스라고 생각합니다.

추가로 'Pixeltrue'는 무료로 사용 가능한 일러스트레이션을 제공하고 있습니다. 목업 제작에 직접 사용은 불가능하지만 디자인 작업 시 유용하게 활용 가능한 추가 리소스를 확보할 수 있다는 점에서 좋습니다.

2. 함께 활용할 수 있는 서비스

(1) Vector Mockups Library

피그마 파일로 제공되는 목업 라이브러리 'Vector Mockups Library'입니다. 무료로 다운로드할 수 있으며 아래의 목업이 각각 라이트, 다크 모드로 제공됩니다.

iPhone 12
iPhone SE 2
iPhone SE
Samsung Galaxy S20
Apple Watch
iMac
Macbook
Safari
Chrome

피그마 내 이미 구성요소가 정리되어 있어 이미지 첨부 및 교체, 전반적인 디자인을 입맛대로 구성할 수 있다는 점이 가장 큰 장점입니다. 가장 최근 버전이 3.0이며, 2.0 버전에서는 더 다양한 목업을 확인, 피그마와 스케치를 통해 활용할 수 있습니다. 파일 다운로드 시, 버전 선택이 가능합니다.

(2) Cleanmock

웹, 안드로이드와 애플 디바이스는 물론 앱스토어와 플레이스토어(제공 예정)에 업로드할 스크린숏까지 제작할 수 있는 서비스입니다. 손으로 쥐고 있는, 두 개 이상의 디바이스, 디바이스 일부를 크롭 하는 등 다양한 템플릿을 지원하는 것이 가장 큰 장점입니다. 서비스 소개 페이지 등에 삽입할 기능 단위 목업은 물론, 스토어 등록에 필요한 스크린숏까지 한 번에 제작할 수 있는 곳이라 더 유용하게 느껴집니다. 스크린숏 제작의 경우 텍스트를 삽입하는 기능까지 지원합니다. 다만 업로드한 이미지를 디바이스에 맞게 편집하는 것이 어려워, 업로드할 이미지를 미리 사이즈에 맞게 편집해야 하는 불편은 있습니다.

<참고 자료>

Mockmagic: https://www.mockmagic.com/
Pixeltrue: https://www.pixeltrue.com/
Vector Mockups Library:https://mockups.kkuistore.com/
Cleanmock: https://cleanmock.com/

로그인하고 자유롭게 의견을 남겨주세요.