와이어프레임 · 저충실도 · 재사용 패턴(테마 갤러리 + 확률 표)

룰렛 관리

통합 후원 플랫폼(가칭) 기획서 §03 룰렛 기준. 테마 선택은 채팅창·후원목표·후원자막과 동일한 “테마 갤러리” 골격을, 상품 확률은 시그니처와 같은 “확률 테이블” 골격을 재사용합니다.
이 화면은 스튜디오 셸의 콘텐츠 영역입니다. 사이드바(21개 메뉴)·전역 헤더(모드 전환·🔴 LIVE 배지·🔔 알림)·저장 바는 스튜디오 셸 와이어프레임에서 정의하며 여기서는 그리지 않습니다. 설정값은 편집 시 미리보기에만 반영되고, 저장해야 송출에 반영됩니다(§00 저장 원칙).
변경(v4) — 테마 선택을 후원자막 스타일 갤러리로 교체. 기존엔 “휠 디자인” 한 줄에 템플릿 select + 색상 select 두 개를 나란히 두고 조합하게 했는데, 이러면 완성된 모습을 미리 볼 수 없었습니다. 후원자막·채팅창과 동일하게 검색 + 스타일 필터 + 정렬 + 즐겨찾기 + 썸네일 그리드 구조로 바꿔, 템플릿×색상 16가지 조합을 미리 합성된 원형 썸네일로 늘어놓고 클릭 1회로 고르게 했습니다. 세그먼트 수는 등록 상품 개수에 따라 계속 바뀌므로(구간별 확률판에서 실시간 반영) 썸네일 자체는 현재 등록 상품 수 기준으로 매번 다시 그려지는 실시간 미리보기입니다 — 데이터 모델은 supply_type=parametric 그대로지만, 사용자가 보는 화면은 시그니처 빙고판 같은 완성형 갤러리와 동일한 “보고 고르는” 경험을 제공합니다.
재사용 화면(다른 골격 2개 결합). 상단 테마 갤러리는 후원자막·채팅창·후원목표와 같은 컴포넌트, 하단 “구간별 확률 테이블”은 시그니처와 유사한 골격으로 향후 확률 기반 유형(럭키박스 등)에도 재사용될 수 있습니다.
변경(v5) — 탭 전환 UI 제거. 기존엔 패널 상단에 “테마 갤러리[1단]”/“상세 설정[2단]” 탭이 있었는데, 없애고 테마 갤러리 아래로 상세 설정·구간별 확률판이 그냥 이어서 보이는 한 화면으로 바꿨습니다(다른 테마 갤러리 화면과 동일한 변경, 사용자 피드백 반영).
변경(v7) — 설정 패널·미리보기 비율 역전, 스크롤→페이지네이션. 설정 패널을 고정폭(500px)에서 가변폭(1fr, 남은 공간 전부)으로 바꾸고 대신 미리보기를 고정 360px로 좁혔습니다 — 테마 갯수가 늘면서 설정 패널이 더 넓어야 한다는 판단(§03 후원목표에서 먼저 검증 후 채팅창·후원자막·룰렛·빙고판에 동일 적용). “전체 테마” 목록은 내부 스크롤 대신 5열×2줄 고정 + <›> 페이지네이션으로 전환(짧은 박스 안 스크롤바가 작아 조작하기 어렵다는 이슈 — Baymard/NN·g 등 UX 리서치 근거). 미리보기는 기존부터 이미 sticky였습니다.
위젯 URL
https://•••••••••••••••••••••••••••••••••
복사
열기
OBS 소스 미리보기 테마: 네온 퍼플
6개 상품
실시간 렌더링
1
테마 갤러리
🔍 테마 이름으로 검색
전체
클래식
네온
파스텔
다크
인기순 ▾
★ 즐겨찾기
★
네온 퍼플
★
클래식 블루
전체 테마 · 인기순 · 템플릿4×색상4
1 / 2
‹
›
☆
클래식 레드
☆
클래식 골드
☆
네온 핑크
☆
네온 시안
☆
파스텔 민트
☆
다크 실버
☆
클래식 그린
☆
…외 8종
2
상세 설정 — 상품과 무관한 공통값
룰렛 이름룰렛 후원
룰렛 가격1,000 캐시
회전 시간3초
알림 메시지{닉네임}님의 {금액}캐시 {이름} 룰렛 후원!
후원 횟수 제한사용안함 ▾
3
구간별 확률판
1,000 ~ 9,999캐시기본 구간
상품명확률(%)
꽝70.000✎
리액션20.000✎
노래 신청7.000✎
매니저 지목2.880✎
24시간 방종0.100✎
쉴드0.020✎
확률 합계100.000%
▶ 1,000회 시뮬레이션
+ 구간 추가

주석 — 기획서 필드 대응표

