11번가, 고객에게 최적화한 UI/UX ‘디자인 원칙’ 소개

뚜렷한 명도 대비 등 저시력, 노안 사용자에 ‘접근성’ 높은 쇼핑 환경 제공

11번가가 자체 웹사이트 ‘11번가 디자인 시스템’을 통해 ‘고객 최우선’에 집중하는 11번가의 디자인 원칙과 철학을 소개한다고 20일 밝혔다.

고객에게 최적화된 쇼핑 환경을 제공하고자 그간 11번가가 적용해 온 디자인 원칙들을 한 곳에서 볼 수 있는 웹사이트다. 지난 2016년 체계화해 내부 운용 중인 11번가의 ‘디자인 시스템’을 토대로 최근 제작했다.

11번가 디자인 시스템은 웹이나 각종 서비스 UI(사용자 인터페이스) 디자인에서 재사용 가능한 컴포넌트와 패턴을 정의하여, 전체 디자인에 일관성 있게 적용할 수 있도록 만든 가이드라인이나 규칙을 뜻한다.

1번가 디자인 시스템 웹사이트 화면

일례로 11번가는 국가표준 ‘한국형 웹 콘텐츠 접근성 지침’에 따라 저시력, 노안 사용자에게 편리한 쇼핑 환경을 구현하는 데 힘쓰고 있다. 주요 쇼핑 버튼(구매하기)을 명확하게 인식할 수 있도록 콘텐츠와 배경 간의 명도 대비를 최소 3:1부터 4.5:1 이상이 되도록 설정하는 등 개인의 능력이나 환경의 제약과 관계없이 편리하게 쇼핑할 수 있게 높은 접근성을 유지하고 있다.

11번가는 고객의 쇼핑 흐름을 방해하지 않는 최적의 사용자 인터페이스를 위해 서비스 화면 내 보여지는 각 요소들의 배치 또한 세밀하게 설계하고 있다. 고객 이용 패턴을 정량적으로 분석하는 ‘A/B 테스트’를 적극 활용해 홈 화면, 상품 검색 결과, 결제 화면 등 서비스 화면 내에서 보여지는 각 디자인 요소들을 효율성이 가장 높은 위치로 배치시킨다.

여기에 ▲직관성(가독성 높은 명료한 아이콘) ▲편의성(쉬운 탐색을 돕는 라벨) ▲심미성(화면 내 여백, 간격)과 최근 디자인 트렌드, 사용자의 니즈를 바탕으로 더 나은 고객 경험을 제공하기 위해 디자인 영역을 지속 보완하고 있다.

11번가 황선윤 디자인담당은 “디자인 원칙에 대해 소개하는 웹사이트 오픈으로 11번가가 추구하는 ‘고객 중심’의 가치와 11번가 브랜드 철학에 대한 고객과의 공감대 형성을 기대하고 있다”며 “고객이 방문할 때마다 더욱 발전된 사용자 경험을 체감할 수 있도록 불편한 요소는 제거하고 간결하면서도 명확한 이용 환경을 구현하는데 노력을 아끼지 않을 것”이라고 말했다.

누구나 볼 수 있는 11번가 디자인 시스템은 서비스 디자인의 체계화가 필요한 신규 스타트업이나 중소 규모의 업체들에게 도움이 될 전망이다. 각 컴포넌트들의 규격, 구조, 사용법 등을 세부적으로 나누어 가이드하고 있어 플랫폼 구축과 개선에 참고할 수 있다.