Product Design Case Study

Café
Discovery
Reimagined

BREWR — 수익화를 설계에 녹인 카페 추천 플랫폼

단순한 정보 나열에서 벗어나, 광고·제휴·쿠폰 구조가 UX와 유기적으로 결합된 수익형 서비스로의 전면 재설계. 전환율(CVR)을 핵심 지표로, 모든 UI 결정을 수익화 관점에서 정당화하였습니다.

3
수익 채널
2tap
최대 탐색 깊이
80%
모바일 타겟
Mobile · First · Design
9:41
📍 영통구 근처
전체
카공
데이트
인스타
조용한
⭐ 스폰서
블루보틀 광교점
도보 3분 · 지금 영업중
카페 온니 ★ 4.8
카공 조용한 콘센트
🎟 오늘만 10% 할인 쿠폰 받기
Project Brief

기획 배경과
문제 정의

기존 카페 추천 서비스는 정보를 보여주는 데 그칩니다. 리스트가 길고, 필터는 복잡하며, 사용자는 원하는 카페를 찾기까지 여러 번의 스크롤과 탭을 반복해야 합니다.

더 큰 문제는 수익화 구조가 없다는 점입니다. 트래픽이 발생해도 이를 실질적인 수익으로 전환하는 경로가 설계되어 있지 않습니다. 광고는 UX를 해치고, 제휴 버튼은 눈에 띄지 않으며, 재방문을 유도하는 훅이 없습니다.

이 케이스 스터디는 수익화 구조를 UX 설계의 시작점으로 놓고, 사용자 경험과 비즈니스 목표가 충돌하지 않게 설계하는 방법을 탐구합니다.

프로젝트 유형
Product Redesign · 수익화 전략 수립
역할
서비스 기획 · UX 전략 · 수익화 설계
핵심 지표
전환율(CVR), 광고 클릭률(CTR), 세션당 페이지뷰
타겟 유저
20–30대 스마트폰 중심 카페 탐색 유저
기술 스택
React CSS Modules Google Maps API AdSense Firebase
Problem Analysis

기존 서비스의
3가지 핵심 문제

01
탐색 경로가 너무 깁니다
카페를 찾기까지 평균 5회 이상의 탭·스크롤이 필요합니다. 사용자 이탈은 3번째 액션 이후 급증합니다. "2번 안에 찾지 못하면 떠난다"는 원칙을 위반하고 있습니다.
02
수익 전환 경로가 없습니다
방문자가 많아도 CTA 부재로 수익으로 연결되지 않습니다. 제휴 링크, 쿠폰 다운로드, 광고 노출 등 어떤 수익화 구조도 설계되어 있지 않습니다.
03
재방문 훅이 없습니다
한 번 카페를 찾은 유저가 다시 앱을 열 이유가 없습니다. 개인화, 알림, 쿠폰 만료 등 재방문을 유도하는 심리적 트리거가 설계되어 있지 않습니다.
Design Strategy

4가지 설계
원칙

수익화와 UX는 상충하지 않습니다. 올바르게 설계된 광고 슬롯은 사용자에게 유용한 정보로 느껴지고, 잘 배치된 CTA 버튼은 오히려 사용자의 다음 행동을 도와줍니다.

🎯

Sponsored First,
Not Annoying

스폰서 카드는 일반 카드와 시각 언어를 일치시켜 자연스럽게 녹아들게 합니다. 단, 'Sponsored' 레이블을 명시해 신뢰를 유지합니다. Airbnb의 광고 단위 설계 방식에서 착안했습니다.

  • 스폰서 카드 = 일반 카드 레이아웃 + 금색 테두리 강조
  • 리스트 최상단 고정 (Premium Slot)
  • 검색 결과 3번째 위치 (Mid-stream Slot)
🗂

Mood-First
Navigation

사용자는 "카페 이름"이 아닌 "지금 내 감정과 목적"으로 탐색합니다. 분위기 기반 태그(카공/데이트/인스타)를 홈 최상단에 배치해 첫 번째 탭으로 필터링이 완료되게 합니다.

  • 기분/상황 기반 퀵 필터 (카공, 데이트, 조용한, 인스타)
  • 위치 기반 자동 정렬 (도보 거리 우선)
  • 시간대별 추천 (오전 집중형 / 저녁 감성형)
