프론티아 앱 홈 디자인 개편 PRD

항목	내용
제목	프론티아 홈 디자인 변경
상태	Draft
Owner	Zen
Linear	DEE-493
Project	[앱] 홈 디자인 개편
Sprint Artifact URL	https://sprint-artifacts.frontia.dev/home-redesign/
작성일	2026-06-18
분석 기간	최근 2개월 (2026-04-18 ~ 2026-06-18)

문서 성격: 본 문서는 기획(제품) PRD이며 구현 스펙이 아니다. 코드/화면 매핑은 "어떤 화면·상태가 개편 범위에 포함되는가"를 명확히 하기 위한 용도로만 포함한다. 백엔드/API 구현 세부는 다루지 않는다.

네이밍 정정: 원 요청서의 HomeRecommand* 표기는 오타이며, 본 문서는 정정된 HomeRecommend* 표기를 사용한다.

---

1. 요약 / 한 줄 결정

프론티아 앱 홈 화면을 콘텐츠 중심 경험으로 재설계한다. 핵심은 (1) 최상단 히어로 배너의 주목도·CTA 클릭률을 끌어올리고, (2) 메인 홈 내 탐색 경로를 다양화하며, (3) 각 카테고리(플레이 중 / 큐레이션 / 추천 / 랭킹 / 신작 등)의 인지를 명확히 하는 것이다. 추천·랭킹·신작 탭과 검색 진입까지를 한 번의 개편 범위로 묶는다.

---

2. 배경 및 문제 정의

최근 2개월(2026-04-18 ~ 2026-06-18) 홈 사용 지표는 다음과 같다.

지표	값	해석(가설)
랭킹 탭 조회율	25.7%	추천 탭 대비 탐색 분산이 제한적
신작 탭 조회율	13.9%	신작 탭 진입이 가장 낮음 — 노출/인지 문제 가능성
장르 칩 클릭율	53.7%	사용자는 장르 기반 탐색에 가장 적극적
메인 배너 CTA 클릭율	2.18%	최상단 히어로 배너의 행동 전환이 매우 낮음

문제 정의

1. 히어로 배너가 행동을 끌어내지 못한다. 가장 큰 화면 면적을 차지하는 메인 배너의 CTA 클릭율이 2.18%에 그친다. 배너가 "콘텐츠로 들어가는 입구"로 기능하지 못하고 있다.
2. 탐색 경험이 한쪽으로 쏠려 있다. 장르 칩 클릭율(53.7%)은 높은 반면 랭킹(25.7%)·신작(13.9%) 탭 활용도가 낮다. 사용자가 홈에서 다양한 방식으로 콘텐츠를 발견하지 못하고 특정 경로에 집중되어 있다.
3. 카테고리 인지가 흐리다. "플레이 중 / 큐레이션 / 추천 / 랭킹 / 신작" 등 각 영역이 무엇을 의미하는지, 사용자 입장에서 구분이 명확하지 않다.

위 4개 지표 외의 수치(전환 퍼널, 세션당 진입 콘텐츠 수 등)는 입력으로 제공되지 않았다. → [10. 미해결 질문] 참고.

---

3. 목표 (Goals)

1. 히어로 배너 주목도와 CTA 클릭율 상승 — 콘텐츠 중심 경험으로 재구성하여 최상단 배너가 실제 콘텐츠 진입을 유도하도록 한다.
2. 메인 홈 화면 내 탐색 경험 다양화 — 장르 칩에 집중된 탐색을 랭킹/신작/큐레이션 등 복수 경로로 분산·확장한다.
3. 각 카테고리 인지 명확화 — 플레이 중 / 큐레이션 / 추천 / 랭킹 / 신작 등 카테고리의 의미와 경계를 사용자가 분명히 인지하도록 시각·정보 구조를 정리한다.

---

4. 비목표 (Non-goals)

• 백엔드 추천 알고리즘/랭킹 산출 로직 변경 (콘텐츠 소싱 로직은 본 개편 범위가 아니다)
• 신규 자료형/콘텐츠 포맷 추가
• 검색 알고리즘·검색 결과 랭킹 로직 변경 (검색은 진입 동선·UI 일관성 관점만 다룸)
• 결제/구독/성인 인증 정책 변경 (성인 콘텐츠는 노출 분기 표현만 다룸)
• 홈 외 화면(상세, 뷰어, 마이페이지 등) 재설계
• API 스키마 변경 (PageResponseDto 등 기존 데이터 계약 재사용 가정)

---

