와이어프레임 · 저충실도 · 위젯 라이브러리 상세 · 사운드·연출형

시그니처 빙고판 유료 구독 게이트

통합 후원 플랫폼(가칭) 기획서 §04 위젯 라이브러리 기준. 후원 개수만큼 빙고 칸을 채워가는 게이미피케이션 위젯 — 유료 구독이 필요한 기능이라, 화면 진입 시 구독 안내가 먼저 뜹니다.
이 화면은 스튜디오 셸의 콘텐츠 영역입니다. 사이드바(21개 메뉴)·전역 헤더(모드 전환·🔴 LIVE 배지·🔔 알림)·저장 바는 스튜디오 셸 와이어프레임에서 정의하며 여기서는 그리지 않습니다. 설정값은 편집 시 미리보기에만 반영되고, 저장해야 송출에 반영됩니다(§00 저장 원칙).
과금 정책 결정 필요. 특정 구독자만 사용 가능했던 유료 게이트 기능입니다. 통합 플랫폼에서도 유료 티어로 유지할지, 무료로 풀지는 기획서 §13 미결정 사항에 없던 새 결정 포인트입니다.
변경(v5) — 테마 영역을 후원자막 스타일 갤러리로 구성. 기존엔 “기본 설정” 아코디언 속에 테마가 썸네일 한 줄로 묻혀 있었는데, 이를 채팅창·후원목표·후원자막·룰렛과 동일한 독립 1단 “테마 갤러리”(검색+스타일 필터+정렬+즐겨찾기+그리드)로 끌어올렸습니다. 가로 개수는 다른 화면과 다르게 2열을 채택했습니다 — 다른 화면의 테마는 색상·아이콘 위주라 3열의 작은 썸네일로도 구분이 되지만, 빙고판 테마는 11패널이 통째로 그려진 세로형 일러스트라 3열로 줄이면 패널 구성이 뭉개져 식별이 안 됩니다. 그래서 패널 폭도 380px→440px, 썸네일 비율은 3:4(세로형)로 조정해 2열에서도 각 테마가 충분히 커 보이게 했습니다.
테마 공급 방식. supply_type=curated_asset, structure_type=fixed_slots — 실사용 확인된 테마 9종(기본/치지직/핑크/보라/침팬/갈색/민트/네이비/레드)은 색상만 다른 게 아니라 11패널 고정 구성의 완성 일러스트입니다. 갤러리 맨 앞에 “테마 없음(기본형)” 카드를 추가해, 이걸 고르면 아래 “빙고 칸수”(2×2~5×5)가 잠금 해제되는 파라메트릭 렌더링으로 전환되도록 흐름을 명시했습니다(기존엔 이 전환 로직이 §00에 미결정으로만 남아있었음 — 갤러리에 “기본형” 카드를 두는 방식으로 UI에 확정 반영).
변경(v8) — 설정 패널·미리보기 비율 역전, 스크롤→페이지네이션. 설정 패널을 고정폭(560px)에서 가변폭(1fr, 남은 공간 전부)으로 바꾸고 대신 미리보기를 고정 360px로 좁혔습니다(§03 후원목표에서 먼저 검증 후 채팅창·후원자막·룰렛·빙고판에 동일 적용). 목록은 내부 스크롤 대신 3열×2줄 고정 + <›> 페이지네이션으로 전환(짧은 박스 안 스크롤바가 작아 조작하기 어렵다는 이슈 — Baymard/NN·g 등 UX 리서치 근거) — 단, 가로 열 수(3열)와 썸네일 3:4 비율은 그대로 유지합니다. 이건 v7에서 “11패널 일러스트 식별성”을 이유로 이미 신중하게 정한 값이라, 다른 위젯처럼 4열로 늘리면 이 근거가 깨집니다. 미리보기는 기존부터 이미 sticky였습니다.
OBS 소스 미리보기 테마: 핑크
10
20
30
40
50
60
70
80
90
100
110
완성형 테마 “핑크” — 11패널 고정 구성(4·3·4)
1
테마 갤러리
🔍 테마 이름으로 검색
전체
기본형
컬래보
시즌
인기순 ▾
★ 즐겨찾기
★11패널
핑크
★11패널
치지직
전체 테마 · 인기순 · 완성형 9종 + 기본형
1 / 2
‹
›
테마 없음
(기본형·파라메트릭)
☆
기본형 parametric
☆11패널
기본
☆11패널
보라
☆11패널
침팬
☆11패널
갈색
☆11패널
민트
2 / 2 페이지 (가정 — 이하 2종은 실제 목업 기준, 이 와이어프레임에는 페이지 전환 없이 목록만 표기)
☆11패널
네이비
☆11패널
레드
2
빙고 칸수 테마=기본형(parametric)일 때만 조정 가능 · 완성형 테마 선택 시 11패널로 잠김
2×2
4×2
4×4
5×5
🔒 현재 완성형 테마(“핑크”)가 적용돼 4개 프리셋 모두 비활성 — 칸 구성은 테마의 11패널로 고정됩니다. 조정하려면 갤러리에서 “테마 없음(기본형)”을 선택하세요.
3
기본 스타일 칸 안 콘텐츠 타입 — 테마(외곽 일러스트)와는 별개 설정
숫자빙고
이미지빙고
빈칸빙고
시그헌터빙고
4
상세 설정
기본 설정 빙고방식(자동/수동)·공지표시·완료효과
개수 설정 플랫폼 select + 자동입력 버튼
선택 스타일 SOLD OUT / COMPLETED 스탬프
세부 설정 개수표시·툴팁표시·후원자표시

