Rollstory Design/10月 - October

[UI]위메프 앱 리디자인

Woody SEO 2013. 10. 16. 15:19
반응형


한때, 미국에서 '그루폰'이라는 소셜커머스가 등장하면서 한국에도 쿠팡에 이어 많은 소셜커머스가 등장하게 되었습니다. 그리고 최근에 많은 소셜커머스 속에서 타사와 다른 적립금이며 배송혜택 등등 메리트 있는 정책을 내놓으며 갑자기 '위메프(we make price)'라는 소셜커머스가 등장하였습니다. (위메프를 광고하는것이 아닙니다.) 이러한 등장속에 제가 앱을 이리저리 살펴보면서 뭔가 아이템은 좋은데 조금만 더 '디자인'이라는 분야에 신경쓴다면 어떨까? 하는 생각속에 개인적인 마음으로 이번 '위메프'라는 앱을 리디자인 해보았습니다. 디자인이라는 것이 답이 없으며 세월이 흐르면 또다시 바뀔 수 있으며 또한, 개개인마다 보는 관점이 다르기에 그저 편하게 보시면 감사하겠습니다.

▲ 리디자인한 '위메프' 앱 아이콘


최근 흐름을 타고 있는 flat design을 생각하며 리디자인 해보았습니다. 일단 위메프의 상징인 'W'를 기존과 다르게 필기체 형식으로 봐꿔보았습니다. 'W'글자의 가운데 획 뒤에 그림자 느낌을 내어 플랫한 형태속에 입체감도 주었습니다. 그리고 위아래 5가지의 파스텔톤 색상은 앱을 실행시키면 다시 볼 수 있는 색상입니다. (하단글 계속 참조)



지금 한국에서 나름 인기있는 소셜커머스들을 모아 보았습니다. 하단 왼쪽이 현재 위메프앱아이콘이며 오른쪽이 리디자인한 앱아이콘입니다.



▲ 다양한 배경위의 위메프 아이콘



▲ 리디자인 인트로 화면


다음은 '위메프'의 인트로 화면 입니다. 역시나 간단하게 표현하였으며, 앱아이콘의 기본 배색과 동일하게 연한 살색배경에 짙은와인색(상징색)으로 강조를 하였습니다. 앱아이콘과 마찬가지로 5가지의 파스텔톤 색상을 볼 수 있습니다.



▲ 현재 위메프 인트로 화면(왼쪽)과 리디자인한 인트로 화면(오른쪽)


기본적으로 들어가 있는 문구는 동일하게 표현 하였으며, 앱아이콘의 상징이라 할 수 있는 'W'를 다시한번 표현 했습니다. 그리고 기존의 뒷배경 패턴은 배제하였습니다.



▲ 리디자인 페이지 화면


앱을 실행하고 인트로 화면이 지나고 실제 상품을 보게되는 페이지 리디자인 입니다. 현재 쇼핑 - 브랜드패션 - 전체 카테고리를 선택하고 있음을 나타내며, 앱아이콘과 인트로에서 보여지던 5가지 파스텔 색상이 최상단 분류 왼쪽부터 추천상품/지역/쇼핑/여행/컬쳐 순으로 나타내었습니다. 기본틀에서 크게 벗어나지 않고 색상과 아이콘만 일부 변경 하였으며, 최하단 탭바는 iOS7(애플용)과 동일하지만 클릭된 상태는 리디자인한 '위메프'의 상징색인 짙은와인색을 사용 하였습니다.



▲ 현재 위메프 상품페이지(왼쪽)과 리디자인한 상품페이지(오른쪽)


전체적인 틀은 크게 변화시키지 않았습니다. 사실상 거의 모든 소셜커머스가 위와같은 인터페이스 구조를 가지고 있으며, 화면전체의 좌우를 드래그하면 카테고리가 이동되며, 위아래로 스크롤하며 상품을 보는 형태를 가지고 있습니다.



다시 한번 말하자면, 디자인이란 개인마다 보는 관점과 시각이 다르며, 시대의 흐름에 따라 바뀔 수도 있습니다. 하지만 세월이 지나도 변하지 않을것 같은 하나는 있습니다. 바로 '직관성'이죠. 굳이 사용설명서를 보지 않아도 '이렇게 터치하면 이렇게 움직이겠지?'하는 직관성은 세월이 지나도 빠질 수 없는 중요 부분이 될것입니다. 이번 '위메프 UI'를 리디자인하면서 전체적인 큰 틀은 변화시키지 않고 마치, 새로운 집으로 이사를 하고 벽지를 바꾸고 가구를 바꾼 듯한 리디자인을 하였습니다. 물론 제 개인적인 생각을 반영하며 작업하였으며, 통일감과 심플함을 최대한 반영하였습니다.


이상으로 '위메프 UI 리디자인' 포스팅을 마치겠습니다.


반응형