5. 사용자 노출 범위 (실제 화면/상태 기준)

요청서의 논리적 범위명과 코드 검증된 실제 앱 구조를 매핑한다. (코드 매핑 출처: /Users/yejee/tmp/frontia-fe)

요청 범위명 (정정 표기)	실제 앱 구조	비고
(Home 최상단)	HomeScreen	홈 최상단 컨테이너
HomeRecommendMain	HomeRecommendTab + page alias recommendation-all (추정)	HomeTabs.recommendation 탭의 기본 페이지 상태
HomeRecommendGenre	HomeRecommendTab 내 page 칩/alias/섹션 상태	별도 화면 아님 — 페이지 칩으로 전환되는 상태
HomeRecommendAdult	HomeRecommendTab 내 성인 분기 상태	별도 화면 아님 — PageResponseDto.adultsOnly / episode_adults_only_* 섹션 신호
HomeRanking	HomeRankingTab (HomeTabs.ranking)	랭킹 탭
HomeRankingNone	RankingEmptyList	랭킹 빈 상태
HomeNewNow	HomeNewReleasesTab 내 섹션 상태 — episode_just_released (후보)	별도 화면 아님 — new_releases page alias/섹션 상태
HomeNewPopular	HomeNewReleasesTab 내 섹션 상태 — episode_hot_new_releases, 장르별 *_hot_new_releases (후보)	별도 화면 아님
HomeNewNone	NewReleseEmptyList	신작 빈 상태 (기존 코드 오타 컴포넌트명 유지)
Search	route episode-search / EpisodeSearchScreen / EpisodeSearchWidget	params: query, autoFocus. 에피소드 + 프로필 검색 결과 리스트 포함

구조적 사실 (스코프 판단 근거)

• 홈 탭은 3개: HomeTabs.recommendation, HomeTabs.ranking, HomeTabs.new_releases.
• 추천 탭의 장르/성인은 독립 화면이 아니라 HomeRecommendTab 내부의 page 칩 / page alias / 섹션 상태로 표현된다.
• 신작 탭의 Now/Popular 역시 독립 화면이 아니라 new_releases page alias / 섹션 상태로 표현된다.
• 공통 빌딩 블록: 페이지/칩 데이터 PageResponseDto(type, alias, label, adultsOnly), 칩 UI HomeTabHeaderPageChipList, 섹션 렌더러 HomeSectionList, 히어로 HomeMainBannerCarousel.

---

6. 영역별 요구사항

각 요구사항은 제품 의도 수준으로 기술한다. 픽셀/토큰/컴포넌트 props 등 시각 스펙은 Figma 디자인 + 구현 스펙으로 분리한다([11. 스펙 핸드오프] 참고).

6.1 홈 공통 (HomeScreen / HomeTabHeaderPageChipList / HomeSectionList)

• R-C1 (히어로 콘텐츠 중심화): 최상단 히어로 배너(HomeMainBannerCarousel)는 단순 프로모션 비주얼이 아니라 추천 콘텐츠로 진입하는 입구로 재설계한다. 콘텐츠 제목/장르/한 줄 소개 등 콘텐츠 식별 정보와 명확한 CTA를 노출한다. (목표 1)
• R-C2 (카테고리 라벨 명확화): 탭·페이지 칩·섹션 헤더의 라벨링을 정비하여 "플레이 중 / 큐레이션 / 추천 / 랭킹 / 신작" 카테고리가 시각적으로 구분되고 의미가 분명하도록 한다. PageResponseDto.label 노출 규칙 정리. (목표 3)
• R-C3 (탐색 진입점 다양화): 홈 메인에서 장르 칩 외에 랭킹/신작/큐레이션 등 다른 경로로 진입할 수 있는 진입점을 가시성 있게 배치한다. (목표 2)
• R-C4 (섹션 일관성): HomeSectionList로 렌더되는 섹션들의 헤더/카드/더보기 패턴을 카테고리 간 일관되게 정비한다.

6.2 추천 (HomeRecommendTab)

• R-R1 (메인 상태): 기본 진입 상태(recommendation-all 추정 alias)에서 히어로 + 추천 섹션 묶음을 콘텐츠 중심으로 구성한다.
• R-R2 (장르 탐색): 장르 칩(HomeTabHeaderPageChipList) 기반 전환을 유지·강화한다. 장르 칩 클릭율(53.7%)이 가장 높은 탐색 경로이므로 회귀(퇴보)시키지 않는 것을 원칙으로 한다.
• R-R3 (성인 분기 표현): PageResponseDto.adultsOnly / episode_adults_only_* 섹션에 해당하는 성인 콘텐츠는 정책에 맞는 노출/블러/인증 분기 UI로 표현한다. (정책 자체는 변경하지 않음 — Non-goal)

