디자인 목업 이미지 제작하기

첫 디자인 관련 글이다.

디자인 툴

UI/UX를 디자인하는 툴 중에 유명한 툴로는 Sketch, Adobe XD, Figma 등이 있다. 필자는 꾸준히 사용자가 증가하고 있고 무료로 사용 가능한 Figma를 선호하는 편이다. 이 글에서는 Figma를 사용하여 IoT 앱을 디자인 해보고, 목업 이미지를 만들어 보겠다.

앱 컨셉과 디자인적 요소

IoT 앱에서 각 방마다 설치된 에어컨, 조명, 세탁기, 스피커 등 스마트 기기들을 조작할 수 있게 해야 한다. 홈 화면에는 현재 선택된 방을 표시하고, 그 방에 있는 기기들의 목록과 작동 상태를 간단하게 표시한다. 기기 버튼을 클릭하면 해당 기기를 세부적으로 조작할 수 있는 UI를 만들어야 한다. 전체적인 디자인은 뉴모피즘 (Neumorphism) 기반으로 제작하겠다. 요즘 실무에서 쓰기에는 적절하지 않은 디자인인 것을 알고 있지만, 이 글에서는 간단한 목업 이미지 제작이 목적이고 또 겉으로 보기에도 화려해 보이기 때문에 뉴모피즘 스타일을 선택했다.

위 이미지는 언급한 디자인을 반영하여 만든 샘플 화면이다. 왼쪽이 메인 화면이고, Air Conditioner 버튼을 누르면 오른쪽 화면으로 넘어오는 것을 생각하고 만든 것이다. 대다수의 목업 템플릿들이 iPhone 12 Pro Max 모양에 맞춰져 있기 때문에 디자인은 428*926 크기로 하면 된다. 이제 각각의 화면을 png로 export 하기만 하면 목업을 만들 준비는 끝났다.

목업 템플릿 구하기

Freepik 이라는 사이트에서 목업 템플릿 파일들을 다운받을 수 있다. 검색 창에 iphone mockup 이라고 검색하면 수많은 템플릿을 찾아볼 수 있다.

마음에 드는 템플릿을 클릭하고 초록색 Download 버튼을 누르자. 압축을 풀면 포토샵 (psd) 파일이 나온다. 목업 이미지를 만들기 위해서는 포토샵이 필요한데, 이 글에서는 포토샵 프로그램 없이 psd 파일을 편집하는 방법을 설명하겠다.

목업 이미지 만들기

Photopea 라는 사이트에서 psd 파일을 업로드하면 실제 포토샵 프로그램처럼 레이어 별로 편집이 가능하다.

레이어 목록을 잘 보면 내부적으로 존재하는 psd 파일을 편집할 수 있도록 정사각형 버튼이 표시되어 있다. 즉 이 파일에서는 TOP과 BOTTOM 레이어를 편집할 수 있다. 해당 레이어를 더블 클릭해보자.

기존에 있었던 샘플 UI 화면 위에다가 조금 전 Figma를 통해 디자인한 본인의 이미지 파일을 드래그 앤 드롭한다.

command + s를 눌러 레이어 내부에 있는 psd 파일을 저장하면, 상위의 psd 파일에는 자신이 만든 앱의 모습을 볼 수 있을 것이다.

이런 방식으로 나머지 레이어도 완성시켜주자.

완성되었으면 파일 > 내보내기 형식 > png 를 선택하여 목업 이미지를 완성시킨다.

나의 작품

이렇게 완성된 작품을 소개하겠다.

 

2022년 6월 22일 작성한 글입니다.