위메프 UI KIT 쇼케이스 만들기
이쁘게 포장해 보자
Behance에서 위메프 모바일 UI KIT 쇼케이스를 올렸습니다.
https://www.behance.net/gallery/65562915/-UI-Kit
이에 관련해서 어떤 의도로 만들었는지 공유하면 좋을 거 같아서 여기서 간단하게 써봅니다.
먼저 위메프는 비주얼을 어필하는 서비스는 아닙니다. 복잡함 속에서 심미적인 요소를 최대한 잘 녹여야 하는 커머스만의 고민이 많습니다.
제가 위메프에 와서 제일 먼저 한 것은 2배 수로 제작된 .psd 파일을 전부 스케치로 컨버팅 하면서 UI 컴포넌트로 만드는 일이었고 이 작업은 한 달 반 정도 소요된 거 같습니다.
고통스러운 컨버팅이었지만 스케치로 바꾼 이유는 디자인 작업을 모듈화 해서 인하우스 디자인의 유지보수 업무를 극대화할 수 있기 때문이었습니다.
나름 의미 있는 노가다라 생각하고 있습니다.
-
그리고 우리도 한번 UI KIT 쇼케이스를 만들어보자라는 얘기가 오가고 있었고 그러면 쇼케이스에 어떻게 하면 이를 잘 표현해낼까 하는 고민을 많이 했습니다.
순서는
커버 / 요약 / 컬러-타이포 / 디자인 시스템 / 아이콘 / UI 컴포넌트 / 스크린 순으로 했습니다.
위 이미지에도 쓰여있듯 UI KIT는 저희 디자이너를 위한 디자인입니다.
유연하고 일관적이고 지속 가능하며 신속하게 만들 수 있다는 키워드를 가지고 접근했으며
이는 아직도 개선 중에 있습니다.
제가 생각하는 이러한 쇼케이스의 핵심은 시각적으로도 보기 좋아야 하겠지만
전달하고자 하는 메시지를 시각화하는 게 정말 중요하다고 생각했습니다.
그래서 동그라미 사각형 등 최대한 단순 명료한 도형으로 내용을 녹이려고 했습니다.
첫 번째 화면은 내용을 함축적으로 정리했다고 하면 두 번째 화면은
목업을 너무 많이 남용하면 생기는 부작용을 많이 보아왔기 때문에 목업은 정말 필요한 경우에만 넣으려고 노력했습니다. 개인적으로 좋은 목업들이 많이 나오고 있는데 목업을 목적에 맞지 않게 너무 과하게 쓰면 제조사 디바이스 홍보하는 느낌이 들더군요. 목업때문에 스크린보다 엄한 거에 시선이 가는 부작용도 많이 있는 거 같아 목업은 최대한 아껴 쓰는 걸로 했습니다.
아이폰 노치 정말 아니라고 많이들 얘기하지만 개인적으론 아이폰 스크린 맘에 드네요. 은근 커스텀 색상도 잘 녹여들어가고...
참고로 위 나열한 수치는 계속 줄이고 있습니다.
UI 컴포넌트는 94개가 아닌 50 이하로 줄이고 있고 컬러도 7개 정도로 다이어트하는 중입니다.
예를 들어 기존 18px, 20px, 22px 화살표가 제 규칙 없이 화면에 적용된걸 한 사이즈로 통일한다던가...
컬러는 사실 팔레트를 공개할 정도로 많지 않습니다. 텍스트 스타일 역시 그렇고요...
붉은색과 회색 계열로 이루어져 있어서 이걸 어떻게 녹여야 하나 고민한 결과 최대한 미니멀한 구성으로 만들었습니다.
이건 디자인 시스템 구성안을 간단한 인포그래픽으로 만든 것이고 별도의 디자인 챌린지는 없는 부분입니다.
그렇지만 인포그래픽 만드는 과정에서 고민을 조금 했습니다. 최소한의 비주얼로 간단명료하게 설명하기인데.. 디자이너가 디자이너를 위한 콘텐츠 디자인을 한 거 같습니다.
아이콘... 이쁜 아이콘을 만드는 게 아니라 모두가 인지하기 쉬운 아이콘만 사용해야 되기 때문에 타 서비스 대비 뭔가 특출 나거나 비주얼 아이덴티티가 명확하거나 디자인 관점에서 어필한 만한 내용은 크게 없습니다.
그래서 저는 쇼케이스에서 만큼은 아이콘 크기와 색을 하나로 통일했고 화면을 메울만한 수량 역시 아니기 때문에 타일 형태로 붙였습니다. 그리고 이번에 디자인 시스템 개편에서 아이콘을 픽셀 그리드에 맞게 다시 그렸는데 이걸 iosmetric으로 pixel perfect를 효과적으로 표현하고 싶었는데 별도의 다른 툴을 쓰는건 효율적이지 않을 거 같았습니다.
그래서 어떻게 어필할지 고민을 했고 그중 8bit 아이콘을 메타포로 녹였습니다.
그리고 가장 중요한 UI 컴포넌트를 어떻게 배치하는 부분인데 일반적으로 온라인에 스토어나 몇몇 기업 사이트에서 배포하는 UI KIT는 UI 컴포넌트 각각의 요소들은 자로 잰듯이 딱딱 맞아떨어지는 보기 좋은 구성이나 위메프 UI 컴포넌트는 아무리 지지고 볶아도 정렬된 느낌을 주지 못했습니다.
그래서 차라리 그냥 자연스럽게 바닥에 펼쳐보자란 컨셉으로 접근했습니다. 원래 더미 상품은 나이키 제품으로 도배했는데 비핸스에 올린 건 상표권 이슈가 생길지 몰라 저작권 무료 이미지로 바꿨습니다.
나이키한테만 좋은 일 해주는 거 아니야? 이럴 수도 있지만 사소한 부분일 수 있지만 역으로 타사 브랜드 이미지를 통해 위메프 브랜드 가치를 높여 주는 법리 해석도 있을 거라 봅니다.
스크린 샘플은 목업을 씌우면 정말 소화하기 어렵습니다.
아무리 베젤이 얇아도 스크린 여러 개를 붙이면 그 사이의 간격이며 목업의 컬러나 쉐이프가 정작 보여주고 싶은 스크린 본질을 방해하는 요소가 되는 경우가 많은 거 같았습니다.
그래서 목업은 전부 걷어내고 스크린 모서리를 라운디하게 감싸서 처리했습니다.
단지 비주얼만 고민한 게 아니라(고민했쉼니더..) 어떻게 접근했는지도 공유하면 좋을 거 같아 써봤습니다.
감사합니다.
