UX/UI 디자인 사례 살펴보기

좋은 UX/UI을 하기 위해서는 좋은 UX/UI 디자인을 많이 봐야한다고 생각한다.
성공적인 사례를 보고 왜 좋은지, 나라면 어떻게 했을지...와 같은 생각을 다양하게 해나가다 보면, 앱이나 웹사이트를 사용하면서도 자연스럽게 문제를 발견하고 개선 아이디어를 떠올릴 수 있는 능력을 키울 수 있을 것이라 생각하기 때문이다. 

 

1. 그렇다면, 좋은 UX/UI 디자인이란 무엇일까?

• 사용자가 쉽게 이해하고, 편리하게 사용할 수 있도록 설계된 디자인을 의미
• 단순히 예쁜 화면이 아니라, 사용자의 행동을 고려한 직관적인 경험을 제공하는 것이 핵심!
  
  

2. 좋은 UX/UI 디자인의 기준

제이콥 닐슨이 제안한 10가지 휴리스틱 원칙, 스티븐 크룩이 제안한 좋은 사용성 특성 등을 고려하여 주요한 기준 및 특성을 정리해보자면 아래와 같다.
(추후 더 자세히 정리해보면 좋을 것 같다)

1️⃣ 직관성(Intuitiveness)

• 사용자가 별다른 설명 없이도 쉽게 사용할 수 있어야 함
• 예: 네이버 검색창 -> 누구나 검색어를 입력하면 결과가 나올 거라고 예상 가능

2️⃣ 일관성(Consistency)

• 같은 앱이나 웹사이트 안에서 버튼, 색상, 아이콘 스타일이 통일되어야 함
• 예: 카카오톡 -> 말풍선 디자인, 버튼 스타일, 컬러가 일정

3️⃣ 가독성 & 명확성(Readability & Clarity)

• 글자가 너무 작거나 색상이 흐리면 안 됨
• 예: 토스 -> 불필요한 요소 없이 핵심 정보만 강조(잔액, 송금 버튼 등)

4️⃣ 피드백 & 인터랙션(Feedback & Interaction)

• 버튼을 눌렀을 때 반응이 즉각적으로 나타나야함(로딩 표시, 색상변화 등)
• 예: 배달의 민족 -> 주문 후 실시간으로 배달 상태를 알려줌

5️⃣ 접근성(Accessibility)

• 다양한 사용자(고령층, 장애인 등)도 쉽게 사용할 수 있어야 함
• 예: 네이버 -> 글자 크기 조절, 음성 검색 지원

6️⃣ 효율성(Efficient)

• 사용자가 원하는 목표를 빠르고 쉽게 달성할 수 있어야 함
• 클릭 수를 줄이고, 반복적인 작업을 자동화하면 좋음
• 예: 카카오톡에서 최근 대화한 사람 목록이 자동 정렬

7️⃣ 사용자 통제와 자유(Use Control & Freedom)

• 사용자가 실수했을 때 쉽게 되돌릴 수 있어야 함
• 예: 쇼핑몰 장바구니 취소 버튼

8️⃣ 사용자가 인식할 수 있는 오류 메시지(Help Users Recognize, Diagnose, and Recover from Errors)

• 에러가 발생하면 원인을 쉽게 이해할 수 있도록 안내해야 함
• 예: 비밀번호 오류입니다 -> 비밀번호가 8자 이상이어야 합니다

9️⃣ 즐거운 경험을 제공해야 한다(Satisfaction)

• 사용자가 불편함 없이 기분 좋게 사용할 수 있어야 함
• 예: 배달의 민족 - 귀여운 일러스트와 재치 있는 문구들

 

3. UX/UI 디자인 사례

1) 네이버

✅ UX/UI 특징

• 검색 중심 인터페이스 -> 사용자가 원하는 정보를 빠르게 찾을 수 있도록 설계
• 메인 화면에 다양한 서비스(뉴스, 메일, 쇼핑 등)로 접근 가능
• 모바일 최적화된 UI 제공(PC와 모바일 디자인 차별화)

✅ 성공 요인

• 한국 사용자들의 검색 습관을 고려한 UX 설계
• 뉴스, 연예, 쇼핑 등 사용자가 많이 찾는 콘텐츠를 메인에 배치
• 음성 검색, AI 추천 기능 등을 추가하며 지속적인 UX 개선

✅ 상세 사례: 체류시간을 증가시킨 홈 피드 개선
네이버는 꾸준히 홈피드 테스트를 진행했으며, 체류시간을 늘리기 위해 홈피드 UX/UI 를 개선하였으며, 이는 성공적인 결과를 얻었다.

