목업 디자인을 쉽게 만들 수 있는 사이트 'mockuphone'

목업 디자인을 쉽게 만들 수 있는 사이트 ‘MockuPhone’

목업(Mockup) 디자인은 흔히 사용하는 디자인 소스입니다. 어떤 이미지에 스마트폰이나 데스크톱, 노트북 랩탑 등의 프레임을 덫씌워서 직관적이고 이해하기 쉽도록 만들어주는 역할도 합니다.

원래 목업은 실제 제품을 만들기 전 실물과 비슷하게 제작하는 샘플 결과물인데요. 제품을 양산하기전에 여러가지를 테스트해볼 수 있는 방법이라 하겠습니다. 최근에는 UI나 UX, 그외 기타 분야에서 사용자 경험 디자인을 위해 목업 이미지를 사용하는 경우가 많습니다. 저같은 경우에는 블로그용 이미지나 SNS용 콘텐츠 이미지를 만들 때와 강의 자료 슬라이드에 넣을 소스로 목업 디자인을 유용하게 사용하는데요. 오늘은 이 목업 디자인을 손쉽게 만들어주는 사이트 mockuphone을 소개합니다.

목업 디자인을 만들 때는 PSD같은 이미지 파일을 이용하는게 일반적입니다. 틀은 똑같고 안에 내용물만 계속 바뀌는 형태죠. 이것은 오프라인 작업이기 때문에 빠르고 편리하지만 다양한 목업 디자인 소스를 갖고 있어야하는데다가 포토샵같은 고급 프로그램을 사용해야한다는 부담도 함께 있습니다. 이러한 문제를 해결할 수 있는 mockuphone사이트는 웹상에서 이런 작업을 가능하게합니다.

먼저 Mockuphone 사이트로 접속합니다. 접속하면 상단에 다양한 목업 샘플이 나열돼 있는데요. 아이맥을 비롯해서 맥북, 아이폰, 아이패드, 맥북 에어까지 있습니다. iOS 제품군외에도 안드로이드나 윈도우폰, TV에 이르기까지 필요한 거의 대부분의 디자인이 있으므로 부족함이 느껴지진 않습니다.

다음으로 필요한 목업을 선택합니다. 아이폰7플러스를 비롯해 다양한 제품군의 디자인이 있네요.

정면 목업 뿐만 아니라 가로모드나 왼쪽 오른쪽 측면 목업 디자인도 지원합니다.

원하는 이미지를 선택한 다음 Drop files here를 클릭하거나 이미지를 드래그&드롭해서 목업을 만들 이미지를 넣어줍니다. 추천 크기는 1242px * 2208px이지만 크기를 자연스럽게 맞춰주더군요. jpg와 png, psd를 지원하며 디자인 리소스는 페이스북의 디바이스 소스를 이용합니다.

이미지를 올린 후 Generate product mockups를 클릭하여 목업 디자인을 생성합니다. 아래쪽에 있는 Add more files를 선택하여 여러장의 이미지를 벌크(Bulk)형태로 한꺼번에 목업으로 만들 수도 있습니다.

목업 디자인이 생성됐습니다. 이 상태에서 해당 이미지를 다운로드 하는 방법은 두 가지인데요. 첫번째는 아래쪽에 있는 Download my mockups버튼을 클릭해서 이메일 주소를 입력 후 이메일로 다운로드 링크를 받는 방법이 있고, 두번째는 그냥 현재 이미지 위에 마우스 우클릭으로 해당 이미지를 다운받는 방법이 있습니다. 아래쪽에 캡션이 달려있는데 현재는 샘플 이미지를 보여주는 것이며, 목업의 방향이 모두 보여지지 않고 다운로드 zip 패키지에는 모든 방향의 목업이 있다는걸 알려줍니다.

별도의 프로그램없이 웹상에서 목업을 만들 수 있는 방법이기에 만들 때 약간의 기다림의 시간이 필요하겠고요. 추가로 공개가 가능한 이미지들만 만들어야함을 주의만한다면 사용에 큰 지장은 없겠습니다. 기밀문서나 회사내부기안을 목업으로 만들 땐 고전적 방법인 오프라인 PSD를 이용하는게 좋습니다. 하지만 공개할 게시물이 아닌 이미지를 목업으로 만들 필요가 있을까요? MockuPhone에서 목업 디자인을 쉽게 만들어 업무에 활용하면 편리하겠네요.