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

백봉삼 기자 2023. 12. 20. 15:05
자동요약 기사 제목과 주요 문장을 기반으로 자동요약한 결과입니다.
전체 맥락을 이해하기 위해서는 본문 보기를 권장합니다.

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

고객에게 최적화된 쇼핑 환경을 제공하고자 그간 11번가가 적용해 온 디자인 원칙들을 한 곳에서 볼 수 있는 웹사이트다.

음성재생 설정
번역beta Translated by kaka i
글자크기 설정 파란원을 좌우로 움직이시면 글자크기가 변경 됩니다.

이 글자크기로 변경됩니다.

(예시) 가장 빠른 뉴스가 있고 다양한 정보, 쌍방향 소통이 숨쉬는 다음뉴스를 만나보세요. 다음뉴스는 국내외 주요이슈와 실시간 속보, 문화생활 및 다양한 분야의 뉴스를 입체적으로 전달하고 있습니다.

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

(지디넷코리아=백봉삼 기자)11번가가 자체 웹사이트 ‘11번가 디자인 시스템’을 통해 ‘고객 최우선’에 집중하는 11번가의 디자인 원칙과 철학을 소개한다고 20일 밝혔다.

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

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

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

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

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

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

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

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

백봉삼 기자(paikshow@zdnet.co.kr)

Copyright © 지디넷코리아. 무단전재 및 재배포 금지.

이 기사에 대해 어떻게 생각하시나요?