klaus/sodalive-android
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
445794119395d582e30b64e41f3ca3f1c2e787e0
sodalive-android/docs/prd/20260519_타이틀바및탭텍스트바컴포넌트_prd.md

7.8 KiB
Raw Blame History

PRD: 타이틀바 및 탭 텍스트바 컴포넌트

1. Overview

XML 레이아웃 기반 화면에서 재사용할 수 있는 Title Bar Component와 Tab-Text Bar Component를 개발한다.

2. Problem

  • 화면마다 타이틀 영역과 탭 텍스트 영역을 개별 구현하면 높이, 배경색, 정렬, 텍스트 스타일이 달라질 수 있다.
  • Home 화면과 일반 화면의 타이틀 바 구조는 유사하지만 좌측 영역의 콘텐츠가 다르므로 재사용 가능한 변형이 필요하다.
  • 탭 텍스트 바는 최대 3개 메뉴와 단일 선택 상태를 일관되게 보장해야 한다.

3. Goals

  • 전체 너비, 높이 60dp, 검정 배경, 세로 가운데 정렬을 갖는 재사용 가능한 Title Bar Component를 제공한다.
  • Home Title Bar는 좌측에 img_text_logo_v2, 우측에 화면별로 교체 가능한 메뉴 아이콘을 배치할 수 있어야 한다.
  • Default Title Bar는 좌측에 화면명 텍스트, 우측에 화면별로 교체 가능한 메뉴 아이콘을 배치할 수 있어야 한다.
  • 전체 너비, 높이 52dp, 검정 배경, 세로 가운데 정렬을 갖는 재사용 가능한 Tab-Text Bar Component를 제공한다.
  • Tab-Text Bar는 최대 3개 메뉴를 지원하고 반드시 하나만 selected 상태가 되도록 설계한다.
  • Tab-Text Bar 텍스트는 Typography.Heading3을 사용하고 normal 색상은 gray_600, selected 색상은 white를 사용한다.

4. Non-Goals

  • 이번 범위에서는 실제 화면에 컴포넌트를 일괄 적용하지 않는다.
  • 신규 Activity, Fragment, ViewModel을 만들지 않는다.
  • Compose 컴포넌트 또는 Compose Theme를 추가하지 않는다.
  • 3개를 초과하는 탭 메뉴 지원, 스크롤 탭, 아이콘 탭, 배지 기능은 포함하지 않는다.
  • 메뉴 아이콘 클릭 시 수행할 화면별 비즈니스 로직은 컴포넌트 내부에 고정하지 않는다.
  • Figma에서 제공되지 않은 추가 애니메이션, 그림자, divider, pressed 효과는 추가하지 않는다.

5. Target Users

  • XML 레이아웃을 작성하거나 유지보수하는 Android 개발자.
  • 신규 v2 화면에서 공통 상단 바와 텍스트 탭 바를 재사용하려는 개발자.

6. User Stories

  • 개발자는 Home 화면에서 로고와 메뉴 아이콘이 포함된 상단 바를 반복 구현 없이 재사용하고 싶다.
  • 개발자는 일반 화면에서 화면명과 메뉴 아이콘이 포함된 상단 바를 같은 규격으로 사용하고 싶다.
  • 개발자는 화면별 요구에 맞게 우측 메뉴 아이콘을 교체하고 클릭 동작을 주입하고 싶다.
  • 개발자는 최대 3개 메뉴 중 하나만 선택되는 텍스트 탭 바를 재사용하고 싶다.

7. Core Features

Title Bar Component

재사용 가능한 상단 타이틀 바를 XML 기반으로 제공한다.

Requirements

  • Width: match_parent
  • Height: 60dp
  • Alignment: 세로 가운데 정렬
  • Background: black
  • 공통 구조는 좌측 콘텐츠 영역 + 빈 영역 + 우측 메뉴 아이콘 영역으로 구성한다.
  • 우측 메뉴 아이콘은 사용하는 화면마다 다른 drawable을 지정할 수 있어야 한다.
  • 우측 메뉴 아이콘은 없는 화면에서도 사용할 수 있도록 숨김 처리가 가능해야 한다.

Home Title Bar

Default Title Bar

Edge Cases

  • 메뉴 아이콘이 없으면 우측 아이콘 영역을 숨기거나 클릭 불가능한 상태로 둔다.
  • Default Title Bar의 화면명이 비어 있으면 빈 텍스트 그대로 표시하지 않고 호출부에서 유효한 화면명을 제공해야 한다.
  • img_text_logo_v2 리소스가 없는 경우 구현 단계에서 기존 로고 리소스 존재 여부를 먼저 확인하고, 없으면 해당 리소스를 추가 대상으로 명시한다.

Tab-Text Bar Component

최대 3개 텍스트 메뉴를 보여주는 재사용 가능한 탭 바를 XML 기반으로 제공한다.

Requirements

Edge Cases

  • 메뉴가 0개이면 호출부 오류로 간주하고 컴포넌트 사용을 허용하지 않는다.
  • 메뉴가 4개 이상이면 호출부 오류로 간주하고 컴포넌트 사용을 허용하지 않는다.
  • selected index가 메뉴 범위를 벗어나면 첫 번째 메뉴를 selected로 보정하는 단순한 동작을 기본값으로 한다.

8. UX / UI Expectations

  • Title Bar와 Tab-Text Bar는 모두 검정 배경 위에서 세로 중앙 정렬되어야 한다.
  • Home Title Bar는 img_text_logo_v2와 우측 메뉴 아이콘 사이에 빈 영역이 자연스럽게 확장되어야 한다.
  • Default Title Bar는 화면명과 우측 메뉴 아이콘 사이에 빈 영역이 자연스럽게 확장되어야 한다.
  • Tab-Text Bar는 selected 텍스트가 white, normal 텍스트가 gray_600으로 명확히 구분되어야 한다.
  • 터치 가능한 메뉴 아이콘과 탭 텍스트는 화면별 클릭 핸들러를 연결할 수 있어야 한다.

9. Technical Constraints

  • 현재 프로젝트는 XML Views + ViewBinding 기반이므로 XML 레이아웃과 Kotlin View/ViewBinding 사용 패턴을 우선한다.
  • 재사용 레이아웃은 app/src/main/res/layout 아래에 둔다.
  • 기존 유사 패턴은 toolbar_audio_content_main.xml, activity_audio_content_main.xml, activity_can_status.xml, fragment_message.xml을 참고한다.
  • 색상은 기존 colors.xml의 black, white, gray_600 토큰을 사용한다.
  • Typography는 기존 app/src/main/res/values/typography.xml의 Typography.Heading3을 사용한다.
  • 기존 화면의 동작이나 레이아웃을 요청 없이 변경하지 않는다.

10. Metrics

  • Title Bar 높이 60dp와 Tab-Text Bar 높이 52dp가 문서와 구현에서 일치한다.
  • Home Title Bar와 Default Title Bar가 각각 요구된 좌측 콘텐츠를 지원한다.
  • 메뉴 아이콘과 화면명은 호출 화면에서 변경 가능하다.
  • Tab-Text Bar는 1~3개 메뉴만 허용하고 항상 하나의 selected 상태를 유지한다.
  • Android 리소스 병합 및 디버그 빌드가 성공한다.

11. Open Questions

  • Figma 조회는 현재 도구 타임아웃으로 확인하지 못했으므로, 구현 단계에서는 제공된 텍스트 요구사항을 우선 기준으로 삼는다.
  • img_text_logo_v2가 이미 drawable 리소스로 존재하는지 구현 전 확인이 필요하다.