brunch

매거진 PM 신병 훈련소의 기록

라이킷 50 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 이상현 Aug 19. 2022

현대카드 앱이 세련돼 보이는 이유

[코드스테이츠 PMB 13기] | '현대카드 앱'에 담긴 UX 심리학

1. 제이콥의 법칙(Jakob’s Law)

사용자는 다른 웹사이트를 통해 축적된 경험을 바탕으로 디자인 관례에 대한 기대치를 형성한다.

관련된 개념으로 멘탈 모델(Mental Model)이라는 심리학 용어가 있다. 멘탈 모델은 우리가 어떤 시스템에 관해, 특히 그 시스템의 작동 방식에 관해 알고 있다고 생각하는 것을 가리키는데, 디자인이 멘탈 모델과 어긋나면 부조화가 발생하고 유저는 불편함을 느낀다. 따라서 UX/UI 디자이너와 유저의 멘탈 모델 간의 거리를 줄이는 것, 이것이 디자이너의 주요한 과제라고 한다.

현대카드 역시 유저의 학습 비용을 발생시키지 않기 위해 익숙한 패턴을 사용한다. 화면 상단의 햄버거 아이콘을 선택하면, 역시 익숙한 모양으로 제작된 CTA 버튼이 삽입되어있다. 유저는 크게 주의를 기울이지 않고도 '돋보기 = 검색, 종 = 알림, 톱니바퀴 = 설정'의 관계를 인지할 수 있다. (이렇게 써놓고 실험실 플라스크 같은 아이콘은 추측이 어려웠는데, 눌러보니 최근 디지털 서비스 발굴을 위한 실험 공간 ‘현카연구소’로 진입했다!)

또한 홈 화면에서 스크롤을 내리다 보면, 신용카드 모양의 프레임에 정보들이 담겨있는 것을 확인할 수 있다. 카드사로서의 아이덴티티를 드러냄과 동시에, 유튜브 등 위아래로 스크롤을 이동하며 콘텐츠를 탐색하는 데 익숙한 유저들을 위한 작동 방식으로 보인다.

