05 · Service Patterns · 탐색 · 발견
상세보기Detail
하나의 대상(설교·공지·행사)에 관한 모든 정보와 행동이 모이는 페이지. ‘참여할까’라는 결심이 일어나는 장소이므로, 정보의 순서와 CTA의 반복이 행동 전환을 좌우합니다.
골격
- 핵심 요약 — 제목 · 대표 이미지 · 핵심 정보(일시·장소) · 1차 CTA.
- 본문 · 설명 — 상세 내용 · 말씀 본문 · 관련 자료.
- 공동체의 흔적 — 참여자 · 댓글 · 간증.
- 관련 추천 — 같은 시리즈의 설교 · 이어지는 행사.
- 하단 CTA 재노출 — 모바일 Sticky 또는 영역별 반복.
첫 화면의 필수 5요소
주일예배 · 담임목사
은혜의 생명력
2026.04.19 · 본당
조회 312 · 댓글 8
- 이미지 · 영상 — 대표 썸네일 + 영상 플레이어. 자막·설교 노트가 있으면 하단에 함께.
- 제목 — 한 줄이 기본. 두 줄이 되면 디자인 리듬이 흔들립니다.
- 핵심 정보 — 날짜 · 설교자 · 본문 구절. 한 묶음으로.
- 관련 자료 — 설교 노트 PDF · 찬양 악보. 펼쳐서 기본 노출.
- 1차 CTA — “영상으로 보기”, “신청하기” 한 개. 보조 CTA(저장·공유)는 아이콘으로.
본문의 리듬
- 내용이 많으면 탭으로 구분. ‘설교 · 노트 · 토론 질문’처럼.
- 긴 본문은 “더 보기”로 접어두고, 핵심 구절을 위로.
- 여러 구절·참고 본문이 얽히면 표로. 글자만으로 설명하려 하지 말 것.
Do· 요약 + 세부의 계층
상단은 “하나님의 은혜는 우리 삶의 생명력입니다”처럼 한 줄 결론. 세부 본문은 그 아래 접을 수 있게. 스캐너 · 독서가를 모두 만족시킵니다.
Don't· 긴 통 텍스트
15문단 이어지는 설교 전문을 펼친 채로 두면 아무도 읽지 않습니다. 구조 없이 “많은 정보”는 “없는 정보”와 같습니다.
댓글 · 간증
- 대표 댓글 · 간증 3~5개. “전체보기”로 나머지.
- 필터: 최신순 · 감동 많은 순. 공감이 많은 간증이 새로 온 성도에게 가치가 큽니다.
- 목회자 답변은 별도 뱃지로 뚜렷하게 구분.
Sticky CTA (모바일)
모바일에서 본문이 길 때 하단 고정 CTA 바를 두어 어디서든 참여(영상 재생 · 신청 · 공유)로 이동 가능하게. 스크롤하다 결심한 순간 멀리 가지 않아도 됩니다.
조합되는 컴포넌트
접근성
- 대표 이미지
alt는 “설교 제목” + 짧은 맥락(“강단 사진”). - 일시·장소는 텍스트로 읽히게 (
aria-label에 “2026년 4월 19일 주일예배, 본당”). - 탭 라디오 그룹은
role="tablist"+role="tab"으로 의미 확립.