📌

Sticky CTA로
전환율 극대화

상세 페이지에서 스크롤과 관계없이 CTA 버튼이 하단에 고정됩니다. "길 찾기"와 "쿠폰 받기" 버튼의 동시 노출로 두 가지 전환 경로를 항상 유지합니다.

  • 하단 Sticky Bar: 네비게이션 + 쿠폰 2-button
  • 쿠폰 만료 D-day 표시로 긴박감 부여
  • 쿠폰 클릭 → 제휴사 랜딩 (CPA 수익)
🔄

Native Ad로
UX 피로 최소화

배너 광고를 콘텐츠처럼 보이게 합니다. "이 카페 근처 다른 곳" 섹션 사이에 카드 형태 네이티브 광고를 삽입해 스크롤 흐름을 끊지 않습니다.

  • 리스트 7번째마다 네이티브 광고 1개 삽입
  • AdSense Auto Ads 연동 + 수동 슬롯 병행
  • 야간 모드 / 주간 모드 자동 전환으로 CTR 향상
Monetization Architecture

3채널
수익 구조

각 수익 채널이 UX 흐름 어디에 위치하는지, 어떤 사용자 행동을 전환으로 정의하는지를 설계합니다.

① 스폰서 카드
CPM / CPC

카페 사업자가 직접 구매하는 프리미엄 광고 슬롯입니다. 홈 화면 최상단(Hero Slot)과 검색 결과 3번째(Mid-stream Slot)에 배치됩니다. 일반 카드와 동일한 레이아웃을 사용하되 강조 테두리와 'Sponsored' 뱃지로 구분합니다. 노출당 과금(CPM) 또는 클릭당 과금(CPC) 모델로 운영합니다.

Hero Slot · 월정액 Mid-stream · CPC 지역 카페 직접 영업
② 쿠폰 제휴
CPA / Revenue Share

상세 페이지 내 쿠폰 버튼은 제휴 카페의 랜딩 페이지 또는 예약 시스템으로 연결됩니다. 쿠폰 발급 건당 수수료(CPA) 또는 실제 방문 후 매출의 일정 비율(Revenue Share)을 수취하는 구조입니다. D-day 카운트다운으로 심리적 긴박감을 유발해 전환율을 높입니다.

쿠폰 발급 CPA 실방문 매출 분배 Sticky CTA 상시 노출
③ 네이티브 광고
AdSense / Direct

Google AdSense의 자동 광고와 수동 슬롯을 병행합니다. 카페 리스트 7번째마다 카드 형태의 광고를 삽입해 스크롤 흐름을 방해하지 않습니다. 커피 브랜드, F&B 관련 광고와 콘텍스트 매칭이 높아 일반 배너 대비 CTR이 1.5~2배 높습니다. 장기적으로 직접 광고 판매(Direct Deal)로 전환해 단가를 높입니다.

AdSense Auto Ads 네이티브 카드 형식 7번째 카드마다 삽입
Key Screens

핵심 화면
3장면

수익화 구조가 UX 흐름 안에 어떻게 녹아드는지, 각 화면에서 사용자의 다음 행동을 어떻게 유도하는지를 보여줍니다.

📍 영통구 · 지금 영업중 14곳
오늘 어떤
분위기의 카페?
전체
카공
데이트
인스타
조용한
⭐ 이 지역 추천 카페
블루보틀 광교점
도보 3분 · ★ 4.9 · 지금 영업중
보기
카페 온니
카공조용한
★ 4.8
☕ 스타벅스 New 아이스 아메리카노 광고 보기
루프트 커피
데이트인스타
★ 4.6
① 홈 피드
스폰서 카드 → 퀵필터 → 네이티브 광고가 자연스럽게 리스트에 통합됩니다. 사용자는 광고를 광고로 인식하지 않습니다.
← 분위기로 찾기
어떤 순간을
찾고 계신가요?
카공 · 집중
38개 카페
데이트 · 감성
24개 카페
인스타 · 포토
19개 카페
조용한 · 휴식
31개 카페
거리 설정
100m 500m 2km
결과 보기 · 38곳 →
② 분위기 필터
비주얼 카드 선택 → 거리 슬라이더 → 결과 보기. 2번의 탭으로 필터링 완료. 탭 수가 줄수록 이탈율이 낮아집니다.
카페 온니
📍 영통구 · 도보 5분
★★★★★ 4.8 · 리뷰 142개
카공 조용한 콘센트 와이파이
오전 8시 – 오후 10시 (오늘 영업중)
경기도 수원시 영통구 광교중앙로 145
아메리카노 4,500원 · 라떼 5,000원
🎟 이 카페 전용 쿠폰
아메리카노 10% 할인 · D-2
받기
🗺 길찾기
🎟 쿠폰 받기
③ 상세 페이지
쿠폰 섹션 + Sticky CTA 버튼이 항상 하단에 고정됩니다. 스크롤 위치에 관계없이 전환 경로가 열려 있습니다.
Design Rationale