#영역필드타입옵션 값 / 제약사항입력 예시
① 테마 갤러리 — 후원자막과 동일 컴포넌트 재사용
1테마 갤러리테마 검색text테마 이름 부분일치, 입력 즉시 그리드 필터링"네온" 입력 → 네온 계열만 표시
1테마 갤러리스타일 필터chip 단일선택전체/클래식/네온/파스텔/다크 — 템플릿 도형 4종에 대응하는 상위 분류(운영 정책으로 확장 가능)"네온" 선택
1테마 갤러리정렬select인기순(기본) / 최신순 / 이름순"인기순"
1테마 갤러리즐겨찾기 그룹card group(조건부 노출) + ★ 토글즐겨찾기한 테마가 1개 이상일 때만 그리드 최상단에 별도 섹션으로 고정 노출"네온 퍼플", "클래식 블루" 즐겨찾기됨
1테마 갤러리테마 카드 — 즐겨찾기 토글icon button(★/☆, 카드별)클릭 시 즉시 즐겨찾기 그룹에 추가/제거, 선택(적용)과는 별개 동작"☆" 클릭 → "★"
1테마 갤러리테마 그리드 — 휠 디자인 파라메트릭(parametric)썸네일 그리드(템플릿4×색상4=16종), 5열×2줄 고정 + ‹› 페이지네이션변경. 기존의 “템플릿 select + 색상 select” 2단 드롭다운을 폐기하고 후원자막·채팅창과 동일한 갤러리 컴포넌트로 통일. 도형(템플릿)은 4종 고정, 색상 4종과의 조합을 미리 합성한 원형 썸네일로 제공 — 실제로는 template_id + color_id 저장이지만(세그먼트 수가 등록 상품 개수에 따라 달라져 structure_type=dynamic, 시그니처 빙고판처럼 완성형 그림 한 장은 불가) 썸네일은 현재 등록 상품 수를 반영해 그때그때 다시 렌더링되는 실시간 미리보기라 사용자에게는 완성형 갤러리처럼 보임(§00 “테마 공급 방식 분류” 참고). v7: 설정 패널 폭을 미리보기보다 넓게(1fr : 미리보기 360px 고정) 조정하고, 목록은 내부 스크롤 대신 페이지네이션으로 전환"네온 퍼플" 선택 = template_id:neon + color_id:purple
1테마 갤러리전체 테마 페이지네이션 v7 신규‹ › 버튼 + N/M 페이지 표시5열×2줄(10개) 고정 그리드로 한 페이지 구성, 내부 스크롤 대신 페이지 이동으로 탐색 — 짧은 고정높이 박스에서 스크롤바가 작고 조작하기 어렵다는 이슈로 스크롤→페이지네이션 전환(v7)"1 / 2"
② 상세 설정 — 상품과 무관한 공통값
2상세 설정룰렛 이름text최대 20자"룰렛 후원"
2상세 설정룰렛 가격number + 캐시정수, 최소 1001,000
2상세 설정룰렛 회전 시간number(초)1~10 범위, 기본 3초3
2상세 설정알림 메시지text 템플릿{닉네임}{금액}{이름} 플레이스홀더, 최대 60자"{닉네임}님의 {금액}캐시 {이름} 룰렛 후원!"
2상세 설정후원 횟수 제한 사용toggle기본 OFF — ON 시 일/주/월 단위 참여 횟수 상한 설정 가능(하위 필드는 켰을 때만 노출)OFF
③ 구간별 확률판
3확률판적용 구간number(부터~까지) × 2 + checkbox(연차 사용)정수, 캐시 단위, 구간마다 독립된 확률판을 가짐 — 겹치지 않게 등록 권장(검증은 저장 시 경고)"1,000 ~ 9,999캐시"
3확률판상품명text(행 반복)최대 15자, 행 추가/삭제 자유 — 이 행 개수가 곧 미리보기 휠의 세그먼트 수"꽝", "리액션", "노래 신청"
3확률판확률(%)number(소수 3자리, 행 반복)0.000~100.000, 전체 항목의 합이 정확히 100.000이어야 저장 가능(미달·초과 시 저장 차단)70.000 / 20.000 / 7.000 / 2.880 / 0.100 / 0.020
3확률판확률 합계readonly(자동 계산)실시간으로 항목 확률 합산, 100.000%가 아니면 빨간색 경고 표시(가정)100.000%
3확률판시뮬레이션button + readonly 결과표클릭 시 1,000회 랜덤 추첨을 즉시 실행해 실제 분포를 확인 — 등록 전 검증용, 실제 후원에는 영향 없음"꽝 702회, 리액션 198회…"
3확률판구간 추가button새 금액 구간 카드 생성, 개수 제한 없음"10,000 ~ 49,999캐시" 구간 추가
통합 후원 플랫폼(가칭) · 와이어프레임 v7 · 저충실도 · 기준 문서: 통합 플랫폼 기획서 §03 룰렛 · v2: 필드별 타입·옵션·제약·입력예시 상세 스펙 추가 · v3: 테마 공급 방식 분류 반영(supply_type=parametric, 세그먼트 가변이라 완성형 자산 대신 파라메트릭 유지) · v4: 테마 선택 UI를 “템플릿select+색상select”에서 후원자막과 동일한 “테마 갤러리”(검색·필터·정렬·즐겨찾기+미리 합성된 썸네일 16종 그리드)로 교체, 화면 골격을 urlbar+split(preview/settings 500px) 구조로 재구성 · v5: “테마 갤러리[1단]/상세 설정[2단]” 탭 제거, 탭 전환 없이 한 화면으로 변경(사용자 피드백) · v6(검증 반영): 미리보기 휠을 등록 상품 수와 같은 6조각으로 수정(기존 3조각이라 “6개 상품” 표기와 불일치) · v7: 설정 패널·미리보기 폭 비율 역전(500px 고정→1fr 가변, 미리보기 360px 고정), 전체 테마 목록 내부 스크롤→5열×2줄 페이지네이션 전환(§03 후원목표에서 먼저 검증) · 2026-08-28