부트캠프 3~4주차 : 카카오톡 유저플로우, 비즈니스 로직 분석 및 개선 미션

미션 내용

1. '유저는 새로운 친구를 ID로 검색해서 찾을 수 있다.' 유저플로우 선택
2. 유저스토리 관점에서 분석/핵심 기능 흐름 정리
3. 클론 디자인 (브랜드 아이덴티티, UI 구성, 화면 전환 방식 분석 후 디자인에 적용 + 폰트/컬러/아이콘 등 가능한 한 실제 서비스와 유사하게 구현)
4. 심화 1단계 : 브랜드 & 비즈니스 로직 고려해 추가화면 및 UX 개선 아이디어 제시 및 몇몇 화면에 적용
   1. 카카오톡 브랜드의 톤앤매너를 유지하면서, 해당 플로우에서의 비즈니스 목표를 어떻게 표현할지 고민
   2. 실제 서비스 사용성을 고려한 추가 화면 혹은 UX 개선 아이디어 제시
5. 심화 2단계 : 인터랙션 표현
   1. 모달, 스크롤, 탭 전환, 알림 메시지 등 사용자 상호작용 (UX) 요소를 설계하거나
   2. 프로토타입 기능을 사용해 클릭/탭 시 화면 전환을 간단히 체험할 수 있게 만들기

---

카카오톡 ID로 친구추가 기능 해부

유저플로우 분석 실습

 

상단 앱바 중 친구추가 아이콘 찾아 터치

불편한 점 1 : 내 아이디를 친구추가에서 확인 / 내프로필-더보기-내프로필공유(3 depth)로 확인해야 하는 것

불편한 점 2 : 검색 아이콘 버튼과 친구추가를 혼동

검색 돋보기와 친구추가 버튼 중 플러스 친구 추가의 경우 어디에 들어가야하는지 한 번에 알기 어려웠다. 유저플로우 기준 3번째 화면에 들어가 검색까지 해봐야 플러스친구는 여기서 추가하는 것이 아님을 알 수 있었다.

앱바에 기능 설명 라벨이 없는 것은 유저가 이미 익숙하고 복잡도를 높이지 않기 위함이 목적이지만, 돋보기 아이콘의 기능이 왠지 모호하다는 단점이 있다.

차라리 상단 app bar가 채팅 탭에서도 통일 되었다면 같은 기능이라는 점을 인식하기 더 쉬웠을 수도...

 

좋은 점 : 메인에서 내 프로필과 관련된 task를 상단 내 프로필 우측 app bar에 위치시켜 직관적으로 친구추가를 찾을 수 있음. 내 아이디는 중요하지만 자주 쓰지 않아 어디서 찾아야 할지 헷갈리기에 여러 뎁스를 거치지 않도록 복잡한 구조를 단축

ID 아이콘 터치

내 아이디와 큐알코드 + 상단에 네가지 친구추가 방법 화면 (친구 추가 수단이구나 인지, 아래에는 내 이름과 함께 아이디를 배치해 내 아이디임을 알려주고, 같은 카드에 삽입된 QR이 내 프로필을 추가하는 QR임을 인지)

다양한 친구 추가 수단 확인 가능.

딤드 처리를 통해 메인화면에서 크게 벗어나지 않아 금방 돌아올 수 있다는 인지를 심어줌.

 

 

 

 

 

 

상대 아이디 입력

자동으로 키보드 입력창이 화면 들어가자마자 노출되고 검색창은 입력 중 상태로 진입해 터치 횟수를 한번 줄임, 다시 한번 내 아이디도 노출시켜서 여백을 줄이고 안정감을 주고 내 아이디를 보기 위해 진행 중인 작업을 그만두고 돌아가지 않아도 되게 하였다.

 

 

 

 

 

 

 

 

 

아이디 검색

타이핑과 동시에 글자수 세기 시작, 입력 전체삭제 버튼아이콘은 인풋 박스 오른쪽 끝에 배치해 입력 중인 텍스트와 충분한 여백으로 분리되도록 했다.

positive 한 Add friend 버튼은 카카오톡의 상징색이자 채도가 높은 노란색으로, 반대로 negative 하고 목적에 반하는 Block 버튼은 명도는 비슷하지만 뉴트럴한 컬러로 시각적으로 채도 높은 노랑 버튼이 눈에 띄도록 위계를 준다. 위치 또한 오른손잡이가 많은 특성상 노란 버튼을 누르기 쉽게 오른쪽에 배치하였다.

 

친구 추가 완료

