내 핸드폰 속 카카오 앱은 9개: 카카오뱅크 속 UX 법칙 살펴보기 | 코드스테이츠 PMB 13기

🙈 들어가기 전에..

 

오늘은 UX 법칙에 대해서 배웠다. 모피즘이라는 단어는 지나가듯이 몇 번 들었는데, 오늘 제대로 뭔지 알 수 있어서 좋았다.

내 핸드폰에 뉴모피즘으로 디자인된 앱이 얼마나 있나 확인하려고 핸드폰을 뚫어져라 쳐다봤는데,

정말 미세하게 약~간 음영이 져있는 앱이 하나 있는 걸 발견할 수 있었다. 찾았다 요놈

UX를 더 이해하고 싶어 요즘 (읽으라는 북클럽 책은 안 읽고) <좋은 서비스 디자인>이라는 책을 읽고 있다.

거기서 발췌한 문장을 적어본다.

 

시카고의 건축가 루이스 설리번의 '형태는 기능을 따른다'는 말은 건축뿐만 아니라 서비스에도 적용된다.
건물의 외관을 보고 건물의 목적을 이해하는 것처럼, 기능을 보여주는 방식으로 서비스를 디자인할 경우 사용자가 서비스의 목적을 이해하기가 더욱 쉽다.
(...) 목적이 분명한 제품은 별다른 마케팅을 하지 않아도 잘 팔리게 된다.

<좋은 서비스 디자인> 루 다운, 유엑스 리뷰, p.63

 

프로덕트 디자인의 최우선 과제는 개성을 뽐내기보다는 고객의 목적을 달성하는 데 있어 도움이 되는 것이다.
이를 위해 디자이너는 한 번에 적절한 정보량을 전달할 수 있도록 레이아웃을 설정하고, 가독성을 높여야 한다. 보기 좋아야 함은 물론이다. 

 

오랜만에 비헨스와 드리블에 들어가서 디자이너들의 포트폴리오를 둘러보았다. ..세상에는 능력자가 참 많다는 생각이 들었다!
저녁에는 유튜브 알고리즘에 '디자인 피드백'을 해주는 영상이 뜨길래 한 번 봤다. ..세상에는 정말 구린 디자인을 하는 사람들도 많구나!
우물 속 개구리가 되지 않기 위해 많이 보고 많이 배워야겠다는 생각이 들었다.

 

그럼 오늘의 과제를 시작해보겠다.

 

---

 

W4D2

오늘 배운 10가지 심리학 법칙 중 최소 6개 이상을 적용해 카카오뱅크 앱을 분석해 보세요.

어떤 요소가 어떤 심리학 법칙과 연계되어 있나요?
해당 법칙이 고객의 어떠한 불편을 해소해 주었나요?

 

⛳️ 밀러의 법칙, 피츠의 법칙, 제이콥의 법칙, 도허티 임계

 

 

나는 오늘 과제의 프로덕트로 카카오뱅크를 선정해보았다.
대학에 입학하고 나서 처음으로 만든 카드가 카카오뱅크에서 만든 거다. 
금융에 대해서 아무것도 모르던 나도 너무 쉽게 사용할 수 있어서 놀랐던 기억이 있다.

위의 사진에 표시해둔 알파벳을 기준으로 순서대로 글을 작성해보았다.

 

A. 포스텔의 법칙
포스텔의 법칙에 따르면, 프로덕트는 사용자가 수행하는 다양한 입력방식을 고려해 디자인되어야 한다.
그리고 그 방식을 이해하는 데 그치지 않고, 컴퓨터가 이해할 수 있도록 처리할 수 있어야 한다.
프로덕트가 사용자에게 요구하는 것이 적을수록 좋다. 그리고 이에 대한 가장 대표적인 사례가 페이스 아이디 로그인이다.
카카오뱅크도 로그인 방법으로 페이스ID 방식을 지원한다.
페이스아이디는 정말 신기하다. '진짜 이런 자세로 쳐다봐도 열린다고?' 싶을 때가 있다.
안경에 김이 서리거나 마스크를 쓰고있지 않는 이상, 별 이상한 상태에도 정상적으로 로그인 처리가 된다.
정말 편하다.

B. 피츠의 법칙
꼭 위에 표시해둔 부분이 아니더라도, 카카오뱅크 앱은 전반적으로 항목 간의 간격이 충분히 넓다.
하지만 그 중에서도 '이체, 카드이용내역'에 표시한 이유는
손가락이 닿기 가장 쉬운 곳에 사용자들이 가장 많이 쓰는 기능을 배치한 것이 인상적이었기 때문이다. 
사용자들은 주로 통장에 돈이 얼마나 남았는지 확인하기 위해, 이체를 하기 위해,
얼만큼 썼는지 내역을 확인하기 위해 앱에 접속한다. 그래서 가장 큰 박스에, 가장 눈에 잘 띄는 곳에 배치한 것이다.
세이프박스, 저금통과 같은 부수적인 기능들은 그보다 조금 작은 폰트와 박스 크기로 아래에 배치해 덜 강조한 것을 확인할 수 있다.

