Summary
Summary
Summary
인터랙션 개선으로 매출 100% 성장 — Hidden Money
인증 완료율 70.9% → 85.5%, 매출 100% 성장을 만든 인터랙션 디자인
히든머니는 사업자의 숨은 세금 환급을 찾아주는 서비스입니다. 환급 신청까지 완료해야 매출이 발생하는 구조에서, 저는 "어디서 사용자가 이탈하는가"에 집중했습니다.
Hotjar 분석 결과 3가지 핵심 이탈 지점을 발견했고, 각 지점에 맞는 인터랙션 솔루션으로 전환율을 개선했습니다.
인터랙션 개선으로 매출 100% 성장 — Hidden Money
인증 완료율 70.9% → 85.5%, 매출 100% 성장을 만든 인터랙션 디자인
히든머니는 사업자의 숨은 세금 환급을 찾아주는 서비스입니다. 환급 신청까지 완료해야 매출이 발생하는 구조에서, 저는 "어디서 사용자가 이탈하는가"에 집중했습니다.
Hotjar 분석 결과 3가지 핵심 이탈 지점을 발견했고, 각 지점에 맞는 인터랙션 솔루션으로 전환율을 개선했습니다.
인터랙션 개선으로 매출 100% 성장 — Hidden Money
인증 완료율 70.9% → 85.5%, 매출 100% 성장을 만든 인터랙션 디자인
히든머니는 사업자의 숨은 세금 환급을 찾아주는 서비스입니다. 환급 신청까지 완료해야 매출이 발생하는 구조에서, 저는 "어디서 사용자가 이탈하는가"에 집중했습니다.
Hotjar 분석 결과 3가지 핵심 이탈 지점을 발견했고, 각 지점에 맞는 인터랙션 솔루션으로 전환율을 개선했습니다.
Year:
2023. 10 ~ 2024. 09
Role:
Product Designer
Contribution:
Strategy · UX · UI
Team:
Lead Designer(Me), PM 1, Developer 4+
Tool:
Figma, Framer, CSS
Year:
2023. 10 ~ 2024. 09
Role:
Product Designer
Contribution:
Strategy · UX · UI
Team:
Lead Designer(Me), PM 1, Developer 4+
Tool:
Figma, Framer, CSS
Year:
2023. 10 ~ 2024. 09
Role:
Product Designer
Contribution:
Strategy · UX · UI
Team:
Lead Designer(Me), PM 1, Developer 4+
Tool:
Figma, Framer, CSS
Challenge
Challenge
Challenge
비즈니스 구조와 디자인 챌린지
비즈니스 구조와 디자인 챌린지
비즈니스 구조와 디자인 챌린지
수익 모델:
수익 모델:
환급 신청 완료 시 수수료 발생 (조회만으론 매출 0원)
환급 신청 완료 시 수수료 발생 (조회만으론 매출 0원)
핵심 지표:
핵심 지표:
환급 신청 완료율
환급 신청 완료율
디자인 챌린지:
디자인 챌린지:
1회성 플로우에서 이탈 없이 신청까지 유도
1회성 플로우에서 이탈 없이 신청까지 유도
비즈니스 구조와 디자인 챌린지
수익 모델:
환급 신청 완료 시 수수료 발생 (조회만으론 매출 0원)
핵심 지표:
환급 신청 완료율
디자인 챌린지:
1회성 플로우에서 이탈 없이 신청까지 유도
Hotjar 세션 200건 분석 결과 발견한 3가지 이탈 지점:
카카오 로그인 단계 — 애니메이션에 시선 분산
본인 인증 단계 — 카카오앱 이동 후 미복귀
환급액 조회 단계 — 1분+ 로딩으로 이탈
Hotjar 세션 200건 분석 결과 발견한 3가지 이탈 지점:
카카오 로그인 단계 — 애니메이션에 시선 분산
본인 인증 단계 — 카카오앱 이동 후 미복귀
환급액 조회 단계 — 1분+ 로딩으로 이탈
Hotjar 세션 200건 분석 결과 발견한 3가지 이탈 지점:
카카오 로그인 단계 — 애니메이션에 시선 분산
본인 인증 단계 — 카카오앱 이동 후 미복귀
환급액 조회 단계 — 1분+ 로딩으로 이탈
Case. 1
Kakao Login
Case. 1
Kakao Login
Case. 1
Kakao Login
Problem Discovery
Hotjar 세션 리플레이 200건을 분석한 결과, 로그인 화면에서 평균 체류 시간이 4초 이상이었습니다.
(일반적인 로그인 화면 기준 2초 이상 초과)
Analysis
Hotjar를 이용해서 사용자 행동 패턴을 분석했습니다.
과반수의 사용자가 애니메이션 영역을 먼저 응시
자동 재생 애니메이션이 CTA 버튼의 시각적 우선순위를 낮춤
Hypothesis
사용자의 시선이 애니메이션에 분산되어 로그인 전환이 지연됩니다.
시각적 계층 구조를 재설계하면 체류 시간이 단축되고 로그인 전환율이 개선될 것입니다.
Problem Discovery
Hotjar 세션 리플레이 200건을 분석한 결과, 로그인 화면에서 평균 체류 시간이 4초 이상이었습니다.
(일반적인 로그인 화면 기준 2초 이상 초과)
Analysis
Hotjar를 이용해서 사용자 행동 패턴을 분석했습니다.
과반수의 사용자가 애니메이션 영역을 먼저 응시
자동 재생 애니메이션이 CTA 버튼의 시각적 우선순위를 낮춤
Hypothesis
사용자의 시선이 애니메이션에 분산되어 로그인 전환이 지연됩니다.
시각적 계층 구조를 재설계하면 체류 시간이 단축되고 로그인 전환율이 개선될 것입니다.
Problem Discovery
Hotjar 세션 리플레이 200건을 분석한 결과, 로그인 화면에서 평균 체류 시간이 4초 이상이었습니다.
(일반적인 로그인 화면 기준 2초 이상 초과)
Analysis
Hotjar를 이용해서 사용자 행동 패턴을 분석했습니다.
과반수의 사용자가 애니메이션 영역을 먼저 응시
자동 재생 애니메이션이 CTA 버튼의 시각적 우선순위를 낮춤
Hypothesis
사용자의 시선이 애니메이션에 분산되어 로그인 전환이 지연됩니다.
시각적 계층 구조를 재설계하면 체류 시간이 단축되고 로그인 전환율이 개선될 것입니다.
Solution Exploration
검토 옵션
장점
단점
결정
A. 뒤로가기 버튼 삭제
시선 분산 제거
브라우저 백버튼으로 대체
✅ 채택
B. 버튼 위치 이동 (우측)
기존 UI 유지
F-패턴상 여전히 시선 분산
❌
C. 애니메이션 속도 조절
기존 자산 활용
근본 해결 아님
❌
Solution
넛지 텍스트 추가 — "평균 740만 원 환급" 구체적 금액으로 호기심 유발
애니메이션 → 캐러셀 전환 — 자동 재생 제거로 사용자 통제권 부여
뒤로가기 버튼 삭제 — 브라우저 네이티브 백버튼이 이미 존재하므로 중복 기능 제거
UI 정리 — 불필요한 텍스트 삭제, 메인 컬러 White → Blue로 변경
Development
프론트엔드 개발자와 2회 페어 세션 진행.
CSS 애니메이션 성능 이슈로 Lottie 대신 정적 이미지+트랜지션으로 구현 방향 조정.
Solution Exploration
검토 옵션
장점
단점
결정
A. 뒤로가기 버튼 삭제
시선 분산 제거
브라우저 백버튼으로 대체
✅ 채택
B. 버튼 위치 이동 (우측)
기존 UI 유지
F-패턴상 여전히 시선 분산
❌
C. 애니메이션 속도 조절
기존 자산 활용
근본 해결 아님
❌
Solution
넛지 텍스트 추가 — "평균 740만 원 환급" 구체적 금액으로 호기심 유발
애니메이션 → 캐러셀 전환 — 자동 재생 제거로 사용자 통제권 부여
뒤로가기 버튼 삭제 — 브라우저 네이티브 백버튼이 이미 존재하므로 중복 기능 제거
UI 정리 — 불필요한 텍스트 삭제, 메인 컬러 White → Blue로 변경
Development
프론트엔드 개발자와 2회 페어 세션 진행.
CSS 애니메이션 성능 이슈로 Lottie 대신 정적 이미지+트랜지션으로 구현 방향 조정.
Solution Exploration
검토 옵션
장점
단점
결정
A. 뒤로가기 버튼 삭제
시선 분산 제거
브라우저 백버튼으로 대체
✅ A안 채택:
B. 버튼 위치 이동 (우측)
기존 UI 유지
F-패턴상 여전히 시선 분산
B안 채택 ❌
C. 애니메이션 속도 조절
기존 자산 활용
근본 해결 아님
C안 채택 ❌
Solution
넛지 텍스트 추가 — "평균 740만 원 환급" 구체적 금액으로 호기심 유발
애니메이션 → 캐러셀 전환 — 자동 재생 제거로 사용자 통제권 부여
뒤로가기 버튼 삭제 — 브라우저 네이티브 백버튼이 이미 존재하므로 중복 기능 제거
UI 정리 — 불필요한 텍스트 삭제, 메인 컬러 White → Blue로 변경
Development
프론트엔드 개발자와 2회 페어 세션 진행.
CSS 애니메이션 성능 이슈로 Lottie 대신 정적 이미지+트랜지션으로 구현 방향 조정.
5.6%↑
서비스 인입량 증가
0.8%↑
카카오 로그인 완료 비율
Results & Attribution
지표
Before
After
변화
로그인 화면 평균 체류 시간
4초 이상
약 2초
-50%
로그인 완료율
87.8%
88.6%
+0.8%p
서비스 유입량
11,052
11,671
+5.6%
Analysis
유입량 증가(+5.6%)는 마케팅 캠페인과 동시 진행되어 UI 변경만의 기여도 분리 어렵습니다.
단, 체류 시간 50% 감소는 UI 변경의 직접적 결과로 판단됩니다. (Hotjar 비교 확인)
로그인 완료율 +0.8%p는 월간 약 50건 추가 전환에 해당합니다.
Insight
0.8%p가 작아 보이지만, 퍼널 최상단 개선이므로 이후 단계에 복리 효과가 발생합니다.
다음 스프린트에서 본인 인증 단계 개선으로 연결했습니다.
5.6%↑
서비스 인입량 증가
0.8%↑
카카오 로그인 완료 비율
Results & Attribution
지표
Before
After
변화
로그인 화면 평균 체류 시간
4초 이상
약 2초
-50%
로그인 완료율
87.8%
88.6%
+0.8%p
서비스 유입량
11,052
11,671
+5.6%
Analysis
유입량 증가(+5.6%)는 마케팅 캠페인과 동시 진행되어 UI 변경만의 기여도 분리 어렵습니다.
단, 체류 시간 50% 감소는 UI 변경의 직접적 결과로 판단됩니다. (Hotjar 비교 확인)
로그인 완료율 +0.8%p는 월간 약 50건 추가 전환에 해당합니다.
Insight
0.8%p가 작아 보이지만, 퍼널 최상단 개선이므로 이후 단계에 복리 효과가 발생합니다.
다음 스프린트에서 본인 인증 단계 개선으로 연결했습니다.
5.6%↑
서비스 인입량 증가
0.8%↑
카카오 로그인 완료 비율
Results & Attribution
지표
Before
After
변화
로그인 화면 평균 체류 시간
4초 이상 -> 약 2초
-50% 감소
-50%
로그인 완료율
87.8% -> 88.6%
+0.8%p 상승
+0.8%p
서비스 유입량
11,052 -> 11,671
+5.6% 상승
+5.6%
Analysis
유입량 증가(+5.6%)는 마케팅 캠페인과 동시 진행되어 UI 변경만의 기여도 분리 어렵습니다.
단, 체류 시간 50% 감소는 UI 변경의 직접적 결과로 판단됩니다. (Hotjar 비교 확인)
로그인 완료율 +0.8%p는 월간 약 50건 추가 전환에 해당합니다.
Insight
0.8%p가 작아 보이지만, 퍼널 최상단 개선이므로 이후 단계에 복리 효과가 발생합니다.
다음 스프린트에서 본인 인증 단계 개선으로 연결했습니다.
Case. 2
Authentication
Case. 2
Authentication
Case. 2 Authentication
Problem Definition
본인 인증 단계에서 이탈률 29.08%였습니다. (인증 시작 → 완료 기준)
Hotjar + 사용자 의견 분석 결과:
Hotjar + 사용자 의견 분석 결과:
카카오앱 이동 후 미복귀
"인증하고 나서 어디로 가야 하는지 몰랐어요"
조회 방법 선택 모달 혼란
"이미 카카오 눌렀는데 왜 또 고르라고 해요?"
입력 필드 과다
"뭘 이렇게 많이 입력해야 해요"
Goal
Goal
아래 작성한 문제를 해결하기 위해 디자인 작업에 들어가기전에 목표를 먼저 설정했습니다.
본인 인증 완료율을 70% → 80% 이상으로 상승시킵니다.
사용자가 본인 인증을 완료하고 다시 웹 브라우저로 돌아와서 환급액을 조회하도록 디자인합니다.
Problem Definition
본인 인증 단계에서 이탈률 29.08%였습니다. (인증 시작 → 완료 기준)
Hotjar + 사용자 의견 분석 결과:
카카오앱 이동 후 미복귀
"인증하고 나서 어디로 가야 하는지 몰랐어요"
조회 방법 선택 모달 혼란
"이미 카카오 눌렀는데 왜 또 고르라고 해요?"
입력 필드 과다
"뭘 이렇게 많이 입력해야 해요"
Goal
아래 작성한 문제를 해결하기 위해 디자인 작업에 들어가기전에 목표를 먼저 설정했습니다.
본인 인증 완료율을 70% → 80% 이상으로 상승시킵니다.
사용자가 본인 인증을 완료하고 다시 웹 브라우저로 돌아와서 환급액을 조회하도록 디자인합니다.
Problem Definition
본인 인증 단계에서 이탈률 29.08%였습니다. (인증 시작 → 완료 기준)
Hotjar + 사용자 의견 분석 결과:
카카오앱 이동 후 미복귀
"인증하고 나서 어디로 가야 하는지 몰랐어요"
조회 방법 선택 모달 혼란
"이미 카카오 눌렀는데 왜 또 고르라고 해요?"
입력 필드 과다
"뭘 이렇게 많이 입력해야 해요"
Goal
아래 작성한 문제를 해결하기 위해 디자인 작업에 들어가기전에 목표를 먼저 설정했습니다.
본인 인증 완료율을 70% → 80% 이상으로 상승시킵니다.
사용자가 본인 인증을 완료하고 다시 웹 브라우저로 돌아와서 환급액을 조회하도록 디자인합니다.
Solution Exploration
1. 조회 방법 선택 모달 삭제
초기 PM 피드백: "사용자에게 선택권을 줘야 하지 않나?"
반론 근거:
이전 화면에서 이미 "카카오로 계속하기" 선택했습니다.
Hotjar 분석: 모달에서 97%가 카카오 선택했습니다. (선택권 불필요)
불필요한 탭 1회 = 이탈 확률 증가
→ PM 설득 후 A/B 테스트 없이 바로 적용했습니다. (리스크 낮음 판단)
2. 복귀 안내 텍스트 추가
위치
Before
After
헤더
"카카오톡에서 인증 요청을 확인해주세요"
"인증 완료 후 이 페이지로 돌아와 주세요"
버튼 하단
(없음)
"인증 완료 후 환급액을 확인할 수 있습니다"
3. Input 영역 통합
기존 4개 분리 Input → 1개 통합 Input으로 변경했습니다.
작은 화면(iPhone SE)에서 스크롤 제거했습니다.
사용자가 직접 입력하는 영역 아님 (카카오 인증 시 자동 입력) → 시각적 비중을 축소했습니다.
Solution Exploration
1. 조회 방법 선택 모달 삭제
초기 PM 피드백: "사용자에게 선택권을 줘야 하지 않나?"
반론 근거:
이전 화면에서 이미 "카카오로 계속하기" 선택했습니다.
Hotjar 분석: 모달에서 97%가 카카오 선택했습니다. (선택권 불필요)
불필요한 탭 1회 = 이탈 확률 증가
→ PM 설득 후 A/B 테스트 없이 바로 적용했습니다. (리스크 낮음 판단)
2. 복귀 안내 텍스트 추가
위치
Before
After
헤더
"카카오톡에서 인증 요청을 확인해주세요"
"인증 완료 후 이 페이지로 돌아와 주세요"
버튼 하단
(없음)
"인증 완료 후 환급액을 확인할 수 있습니다"
3. Input 영역 통합
기존 4개 분리 Input → 1개 통합 Input으로 변경했습니다.
작은 화면(iPhone SE)에서 스크롤 제거했습니다.
사용자가 직접 입력하는 영역 아님 (카카오 인증 시 자동 입력) → 시각적 비중을 축소했습니다.
Solution Exploration
1. 조회 방법 선택 모달 삭제
초기 PM 피드백: "사용자에게 선택권을 줘야 하지 않나?"
반론 근거:
이전 화면에서 이미 "카카오로 계속하기" 선택했습니다.
Hotjar 분석: 모달에서 97%가 카카오 선택했습니다. (선택권 불필요)
불필요한 탭 1회 = 이탈 확률 증가
→ PM 설득 후 A/B 테스트 없이 바로 적용했습니다. (리스크 낮음 판단)
2. 복귀 안내 텍스트 추가
위치
Before
After
헤더
Before:
"카카오톡에서 인증 요청을 확인해주세요"
After:
"인증 완료 후 이 페이지로 돌아와 주세요"
버튼 하단
Before:
(없음)
After:
"인증 완료 후 환급액을 확인할 수 있습니다"
3. Input 영역 통합
기존 4개 분리 Input → 1개 통합 Input으로 변경했습니다.
작은 화면(iPhone SE)에서 스크롤 제거했습니다.
사용자가 직접 입력하는 영역 아님 (카카오 인증 시 자동 입력) → 시각적 비중을 축소했습니다.
70.92%
23년 누락 인증률
85.5%
24년 누적 인증률
Results
지표
23년 9월 (Before)
24년 9월 (After)
변화
인증 시작 → 완료율
70.92%
85.5%
변화: +14.58%p
+14.58%p
인증 화면 이탈률
29.08%
14.5%
변화: -14.58%p
-14.58%p
월간 인증 완료 건수
23,596건
57,218건
변화: +142%
+142%
주의사항
월간 건수 증가(+142%)는 마케팅 확대의 영향 포함되어 있습니다.
순수 전환율 개선 +14.58%p가 UI 변경의 기여입니다.
비즈니스 임팩트
인증 완료율 1%p 상승 ≈ 월 330건 추가 전환 ≈ 수수료 매출 약 1,000만 원/월 추가
(평균 환급액 기준 추정)Goal 달성: 목표 80% 대비 85.5% 달성 (초과 달성)
70.92%
23년 누락 인증률
85.5%
24년 누적 인증률
Results
지표
23년 9월 (Before)
24년 9월 (After)
변화
인증 시작 → 완료율
70.92%
85.5%
변화: +14.58%p
+14.58%p
인증 화면 이탈률
29.08%
14.5%
변화: -14.58%p
-14.58%p
월간 인증 완료 건수
23,596건
57,218건
변화: +142%
+142%
주의사항
월간 건수 증가(+142%)는 마케팅 확대의 영향 포함되어 있습니다.
순수 전환율 개선 +14.58%p가 UI 변경의 기여입니다.
비즈니스 임팩트
인증 완료율 1%p 상승 ≈ 월 330건 추가 전환 ≈ 수수료 매출 약 1,000만 원/월 추가
(평균 환급액 기준 추정)Goal 달성: 목표 80% 대비 85.5% 달성 (초과 달성)
70.92%
23년 누락 인증률
85.5%
24년 누적 인증률
Results
지표
23년 9월 (Before)
24년 9월 (After)
변화
인증 시작 → 완료율
23년 9월: 70.92%
24년 9월: 85.5%
변화: +14.58%p
+14.58%p
인증 화면 이탈률
23년 9월: 29.08%
24년 9월: 14.5%
변화: -14.58%p
-14.58%p
월간 인증 완료 건수
23년 9월: 29,596건
24년 9월: 57,218건
변화: +142%
+142%
주의사항
월간 건수 증가(+142%)는 마케팅 확대의 영향 포함되어 있습니다.
순수 전환율 개선 +14.58%p가 UI 변경의 기여입니다.
비즈니스 임팩트
인증 완료율 1%p 상승 ≈ 월 330건 추가 전환 ≈ 수수료 매출 약 1,000만 원/월 추가
(평균 환급액 기준 추정)Goal 달성: 목표 80% 대비 85.5% 달성 (초과 달성)
Case. 3
Tax refund inquiry
Case. 3
Tax refund inquiry
Case. 3
Tax refund inquiry
Problem Definition
환급액 계산은 홈택스 API 연동으로 진행됩니다.
사용자별 세금 데이터 양에 따라 30초~3분 소요됩니다.
Situation
UI에 "보통 30초"라고 표기 → 실제 평균 72초였습니다.
30초 경과 시점에 이탈률 급증했습니다. (Hotjar 확인)
사용자: "30초라면서요? 사기당한 느낌" (CS 피드백).
로딩 시간
이탈률
0~30초
12%
30~60초
34%
60초+
58%
핵심 문제: "기다리는 시간"이 아니라 "기대와 현실의 갭"이 이탈 원인이었습니다.
Goal
Goal
예상 환급액을 직접 확인한 사용자와 그렇지 않은 사용자 사이의 환급 신청율이 크게 차이가 났습니다.
사용자가 서비스 플로우 중간에 이탈하지 않고 예상 환급액을 직접 확인하도록 디자인합니다.
사용자가 다음단계로 나아가는데 있어서 방해가 될만한 요소들은 최대한 제거합니다.
Problem Definition
환급액 계산은 홈택스 API 연동으로 진행됩니다.
사용자별 세금 데이터 양에 따라 30초~3분 소요됩니다.
Situation
UI에 "보통 30초"라고 표기 → 실제 평균 72초였습니다.
30초 경과 시점에 이탈률 급증했습니다. (Hotjar 확인)
사용자: "30초라면서요? 사기당한 느낌" (CS 피드백).
로딩 시간
이탈률
0~30초
12%
30~60초
34%
60초+
58%
핵심 문제: "기다리는 시간"이 아니라 "기대와 현실의 갭"이 이탈 원인이었습니다.
Goal
예상 환급액을 직접 확인한 사용자와 그렇지 않은 사용자 사이의 환급 신청율이 크게 차이가 났습니다.
사용자가 서비스 플로우 중간에 이탈하지 않고 예상 환급액을 직접 확인하도록 디자인합니다.
사용자가 다음단계로 나아가는데 있어서 방해가 될만한 요소들은 최대한 제거합니다.
Problem Definition
환급액 계산은 홈택스 API 연동으로 진행됩니다.
사용자별 세금 데이터 양에 따라 30초~3분 소요됩니다.
Situation
UI에 "보통 30초"라고 표기 → 실제 평균 72초였습니다.
30초 경과 시점에 이탈률 급증했습니다. (Hotjar 확인)
사용자: "30초라면서요? 사기당한 느낌" (CS 피드백).
로딩 시간
이탈률
로딩시간: 0~30초
이탈률: 12%
로딩시간: 30~60초
이탈률: 34%
로딩시간: 60초+
이탈률: 58%
핵심 문제: "기다리는 시간"이 아니라 "기대와 현실의 갭"이 이탈 원인이었습니다.
Goal
예상 환급액을 직접 확인한 사용자와 그렇지 않은 사용자 사이의 환급 신청율이 크게 차이가 났습니다.
사용자가 서비스 플로우 중간에 이탈하지 않고 예상 환급액을 직접 확인하도록 디자인합니다.
사용자가 다음단계로 나아가는데 있어서 방해가 될만한 요소들은 최대한 제거합니다.
Solution Exploration
접근 방식 변화
"로딩 시간을 줄일 수 없다면, 기다리는 경험을 개선하자"
검토한 옵션
가설
결과
A. 정확한 예상 시간 표시
솔직함이 신뢰 구축
⚠️ 3분 보이면 바로 이탈
B. 게이미피케이션 (미니게임)
시간 인지 분산
❌ 개발 리소스 과다
C. 프로그레스 바 + 실시간 정보
진행 상황 가시화
✅ 채택
최종 솔루션:
"30초" 텍스트 삭제 → 거짓 약속 제거
프로그레스 바 추가 → "소득 분석 중 30%" 등 단계별 표시
실시간 환급 피드 추가 → "방금 이**님이 121,582,218원 환급액 확인"
환급액 순위 표시 → "지금까지 환급자 중 상위 10%"
디자인 의도:
수동적 대기 → 능동적 탐색으로 전환
"다른 사람도 하고 있다" → 사회적 증거로 신뢰 강화"
Solution Exploration
접근 방식 변화
"로딩 시간을 줄일 수 없다면, 기다리는 경험을 개선하자"
검토한 옵션
가설
결과
A. 정확한 예상 시간 표시
솔직함이 신뢰 구축
⚠️ 3분 보이면 바로 이탈
B. 게이미피케이션 (미니게임)
시간 인지 분산
❌ 개발 리소스 과다
C. 프로그레스 바 + 실시간 정보
진행 상황 가시화
✅ 채택
최종 솔루션:
"30초" 텍스트 삭제 → 거짓 약속 제거
프로그레스 바 추가 → "소득 분석 중 30%" 등 단계별 표시
실시간 환급 피드 추가 → "방금 이**님이 121,582,218원 환급액 확인"
환급액 순위 표시 → "지금까지 환급자 중 상위 10%"
디자인 의도:
수동적 대기 → 능동적 탐색으로 전환
"다른 사람도 하고 있다" → 사회적 증거로 신뢰 강화"
Solution Exploration
접근 방식 변화
"로딩 시간을 줄일 수 없다면, 기다리는 경험을 개선하자"
검토한 옵션
가설
결과
A. 정확한 예상 시간 표시
가설: 솔직함이 신뢰 구축
결과: ⚠️ 3분 보이면 바로 이탈
⚠️ 3분 보이면 바로 이탈
B. 게이미피케이션 (미니게임)
가설: 시간 인지 분산
결과: ❌ 개발 리소스 과다
❌ 개발 리소스 과다
C. 프로그레스 바 + 실시간 정보
가설: 진행 상황 가시화
결과: ✅ 채택
✅ 채택
최종 솔루션:
"30초" 텍스트 삭제 → 거짓 약속 제거
프로그레스 바 추가 → "소득 분석 중 30%" 등 단계별 표시
실시간 환급 피드 추가 → "방금 이**님이 121,582,218원 환급액 확인"
환급액 순위 표시 → "지금까지 환급자 중 상위 10%"
디자인 의도:
수동적 대기 → 능동적 탐색으로 전환
"다른 사람도 하고 있다" → 사회적 증거로 신뢰 강화"
Problem Definition
환급액 확인 페이지
Hotjar 분석 결과, 환급액 조회 완료 후 신청 전환율이 낮았습니다.
문제
관찰 내용
페이지 스크롤 과다
환급액 확인 후 CTA 버튼까지 도달하지 않음
정보 우선순위 혼란
FAQ, 연도별 소득보다 총 환급액이 중요한데 동등하게 배치
체류 시간 과다
환급액 확인 후 다음 단계로 넘어가지 않고 페이지에 머무름
Goal
환급액 확인 → 신청 전환율을 +10%p 높이기 위해 핵심 정보 강조 + 스크롤 제거
Problem Definition
환급액 확인 페이지
Hotjar 분석 결과, 환급액 조회 완료 후 신청 전환율이 낮았습니다.
문제
관찰 내용
페이지 스크롤 과다
환급액 확인 후 CTA 버튼까지 도달하지 않음
정보 우선순위 혼란
FAQ, 연도별 소득보다 총 환급액이 중요한데 동등하게 배치
체류 시간 과다
환급액 확인 후 다음 단계로 넘어가지 않고 페이지에 머무름
Goal
환급액 확인 → 신청 전환율을 +10%p 높이기 위해 핵심 정보 강조 + 스크롤 제거
Problem Definition
환급액 확인 페이지
Hotjar 분석 결과, 환급액 조회 완료 후 신청 전환율이 낮았습니다.
문제
관찰 내용
페이지 스크롤 과다
환급액 확인 후 CTA 버튼까지 도달하지 않음
정보 우선순위 혼란
FAQ, 연도별 소득보다 총 환급액이 중요한데 동등하게 배치
체류 시간 과다
환급액 확인 후 다음 단계로 넘어가지 않고 페이지에 머무름
Goal
환급액 확인 → 신청 전환율을 +10%p 높이기 위해 핵심 정보 강조 + 스크롤 제거
Solution
변경 사항
Before
After
환급액 강조
흰 배경, 작은 텍스트
블루 헤더 + 큰 금액 표시
컨텐츠 구조
1페이지에 모두 나열 (스크롤 필요)
2depth 구조 (탭으로 분리)
CTA 위치
스크롤 해야 보임
첫 화면에 바로 노출
디자인 의도:
핵심 정보(총 환급액)를 첫 화면에서 즉시 확인
부가 정보(연도별 세금, FAQ)는 탭으로 숨김 → 관심 있는 사용자만 탐색 가능
Solution
변경 사항
Before
After
환급액 강조
흰 배경, 작은 텍스트
블루 헤더 + 큰 금액 표시
컨텐츠 구조
1페이지에 모두 나열 (스크롤 필요)
2depth 구조 (탭으로 분리)
CTA 위치
스크롤 해야 보임
첫 화면에 바로 노출
디자인 의도:
핵심 정보(총 환급액)를 첫 화면에서 즉시 확인
부가 정보(연도별 세금, FAQ)는 탭으로 숨김 → 관심 있는 사용자만 탐색 가능
Solution
변경 사항
Before
After
환급액 강조
Before: 흰 배경, 작은 텍스트
After: 블루 헤더 + 큰 금액 표시
컨텐츠 구조
Before: 1페이지에 모두 나열 (스크롤 필요)
After: 2depth 구조 (탭으로 분리)
CTA 위치
Before: 스크롤 해야 보임
After: 첫 화면에 바로 노출
디자인 의도:
핵심 정보(총 환급액)를 첫 화면에서 즉시 확인
부가 정보(연도별 세금, FAQ)는 탭으로 숨김 → 관심 있는 사용자만 탐색 가능
Result
Result
UI 개선 전후 비교 (23년 vs 24.09 기준)
UI 개선 전후 비교 (23년 vs 24.09 기준)
핵심 변화:
환급액 확인 → 신청 이탈률 감소 (스크롤 제거 효과)
첫 화면 CTA 노출로 즉시 행동 유도
15.86%↑
조회 매출 대비 신청 매출 상승율(23년 vs ~24.09)
100.18%↑
매출액 상승율(23년 vs ~24.09)
Result
UI 개선 전후 비교 (23년 vs 24.09 기준)
핵심 변화:
환급액 확인 → 신청 이탈률 감소 (스크롤 제거 효과)
첫 화면 CTA 노출로 즉시 행동 유도
15.86%↑
조회 매출 대비 신청 매출 상승율(23년 vs ~24.09)
100.18%↑
매출액 상승율(23년 vs ~24.09)
Result
UI 개선 전후 비교 (23년 vs 24.09 기준)
핵심 변화:
환급액 확인 → 신청 이탈률 감소 (스크롤 제거 효과)
첫 화면 CTA 노출로 즉시 행동 유도
15.86%↑
조회 매출 대비 신청 매출 상승율(23년 vs ~24.09)
100.18%↑
매출액 상승율(23년 vs ~24.09)
Lesson Learned
Lesson Learned
Lesson Learned
데이터의 종류가 중요하다
데이터의 종류가 중요하다
PM을 설득할 때 "이탈률 29%"라는 숫자보다 Hotjar 영상 1개가 더 효과적이었습니다. 사용자가 카카오앱에서 인증 완료 후 멍하니 있다가 앱을 닫는 3초 영상이 "돌아오라는 안내가 없다"는 문제를 직관적으로 보여줬습니다.
PM을 설득할 때 "이탈률 29%"라는 숫자보다 Hotjar 영상 1개가 더 효과적이었습니다. 사용자가 카카오앱에서 인증 완료 후 멍하니 있다가 앱을 닫는 3초 영상이 "돌아오라는 안내가 없다"는 문제를 직관적으로 보여줬습니다.
데이터의 종류가 중요하다
PM을 설득할 때 "이탈률 29%"라는 숫자보다 Hotjar 영상 1개가 더 효과적이었습니다. 사용자가 카카오앱에서 인증 완료 후 멍하니 있다가 앱을 닫는 3초 영상이 "돌아오라는 안내가 없다"는 문제를 직관적으로 보여줬습니다.
불필요한 친절은 독이다
불필요한 친절은 독이다
불필요한 친절은 독이다
"조회 방법 선택 모달"은 사용자에게 선택권을 주려는 선의였지만, 97%가 같은 선택을 하는 상황에서 불필요한 마찰만 만들었습니다. "사용자를 위한다"와 "사용자가 원한다"는 다릅니다.
"조회 방법 선택 모달"은 사용자에게 선택권을 주려는 선의였지만, 97%가 같은 선택을 하는 상황에서 불필요한 마찰만 만들었습니다. "사용자를 위한다"와 "사용자가 원한다"는 다릅니다.
불필요한 친절은 독이다
"조회 방법 선택 모달"은 사용자에게 선택권을 주려는 선의였지만, 97%가 같은 선택을 하는 상황에서 불필요한 마찰만 만들었습니다. "사용자를 위한다"와 "사용자가 원한다"는 다릅니다.
See Also