2. 밀러의 법칙(Miller's Law)

보통 사람은 작업 기억에 7(±2)개의 항목 밖에 저장하지 못한다.

출처 : https://hungrypooh.tistory.com/55

위처럼 같은 숫자 묶음이라도, 오른쪽처럼 몇 개의 덩어리로 나누어 기억하는 게 더 쉽다는 것이다. 이렇게 기억의 단위를 바꾸는 것을 '청킹(Chunking)'이라고 한다.

앱 내 햄버거 버튼을 클릭해 카테고리를 확인해보면, [내 자산], [한도 관리] 등 대분류 아래 세부 카테고리들이 모두 7개 이내로 구성되어있다. 현대카드는 금융 서비스의 특성상 복잡하게 나열될 수밖에 없는 다양한 기능들을 잘게 나눴다. 유저가 각 항목을 조금 더 쉽게 이해, 처리하고 기억할 수 있게 해 피로감을 줄였다.

다만, 유일하게 [기본 혜택] 대분류만 8개의 카테고리로 구성되어있다. 밀러의 법칙이 기준을 5개에서 9개 사이로 두고 있긴 하지만, 다른 항목과 달리 유저가 좀 더 주의를 기울이기 쉬운 '혜택'과 관련돼있기에 한 항목 정도를 더 넣지 않았을까 추측해본다.

3. 심미적 사용성 효과

사용자는 보기 좋은 디자인을 사용성이 더 뛰어난 디자인으로 인식한다.

사람들은 제품이나 서비스의 디자인이 심미적으로 만족스러울 때 마이너한 사용성 이슈들에 더 관대하다. 심미적인 디자인은 그렇지 않은 디자인에 비해 유저의 긍정적인 태도를 유발하기 훨씬 쉽다고 하니, 아름다움이 디자인에 있어 얼마나 중요한 가치인지 짐작 가능하다.

현대카드는 가장 처음 마주치는 로딩 화면부터 심플하고 깔끔한 느낌을 준다. 검은색 배경에 현대카드 로고, 하단에 2021 iF 디자인 어워드 수상 배지만 배치했다. 홈 화면에서도 신용카드 모양의 프레임에 콘텐츠를 제공하는데, 여기선 다채롭고 강렬한 색상을 활용해 유저의 눈길을 끈다.

단순히 수익/지출 내역만 안내할 수 있는 연간 명세서 화면도, 모던한 느낌의 레이아웃과 센스 있고 귀여운 마이크로카피로 유저에게 '세련된 앱을 사용하고 있다'는 만족감과 심미적 가치를 전달하고 있다.

4. 도허티 임계(Doherty threshold)

사용자의 주의가 분산되는 것을 막고 생산성을 높이려면, 시스템 반응은 0.4초 내에 이뤄져야 한다.

디자이너는 디자인 요소를 활용해 사용자 경험을 개선할 수 있다. 그중 기술적으로 실제 반응 속도를 줄이지 않고도 유저가 느끼는 체감 대기 시간을 감소시킬 수 있는데, 현대카드의 스켈레톤 UI와 Progress bar/Progress indicator를 보면 확실히 이해할 수 있다.

현대카드 앱 내 스켈레톤 UI

먼저 현대카드는 각 화면 상세 이미지 활성화 전, 스켈레톤 UI를 통해 미리 형태를 전달한다. 로딩이 길어지면 유저는 '앱 문젠가? 네트워크에 문제가 있나?'와 같은 생각이 들고 불편함을 느낄 수 있다. 마치 와이어프레임처럼 보이는 음영 블록 등으로, 실제 데이터가 자리할 영역을 임시로 채워 인터랙션 하면서 유저가 느낄 불편함을 최소화하고 이탈을 방지한다.

현대카드 마이데이터 내 자산 연동 화면

신용 정보 제공 등 마이데이터 서비스를 위한 자산 연동을 진행 중, 화면 하단의 프로그레스 바(Progress bar)를 통해 진행 상황을 확인할 수 있었다. 또한 연동이 진행됨에 따라, 다람쥐가 물을 주고 나무가 점점 자라나는 간단한 애니메이션을 추가함으로써 불확실성을 줄여주고, 유저의 지루함과 체감 대기 시간을 줄여주는 효과를 가져왔다.

5. 본 레스토프 효과(Von Restorff Effect)

비슷한 사물이 여러 개 있으면 그중 가장 차이 나는 한 가지만 기억할 가능성이 크다.

중요한 정보의 사이즈, 컬러, 위치, 모양 등을 조절하면서 해당 요소가 다른 요소들과 시각적으로 구별될 수 있도록 해야 한다.

첫 번째로 블랙/화이트/그레이 세 가지 컬러 위주로 구성된 홈 화면에, M포인트 사용 이벤트 관련 카드 프레임의 색상에 차이를 두면서 유저의 유입을 유도한다. 단기 카드대출이나 리볼빙 화면의 경우에도 CTA에 약간의 입체감과 색감 강조로 대출이나 결제 금액 이월이라는 행동을 촉진하고 있다.

또한 결제 요약 정보를 보면, 유저가 결국 이 화면에서 알고 싶은 것은 '이번 달에 얼마가 빠져나가는지', 총 결제 금액일 것이다. 총 결제 금액 역시 크기를 키우고 볼드 처리하면서 유저의 눈에 좀 더 쉽게 노출될 수 있도록 했다.

6. 피츠의 법칙(Fitts' Law)

대상에 도달하는 시간은 거리가 가까울수록, 크기가 클수록 빨라진다.

2013년 스티븐 후버의 핸드폰 사용 관찰 연구에 따르면, 핸드폰 사용 시 한 손만 사용하는 경우가 49%, 한 손으론 핸드폰을 받치고 다른 손으로 화면을 터치하는 경우가 36%, 양손 모두 이용하는 경우가 15%라고 한다.

또한 사용 시 엄지손가락을 사용하는 경우가 75%라고 하니, 이 '엄지 존 영역'과 피츠의 법칙을 고려해 화면을 디자인하는 것이 중요할 것이다.

나 역시 그렇지만, 현대카드 앱을 이용하는 고객이 가장 많이 이용하는 것이 '월간 결제 금액 확인'일 것이다. 현대카드는 이를 화면 하단에 배치하고 그보다 아래에 '즉시결제', '분할납부' 등 엄지손가락으로 선택하기 편안한 위치에 두어 유저가 납부 서비스 기능을 편안하게 사용할 수 있도록 했다. 가운데 콘텐츠 프레임 역시 엄지 손가락이 닿기 편안한 위치로 배치했다.