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