9.7 KiB
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_myBottomNavigationView의itemIconTint는null로 두어 아이콘 tint를 적용하지 않는다.- checked 상태에서도 선택용 파란 아이콘 리소스를 사용하지 않는다.
Edge Cases
- 라벨 선택 상태는 텍스트 색상으로만 구분한다.
8. UX / UI Expectations
- 하단 내비게이션은 화면 하단에 고정된다.
- 각 탭은 동일한 가로 영역을 가진다.
- 아이콘과 타이틀은 가로 가운데 정렬한다.
- 세로 정렬은 가운데 정렬을 우선으로 하고, 타이틀은 아이콘 하단에 배치한다.
- 선택된 탭은 선택 아이콘과 선택 텍스트 스타일로 구분한다.
- 미선택 탭은 미선택 아이콘과 미선택 텍스트 스타일로 구분한다.
- 하단 내비게이션 배경은
black을 사용한다. - 하단 내비게이션 아이콘은 tint로 색을 변경하지 않고 아이콘 리소스 원본 색상을 그대로 사용한다.
- checked 상태에서
#3BB9F1계열 선택 아이콘으로 바뀌지 않아야 한다. - 하단 내비게이션 라벨 색상은 미선택
gray_600, 선택white를 사용한다. - 하단 내비게이션 라벨 typography는
Typography.Caption3을 사용한다. - 하단 내비게이션의 과도한 내부 padding은
BottomNavigationViewitem 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 컨테이너에서 처리한다.
- 기존
MyPageFragment는kr.co.vividnext.sodalive.mypage패키지의 기존 파일을 재사용한다. - 이번 문서 작성 단계에서는 구현 파일을 변경하지 않는다.
10. Metrics
- 하단 내비게이션 탭이
홈,콘텐츠,채팅,마이4개로 표시된다. - 신규 메인 화면이
kr.co.vividnext.sodalive.v2하위 신규 Activity로 구성된다. - 하단 내비게이션이
BottomNavigationView로 구성된다. - 각 탭 선택 시 대응 Fragment가 표시된다.
마이탭 선택 시 기존MyPageFragment가 표시된다.홈,콘텐츠,채팅탭 선택 시 각각 신규 빈 페이지가 표시된다.- 인증, 이벤트 팝업, 미니 플레이어 흐름이 신규 Activity에서도 기존 사용자 경험과 동일하게 동작한다.
- 요청된 선택/미선택 아이콘 리소스가 탭 상태에 맞게 연결된다.
- 디버그 빌드가 성공한다.
11. Open Questions
- 없음. 현재 구현 범위는 요청된 4탭 구성과 빈 페이지 표시로 한정한다.