[UX레퍼런스] 현대카드 홈화면 : 탐색 경험에 집중한 피드형 UI

카드사 앱 중 가장 트렌디하고 차별화된 UI/UX를 보여주는 현대카드.
오늘은 현대카드 앱의 홈화면 UX를 분석하고, 현대카드가 어떤 고객 경험을 추구하고 있는지 살펴보려고 합니다.
먼저 큰 틀에서 홈화면이 어떻게 구성되어 있는지 먼저 분석해 보겠습니다.

 

홈화면 구성

현대카드 홈화면 구성

1. 앱바(App Bar)

상단에는 앱의 대표 메뉴와 알림 아이콘이 고정되어 있습니다.
알림, 혜택, 금융, 자산, 앱카드 등 주요 메뉴로 바로 이동할 수 있게 되어 있어 상위 구조로의 접근성을 높여줍니다.
고정된 앱바를 통해 사용자는 스크롤 상태와 관계없이 주요 기능에 빠르게 접근할 수 있습니다.

 

2. 퀵메뉴(Quick Menu)

앱바 아래에는 자주 쓰이는 기능들을 원형 아이콘으로 제공하고 있습니다.

• 예: 민생소비쿠폰, 보유 바우처, 브랜드 혜택 등

사용자의 사용 이력 또는 관심도에 따라 개인화되어 제공되는 점이 특징입니다.
모바일 환경에서 빠른 조작이 가능하도록 직관적이고 공간 효율적인 UI로 구성되어 있습니다.

 

3. 공지사항 영역

일시적인 주요 공지나 이벤트 정보를 보여주는 영역입니다.
현재는 “민생회복 소비쿠폰 신청일 안내”처럼 중요한 알림과 신청 버튼을 함께 제공하여 바로 액션할 수 있도록 유도합니다.
텍스트 + 버튼의 조합으로 정보 전달과 행동 유도가 동시에 이뤄지도록 설계되었습니다.

 

4. 콘텐츠 영역

현대카드의 다양한 제휴/혜택/상품 등을 피드 형태로 제공하는 구간입니다.
세로 스크롤에 카드 타입과 가로형 캐러셀 형태가 섞여 있어 사용자 경험에 변화를 주며 지루함을 줄입니다.
카드형 콘텐츠를 통해 새로운 정보나 혜택을 발견하는 흐름을 유도합니다.
콘텐츠 내용 또한 시각적으로 돋보이는 이미지와 간결한 문구로 구성되어 스크롤 중 빠른 이해가 가능하도록 설계되어 있습니다.

 

5. 카드 플레이트 영역

화면 하단에는 사용자의 결제 예정 금액 또는 명세서 요약을 보여주는 카드 형태의 플레이트가 고정되어 있습니다.
사용자가 가장 궁금해할 수 있는 정보(이번 달 결제 금액 등)를 강조하고, 터치 시 상세로 확장되는 구조입니다.
단순 요약이 아닌, 사용자 행동을 유도하는 진입 포인트 역할도 하는 것이지요.

 

💡 요약

섹션명	주요 기능/특징
앱바	상단 고정 메뉴, 주요 기능 빠른 접근
퀵메뉴	개인 맞춤 구성
공지사항	이벤트/주요 안내 제공, 높은 주목도
콘텐츠	피드형 정보 탐색, 카드형 콘텐츠 활용
카드 플레이트	결제 정보 요약, 터치 시 확장

 
다음으로는 콘텐츠 영역의 구성을 더욱 자세히 들여다보겠습니다.

---

콘텐츠 영역 구성

세로 스크롤 + 가로 캐러셀의 하이브리드 구조

현대카드 홈 - 콘텐츠 영역 구성

현대카드 앱의 콘텐츠 영역은 세로 스크롤 인터랙션을 기반으로 카드형 콘텐츠와 가로형 캐러셀이 조합된 하이브리드 구조로 설계되어 있습니다. 덕분에 사용자는 단조롭지 않게 다양한 정보를 탐색할 수 있습니다.
그럼 카드형 콘텐츠와 가로형 캐러셀의 특징을 각각 살펴볼까요?
 