친구 추가 후 "successfully added."라는 문구로 추가 완료 되었음을 1차 인지 시키고, 간단한 프로필 관련 task를 해결할 수 있도록 총 3개의 단축 기능을 제공한다. 별명 수정 가능 표시의 연필 아이콘을 이름 옆에 생성한다. 이전 화면과 마찬가지로 중요도가 낮은 'change profile'버튼에는 뉴트럴 컬러를, 바로 활용할 가능성이 높은 'chat'기능과 이어지는 버튼은 노랑으로 위계를 나누어준다.

Add Friend 버튼에서 chat 버튼으로 전환되면서, 더이상 add friend task는 완료되었으니 시도할 필요 없으며, 자연스럽게 다음 단계로 넘어갈 수 있게 친구추가가 성공적으로 되었다는 사실을 자연스럽게 인지시킨다. 같은 화면에서 작은 요소의 변화나 텍스트 한 줄의 추가로 주의를 크게 돌리지 않고 전환이 빠르고 부드럽게 된다는 인식을 줄 수 있다. 만약 'successfully added'같은 문구를 팝업으로 따로 띄웠다면 사라질 때까지 기다려야 하거나, x를 눌러 행동을 늘려 오히려 불편함만 줄 수 있었는데 이렇게 단축시키면서 ux를 고려한 디자인이 될 수 있었다.

오른쪽 이미지 참고) 모바일 디바이스에서 위보단 아래, 왼쪽보단 오른쪽이 터치편의성을 고려하기 좋은 위치
정보 전달 화면 구조가 아닌 상호작용 구조(버튼, 인풋박스 등)일 경우 이를 먼저 고려하는 것이 좋겠다.

 

---

클론 디자인 프로토타입

 

피그마 바로가기

Figma

---

카카오톡 비즈니스 로직

 

비즈니스 로직이란,

'서비스가 돈을 벌거나, 목표를 달성하기 위해 작동하는 내부 규칙'

이 서비스는 어떤 기준으로 움직이고, 어떤 조건에서 어떤 결과를 내는가? 를 결정하는 규칙들의 집합

비즈니스 로직을 알고 싶다면 의도를 파악하면 된다. 모든 화면은 의도를 가지고 만들어졌다.

 

카카오톡은 메신저로 시작해 초기부터 전화번호 기반 프로필 자동 연결로 유저 수를 공격적으로 확보하면서 이탈 비용을 늘려 lock-in 효과를 만들었다. 이후 서비스 내의 관계망을 더욱 고도화시키고 체류시간을 늘릴 engagement로 오픈채팅, 나우, 채널, 프로필 뮤직 등을 채택해 플랫폼화 되었고, 카카오톡 선물하기에서 쇼핑까지 확장하면서 일상의 모든 관계에 이벤트를 연결 지어 감정과 상황이 소비로 이어지게 했다. 카카오톡은 통신 수단 → 관계 인프라 플랫폼으로 역할이 확장되었다.

 

다시 정리하자면,

카카오톡의 비즈니스 로직은 관계 데이터를 독점하는 데서 출발한다.
연결 수를 극대화해 이탈 비용을 높이고,
관계 이벤트가 발생하는 접점에서 결제를 자연스럽게 삽입해 감정 기반 소비를 유도한다.
즉, 관계 밀도를 높일수록 수익 기회가 증가하는 구조이다.

핵심 비즈니스 로직 : 유저 간 연결 - 관계 유지 - 소비로 전환하는 3단계

 

---

유저플로우 | 유저는 새로운 친구를 ID로 검색해서 찾을 수 있다 ➜   step 1 유저 간 연결

유저 간 연결(step 1)에서는 보다 쉽게 연결되는 것이 중요하다?

 

5가지 전략

1. 연결 마찰 최소화
   • ID검색, QR, 추천친구, 연락처 자동 동기화로 연결 방식을 다양화하며 동시에 매끄럽게 진행되도록 다듬음
2. 현실관계 → 디지털 관계 자동 이식
   • 팔로우라는 개념 없이 자동으로 상호 연결이 되고 개인적 공간을 나눈다는 것에서 실제 관계가 디지털로 그대로 자연스럽게 옮겨감. 이런 연결관계가 이탈 비용을 높이고 락인 효과에 기여함
3. 연결 확장 채널 분리
   • 네트워크 층위 다각화 : 전화번호(현실 관계) / ID(의도 연결) / 오픈채팅(관심사 기반)