6.3 랭킹 (HomeRankingTab)

• R-K1 (가시성 강화): 랭킹 탭 조회율 25.7%를 개선하기 위해 랭킹 카테고리의 인지/진입 동선을 강화한다. (홈 메인에서의 랭킹 진입점 노출 포함 — R-C3와 연계)
• R-K2 (랭킹 표현 명확화): 순위·기준(예: 기간/장르)이 사용자에게 분명히 보이도록 한다.
• R-K3 (빈 상태): RankingEmptyList 빈 상태 UI를 개편 톤에 맞게 정비한다. → [6.6 빈 상태] 참고.

6.4 신작 (HomeNewReleasesTab)

• R-N1 (신작 인지 개선): 신작 탭 조회율 13.9%(최저)를 개선한다. 신작 카테고리의 의미("새로 나온 / 최근 인기 신작")를 명확히 노출. (목표 3)
• R-N2 (Now/Popular 상태 구분): new_releases 내 "지금 막 공개된" 신작(episode_just_released 후보)과 "신작 중 인기"(episode_hot_new_releases, 장르별 *_hot_new_releases 후보) 섹션 상태가 사용자에게 구분되어 보이도록 한다.
• R-N3 (빈 상태): NewReleseEmptyList(기존 오타 컴포넌트명) 빈 상태 UI 정비. → [6.6 빈 상태] 참고.

6.5 검색 (episode-search / EpisodeSearchScreen / EpisodeSearchWidget)

• R-S1 (진입 동선): 홈에서 검색으로의 진입점을 개편된 홈 디자인과 일관되게 배치한다. route episode-search, params(query, autoFocus)는 기존 계약 재사용.
• R-S2 (결과 구성 유지): 검색 결과는 에피소드/프로필 리스트 구성을 유지한다. (검색 랭킹 로직 변경은 Non-goal)
• R-S3 (스코프 확인 필요): 검색이 본 개편에서 "진입 동선/UI 일관화"까지인지, 검색 화면 자체 리디자인까지인지 확정 필요. → [10. 미해결 질문 Q5].

6.6 빈 상태 (Empty states)

• R-E1: 랭킹 빈 상태(RankingEmptyList)와 신작 빈 상태(NewReleseEmptyList)는 개편 비주얼 톤에 맞춰 정비하고, 가능하면 대체 탐색 동선(예: 다른 카테고리로 이동)을 제공한다.
• R-E2: 추천 탭의 빈/오류 상태 처리 여부 확인 필요 (현재 코드상 전용 추천 빈 컴포넌트는 확인되지 않음). → [10. 미해결 질문 Q4].

6.7 2026-06-19 디자인 상세 업데이트

Slack thread에서 추가 전달된 홈 메인/추천/랭킹 디자인 상세를 PRD 범위에 반영한다. 픽셀/토큰 세부는 spec.md를 우선한다.

MainBanner

• EpisodeBanner
  • 상단, 좌우 여백 없이 화면 전체 4:5 영역으로 노출한다.
  • ContentHeader 아래 레이어로 배치한다.
  • 이미지 영역 클릭 시 바로 플레이를 시작한다.
  • 텍스트 영역 클릭 시 에피소드 상세로 이동한다.
  • 에피소드 제목, 장르 정보, 어른용 콘텐츠 여부를 노출한다.
• NoticeBanner
  • EpisodeBanner와 동일한 디자인 스펙을 사용한다.
  • Admin 설정 메인 타이틀과 서브 텍스트를 노출한다.
  • 이미지 영역과 텍스트 영역 모두 클릭 시 Admin 연결 링크로 이동한다.
• Indicator
  • 배너 하단에 배너 개수만큼 인디케이터를 생성한다.

ContentHeader

• 좌측: 알림, 추천/랭킹/NEW 섹션 진입점.
• 우측: 검색, 스타.
• 스크롤 시 축소된다.
• 리퀴드 글래스 처리를 적용한다.

GenreChip

• 장르 이미지(PNG)와 장르 텍스트를 노출한다.
• 기본값은 내게 맞춤이다.

PlayingEpisode

• 플레이 중인 에피소드 섹션을 노출한다.
• 썸네일 크기는 80 × 100으로 줄인다.
• 섹션 타이틀 플레이 중인 에피소드는 body1-2 / textui/secondary를 적용한다.

