티몬 안의 새로운 패션 편집샵, Where Wear
파격적인 미션으로 진행된 'Where Wear' 디자인 후기
# 큐레이션에 집중, Where Wear 서비스 런칭
티몬은 사회적 이슈나 문제를 관통하는 유머 코드로 소비자의 패턴을 분석하고, 재치 있는 큐레이션
서비스를 제공함으로써 고객의 니즈를 효과적으로 충족시켜 왔습니다. 그러나 한 가지 서비스에서
쏟아내는 정보의 홍수는 범람을 일으키게 됐고. 이들을 분배하고 정리하는 또 하나의 플랫폼 작업이
필요해졌습니다. 고객은 '조금 더' 내 마음을 알아주는 서비스가 필요했죠. 이에 티몬은 발 빠르게
응답을 하기로 하는데, 그 시작이 '슈퍼마트'였고, 다음이 모바일 패션 편집샵. 바로 현재의
'웨어 웨어(Where Wear)'였습니다.
이 프로젝트는 2015년 7월경 출발하여 약 3개월간 빛의 속도로 진행되었으며,
11월 초 'Where Wear '라는 이름으로 정식 런칭 되었습니다.실로 기적과 같은 시간이었습니다.
<티몬의 큐레이션 서비스># ‘나음'이 아닌 '다름'으로
웨어 웨어의 디자인은 티몬에 속하는 서비스임에도 '보다 나아야 한다'가 아닌 '완전히 달라야 한다'는 파격적인 미션으로 시작되었습니다. 기존 티몬 서비스 내 디자인 개선에는 여러 가지의 제약이 따랐지만, 웨어 웨어는 컬러와 폰트, 썸네일 비율 등 모든 요소를 완전히 새롭게 구성할 수 있었기에, 고객에게 이전엔 보지 못한 새로운 쇼핑 경험을 제공하는 것이 가능했죠. 괴로운 일정 싸움을 눈앞에 두고 있긴 했지만 디자인 작업은 내심 시작부터 흥분과 설레임 그 자체였습니다.
# Concept 설정
Liberal (자유분방), Frank&Prank (솔직&장난스러운), Chic (세련된)
모바일 패션 편집샵 웨어 웨어는 위와 같은 세 가지의 컨셉을 지향합니다. 이에 따라 비주얼 랭귀지를 정확히 전달할 수 있도록 보다 명확한 폰트를 선정하고, 화이트 배경에 과감한 프레임과 패턴을 적용하여 썸네일을 크게 구성하도록 했습니다. 쇼핑을 잘 모르시는 할머니가 봤을 때도 '이 옷 참 곱구나' 라고 느낄 수 있을 정도로 말이죠. 그만큼 콘텐츠에 집중할 수 있는 직관성과 단순함을 컨셉으로 작업을 시작했습니다.
# 디자인 과정 소개
<초기의 목업 시안들># 메인 & 폰트 이야기
메인은 프레임 사이사이 각종 도형과 도트 패턴을 활용하여 지루함을 해소시켰는데요 우리는 이와 유사한 형태로 화면에 함께 녹여낼 수 있는 메인 폰트가 필요했습니다. 최초 시안의 폰트는 시크하고 날렵한 형태의 Modern Sans 체였습니다. 이를 제작한 디자이너 Marius Kempken에게 메시지를 보내 사용 가능 여부를 확인하기도 했습니다.
<폰트 변경 전(좌), 변경 후(우)>곳곳에 폰트와 어울릴만한 요소를 배치하는 등, 다양한 작업을 시도해보았으나, 애초에 Modern Sans체는 폰트 자체가 워드마크 제작을 고려한 형태였습니다. 결국, 상품을 설명하는 긴 문장에는 적합하지 않다고 판단하게 되었고, 컬렉션 정보가 보다 자연스럽게 읽힐 수 있도록 현재의 Avenir Next LT Pro체로 최종 변경하게 되었습니다.
# 전면 드로어 메뉴의 도입
웨어 웨어는 메인, 리스트, 상세 등 전반적으로 화이트 스페이스를 가져가고 있기 때문에 드로어 메뉴에 대한 집중도가 보다 강력해야 한다고 판단했습니다. 그리하여 기존의 좌우로 열고 닫히는 형태를 버리고 블랙 오퍼시티가 전면으로 채워지는 팝업 스타일을 사용, 언제든지 부담 없이 열고 닫을 수 있도록 드로어에 대한 접근성을 강화시켰습니다.
<레퍼런스(좌), 웨어웨어의 드로어(우)># 리스트 디자인
<초기의 리스트 구상 형태>초반 목업 작업 당시엔 지그재그나 3D스크롤 타입 등의 컬러풀하고 유쾌한 리스트를 구상하기도 했었는데요, 다소 ‘과감해 보일 수 있는’ 메인을 거쳐 진입되는 화면이니만큼, 제품들을 좀 더 차분히 둘러볼 수 있어야 한다고 판단하게 되었고, 디자인 밸런스에 맞추어 현재의 형태로 깔끔하게 정리하였습니다.
<썸네일 비율 변경 전(좌), 변경 후(우)>썸네일 비율 역시 현재가 되기까지의 히스토리가 있는데요, 초기 오픈 당시에는 촬영 콘셉트가 확정되지 않은 부분이 있어 정사각에 가까운 비율로 노출되었습니다. 하지만 점차 전신 컷이 많아지면서 상품들이 눈에 잘 들어오지 않게 되자, 최근 위와 같이 좌우 여백을 2px로 대폭 줄여 상품을 명확히 볼 수 있도록 썸네일 비율을 수정하게 되었습니다.
<웹 화면 크기에 따라 반응형으로 늘어나는 리스트>추가로, 웹을 통해 웨어 웨어를 접속하시면 디바이스 종류나 크기에 따라 위와 같이 리스트가 반응형 형태로 늘어나는 것을 확인하실 수 있습니다. 이외의 페이지들 역시 새로움을 지향하면서도 처음 접하는 이들에게 쉽고 명확하게 다가갈 수 있어야 한다는 점을 중요하게 생각하며 디자인했습니다.
이로써 티몬의 고객은 넘쳐나는 할인율과 혜택 딱지들로부터 잠시 벗어나, 온전히 웨어 웨어가 제공하는 추천 트렌드와 코디 정보를 감상할 수 있게 되었습니다.
# 마무리하며
돌이켜보면 그 어떤 곳보다 정체성이 명확한 이 곳에서 모든 UI를 새롭게 고민하고 재구성할 수 있었던 건, 티몬의 디자이너로서 최고의 도전이자 큰 행운이 아니었나 라는 생각을 합니다. 이 결과물이 향후 고객의 마음을 '조금 더' 알아주는 서비스로서 많은 이들에게 도움이 되기를 기대하며, 끝으로 웨어 웨어만의 유니크한 스타일을 완성시킬 수 있도록 프로젝트에 참여하고 도움을 주신 모든 분들께 진심으로 감사의 말씀을 전합니다. 수고하셨습니다!
