5.0 KiB
5.0 KiB
PRD: 캡슐 탭바 컴포넌트
1. Overview
Figma 20:3590 디자인을 기준으로 메뉴 개수가 많을 때 가로 스크롤되는 재사용 가능한 Capsule Tab Bar Component를 개발한다.
2. Problem
- 기존
TextTabBarView는 텍스트 탭 전용이며 최대 3개 메뉴를 전제로 한다. - Figma
20:3590은 capsule 형태 탭이 여러 개 나열되고, 메뉴가 화면 너비를 넘으면 가로 스크롤되어야 한다. - 기존 Text Tab 요구사항과 capsule 탭의 높이, 패딩, radius, border, 스크롤 동작이 달라 같은 컴포넌트에 합치면 변경 범위와 회귀 위험이 커진다.
3. Goals
- 검정 배경, 높이 52dp의 재사용 가능한 Capsule Tab Bar를 제공한다.
- 탭 항목은 capsule 형태로 표시한다.
- 선택된 탭은
soda_400배경과 white 텍스트로 표시한다. - 선택되지 않은 탭은 black 배경,
gray_700border, white 텍스트로 표시한다. - 탭 내부 텍스트는 14sp medium 계열 Typography를 사용한다.
- 탭이 많아 화면 너비를 넘으면 가로로 스크롤되어야 한다.
- 메뉴 개수는 1개 이상을 허용하고, 항상 하나의 메뉴만 selected 상태여야 한다.
4. Non-Goals
- 기존
TextTabBarView동작을 변경하지 않는다. - 기존 화면에 신규 컴포넌트를 일괄 적용하지 않는다.
- Compose, 신규 Activity, Fragment, ViewModel을 추가하지 않는다.
- line 타입 또는 기존 text 타입 탭을 이번 컴포넌트에 통합하지 않는다.
- Figma에 없는 배지, 아이콘, 닫기 버튼, 스크롤 인디케이터를 추가하지 않는다.
5. Target Users
- XML 레이아웃을 작성하거나 유지보수하는 Android 개발자.
- 메뉴 개수가 동적으로 늘어날 수 있는 화면에서 capsule 탭 필터를 재사용하려는 개발자.
6. User Stories
- 개발자는 여러 개의 카테고리 메뉴를 capsule 형태로 표시하고 싶다.
- 개발자는 메뉴가 많을 때 화면 밖 메뉴를 가로 스크롤로 접근하게 하고 싶다.
- 개발자는 선택된 메뉴를 하나만 유지하고, 선택 변경 콜백으로 화면별 동작을 연결하고 싶다.
7. Core Features
Capsule Tab Bar Component
Figma 20:3590 기준 capsule 타입 탭바를 XML + Kotlin custom view로 제공한다.
Requirements
- Figma: https://www.figma.com/design/HmN1yNdJ3EIpqknFL0Hkab/-%EA%B3%B5%EC%9C%A0%EC%9A%A9-%EB%B3%B4%EC%9D%B4%EC%8A%A4%EC%98%A8-UI-UX-%EA%B8%B0%ED%9A%8D%EB%AC%B8%EC%84%9C?node-id=20-3590&m=dev
- Container width:
match_parent - Container height:
52dp - Container background: black
- Container horizontal start padding:
spacing_20 - Tab list layout: horizontal, center vertical
- Tab gap:
spacing_8 - Tab height:
34dp - Tab horizontal padding:
spacing_12 - Tab vertical padding:
spacing_8 - Tab corner radius: capsule 형태. 현재
radius_100토큰이 없으므로 구현 시 신규 dimen 토큰 추가 또는 drawable radius 직접 지정 중 하나를 계획에서 명시한다. - Selected tab: background
soda_400, text white, no border - Normal tab: background black, border
gray_700, text white - 메뉴가 화면 너비를 넘으면 가로 스크롤되어야 한다.
- 메뉴 개수는 1개 이상을 허용한다.
- selected index가 범위를 벗어나면 첫 번째 메뉴를 selected로 보정한다.
Edge Cases
- 메뉴가 0개이면 호출부 오류로 간주한다.
- 이미 선택된 탭을 다시 선택하면 중복 콜백을 호출하지 않는다.
- 메뉴 목록이 바뀌어 기존 selected index가 범위를 벗어나면 첫 번째 메뉴를 selected로 보정한다.
8. UX / UI Expectations
- 첫 번째 탭은 왼쪽 20dp 지점에서 시작한다.
- 각 탭은 8dp 간격으로 배치된다.
- 탭은 텍스트 길이에 따라 width가 늘어나며, 고정 균등 분배하지 않는다.
- 메뉴가 많으면 자연스럽게 좌우 스크롤된다.
- 스크롤 영역은 탭바 높이 52dp 안에서 세로 중앙 정렬되어야 한다.
9. Technical Constraints
- 현재 프로젝트는 XML Views + ViewBinding 기반이므로 XML 레이아웃과 Kotlin custom view 패턴을 사용한다.
- 신규 Kotlin 코드는
kr.co.vividnext.sodalive.v2.widget패키지 하위에 둔다. - 기존
TextTabBarView와TextTabSelectionState의 동작을 깨지 않는다. - 기존 디자인 토큰
soda_400,gray_700,white,black,spacing_8,spacing_12,spacing_20을 우선 사용한다. - 필요한 경우 capsule radius 전용 dimen 또는 drawable 리소스를 최소 범위로 추가한다.
10. Metrics
- 메뉴 1개 이상을 설정할 수 있고 항상 하나만 selected 상태다.
- 탭 항목이 화면 너비를 초과해도 가로 스크롤로 접근할 수 있다.
- Android 리소스 병합 및 디버그 빌드가 성공한다.
- 관련 선택 상태 테스트가 통과한다.
11. Open Questions
- 사용자 응답이 없으므로 기존
TextTabBarView확장이 아닌 별도CapsuleTabBarView추가를 기본 설계로 확정한다.