PRD: 오디오 콘텐츠 위젯 태그 배지

1. Overview

Figma 20:3840, 20:3843, 20:3815, 20:3814 디자인을 기준으로 v2 패키지 아래에 생성된 신규 오디오 콘텐츠 위젯(AudioContentCardView, view_audio_content_card.xml)의 썸네일 영역에 콘텐츠 태그 배지를 표시한다.

2. Problem

기존 AudioContentCardView는 썸네일, 제목, 크리에이터명만 제공해 콘텐츠의 구매/원작/선공개 속성을 카드에서 즉시 구분할 수 없다.
기존 오디오 콘텐츠 카드 PRD에서는 태그 배지를 명시적으로 제외했으므로, 이번 추가 요구사항을 별도 문서로 확정해야 한다.
태그별 위치와 표시 순서가 정해져 있어 호출부마다 임의 구현하면 Original/First, Point/Free 정렬이 달라질 수 있다.
Free 태그는 이미지 리소스가 아니라 다국어 문자열로 생성해야 하므로 string resource 기반 계약이 필요하다.

3. Goals

AudioContentCardView 썸네일 위에 Original, First, Point, Free 태그 배지를 표시할 수 있게 한다.
대상 구현 파일은 v2 패키지 아래 신규 위젯으로 생성된 다음 파일로 한정한다.
- app/src/main/java/kr/co/vividnext/sodalive/v2/widget/AudioContentCardView.kt
- app/src/main/res/layout/view_audio_content_card.xml
왼쪽 상단에는 Original, First를 표시하고, 둘 다 있으면 Original 다음 First 순서를 유지한다.
왼쪽 하단에는 Point, Free를 표시한다.
Original, Point는 제공된 drawable 리소스를 사용한다.
First는 ic_content_tag_first_star 리소스를 사용해 Figma 20:3840 형태의 배지를 생성한다.
Free는 Figma 20:3843 기준으로 다국어 string resource 텍스트를 사용해 생성한다.
Figma 예시 조합을 지원한다.
- Free + Original + First: 20:3815
- Point + Original + First: 20:3814

4. Non-Goals

피드 위젯(kr.co.vividnext.sodalive.v2.widget.feed.*)에는 이번 변경을 적용하지 않는다.
레거시 화면, 레거시 adapter, 레거시 XML에는 이번 변경을 포함하지 않는다.
기존 화면, adapter, API, DTO에 태그 값을 일괄 연결하지 않는다.
썸네일 이미지 로딩 정책이나 placeholder 정책을 변경하지 않는다.
오디오 콘텐츠 카드의 기존 size contract(large, medium, small)를 변경하지 않는다.
Compose 컴포넌트 또는 신규 Activity/Fragment/ViewModel을 만들지 않는다.
Figma에 없는 추가 badge, animation, dim overlay, pressed effect는 추가하지 않는다.

5. Target Users

v2 오디오 콘텐츠 카드에서 콘텐츠 상태를 빠르게 구분하려는 앱 사용자.
AudioContentCardView를 XML Views 기반 목록, 캐러셀, 그리드에서 재사용하는 Android 개발자.

6. User Stories

사용자는 콘텐츠 썸네일에서 Original, First, Point, Free 속성을 즉시 확인하고 싶다.
개발자는 오디오 콘텐츠 카드에 표시할 태그 목록만 전달하고, 카드 내부에서 Figma 기준 위치와 순서가 자동으로 적용되기를 원한다.
개발자는 Free 태그 문구가 한국어/영어/일본어 등 기존 다국어 정책을 따르기를 원한다.

7. Core Features

Audio Content Card Tag Badges

v2 신규 위젯인 AudioContentCardView의 썸네일 영역을 overlay 가능한 container로 확장하고, 태그 배지를 카드 썸네일 내부의 왼쪽 상단/왼쪽 하단에 배치한다. 레거시 화면에 include하거나 레거시 카드 구현을 수정하지 않는다.

Figma References

Tag Types

Tag	위치	구현 기준	리소스/텍스트
`Original`	왼쪽 상단	Figma 예시의 24dp 정사각 original audio tag	`ic_content_tag_original`
`First`	왼쪽 상단	`#FF34B8` 배경 + 별 아이콘 + `FIRST` 텍스트	`ic_content_tag_first_star`
`Point`	왼쪽 하단	Figma 예시의 24dp 정사각 point tag	`ic_content_tag_point`
`Free`	왼쪽 하단	`#052742` 배경 + 다국어 텍스트	`@string/audio_content_tag_free`

Layout Requirements