홈피드에 사용자의 검색 키워드, 소비 패턴 등 네이버 내 활동 이력을 AI가 분석하여 개인 맞춤형 콘텐츠 피드를 제공했다.
홈피드: 네이버가 2023년 8월 11일 네이버 모바일 메인에 도입한 개인화 추천 피드로 검색 홈 하단에 제공. 콘텐츠 추천 서비스이다.

또한 왜 특정 콘텐츠를 추천 받았는 지 직관적으로 이해할 수 있도록, 추천된 이유화 함께 표시하여 신뢰도를 향상시켰다.(ex. 상단에 적힌 "구독한 채널 콘텐츠")

출처:https://www.navercorp.com/service/serviceNaver

2) 토스

✅ UX/UI 특징

• 복잡한 금융 서비스를 누구나 쉽게 이해할 수 있도록 단순화한 디자인
• 잔액 확인, 송금, 카드 내역을 한눈에 볼 수 있는 인터페이스 제공
• 불필요한 요소 제거 -> 사용자가 원하는 정보만 깔끔하게 정리

✅ 성공 요인

• UX 리서치를 기반으로 금융을 잘 모르는 사람도 쉽게 사용 가능하도록 설계
• UI 디자인에서 블루 컬러와 최소한의 텍스트를 사용해 깔끔한 느낌 제공
• 결제·송금 과정에서 실패할 가능성을 최소화한 인터랙션 설계 (ex. 이중 확인 버튼 제공)

✅ 상세 사례: 사용자에게 익숙하지 않은 UI 개선하기
토스에는 '내 소비'라는 제품이 있는데, 그 곳에 토스에 연결한 계좌와 카드의 수입, 지출, 이체 내역을 한 곳에 모아서 보여주는 기능이다.
초기의 '내 소비'에서는 수입, 지출, 이체 내역이 만들어진 시간 순서대로 쌓이게 되는 리스트를 제공하는 것이 핵심 사용성으로 시작했다. 하지만, 오늘, 어제, 특정일의 소비 합계는 얼마인지, 돈이 언제 얼마나 들어왔고 나갔는지 한눈에 파악하기 어려움이 있었고, 이를 해결하기 위해 소비내역에 달력을 넣기로 함
(출처:https://toss.tech/article/thinking-user-perspective)

사내 사용성 테스트에서는 대체로 어려움 없이 달력을 발견하고 여닫는 방법을 이해한다고 보여졌으나, 실제로 사용자들 이용 추이를 분석해보니 달력을 열어보는 사용자들의 수가 너무 적다는 것을 알게되었다.
일반 사용자들은 상대적으로 메이커만큼 높은 UI 이해력을 가지고 있지 않을 수 있다는 사실을 간과한 것이다.

이를 개선하기 위해 토스는 달력을 여닫는 모션 튜토리얼을 넣기도 하고, 최초 1회 달력이 열린 상태로 화면을 마주하도록 하기도 했으나, 여전히 사용자가 적었다.

그렇게 수정된 형태는 사용자에게 익숙한 '탭'형태의 UI 로 개선하였고, 그 결과 달력을 열어보는 사용자가 4배 정도 늘어났다.

 

3) 배달의 민족

✅ UX/UI 특징

• 친근한 브랜등(한글 타이포, 유머 요소 활용)
• 간단한 메뉴 구성으로 사용자가 원하는 기능을 빠르게 찾을 수 있음
• 배달 현황을 실시간으로 확인할 수 있는 UX 설계

✅ 성공 요인

• 복잡한 배달 과정을 단순한 버튼과 직관적인 아이콘으로 표현
• '찜한 가게' 등 사용자 맞춤형 기능 제공

✅ 상세 사례: 사용자에게 즐거운 경험을 주는 깨알 기능
배민 앱 속에는 깨달 디테일을 많이 숨겨놓았는데, 앱 화면을 밑으로 당길 때마다 나오는 '땡겨요' 기능이 있다.
25년 현재는 다른 문구인 '땡겨서 기분까지 새로고침', '땡겨서 배고픔도 리프레시' 등의 문구가 나온다.

출처:https://story.baemin.com/3462/?highlight=uI%20개선

오늘은 좋은 UX/UI에 대한 기준과 특성, 그리고 대표적인 사례와 세부 사례까지 살펴보았다. 아직은 모든 것이 낯설지만 지속적으로 다양한 사례를 살펴보고 공부하다보면 확장된 사고를 할 수 있는 능력이 쌓일 것이라 생각한다. 꾸준히 기록해보자!