4. 연결 후 이탈 통제 장치
   • 원하는 범주까지 오픈하거나 닫을 수 있게 통제권을 주어서 반대로 연결로 인한 리스크를 두려워하지 않게 함
5. 네트워크 밀도 향상 관리
   • 관계 밀도는 서비스의 수익 기회와 직접 연관되어 이를 향상하기 위해 추천 친구로 빈 연결 고리를 채우고 밀도를 높임

 

유저 간 연결(step 1)에서는 연결 속도를 극대화하되, 심리적 리스크는 최소화하여 네트워크 밀도를 지속적으로 확장하는 것이 중요하다.

카카오톡은 연결을 ‘선택’이 아닌 ‘기본값(Default)’으로 설계함으로써 네트워크 형성 비용을 거의 0에 가깝게 만들었다.

 

그럼 이때 UX/UI 개선 목표로 연결을 더 쉽게, 라고만 접근한다면?

연결이 너무 쉬워졌을 때에 대한 리스크가 존재한다. (*keyword '아무나')

1차 리스크 : 스팸이나 이상 접촉 증가로 인한 플랫폼 신뢰도 하락, 개인정보 불안 상승

2차 리스크 : '아무나' 연결될 수 있어서 원치 않는 연결로 인해 관리 비용이 증가하면서 메신저에 대한 감정도 피로한 공간이라는 인식으로 부정적 변화

3차 리스크 : 불필요한 네트워크가 추천 정확도 하락, 관계 노이즈 증가, 중요 연락 놓침으로 네트워크의 질을 낮춤으로써 가치 상실

4차 리스크 : 연결이 더이상 즐거운 경험이 아니게 되면서 대체를 찾아내고 사용자를 묶어두던 lock-in 구조 붕괴

과한 연결로 로직(step 1 연결)이 무너지면?
연결이 너무 쉬우면 네트워크는 빠르게 성장하지만, 신뢰와 관계의 질이 붕괴되면 플랫폼의 장기 가치는 오히려 하락할 수 있다.

---

그래서 카카오는 연결은 쉽게, 하지만 연결 허들은 낮추면서 통제권을 사용자에게 주고 무분별하게 노출되지 않는 구조를 만들었다.

연결	통제
연락처 카톡 프로필 자동 동기화 개인마다 식별 가능한 ID, QR code 추천 친구	친구 차단 친구 숨김 친구 삭제 메시지 차단 내 프로필 비공개 멀티 프로필 전화번호로 추가 차단 아이디로 검색 추가 차단 친구 추천 제한

---

이제 다시 유저 플로우(유저는 새로운 친구를 ID로 검색해서 찾을 수 있다.)에 집중 해보면 진입 단계에서 두 가지 페인 포인트가 있었다. 

• 불편한 점 1 : 내 아이디를 친구 추가(1 depth)에서 확인 / 내프로필-더보기-내프로필공유(3 depth)로 확인해야 하는 것
• 불편한 점 2 : 검색 아이콘 버튼과 친구추가를 혼동

이었지만, 다시 한번 확인한 결과 2번째 문제는 이미 카카오톡에서 문제 상황으로 집었던 지점을 해결해두었던 것을 확인하게 되었다.

이 과정에서 나는 '내 아이디를 친구 추가(1 depth)에서 확인 / 내프로필-더보기-내프로필공유(3 depth)로 확인해야 하는 것'으로 문제를 삼고 질문을 이어가게 되었다.

2번째 문제 해결 과정은 여기에서

 

Problem

사용자는 일반적으로 자신의 정보는 ‘내 프로필’에서 확인할 수 있을 것이라는 멘탈 모델을 가지고 있다.

그러나 카카오톡에서 내 ID를 확인하기 위해서는
내 프로필 → 더보기 → 내 프로필 공유 (3 depth) 경로로 진입해야 하며, 해당 기능은 직관적으로 드러나지 않는 숨겨진 기능(hidden feature)에 가깝다.

반면 친구 추가 화면(1 depth)에서는 ID가 바로 노출되지만, 이는 사용자가 자신의 정보를 찾을 때 자연스럽게 접근하는 경로가 아니다.

이로 인해 사용자의 멘탈 모델과 서비스의 정보 구조가 일치하지 않아 ID의 발견성이 낮아지고,

사용자는 ID를 확인하기 위해 비직관적인 탐색 과정을 반복하게 된다.

 

Cause

카카오톡은 사용자가 ID를 확인하기 위해 친구 추가 화면으로 진입할 것이라고 가정한 것으로 보인다.
(근거: 친구 추가 첫 화면에서 ID가 바로 노출됨)

