docs(banner): Phase 9와 10 검증을 기록한다

This commit is contained in:
2026-05-28 14:41:24 +09:00
parent a35310e536
commit 9a47c42958
2 changed files with 89 additions and 0 deletions

View File

@@ -69,11 +69,14 @@ Figma `24:5525` 기준의 이미지 배너를 XML + Kotlin custom view 기반
- 현재 배너 item은 부모 영역의 가로 가운데에 정렬한다.
- 현재 배너 item은 화면 왼쪽에서 `20dp`, 오른쪽에서 `20dp` 떨어진 위치를 기준으로 표시한다.
- 배너가 여러 개이면 item 사이 간격은 `8dp`다.
- 배너가 여러 개일 때 item 간격은 시각 중심이 밀리지 않도록 좌우 대칭 offset으로 적용한다. 예: 실제 item 사이 간격 `8dp`를 유지하되 각 item의 좌우 offset을 `4dp`씩 나누거나, 동등하게 `PagerSnapHelper` 기준 중심과 이미지 중심이 일치하는 방식을 사용한다.
- 배너가 여러 개일 때 최초 렌더링 직후, 자동/수동 슬라이드가 한 번도 발생하기 전에도 현재 banner item은 화면 중앙에 정렬되어야 한다.
- 배너가 여러 개이면 현재 배너 좌우 빈 공간에 이전/다음 배너 일부가 보여야 한다.
- 배너 이미지는 전체 영역을 채우며 `centerCrop` 기준으로 표시한다.
- 배너 root와 이미지 영역은 `radius_14` 또는 `14dp` radius를 적용한다.
- 카운터는 배너 우상단에 배치한다.
- 카운터 위치는 상단 `14dp`, 오른쪽 `14dp`를 기준으로 한다.
- 카운터의 오른쪽 `14dp` 기준은 `BannerView` root가 아니라 현재 표시 중인 중앙 banner item의 우측 경계 기준이다. `BannerView``match_parent`이고 item이 좌우 `20dp` inset 안쪽에 있으면 root 기준 end margin은 `20dp + 14dp`가 되어야 한다.
- 카운터 배경은 `rgba(0,0,0,0.7)`에 가까운 반투명 검정, capsule radius를 적용한다.
- 카운터 내부 padding은 horizontal `6dp`, vertical `4dp`를 기준으로 한다.
- 카운터 텍스트는 Pretendard Medium, `14sp`, line-height `1.45`를 기준으로 한다.
@@ -153,6 +156,9 @@ Figma `24:5525` 기준의 이미지 배너를 XML + Kotlin custom view 기반
- `BannerView``layout_width="match_parent"`, `layout_height="wrap_content"` 선언에서 기기 폭에 따라 적절한 높이로 측정된다.
- 현재 배너는 가운데 정렬되고 화면 좌우에 각각 `20dp` 기준 여백을 가진다.
- 배너 목록 2개 이상에서는 item 간격 `8dp`와 좌우 이전/다음 배너 일부 노출이 적용된다.
- 배너 목록 2개 이상에서도 현재 banner item의 이미지 중심과 snap 기준 중심이 일치하며, item spacing 때문에 이미지가 좌우 어느 한쪽으로 치우쳐 보이지 않는다.
- 배너 목록 2개 이상에서 최초 표시 상태와 슬라이드 이후 상태 모두 현재 banner item이 동일한 중심 정렬 기준을 만족한다.
- 카운터는 중앙 banner item 내부 우상단 `14dp` 위치에 표시되며, root 기준 우상단이 아니라 item 기준 우상단과 일치한다.
- 배너 목록 0개에서는 컴포넌트 영역이 숨겨진다.
- 배너 목록 1개에서는 단일 이미지만 표시되고 자동 전환, 스와이프, 카운터가 비활성화된다.
- 배너 목록 2개 이상에서는 5초 자동 전환과 350ms 전환 애니메이션이 동작한다.