05 · Service Patterns · 탐색 · 발견
탐색 · 발견Browse & Discover
사용자가 무엇을 원하는지 아직 모를 때, 카테고리 · 큐레이션 · 추천으로 선택지를 좁혀가는 여정. 검색이 ‘찾기’라면 탐색은 ‘구경하기’입니다.
진입 구조
- 카테고리 그리드 — 최상단. 3~8개의 큰 분류가 적정.
- 담임목사 추천 · 큐레이션 — 사람이 고른 세트. ‘이번 주 추천 설교’처럼.
- 개인화 추천 — 로그인 사용자의 기록 기반. “관심 가실 만한 말씀”.
- 신규 · 많이 본 — 시간 기반 슬롯. 탐색의 피로가 낮고 진입 빈도가 높음.
카테고리 설계
- 카테고리 수는 8개 이하. 더 많으면 “전체보기” 또는 2단계.
- 이미지 · 아이콘 + 짧은 라벨. 텍스트만은 탐색 의욕을 꺾습니다.
- “전체” 카테고리는 첫 자리에. 빠져나갈 문을 항상 열어두세요.
Do· 대표 이미지 카드
각 카테고리를 대표 사진 + 라벨 카드로. 시각 정보가 강하면 사용자 뇌는 “아, 이쪽이 내가 찾던 거”를 순간에 판단합니다.
Don't· 텍스트 드롭다운 20개
20개 카테고리를 드롭다운 하나에 몰아넣지 마세요. 스크롤 · 읽기 · 판단 삼중고가 이탈을 부릅니다.
큐레이션 슬롯
큐레이션은 “왜 이 세트인지”의 근거가 필요합니다. “담임목사 추천 설교”, “사순절 묵상 40일”처럼 주최자와 주제가 명시되면 신뢰가 올라갑니다.
- 한 슬롯에 4~8개. 가로 스크롤이 모바일 기본.
- 슬롯 제목 옆 “전체보기” 링크. 관심 있으면 더 볼 수 있어야.
- 슬롯 간 스타일 차별화: 이미지 비율·카드 크기를 섹션마다 다르게 하면 단조로움 해소.
개인화 추천
- “왜 추천되었는지” 한 줄. “최근 들은 ‘은혜의 생명력’ 설교와 유사”.
- 관심 없음(“이런 건 그만”) 피드백 버튼. 부정 신호도 학습에 필요합니다.
- 로그인 전 사용자에게는 대체용 인기·신규 슬롯을 노출.
조합되는 컴포넌트
접근성
- 각 섹션에
h2가 있어야 스크린리더가 “3번째 섹션: 담임목사 추천”처럼 구조를 파악. - 가로 스크롤 슬롯은 좌우 화살표 버튼 + 키보드 조작을 지원.
- 추천 이유 문구는
aria-describedby로 카드에 연결.