yeseyesee.com
예스아이씨 온라인스토어 리뉴얼 디자인 및 개발
Design: 송진규 Development: 변지윤, 홍혜원, 심혜섭, 송진규 Direction: 이민형, 임채승
예스아이씨는 2017년에 시작하여 서울을 기반으로 한 유니섹스 스트릿 패션 브랜드입니다. 그들은 ‘한 가지 방식에 규정되지 않고, 입는 사람의 개성에 따라 다르게 발현되는 가능성과 다양한 해석을 지지한다.’라는 일념 아래 실험적이고 과감한 비주얼을 보여주고 있습니다. 매 시즌 설정되는 컬렉션 컨셉에 맞추어 다양한 표현, 색채 및 소재들을 활용하여 소비자에게 시즌 별 새로운 브랜드 이미지를 보여주고 있습니다.
예스아이씨 팀의 웹사이트 리뉴얼 목표는 시각적 새로움, 사용자 친화적 구매 경험, 그리고 운영 편의성으로 크게 세 가지를 설정하였습니다.
시각적 새로움
예스아이씨가 전달하고자 하는 시각적 새로움에 대해 이해하고자, 여태까지 진행된 컬렉션을 살펴보며 ‘새로움’을 어떻게 표현하고 있는지 살펴봤습니다.
스트릿 브랜드라는 범주 안에서 매 시즌 다른 브랜드처럼 보일 만큼 확실한 컨셉의 변주를 통해 의류와 이미지를 생산하고, 소비자에게 새로움을 전달해왔습니다. 브랜드의 가치를 전달하기 위해 오히려 단단하고 일정한 틀이 필요하다고 생각했습니다. 서로 다른 개성의 이미지와 의류가 매 시즌 업데이트되는데, 웹사이트 디자인의 개성 또한 강하다면 사용자들에게 시각적 피로와 혼란을 줄 것으로 우려되었습니다. 시스템이 쉽게 읽히면서도 브랜드의 개성 있는 가치를 전달할 수 있는 웹사이트 디자인을 프로젝트의 목표로 설정하였습니다.
아토믹 디자인(Atomic Design Methodology)에 기반한 모듈형 인터페이스를 디자인하여 다양한 형태의 그래픽, 의류에 대응할 수 있고 화면 구성의 자유도를 높였습니다.
일정한 규칙을 가진 인터페이스는 소비자에게 예스아이씨 웹사이트에 대한 일정한 인식을 만듦과 동시에 새로운 컬렉션이나 기능의 추가 및 변화 등 업데이트 된 요소를 직관적으로 인식할 수 있도록 도왔습니다.
더 나아가 웹사이트의 또 다른 사용자인 예스아이씨 팀에게는 개성과 다양성을 마음껏 표현할 수 있는 도화지로 기능하도록 했습니다.
사용자 친화적 구매 경험
기존 예스아이씨 스토어가 갖고 있는 사용자 경험 측면에서의 문제점을 파악하고 개선했습니다.
첫 번째로 장바구니에 담기만 해도 즉시 페이지가 이동하여 기존의 상품 탐색 흐름이 끊겨 사용자가 원하는대로 구매 여정을 이어나갈 수 없었습니다.
이를 개선하고자 장바구니에 담았을 때 기존 페이지를 유지한 채로 장바구니 UI를 노출시켰습니다. 자연스럽게 어떤 상품을 담고, 담았는지를 확인하고, 구매를 이어가거나 다른 상품을 더 탐색할 수 있도록 사용자에게 선택지를 제공했습니다.
두 번째로 사이트 이용 중 필연적으로 마주치는 여러 에러에 대해 사용자가 에러의 원인과 대처 방법을 전혀 알 수 없었습니다. 당시 이용 중이던 이커머스 플랫폼에서 제공하는 API의 에러 처리에 한계가 있었으며, 별도의 에러 노출에 대한 처리가 없었습니다. 웹사이트 리뉴얼과 동시에 이커머스 플랫폼을 Shopify로 옮기게 되면서, API의 자체 에러 메시지를 자연스럽게 노출할 수 있었고, 해당 메시지는 JSON 언어 파일에 따라 번역되어 사용자 친화적으로 전달되었습니다. 이 과정에서 에러를 비롯한 여러가지 정보를 고객에게 전달할 때, 디자인 시스템 내에 정의된 토스트, 모달 UI를 적극적으로 활용하여 브랜드 이미지를 일관되게 전달하였습니다.
운영 편의성
직관적인 어드민 세팅을 통해 예스아이씨 팀의 온라인 스토어 운영 경험을 개선했습니다.
기존 스토어는 외주 업체를 통해 개발된 사이트였고, 내부적으로 해당 히스토리에 대한 인지가 부족하다보니 상품에 새로운 필드 추가하는데 비효율적인 공수가 들었고, 그에 따라 사이트를 운영하는 방식도 소극적으로 변하게 되었습니다. Shopify의 Metafield 및 Metaobject를 적극적으로 활용하여 최소한의 코드 수정 및 배포를 통한 사이트 운영 방향을 구상하였습니다.
Metafield와 Metaobject 내 Product, CDN file Reference 기능을 통해 홈 화면 구성, 발매 타이머, 사은품 등 다양한 기능을 Shopify에 이미 저장된 콘텐츠를 활용하여 코드 수정, 배포 없이 제품 및 이미지를 자유롭게 변경할 수 있습니다.
이 작업을 통해 강력한 어드민 커스터마이징 기능과 재사용 가능한 UI 컴포넌트는 브랜드 팀의 운영 효율을 높이고, 사용자들에게는 개성 넘치는 브랜드 이미지를 명확하게 전달할 수 있음을 알게되었습니다.