| 컴포넌트 | 커스텀 | 확정 스펙 | 예고 | 라이브 | VOD | 종속 조건 / 비고 | |||
|---|---|---|---|---|---|---|---|---|---|
| 채팅 | 상품 | 채팅 | 상품 | 채팅 | 상품 | ||||
| 상단 (top 기준) | |||||||||
| 로고 | 에셋 | 142x24 | O | O | O | O | O | O | 화이트 라벨 옵션 |
| 소리 | 고정 | 24x24 | · | · | O | O | O | O | 예고는 정지 이미지라 소리 없음 |
| 자막 | 고정 | 24x24 | · | · | 조건부 | 조건부 | 조건부 | 조건부 | 자동자막 ON 시. 예고 없음. 미노출 시 우측 아이콘 당겨짐 |
| 공유 | 고정 | 24x24 | O | O | O | O | O | O | 전 상태 공통 |
| 설정 | 고정 | 24x24 | · | · | O | O | O | O | 예고 없음 |
| 닫기 | 고정 | 24x24 | O | O | O | O | O | O | 전 상태 공통. 우측 끝 |
| 프로필 이미지 | 토글 | 40x40 | O | O | O | O | O | O | 노출 여부만 제어 |
| 라이브 뱃지 | 고정 | - | · | · | O | O | · | · | 라이브만 |
| 제목 | 토글 | 라이브뱃지 우측~우측끝 | O | O | O | O | O | O | 길어지면 한 줄 말줄임 |
| 닉네임 | 토글 | - | O | O | O | O | O | O | 노출/마스킹 제어 |
| 시청자수(PV) | 토글 | - | · | · | O | O | O | O | 예고 없음 |
| 인증 이벤트 버튼 | 에셋 | 오리지널 가로40 x 높이가변 / 커스텀 120 x 60~240 | O | O | O | O | · | · | VOD 미노출(참여/확인은 라이브 중에만). 예고/라이브만 |
| 쿠폰 (상단) | 토글 | - | · | · | O | O | · | · | 라이브만. 시스템 연동(트리거 자동 발급). 미노출 시 미니배너 당겨짐 |
| 미니배너 아이콘 | 에셋 | - | · | · | O | O | O | O | 예고 없음. 라이브/VOD 노출 |
| 중앙 | |||||||||
| 자막 오버레이 | 고정 | 가로중앙, bottom 기준 | · | · | 조건부 | 조건부 | 조건부 | 조건부 | 자동자막 ON + 자막 노출 ON. 예고 없음 |
| COMING SOON 묶음 | 고정 | 중앙 | O | O | · | · | · | · | 예고 전용. COMING SOON + 일시 + 카운트다운 |
| 알림받기 버튼 | 고정 | 카운트다운 아래 | 조건부 | 조건부 | · | · | · | · | 예고 전용. 설정 시에만 노출. 커스텀 불가 |
| 풀영상/하이라이트 토글 | 고정 | 프로필 하단(인증버튼 자리), 높이 24 | · | · | · | · | O | O | VOD 전용. VOD는 인증버튼 없어 그 자리 사용. 하이라이트 기본 재생. 커스텀 불가 |
| 하단 (bottom 기준) | |||||||||
| 롤링 박스 | 고정 | 너비 280 / VOD 상품없음 시 가변 | O | O | O | O | O | O | 전 상태 공통. 공지/Q&A 마키 순환(최대 3개), 재방송 안내 포함. VOD 채팅집중형: 상품 있으면 하단 UI 위(라이브 유사), 상품 없으면 FAQ 좌측으로 내려와 하단 UI 그룹 좌측 가변폭 |
| 채팅 영역 | 스타일 | 너비 280 | · | · | O | O | · | · | 라이브만. 예고/VOD는 채팅 불가 |
| 상품 버튼 - 썸네일 | 고정 | 40x40 | · | · | 조건부 | · | 조건부 | · | 채팅 집중형 전용. 상품 등록 시. 상품 목록 바텀시트 진입 |
| 상품 버튼 - 카드 | 고정 | - | · | · | · | 조건부 | · | 조건부 | 상품 집중형 전용. 상품 등록 시. 2개 이상이면 카드형 롤링(자동 탐색) |
| 채팅 입력박스 | 고정 | 높이 36, 가변폭 | · | · | O | · | · | · | 라이브 채팅 집중형만. 채팅 불가 상태(예고/VOD) 미노출 |
| 채팅 아이콘 | 고정 | 36x36 | · | · | · | O | · | · | 라이브 상품 집중형만. 클릭 시 입력박스 노출 |
| FAQ | 고정 | 36x36 + 라벨 (총 52) | · | · | O | O | O | O | 라이브/VOD |
| 쿠폰함 | 토글 | 채팅:36+라벨(52) / 상품:36 | · | · | O | O | O | O | 클릭 시 운영자 설정 페이지 이동. 상품집중형은 라벨 없음 |
| 좋아요 | 에셋 | 36+라벨(52) / 아이콘 업로드 40x40 | · | · | O | O | O | O | 프로그레스 바는 이벤트 설정 시 옵션. 상품집중형 좋아요만 라벨(클릭수) |
| 상품 고정 - 예고 | 고정 | 롤링박스 하단 | 조건부 | 조건부 | · | · | · | · | 예고 전용. 템플릿 "상품 고정 노출" 옵션. NOW 뱃지 없음 |
| 상품 고정 - 라이브(NOW) | 고정 | 롤링박스 하단 | · | · | 조건부 | 조건부 | · | · | 라이브만. NOW 뱃지. 1개만 고정. VOD 없음 |
| 오버레이 / 스타일 (표시 전용 또는 스타일 값) | |||||||||
| 좋아요 이펙트 (하트 파티클) | 에셋 | 내 82x82 / 상대 52x52 | · | · | O | O | O | O | 좋아요 클릭 시 애니메이션. 표시 전용(클릭 영역 아님) |
| 브랜드 컬러 | 스타일 | - | O | O | O | O | O | O | 컬러픽커 |
| 플레이어 배경 컬러 | 스타일 | - | O | O | O | O | O | O | 컬러픽커 |
| 상단 딤 / 하단 딤 | 스타일 | - | O | O | O | O | O | O | 투명도 슬라이더 20~70 |
절대 좌표 대신 쌓임 순서 + 그룹 간 갭으로 정의. 요소가 빠지면(상품 없음, 채팅 불가, 쿠폰 없음 등) 인접 요소가 자동으로 당겨짐(flex 자동 정렬). 높이/간격 px는 임의값으로 두고 추후 실측 보정.
하위 요소가 빠지면 상위 요소가 그 자리로 내려옴. 예: 상품 없음 → 상품 고정/상품 버튼 빠짐 → 롤링 박스·자막이 아래로 당겨짐. 채팅 불가(예고/VOD) → 채팅 영역·입력박스 빠짐 → 롤링 박스가 하단 UI 그룹 쪽으로 내려옴(VOD 채팅집중형: FAQ 좌측).
| 구간 | 임시 갭 |
|---|---|
| 화면 하단 패딩 ~ 하단 UI 그룹 | 10 (패딩) |
| 하단 UI 그룹 ~ 상품 고정 | 임의 (보정 필요) |
| 상품 고정 ~ 롤링 박스 | 임의 (보정 필요) |
| 롤링 박스 ~ 채팅 영역 | 임의 (보정 필요) |
| 채팅 영역 ~ 자막 | 임의 (보정 필요) |
| 상단 좌측군 요소 간 / 우측군 요소 간 | 임의 (보정 필요) |