하지만 사용자는 일반적으로 자신의 정보는 ‘내 프로필’에서 확인한다는 멘탈 모델을 가지고 있기 때문에 먼저 프로필 화면으로 이동하게 된다.

이처럼 서비스가 가정한 사용자 행동과 실제 사용자의 멘탈 모델이 일치하지 않아 혼란이 발생한다.

 

Solution

사용자의 멘탈 모델에 맞게 내 ID를 프로필 화면에서도 확인할 수 있도록 IA를 개선한다

A : 프로필 정보 영역에 카카오톡 ID 상시 표기

B : 프로필 화면에서 바로 ID를 확인하거나 공유할 수 있는 진입점 추가

C : 프로필 이름을 터치했을때 ID가 나오는 인터랙션 제공

이를 통해 사용자가 자연스럽게 예상하는 위치에서 자신의 ID를 확인할 수 있도록 하여 탐색 과정과 인지 부담을 줄일 수 있다.

 

A안 평가 / 3.0 ✭✭✭☆☆

ID는 기본 친구 추가 포맷이 아니기 때문에 사용 빈도가 떨어진다. 내 프로필이라는 화면에서 처음부터 노출하면 사용 빈도에 비해 화면 복잡도만 높일 수 있다.

B안 평가 / 4.0 ✭✭✭✭☆

진입점을 추가하는 것은 UI를 크게 해치지 않으면서 좋은 아이디어 같다. 위치를 고려해야 한다.

C안 평가 / 4.0 ✭✭✭✭☆

프로필 이름을 터치했을 때 나오게 하는 것은 기존에 터치가 안되던 부분을 같은 디자인에 버튼 기능이 들어간다고 인지시키기 쉽지 않기 때문에 도입 초기에 툴팁과 함께 제공하는 것이 좋겠다.

 

Design

솔루션을 바탕으로 3가지 디자인 시안을 제작해봤다.

이름 옆 화살표 아이콘 추가 버전 / 프로필 섹션 슬라이드 버전 / 이름 버튼화 버전

 

 

피그마 프로토타입 링크(접속하면 직접 시연해볼 수 있다.)

Figma

 

Expectation

유저 관점	비즈니스 관점
ID 정보의 발견성 향상 사용자가 자신의 정보를 확인할 때 자연스럽게 접근하는 프로필 화면에서 ID를 확인할 수 있어 정보 발견성이 높아진다. 탐색 과정 및 인지 부담 감소 여러 메뉴를 탐색하지 않고도 프로필 화면에서 바로 ID를 확인할 수 있어 불필요한 탐색 과정과 인지적 부담이 줄어든다. 사용자 멘탈 모델과 인터페이스 구조 일치 ‘내 정보는 내 프로필에 있다’는 사용자의 멘탈 모델과 서비스 구조가 일치하여 혼란이 줄어든다. ID 공유 행동의 편의성 증가 프로필에서 바로 ID 확인 및 공유가 가능해져 친구에게 ID를 전달하는 과정이 더 빠르고 직관적으로 이루어진다.	ID 기반 친구 추가 활성화 사용자가 ID를 쉽게 확인하고 공유할 수 있어 ID 기반 친구 추가 사용률이 증가할 가능성이 있다. 친구 연결 경험 개선 사용자가 새로운 연락처와 연결되는 과정이 간편해져 친구 추가 경험 전반의 만족도가 향상된다. 서비스 이용 맥락 확장 오프라인 만남, 커뮤니티, 행사 등에서 ID를 활용한 연결 상황에서 카카오톡 사용이 자연스럽게 유도된다. 기능 활용도 증가 기존에 깊은 경로에 있어 활용도가 낮았던 ID 확인 및 프로필 공유 기능의 접근성이 개선되어 기능 사용률이 높아질 수 있다.

---

추가로 생각해볼 것

•  상단 네비게이션 앱바의 아이콘이 탭마다 구성이 달라서 직관적인 이용경험을 해치고 학습을 필요로 한다는 느낌을 받았다. 네비게이션 앱 바의 구성을 통일한다면 어떨까?

---

More...

다양한 직/간접적 수익화 사례 예시 찾아보기
UX를 고민하려면 기능의 의도와 구성에 대해 먼저 알아야한다
tip, 비슷한 곳에서 벤치마킹하기
필요한 내용을 선별하는 게 어렵다. 아직 많이 몰라서 그런 건지 문제 정의 분석 솔루션까지의 과정이 너무나도 어렵다.