미디어 에셋 준비 가이드

고객사 서버/CDN에 업로드해서 사용하는 프로필 스프라이트와 채팅 스티커 스프라이트 준비 규칙입니다.

1) 프로필 스프라이트 준비

파일명	용도	그리드	규칙
`bj_profile.png`	BJ/진행자 프로필	8열 x 5행 (총 40개)	모든 셀 동일 크기, 배경 투명 PNG 권장
`user_profile.png`	시청자 프로필	8열 x 5행 (총 40개)	셀 순서와 index 규칙은 `bj_profile.png`와 동일 권장

index 계산 규칙

col = index % 8
row = Math.floor(index / 8)

2) 채팅 스티커 스프라이트 준비

파일명	그리드	현재 UI 가시 영역	규칙
`chat_stickers.png`	4열 x 5행 (총 20개)	모달에서 4열 x 3행 표시 + 스크롤	셀 동일 크기 유지, 좌상단부터 index 순서 배치

index 계산 규칙

col = index % 4
row = Math.floor(index / 4)

3) 고객사 서버 배포 권장 경로

/cdn/castbuilder/assets/profile/bj_profile.png
/cdn/castbuilder/assets/profile/user_profile.png
/cdn/castbuilder/assets/stickers/chat_stickers.png

4) 운영 체크리스트

파일 교체 시 캐시 버전 쿼리 사용: ?v=20260408
403/404 시 기본 에셋으로 fallback 처리
이미지 교체 후 index 순서가 바뀌지 않았는지 검수

5) API 응답에 포함할 최소 필드(권장)

{
  "profileSprite": {
    "bjUrl": "https://cdn.example.com/castbuilder/assets/profile/bj_profile.png?v=20260408",
    "userUrl": "https://cdn.example.com/castbuilder/assets/profile/user_profile.png?v=20260408",
    "cols": 8,
    "rows": 5
  },
  "stickerSprite": {
    "url": "https://cdn.example.com/castbuilder/assets/stickers/chat_stickers.png?v=20260408",
    "cols": 4,
    "rows": 5
  }
}