태그 높이는 Figma 기준 24dp를 사용한다.
Original과 Point는 24dp x 24dp 아이콘 태그로 표시한다.
First는 62dp x 24dp 배지로 표시한다.
First 텍스트는 Figma 20:3840 기준 Phosphate Solid, 16sp, white, 단일 행, 대문자 FIRST로 표시한다.
First 텍스트 위치는 배지 좌측 20dp, 상단 2dp를 기준으로 하며, 별 아이콘은 좌측 2dp, 상단 4dp, 17dp x 17dp로 배치한다.
Free는 높이 24dp, 최소 폭 34dp, 가로 wrap_content 배지로 표시한다. 한국어 무료는 Figma 기준 34dp 폭으로 보이고, 다른 locale 문구가 더 길면 텍스트가 잘리지 않도록 좌우 padding을 유지한 채 폭을 확장한다.
왼쪽 상단 tag row는 썸네일의 start=0, top=0에 배치한다.
왼쪽 하단 tag row는 썸네일의 start=0, bottom=0에 배치한다.
상단 row에서 Original과 First가 함께 있으면 항상 Original, First 순서로 표시한다.
하단 row에서 Point와 Free가 함께 있으면 Point, Free 순서로 표시한다.
태그 row는 썸네일 radius와 함께 잘려야 하며 카드 바깥으로 넘치지 않아야 한다.

Data Contract Requirements

태그 표시는 순수 Kotlin contract로 관리한다.
AudioContentTag enum에 Original, First, Point, Free를 정의한다.
AudioContentCardView는 setTags(tags: Set<AudioContentTag>) API를 제공한다.
태그가 비어 있으면 모든 태그 row를 숨긴다.
setContent(title, creatorName) 기존 API는 유지한다.
thumbnailView() 기존 API는 유지해 호출부 이미지 로딩 방식을 변경하지 않는다.

Edge Cases

동일 태그가 중복 전달되면 한 번만 표시한다.
전달 순서와 무관하게 위치별 고정 순서를 적용한다.
Free와 Point가 모두 전달되면 둘 다 왼쪽 하단에 표시한다.
Original과 First가 모두 전달되면 둘 다 왼쪽 상단에 표시한다.
태그가 없는 기존 사용처는 현재와 같은 UI를 유지한다.

8. UX / UI Expectations

태그 배지는 썸네일 위에 직접 겹쳐 보이며, 제목/크리에이터 label 영역에는 영향을 주지 않는다.
large, medium, small 카드 모두 동일한 태그 크기와 위치를 사용한다.
Figma 예시처럼 Original/First는 상단 왼쪽에서 붙어 있고, Point/Free는 하단 왼쪽에서 붙어 있다.
Free 태그는 string resource 기반으로 현재 locale에 맞는 문구를 표시한다.
장식 아이콘은 접근성 노출이 필요하지 않으면 contentDescription=@null로 둔다.

9. Technical Constraints

현재 프로젝트는 Android XML Views + Kotlin custom View 패턴을 사용한다.
신규 Kotlin 코드는 kr.co.vividnext.sodalive.v2.widget 패키지 하위에 작성한다.
기존 AudioContentCardView의 public API 호환성을 깨지 않는다.
기존 카드 크기 계산은 v2 신규 위젯의 AudioContentCardSize를 유지한다.
색상과 typography는 기존 token을 우선 사용하되, Figma 고유 색상(#FF34B8, #052742)은 전용 drawable 리소스로 최소 추가한다.
다국어 문자열은 values/strings.xml, values-en/strings.xml, values-ja/strings.xml에 추가한다.
아이콘 리소스는 ic_content_tag_original, ic_content_tag_point, ic_content_tag_first_star 이름으로 제공한다.

10. Metrics

AudioContentCardView에서 4가지 태그 타입을 모두 표시할 수 있다.
Original + First 조합은 왼쪽 상단에 Original, First 순서로 표시된다.
Point + Free 조합은 왼쪽 하단에 Point, Free 순서로 표시된다.
Free 태그는 string resource를 통해 다국어 처리된다.
태그가 없는 기존 오디오 콘텐츠 카드 UI는 변경되지 않는다.
관련 unit test와 Android resource merge/build가 성공한다.

11. Open Questions

사용자 확인으로 대상 위젯은 v2 패키지 아래 신규 위젯인 AudioContentCardView와 view_audio_content_card.xml로 확정한다.
레거시 화면에는 포함하지 않고, 신규 위젯 자체의 표시 기능으로만 제공한다.
이번 작업은 문서 생성 범위이며, 구현은 계획/TASK 문서를 기준으로 별도 진행한다.

9.2 KiB Raw Blame History