메뉴 색상은 배경색과 대비되어야 합니다
UX 디자인 가이드라인 배우기 #16
메뉴 색상은 배경색과 대비되어야 합니다
저는 사용자 경험 향상을 위한 메뉴 디자인의 핵심 요소인 '색상 대비'에 대해 말씀드리고자 합니다.
개편 전 이마트의 메뉴 디자인은 상단 배경 색상이 노란색이었음에도 불구하고, 메뉴와 기능 버튼들이 하얀색으로 되어 있었습니다. 이로 인해 메뉴 요소들이 배경 색상과 대비되지 않아 눈에 잘 띄지 않는 문제가 있었습니다. 사용자들은 메뉴를 쉽게 인지하지 못하고, 원하는 기능을 빠르게 찾기 어려웠습니다.
개편 전 이마트몰그러나 바로 개편된 이마트의 메뉴 디자인은 상단 영역의 배경 색상을 노란색으로 유지하면서, 메뉴와 기능 버튼들의 색상을 검은색으로 변경했습니다. 이를 통해 메뉴 요소들이 배경 색상과 충분한 대비를 이루어, 사용자가 쉽게 인지할 수 있게 되었습니다.
바로 개편 후 이마트몰 
최근 이마트몰이처럼 메뉴 색상과 배경 색상의 대비는 사용자 경험 향상에 매우 중요한 요소입니다.
첫째, 가독성 향상
메뉴 요소와 배경 색상 간의 충분한 대비는 사용자가 메뉴를 쉽게 읽고 이해할 수 있도록 돕습니다.
둘째, 시각적 명확성
메뉴 요소가 배경과 명확하게 구분되면 사용자는 메뉴의 구조와 기능을 빠르게 파악할 수 있습니다.
셋째, 접근성 향상
색상 대비는 색약이나 시각 장애가 있는 사용자들의 접근성을 높입니다.
넷째, 브랜드 일관성
메뉴 색상은 기업의 브랜드 이미지와 일관성을 가져야 합니다.
사진: Unsplash의Adam Birkett이와 같은 이유에서 개편된 이마트의 메뉴 디자인은 사용자 경험 향상, 접근성 제고, 브랜드 일관성 유지 등의 측면에서 더 나은 선택이었다고 볼 수 있습니다. 이는 단순히 메뉴의 가시성을 높이는 것뿐만 아니라, 전반적인 사용자 중심 설계를 통해 이루어진 것입니다.
감사합니다.
위 강연은 인프런 [VOD 강좌] (PM/PO/UI/UX/리서치) 중 일부 내용입니다.
[인프런 VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
