brunch

라이킷 103 댓글 2

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by maus x maus Dec 04. 2018

목업 씌우기

UI 디자인 작업물을 보통은 목업을 씌워서 마무리를 하는데 그에 대한 개인적인 주관을 공유해 보려고 합니다.

미친듯한 대박 퀄리티 아니면 UI 포트폴리오는 그렇게 자주 보질 못합니다.

정말 짧은 시간 안에 임팩트를 줘야 하는데 UI 디자인이란 게 이미 존재하는 컴포넌트의 조합이기 때문에 작업물을 보는 사람 관점에선 SSDD(same shit different day) 일 것입니다.

그래서 어떻게 하는 것이 나은 방법일까? 하는 고민이 있을 거 봅니다.

그래서 제가 생각하는 이상적인 방법을 써봅니다.

그에 앞서 몇 가지 팁을 드리자면

-인디케이터(배터리, 통신사, 와이파이)에 신경 쓰지 말자.

-로그인 화면 등 너무 뻔한 화면이 새로운 시도가 아니면 제외시키자.

-비슷한 시퀀스(화면)는 피하고 대표 화면만 넣자.

-실사 목업은 최대한 자제하자.

잘 디자인된 화면

여기에 잘 디자인된 화면이 있다고 가정해 봅니다.

목업을 씌우려는 스크린에는 3가지 유형이 있을 겁니다.

A: 전형적인 스크린이며 모든 단말기에 적용하기 쉬울 겁니다.

B: 아이폰 X 계열 스크린입니다. 종종 목업없이 저 상태에서 스크린을 적용하는 사례를 보는데 저 상태에서 스크린을 넣는 건 그렇게 일관성 있어 보이지 않습니다. 어쩌면 노치를 너무 의식한다고 해야 되나요?

C: A에서 변형된 형태로서 모서리에 Round를 적용한 스크린입니다. 아마 대부분 목업에 넣어도 무리 없을 거라 봅니다.

스크린을 입혀보겠습니다.

확실히 B는 어글리 합니다.

그래서 B는 디바이스 목업을 씌워줘야 이쁩니다. 뭔가 이쁘다고 하니 전문성이 떨어지는 거 같은데 이쁘다 란 표현밖에 생각이 안 나네요. C는 갤럭시 계열에 가까워 보이네요. 실제로 존재하지 않는다 해도 실사 목업이 아닌 경우에는 이 정도 오버스러움에 대한 괴리감은 크게 없습니다.(뭔가 억지 번역한 느낌..)

확실히 B는 이렇게 목업을 씌워야 뭔가 제대로 돼 보이는 느낌입니다. 그런데 UI 쇼케이스를 작업하면서 굳이 애플 제품 홍보하는 건 아닌가 하는 생각이 들 때가 있습니다. 너무 과해 보인 다고 해야 할까요? 스크린 디자인보다는 목업에 더 눈이 가는 경우를 어렵지 않게 접하기도 합니다.

B타입에서 파생된 목업을 보면

A: 검은색 목업은 어떤 스크린이 와도 무난한 비주얼을 보여줍니다.

B: 스크린 디자인 컬러에 맞게 디바이스 컬러를 변형하는 건데 UI가 구조 복잡한 경우엔 역효과가 생길 수 있습니다.

C: 커스텀 컬러를 적용하려면 미니멀한 디자인이 제일 무난합니다.

D: 혹은 목업과 스크린의 경계를 없애는 방법도 있습니다. 어떤 스크린 디자인인지 여부에 따라 호불호가 갈릴 것입니다.

A와 C의 경우 elevation 그림자만 넣어도 목업없이 효과적으로 스크린 디자인을 표현해 줄 수 있습니다.

개인적으론 C를 선호합니다.

그런데 스크린 디자인을 하다 보면 최대한 간결하게 미니멀 위주로 하게 됩니다. 특히 포트폴리오나 개인 작업용 도로 작업 시 그러할 건데. 스크린 디자인이 미니멀해지면 역으로 고민해서 디자인한 화면이 빈약해 보이기도 합니다. 그래서 저는 목업/스크린 배경에 가볍게 크게 시선을 빼앗지 않는 정도의 패턴을 넣는 것도 추천합니다.