C. 제이콥의 법칙
픽토그램을 활용해 간단하게 메뉴판을 표시하고 있다.
다만 한 가지 신경쓰였던 건 두 번째 이미지랑 네 번째 이미지를 구별하는 기준이었다.
네모로 만든 네모와 동그라미로 만든 직선의 차이는 도대체 뭘까?
곰곰히 생각해보면 사람들은 네모 모양의 픽토그램을 숨겨진 메뉴를 확인할 때 클릭한다.
아래 구글 홈페이지 아이콘과 같이 말이다.
동그라미로 만든 선 모양은 '더 보기'의 의미를 전달한다. 더 부차적인 정보들을 확인하고 싶을 때 클릭한다.
실제로 동그라미 선(?)을 클릭하면 카카오뱅크 내부의 모든 세세한 기능들을 확인할 수 있다. 
이런 소소한 의문거리가 있어도 사람 모양, 종 모양 등의 아이콘은 거의 모든 사람들이 동일하게 인지하는 것이므로
이 부분이 제이콥의 법칙을 따르는 것이라고 생각해보았다.

D. 도허티 임계
카카오뱅크 세이프박스는 사용자가 자유롭게 돈을 저장해두고 빼내서 쓸 수 있는 기능을 제공한다. 
나는 돈이 들어오면 세이프박스에 넣어뒀다가 몇 만 원 단위로 조금씩 빼서 사용한다.
이때 흥미로운 점은 옆의 스크롤바를 이용해 어느 정도 수준까지 돈을 넣고 뺄 것인지 정할 수 있다는 것이다.
스크롤바를 이동시키면 즉각적으로 뒷배경의 색상 비율이 달라진다.
돈을 넣으면 넣을수록 위의 사진 속의 핑크색 배경의 높이가 올라가고, 빼면 뺄 수록 내려가는 것을 확인할 수 있다.
동시에 핸드폰에는 미세한 진동이 생긴다. 마치 커터칼을 사용하려고 칼을 뺄 때 느끼는 느낌과 비슷하다.
이러한 효과들은 사용자에게 흥미를 유발하는 요소가 됨과 동시에
사용자가 돈의 흐름(얼만큼 빠지고 들어오는지)을 즉각적으로 파악할 수 있게 도와준다고 생각한다.

 

? 구글은 동그라미로 네모를 만들었다.

 

 

 

 

 

⛳️  피크엔드 법칙, 밀러의 법칙, 테슬러의 법칙

 

 

E. 피크엔드 법칙
나는 카카오뱅크의 저금통 기능을 좋아한다.
이 기능을 사용하면카뱅이 통장 잔고에서 1000원 이하의 자잘한 돈을 떼가서 사용자 몰래 모아준다.ㅋㅋ
그리고 아이콘을 활용해서 '당신이 이만큼 모았어요!'를 짐작할 수 있게 해준다.
예전에는 매달 5일에만 얼마를 모았는지 구체적인 금액을 확인할 수 있어서 좀 짜증났었는데
나처럼 짜증낸 사람이 생각보다 많았는지 요즘에는 매 순간 확인할 수 있게 바뀌었다.
이 부분에서 피크엔드 법칙을 떠올린 이유는 사용자가 금액을 확인하기 위해 스크롤을 하는 순간
굉장히 귀여운 이모티콘들이 쏟아지기 때문이다.
쏟아지는 이모티콘은 사용자가 재미를 느끼게 하고 잔돈을 모으는 것이 괜찮은 경험이라고 생각하게 만든다.
마지막에 느끼는 감정 '재밌다!'가 저금이라는 행위와 관련되면서,
사용자는 저축과 관련해 긍정적인 인식을 형성할 수 있지 않을까.

F. 밀러의 법칙
카뱅은 여러 금융 상품들을 성격에 따라 분류하고 사용자들이 자신에게 필요한 서비스를 쉽고 빠르게 찾을 수 있게 한다. 
몇 개의 카테고리를 기준으로 세부 서비스들을 분류하고,
위의 사진 속 노란색 배너와 같이 카테고리 사이사이에 내부 서비스 광고를 삽입해두었다. 
배너가 구분선 역할도 수행하는 것이다.
사용자들은 카테고리에 따라 그 안에 든 제한된 콘텐츠만 보면 되기 때문에 한 번에 적절한 양의 정보를 수용할 수 있게 된다.

G. 테슬러의 법칙
카카오뱅크 UI는 전반적으로 매우 깔끔하다. 최소한의요소를 활용해 직관적으로 서비스를 설명한다.
그런 카카오뱅크가 가장 말이 많아지는 순간은 금융 상품을 소개할 때다.
위의 사진을 보면, '모임통장' 딱 한 마디만 쓰는 게 아니라 '함께쓰고 같이봐요'라는 멘트를 추가해둔 것을 확인할 수 있다.
이러한 부가적인 멘트(마이크로카피)는 여러 사람이 동시에 관리할 수 있는 입출금 통장 서비스임을 짐작할 수 있게 한다.
연 이율도 바로 표시해 사용자가 원하는 정보를 제공한다. 다른 상품들을 보면 우대금리 기준도 한 번에 확인 가능하다.
금융상품과 관련된 항목을 제외하고는 최소한의 정보량으로 전체 서비스를 파악할 수 있게 했다.

 

---

 

🙈 마무리하며..

자러가자..