주석 — 기획서 필드 대응표

#영역필드타입옵션 값 / 제약사항입력 예시
① 테마 갤러리 — 후원자막·룰렛과 동일 컴포넌트, 3열로 조정(v7)
1테마 갤러리테마 검색text테마 이름 부분일치, 입력 즉시 그리드 필터링"핑크" 입력 → 핑크 테마만 표시
1테마 갤러리스타일 필터chip 단일선택전체/기본형/컬래보(치지직 등 플랫폼 협업)/시즌 — 현재는 완성형 9종+기본형뿐이라 필터 없이도 훑어볼 수 있지만, 후원자막과 동일한 툴바를 유지해 향후 시즌 테마가 늘어나도 화면 구조를 바꾸지 않도록 선제 적용"컬래보" 선택 → "치지직"만 표시
1테마 갤러리정렬select인기순(기본) / 최신순 / 이름순"인기순"
1테마 갤러리즐겨찾기 그룹card group(조건부 노출) + ★ 토글즐겨찾기한 테마가 1개 이상일 때만 그리드 최상단에 별도 섹션으로 고정 노출"핑크", "치지직" 즐겨찾기됨
1테마 갤러리테마 카드 — 즐겨찾기 토글icon button(★/☆, 카드별)클릭 시 즉시 즐겨찾기 그룹에 추가/제거, 선택(적용)과는 별개 동작. “테마 없음(기본형)” 카드는 즐겨찾기 대상에서 제외"☆" 클릭 → "★"
1테마 갤러리테마 그리드 완성형(curated_asset)썸네일 그리드 3열(3:4 세로형), 3열×2줄 고정 + ‹› 페이지네이션변경. 기존 아코디언 속 완성형 테마(현재 9종) 썸네일 한 줄을 후원자막과 같은 독립 갤러리로 승격. 정정(v7) — 가로 3열. v2.23에서는 11패널 스토리보드 일러스트의 식별성을 위해 2열을 택했으나, 한 번에 보이는 테마 수가 적어 탐색이 불편하다는 판단으로 3열로 늘렸습니다. 패널 폭을 440px→560px로 넓혀 미리보기 영역을 줄이고 그만큼을 갤러리에 배분했습니다 — 썸네일은 197px→168px로 약 15% 작아지지만 세로형(3:4)이라 11패널 구성은 여전히 판별 가능합니다. 각 카드에 “11패널” 배지로 고정 구성임을 명시. v8: 목록은 내부 스크롤 대신 3열×2줄(6개) 고정 + 페이지네이션으로 전환 — 3열/3:4 비율은 패널 식별성 때문에 그대로 유지(다른 위젯의 4열 전환과 다름)"핑크" 선택
1테마 갤러리테마 없음(기본형) 카드 신규그리드 첫 칸 고정 카드완성형 일러스트 대신 파라메트릭 기본 렌더링을 쓰겠다는 명시적 선택지 — 이 카드를 고르면 “②빙고 칸수”의 잠금이 풀림(§00 결정사항의 미결정 전환 로직을 이 카드로 확정)"기본형" 선택 → 칸수 2×2~5×5 자유 조정
1테마 갤러리전체 테마 페이지네이션 v8 신규‹ › 버튼 + N/M 페이지 표시3열×2줄(6개) 고정 그리드로 한 페이지 구성, 내부 스크롤 대신 페이지 이동으로 탐색 — 짧은 고정높이 박스에서 스크롤바가 작고 조작하기 어렵다는 이슈로 스크롤→페이지네이션 전환(v8)"1 / 2"
② 빙고 칸수 — 테마=기본형일 때만 유효
2빙고 칸수칸수 프리셋select × 2(가로/세로) + 프리셋 버튼2×2 / 4×2 / 4×4 / 5×5 — 완성형 테마 선택 시 비활성(11패널로 고정), 기본형 선택 시에만 조정 가능"4×4"
2빙고 칸수칸 인라인 편집클릭 → 개수/내용 오버라이드각 칸의 필요 후원 개수(number)와 표시 내용(숫자/이미지/텍스트, 스타일에 따라 다름)을 개별 수정 가능칸 "10" → "15"로 수정
③ 기본 스타일 — 칸 콘텐츠 타입(테마와 별개)
3기본 스타일스타일 선택프리셋 카드 × 4(단일) — 3열(v7)빈칸빙고 / 숫자빙고 / 이미지빙고 / 시그헌터빙고 — 테마(외곽 일러스트)와 독립적으로 조합 가능. v7: 위 테마 갤러리와 열 수를 맞춰 3열로 조정(4개라 두 번째 줄은 1칸만 차서, 스타일이 늘어나면 자연히 채워짐)"숫자빙고"
④ 상세 설정 — 기본 설정
4기본 설정빙고 방식radio자동(후원 시 자동으로 칸 채움) / 수동(크리에이터가 직접 칸 클릭)"자동"
4기본 설정공지 표시 / 기본 이미지 / 선택 효과음radio × 3각각 사용안함/기본값/커스텀 선택지 구조공지표시 "사용안함"
4기본 설정완료 효과checkbox × 2빙고 완성 시 폭죽 이펙트 + 완료 사운드 — 기본 둘 다 ON폭죽 ON, 사운드 ON
④ 상세 설정 — 개수 설정
4개수 설정플랫폼 선택 + 자동입력select(플랫폼) + number + 버튼플랫폼 선택 후 "자동입력" 클릭 시 칸수만큼 등차 숫자를 자동 채움(예: 10,20,30…)SOOP 선택 → 자동입력 → 10~160
④ 상세 설정 — 선택 스타일
4선택 스타일스탬프 방식radioSOLD OUT / COMPLETED — 칸 완료 시 표시할 도장 문구 스타일"COMPLETED"
④ 상세 설정 — 세부 설정
4세부 설정기본 개수 표시 / 툴팁 표시 / 후원자 표시checkbox × 3기본 개수 표시 ON, 툴팁(칸 hover 시 상세정보) OFF, 후원자 표시(완료 칸에 후원자 닉네임) OFF기본개수표시 ON
통합 후원 플랫폼(가칭) · 와이어프레임 v9 · 저충실도 · 기준 문서: 통합 플랫폼 기획서 §04 위젯 라이브러리 · v2: 필드별 타입·옵션·제약·입력예시 상세 스펙 추가 · v3: 출처(위플랩/투네이션) 구분 표기 제거 · v4: 테마 공급 방식 분류 반영(supply_type=curated_asset), 빙고칸수 필드와의 충돌 가능성 명시 · v5: 테마를 아코디언 속 한 줄에서 후원자막과 동일한 독립 “테마 갤러리”(검색·필터·정렬·즐겨찾기)로 승격, 11패널 일러스트 식별성을 고려해 가로 3열 대신 2열 채택(패널 폭 380px→440px, 썸네일 3:4 세로형), “테마 없음(기본형)” 카드를 추가해 빙고칸수 잠금해제 로직을 UI로 확정 · v6(검증 반영): 미리보기를 완성형 테마와 일치하는 11패널(4·3·4)로 수정(기존 4×4=16칸이라 “11패널 고정” 설명과 모순), 칸수 프리셋의 선택 표시를 제거하고 잠금 안내 문구 추가, 섹션명을 형제 화면과 같은 “상세 설정”으로 통일, 미결정 참조 §12→§13 정정 · 2026-08-13 · v7(2026-08-19): 미리보기 폭을 줄이고(설정 패널 440px→560px) 테마 갤러리를 2열→3열로 확장 — 한 번에 보이는 테마 수를 늘려 탐색성을 개선. 썸네일은 197→168px로 작아지나 3:4 세로형이라 11패널 판별은 유지 · 기본 스타일 프리셋도 2열→3열·gap 10px로 통일(테마 갤러리는 세로 스크롤바가 있어 우측 끝은 그만큼 안쪽에 놓임) · v8: 설정 패널·미리보기 폭 비율 역전(560px 고정→1fr 가변, 미리보기 360px 고정), 테마 목록 내부 스크롤→3열×2줄 페이지네이션 전환(열 수·비율은 유지) · 2026-08-28 · v9(정정): 실제 목업 기준 완성형 테마 개수를 6종→9종으로 정정(민트/네이비/레드 3종 추가 확인) — 본문·범례의 테마 목록·개수 표기를 모두 갱신, 그리드 예시에 민트/네이비/레드 카드 반영