Files
sodalive-android/docs/prd/20260519_메인페이지하단내비게이션신규개발_prd.md

9.7 KiB

PRD: 메인 페이지 하단 내비게이션 신규 개발

1. Overview

메인 페이지를 4개 하단 내비게이션 탭 구조로 정리하고, 탭별 페이지를 표시한다.


2. Problem

  • 현재 메인 화면은 커스텀 하단 탭바와 기존 MainActivity에 여러 레거시 흐름이 함께 묶여 있다.
  • BottomNavigationView와 신규 페이지 구조를 기존 MainActivity에 덧씌우면 레거시 구조와 신규 구조가 섞여 복잡도가 커질 수 있다.
  • 신규 메인 페이지는 , 콘텐츠, 채팅, 마이 4개 탭을 기준으로 동작해야 한다.
  • 마이 탭은 기존 마이페이지 기능을 유지해야 하며, 나머지 탭은 아직 상세 기능이 없으므로 빈 페이지로 시작해야 한다.

3. Goals

  • 메인 페이지 하단 내비게이션을 , 콘텐츠, 채팅, 마이 4개로 구성한다.
  • 신규 메인 컨테이너는 기존 MainActivity를 수정해 덧씌우지 않고 kr.co.vividnext.sodalive.v2 하위 신규 Activity로 개발한다.
  • 하단 내비게이션은 커스텀 탭바가 아니라 Material BottomNavigationView를 사용한다.
  • 탭 선택 시 해당 탭에 대응하는 Fragment 페이지를 표시한다.
  • 마이 탭은 기존 MyPageFragment를 그대로 표시한다.
  • , 콘텐츠, 채팅 탭은 신규 빈 페이지 Fragment를 만들어 표시한다.
  • 탭 아이콘은 tint와 선택 상태용 파란 아이콘 리소스를 적용하지 않고 원본 아이콘 리소스를 그대로 사용한다.
  • 하단 내비게이션 아이콘/타이틀 정렬은 가로 가운데, 세로 가운데를 우선 적용하고 타이틀은 아이콘 하단에 위치하도록 한다.

4. Non-Goals

  • , 콘텐츠, 채팅 탭의 실제 콘텐츠/데이터/API 기능은 구현하지 않는다.
  • 기존 MyPageFragment 내부 UI와 비즈니스 로직은 수정하지 않는다.
  • 기존 MainActivity에 신규 BottomNavigationView 구조를 덧씌우지 않는다.
  • 메인 페이지 외 다른 화면의 탭 구조를 일괄 변경하지 않는다.
  • 탭별 back stack은 구현하지 않는다.
  • Navigation Component 도입은 이번 범위에 포함하지 않는다.
  • 누락된 ic_nav_my_selected 원본 리소스를 새로 제작하지 않는다.
  • 기존 MainActivity 전체를 리팩터링하지 않는다. 신규 Activity에 필요한 인증, 이벤트 팝업, 미니 플레이어 등 필수 흐름만 선별 이관한다.

5. Target Users

  • 앱 메인 화면에서 하단 탭으로 주요 섹션을 이동하는 일반 사용자.
  • 메인 탭 구조를 기준으로 후속 홈/콘텐츠/채팅 기능을 개발할 Android 개발자.

6. User Stories

  • 사용자는 메인 화면 하단에서 , 콘텐츠, 채팅, 마이 탭을 볼 수 있다.
  • 사용자는 각 탭을 눌러 해당 페이지로 이동할 수 있다.
  • 사용자는 마이 탭에서 기존 마이페이지 기능을 그대로 사용할 수 있다.
  • 개발자는 아직 기능이 정해지지 않은 , 콘텐츠, 채팅 탭을 빈 페이지로 구분해 후속 개발의 시작점으로 사용할 수 있다.

7. Core Features

Feature A: 4개 하단 내비게이션 탭

신규 메인 Activity의 하단 내비게이션을 , 콘텐츠, 채팅, 마이 순서로 구성한다.

Requirements

  • 탭 순서는 왼쪽부터 , 콘텐츠, 채팅, 마이이다.
  • 하단 내비게이션 UI는 Material BottomNavigationView와 menu 리소스로 구성한다.
  • 탭 라벨은 기존 문자열 리소스가 있으면 재사용하고, 없는 경우 새 문자열 리소스를 추가한다.
  • 현재 확인된 기존 문자열은 tab_home, tab_chat, tab_my이다.
  • 콘텐츠 탭 라벨은 신규 문자열 리소스 추가가 필요하다.

Edge Cases

  • 기존 LIVE 탭에 연결된 딥링크/진입 흐름은 신규 메인 Activity에서 그대로 탭으로 노출하지 않는다.
  • 신규 메인 탭 상태는 기존 MainViewModel.CurrentTab을 수정하지 않고 v2 전용 탭 모델로 분리한다.

Feature B: 탭별 Fragment 표시

탭 선택 시 신규 메인 Activity의 Fragment 컨테이너에 대응 Fragment를 표시한다.

Requirements

  • 마이 탭은 app/src/main/java/kr/co/vividnext/sodalive/mypage/MyPageFragment.kt를 표시한다.
  • , 콘텐츠, 채팅 탭은 신규 빈 Fragment를 표시한다.
  • 신규 Activity, Fragment, ViewModel 및 연결 하위 코드는 저장소 규칙에 따라 kr.co.vividnext.sodalive.v2 패키지 하위에 작성한다.
  • 빈 페이지는 화면 영역을 차지하되, 별도 데이터 로딩이나 네트워크 호출을 하지 않는다.
  • 탭별 back stack은 만들지 않는다.