1. 카드형 콘텐츠 

카드형 콘텐츠들이 스크롤에 따라 연속적으로 배열되어 있으며, 1:1 비율과 5:3 비율 카드가 섞여 있습니다.
메뉴 바로가기, 일반 콘텐츠, 혜택 안내 등 다양한 콘텐츠들이 2가지의 형태로 정돈되어 제공되고 있는데요,

• 주목도 있는 시각 콘텐츠나 이미지 중심의 콘텐츠
• 정보 밀도가 높은 텍스트/데이터 중심의 콘텐츠

로 구성되어 있습니다.
또 각 카드마다 좋아요 버튼이 포함되어 있어 좋아요한 콘텐츠를 다시 모아볼 수도 있습니다.

💡UX 포인트

- 콘텐츠 크기를 달리하여 리듬감 있는 탐색 경험 제공
- 반복적인 카드 패턴 안에서도 비주얼 중심 / 정보 중심을 분리해 표현

 

 2. 가로형 캐러셀: 카드 추천 및 개인화 영역

중간중간 가로 슬라이드 형태의 캐러셀 영역이 등장하며, 같은 주제로 묶은 추천 콘텐츠가 노출됩니다.

현대카드 캐러셀 애니메이션

또한 좌우로 슬라이드하면 카드 크기가 변하는 마이크로 인터랙션도 볼 수 있어 탐색의 재미를 더하고 자연스럽게 시선을 유도합니다.

💡UX 포인트

- 많은 콘텐츠를 공간 효율적으로 배치할 수 있음
- 마이크로 인터랙션으로 몰입도를 높이는 형식
- 상하 스크롤 중간에 좌우 인터랙션을 삽입해 탐색 리듬을 깨지 않으면서도 변주 효과

---

종합 인사이트

종합해보자면, 현대카드 앱은 상단 앱바와 하단 카드 플레이트를 고정함으로써 사용자가 언제든 주요 기능(ex. 알림, 메뉴 이동, 결제 정보 확인)에 빠르게 접근할 수 있는 안정적인 탐색 구조를 제공하고 있습니다.
한편, 그 사이를 채우는 피드 기반 콘텐츠 영역은 카드와 캐러셀을 유기적으로 섞어, 사용자가 앱을 ‘돌아다니며 찾는’ 방식이 아닌 자연스럽게 발견하는 탐색 경험을 추구하고 있어요.
즉, 고정 메뉴를 통해 방향성을 잃지 않으면서도 콘텐츠 흐름 속에서 흥미로운 정보 노출과 주제 기반 추천이 이뤄지는 구조인거죠.
이처럼 현대카드 앱은 정보 접근성과 콘텐츠 탐색의 균형을 통해 사용자가 피로감 없이 머무를 수 있는 UX를 만들고 있습니다.
 
이 구조는 특히 이커머스나 핀테크 등 다양한 콘텐츠를 가진 서비스에서도 활용할 수 있을 것 같은데요,

• 정보를 일일이 찾아보게 하기보다 발견하게 만들고 싶을 때
• 사용자에게 반복적으로 확인하거나 주목해야 할 정보가 있을 때

경험을 설계하는 좋은 레퍼런스가 될 것 같습니다. 

💡  현대카드 홈화면 UX 인사이트

1️⃣ 주요 메뉴는 항상 노출되는 앱바 상단 고정을 통해 사용자가 방향 감각을 잃지 않도록 돕습니다.
2️⃣ 사용자가 반복해서 확인하는 정보(결제 정보, 포인트, 주문 상태 등)가 있다면 하단 고정으로 배치해보세요. 스크롤 중에도 쉽게 접근할 수 있습니다.
3️⃣ 콘텐츠나 혜택이 동적으로 자주 바뀌는 서비스라면, 피드 기반의 카드형 레이아웃을 활용해보세요. 특히 세로 스크롤 + 가로 캐러셀 조합은 정보의 밀도를 높이면서도 탐색 피로감을 줄일 수 있습니다.

 
그럼 오늘도 나를 위해 일하는 하루 되시길 바라며 글을 마칩니다.