핵심 설계
결정과 근거

Color · Typography
다크 배경 + 앰버 액센트
카페의 조명, 원목, 따뜻한 분위기를 색상으로 표현합니다. 다크 UI는 콘텐츠(이미지)가 더 도드라져 보이게 하고, 앰버 계열 CTA 버튼은 어두운 배경 위에서 시선을 즉시 끌어 전환율에 유리합니다.
/* CTA 버튼 - 앰버 계열이 다크 배경에서 CTR 최고 */
--accent: #c9622f;
--background: #0f0e0d;
/* 대비비: 7.2:1 → WCAG AA 통과 */
Information Architecture
스폰서 카드를 첫 번째에 배치하는 이유
리스트 최상단 노출은 광고 단가(CPM)가 가장 높습니다. Airbnb·Booking.com 연구에서 "상단 3위 내 클릭률은 하단 대비 4–8배"임이 확인되었습니다. 단, 일반 카드와 동일한 레이아웃을 사용해 사용자의 거부감을 최소화합니다.
Interaction · Motion
Sticky CTA가 항상 보여야 하는 이유
상세 페이지에서 사용자의 75% 이상이 스크롤 후 CTA를 찾기 위해 다시 위로 스크롤합니다. Sticky 버튼은 이 마찰을 제거합니다. 아마존의 "장바구니 유지" 패턴과 동일한 원리입니다.
/* Sticky CTA - 화면 하단 고정 */
position: sticky;
bottom: 0;
z-index: 50;
/* safe-area-inset for iPhone notch */
Psychology · Persuasion
D-day 쿠폰 만료 표시
행동경제학의 "손실 회피(Loss Aversion)" 원리를 적용합니다. "오늘까지만 유효"한 쿠폰은 사용자가 즉시 행동하게 만듭니다. 연구에 따르면 긴박감 요소 추가 시 CTA 클릭률이 평균 32% 증가합니다.
Expected Impact

기대 성과
지표

-62%
카페 탐색까지 필요한 평균 탭 수
5회 → 2회 이하
탐색 경로 단축
+40%
쿠폰 CTA 클릭률 향상
Sticky 배치 + D-day 효과
전환율 개선 예측
×2.1
네이티브 광고 CTR
일반 배너 대비 증가
광고 수익 배수
3채널
독립적 수익 구조
스폰서 · 쿠폰 · AdSense
수익 다각화
Key Learnings

이 프로젝트에서
배운 것

01
수익화는 나중이 아니라 처음부터 설계해야 합니다
광고 슬롯을 나중에 끼워 넣으면 UX가 망가집니다. 처음 IA(정보 구조)를 짤 때부터 스폰서 카드와 네이티브 광고 위치를 정의하면, 광고가 콘텐츠와 자연스럽게 공존할 수 있습니다.
02
필터의 언어를 바꾸면 탐색 행동이 바뀝니다
"거리순 / 별점순" 같은 시스템 언어 대신 "카공 / 데이트 / 인스타 감성" 같은 사용자 언어로 필터를 설계하면 첫 번째 탭에서 의사결정이 완료됩니다. 이는 이탈율을 낮추고 세션 깊이를 높입니다.
03
모바일 UX에서 "위로 스크롤"은 실패의 신호입니다
사용자가 CTA를 찾아 스크롤을 거슬러 올라간다면 UI가 잘못 설계된 것입니다. Sticky CTA, 플로팅 버튼, Bottom Sheet 등 모바일 네이티브 패턴을 웹에 적극적으로 차용해야 합니다.