Edge Cases

  • 신규 빈 Fragment는 BaseFragment 패턴과 ViewBinding 사용 여부를 기존 코드 스타일에 맞춘다.
  • MyPageFragment는 기존 패키지에 있으므로 재사용만 하고 이동하지 않는다.

Feature C: 신규 메인 Activity와 기존 필수 프로세스 이관

신규 메인 Activity는 기존 MainActivity를 덮어쓰지 않고 별도 진입점으로 구성하며, 사용자 경험 유지에 필요한 필수 프로세스만 이관한다.

Requirements

  • 신규 Activity는 kr.co.vividnext.sodalive.v2 패키지 하위에 작성한다.
  • 기존 인증/로그인 진입, 권한 요청, 이벤트 팝업, 미니 플레이어 표시/해제 흐름은 신규 Activity에서도 현재 사용자 경험과 동일하게 동작해야 한다.
  • 미니 플레이어는 BottomNavigationView 위에 배치해 하단 내비게이션과 겹치지 않도록 한다.
  • 기존 MainActivity의 모든 레거시 메서드를 무조건 복사하지 않고 신규 메인 화면에 필요한 흐름만 이관한다.
  • 스플래시, 로그인/회원가입 완료, 딥링크, 플레이어 알림 등 기존 MainActivity로 이동하던 주요 진입점은 신규 Activity로 전환할지 구현 계획에서 명시적으로 검토한다.

Edge Cases

  • 딥링크는 향후 정리 계획이 있으므로 신규 Activity에서 탭 라우팅 진입점을 분리해 확장 가능하게 둔다.
  • 채팅 배지는 향후 BottomNavigationView의 badge API로 확장할 수 있도록 menu item id를 안정적으로 정의한다.

Feature D: 탭 아이콘 색상 유지

탭 선택/미선택 상태와 무관하게 아이콘 리소스 원본 색상을 그대로 표시한다.

Requirements

  • : ic_nav_home
  • 콘텐츠: ic_nav_content
  • 채팅: ic_nav_chat
  • 마이: ic_nav_my
  • BottomNavigationViewitemIconTintnull로 두어 아이콘 tint를 적용하지 않는다.
  • checked 상태에서도 선택용 파란 아이콘 리소스를 사용하지 않는다.

Edge Cases

  • 라벨 선택 상태는 텍스트 색상으로만 구분한다.

8. UX / UI Expectations

  • 하단 내비게이션은 화면 하단에 고정된다.
  • 각 탭은 동일한 가로 영역을 가진다.
  • 아이콘과 타이틀은 가로 가운데 정렬한다.
  • 세로 정렬은 가운데 정렬을 우선으로 하고, 타이틀은 아이콘 하단에 배치한다.
  • 선택된 탭은 선택 아이콘과 선택 텍스트 스타일로 구분한다.
  • 미선택 탭은 미선택 아이콘과 미선택 텍스트 스타일로 구분한다.
  • 하단 내비게이션 배경은 black을 사용한다.
  • 하단 내비게이션 아이콘은 tint로 색을 변경하지 않고 아이콘 리소스 원본 색상을 그대로 사용한다.
  • checked 상태에서 #3BB9F1 계열 선택 아이콘으로 바뀌지 않아야 한다.
  • 하단 내비게이션 라벨 색상은 미선택 gray_600, 선택 white를 사용한다.
  • 하단 내비게이션 라벨 typography는 Typography.Caption3을 사용한다.
  • 하단 내비게이션의 과도한 내부 padding은 BottomNavigationView item padding 속성으로 줄인다.
  • edge-to-edge로 인해 하단 내비게이션 아래에 생기는 system bar inset 빈 공간은 MainV2 화면 범위에서만 제거한다.
  • 향후 채팅 배지와 Material UX 정리를 고려해 BottomNavigationView의 표준 item 상태, ripple, badge 확장성을 우선한다.
  • 빈 페이지는 기능이 비어 있음을 개발자가 확인할 수 있는 최소 UI로 유지한다.

9. Technical Constraints

  • Android XML 레이아웃과 Kotlin Fragment 기반 구현을 따른다.
  • 신규 메인 화면은 기존 MainActivity, activity_main.xml, item_main_tab.xml에 덧씌우지 않는다.
  • 신규 Activity, ViewModel, Fragment 코드는 kr.co.vividnext.sodalive.v2 하위에 둔다.
  • 하단 내비게이션은 Material BottomNavigationView를 사용한다.
  • 탭 전환은 탭별 back stack 없이 단일 Fragment 컨테이너에서 처리한다.
  • 기존 MyPageFragmentkr.co.vividnext.sodalive.mypage 패키지의 기존 파일을 재사용한다.
  • 이번 문서 작성 단계에서는 구현 파일을 변경하지 않는다.

10. Metrics

  • 하단 내비게이션 탭이 , 콘텐츠, 채팅, 마이 4개로 표시된다.
  • 신규 메인 화면이 kr.co.vividnext.sodalive.v2 하위 신규 Activity로 구성된다.
  • 하단 내비게이션이 BottomNavigationView로 구성된다.
  • 각 탭 선택 시 대응 Fragment가 표시된다.
  • 마이 탭 선택 시 기존 MyPageFragment가 표시된다.
  • , 콘텐츠, 채팅 탭 선택 시 각각 신규 빈 페이지가 표시된다.
  • 인증, 이벤트 팝업, 미니 플레이어 흐름이 신규 Activity에서도 기존 사용자 경험과 동일하게 동작한다.
  • 요청된 선택/미선택 아이콘 리소스가 탭 상태에 맞게 연결된다.
  • 디버그 빌드가 성공한다.

11. Open Questions

  • 없음. 현재 구현 범위는 요청된 4탭 구성과 빈 페이지 표시로 한정한다.