CuratedEpisode

• 신작 표기 아이콘을 변경한다.
• 어른용 표기 아이콘을 변경하고, 위치를 에피소드 타이틀 좌측으로 이동한다.
• 타이틀, 작가명, 누적 프레임 영역 디자인을 변경한다.
• 큐레이션 제목은 subtitle2 / textui/primary를 적용한다.

CommentCard

• Admin에서 선정한 댓글을 홈에 노출한다.
• 노출 정보: 에피소드 썸네일, 댓글 내용, 댓글이 받은 좋아요 개수.
• 섹션 타이틀 주인공들의 뜨거운 반응!은 body1-2 / textui/secondary를 적용한다.

RankedEpisode

• 랭킹 에피소드 디자인을 신규 스펙에 맞춰 변경한다.
• 섹션 타이틀 실시간 랭킹 Top 20은 subtitle2 / textui/primary를 적용한다.

NewEpisode

• 신작 에피소드를 모아 노출하는 영역이다.
• 상단/좌우 여백 없이 1열 3개 콘텐츠를 나열한다.
• 노출 정보: 에피소드 제목, 장르 정보, 어른용 콘텐츠 여부, 신작 여부.
• 섹션 타이틀 {Genre} 신작 에피소드는 subtitle2 / textui/primary를 적용한다.

HomeRanking / RankingTab

• 랭킹탭 내 콘텐츠 나열 영역이다.
• 상단/좌우 여백 없이 1열 2개 콘텐츠를 나열한다.
• 노출 정보: 에피소드 제목, 장르 정보, 어른용 콘텐츠 여부, 신작 여부.
• 이미지 기준 섹션 타이틀은 {Genre} 신작 에피소드, 스타일은 subtitle2 / textui/primary다. 단, 랭킹탭 맥락상 NewEpisode 문구와 중복되므로 최종 문구 확인이 필요하다.

Global Layout Rule — 강조

중요: 이번 홈 디자인 개편은 전반적으로 앱 좌우 여백을 12px 또는 0px로 줄이는 방향이다. 기존 홈 공통 padding을 그대로 유지하지 말 것.

• 각 섹션의 좌우 여백은 기본적으로 12px 적용을 우선 검토한다.
• 배너/탭/콘텐츠 리스트처럼 화면 몰입감이 중요한 영역은 디자인 스펙에 따라 좌우 여백을 제거하고 full-bleed 처리한다.
• 기존 홈 공통 padding을 기계적으로 상속하지 않는다.
• 특히 MainBanner, NewEpisode, HomeRanking은 0px/full-bleed 적용 여부를 우선 확인한다.

---

7. 성공 지표 (Success Metrics)

#	지표	현재값(2개월)	방향	비고
M1	메인 배너 CTA 클릭율	2.18%	↑	목표 1의 1차 지표
M2	랭킹 탭 조회율	25.7%	↑	목표 2
M3	신작 탭 조회율	13.9%	↑	목표 2·3
M4	장르 칩 클릭율	53.7%	유지/↑	회귀 방지 (퇴보하지 않을 것)
M5	(보조) 홈→콘텐츠 진입율 / 진입 경로 분포	미측정	↑/다양화	측정 정의 필요 → 8장

목표 수치(타깃) 미정: 각 지표의 구체 목표값은 입력으로 주어지지 않았다. 출시 전 Owner(Zen)와 타깃 설정 필요. → [10. 미해결 질문 Q1].

---

8. 분석/로깅 요구사항 및 질문

기존 분석/소스 신호 (재사용 기준)

• 화면 조회: view_home_recommend, view_home_ranking, view_home_new
• 칩 클릭: click_home_chip
• 에피소드 진입 소스: home_recommend, home_ranking, home_new

요구사항

• L1: 개편 후에도 위 기존 이벤트가 동일 의미로 유지되어 전후 비교(2026-04-18~06-18 baseline) 가 가능해야 한다.
• L2: 히어로 배너 CTA 클릭(M1)을 단독으로 식별 가능한 이벤트로 분리 계측한다. (현재 click_home_chip/배너 클릭 구분 여부 확인 필요 → Q2)
• L3: 카테고리/페이지 칩 전환을 PageResponseDto.alias 단위로 식별 가능하게 하여 탐색 경로 분포(M5)를 측정한다.
• L4: 신작 Now/Popular 등 섹션 상태별 노출·진입을 구분 계측한다(섹션 alias 기준).

로깅 관련 미해결 질문

• Q2: 메인 배너 CTA 클릭에 대한 별도 이벤트가 이미 존재하는가, 신규 정의가 필요한가?
• Q3: 새 진입점(랭킹/신작/큐레이션 바로가기 등) 추가 시 신규 이벤트 네이밍 규칙은? (view_home_*/click_home_* 패턴 준수 가정)

---

9. 의존성 / 가정 (Dependencies / Assumptions)

의존성

• Figma 디자인(히어로/칩/섹션/빈 상태 등) 확정
• PageResponseDto(type, alias, label, adultsOnly) 데이터 계약 유지 — 칩/섹션 구성이 서버 응답에 의존
• 기존 분석 파이프라인(view_home_*, click_home_*, 진입 소스) 유지

가정 (검증 필요)

• A1: 추천 메인 alias는 recommendation-all 이다. (코드상 후보, 미확정)
• A2: 신작 Now 섹션 = episode_just_released, Popular 섹션 = episode_hot_new_releases / *_hot_new_releases. (코드상 후보, 미확정)
• A3: 추천 장르/성인, 신작 Now/Popular는 모두 독립 화면이 아니라 탭 내 page alias/섹션 상태이다. (코드 검증됨)
• A4: 성인 콘텐츠 노출 정책은 현행 유지, 본 PRD는 표현만 다룬다.
• A5: 검색은 기존 route/params(episode-search, query, autoFocus)를 재사용한다.

---

10. 미해결 질문 (Open Questions)

• Q1: 각 성공 지표(M1~M4)의 목표 수치(타깃) 는? 출시 후 평가 기준 기간은?
• Q2: 메인 배너 CTA 클릭 전용 분석 이벤트가 현재 존재하는가? (없으면 신규 정의)
• Q3: 신규 진입점/카테고리 추가 시 이벤트 네이밍 규칙 확정.
• Q4: 추천 탭 전용 빈/오류 상태 UI가 필요한가? (현재 전용 컴포넌트 미확인)
• Q5: 검색은 "진입 동선·UI 일관화" 범위인가, "검색 화면 리디자인"까지 포함인가?
• Q6: "플레이 중", "큐레이션" 카테고리의 데이터 소스/alias는 무엇인가? (요청서에 카테고리명으로 언급되었으나 코드 매핑 미제공 — 별도 섹션/page인지 확인 필요)
• Q7: A1·A2의 alias/섹션 키 후보를 디자인·구현 착수 전 코드/서버 응답으로 최종 확정.
• Q8: 개편 범위에 성인 분기 UI 변경이 실제 포함되는가, 현행 유지인가?

---

11. 스펙 핸드오프 노트 (Spec Handoff Notes)

본 PRD 승인 후 구현 스펙/디자인 단계에서 다음을 확정한다.

1. 화면-컴포넌트 매핑 잠금(Scope Lock): 5장의 매핑 표를 기준으로, 변경 대상 컴포넌트를 확정한다.
   • 컨테이너/공통: HomeScreen, HomeTabHeaderPageChipList, HomeSectionList, HomeMainBannerCarousel
   • 탭: HomeRecommendTab, HomeRankingTab, HomeNewReleasesTab
   • 빈 상태: RankingEmptyList, NewReleseEmptyList(오타 컴포넌트명 — 리네이밍 여부 별도 판단)
   • 검색: EpisodeSearchScreen, EpisodeSearchWidget, route episode-search
2. alias/섹션 키 확정: A1(recommendation-all), A2(episode_just_released / episode_hot_new_releases / *_hot_new_releases)를 실제 서버 응답 기준으로 검증·잠금.
3. 데이터 계약 확인: PageResponseDto(type, alias, label, adultsOnly) 필드가 개편 UI 요구를 충족하는지 점검. 부족 시 서버 협의 항목으로 분리.
4. 분석 이벤트 명세: L1~L4 + Q2/Q3 결정사항을 이벤트 스펙(이름/파라미터/트리거)으로 문서화.
5. Figma 노드 연결: 히어로/칩/섹션/빈 상태/검색 프레임을 화면·상태 단위로 매핑(figma-design-verify 기준 프레임 분할).
6. 네이밍 정리: 본 문서의 HomeRecommend* 정정 표기를 코드/스펙 전반에 일관 적용.

---

본 문서 범위 주의: 본 PRD는 draft/home-redesign/PRD.md 로만 작성된 계획(draft) 문서다. wiki/(프로덕션 진실), log.md, audit/, protocol/ 은 본 작업으로 수정하지 않는다.