와이어프레임 · 저충실도 · 재사용 패턴 허브(23종)

위젯 라이브러리

통합 후원 플랫폼(가칭) 기획서 §04 위젯 라이브러리 기준. 23종을 하나의 마켓플레이스형 그리드로 제공합니다 — 카드를 클릭하면 각 위젯의 “테마 갤러리 → 상세 설정” 화면(채팅창·후원목표와 동일 골격, 탭 전환 없이 한 화면)으로 진입합니다.
이 화면은 스튜디오 셸의 콘텐츠 영역입니다. 사이드바(21개 메뉴)·전역 헤더(모드 전환·🔴 LIVE 배지·🔔 알림)·저장 바는 스튜디오 셸 와이어프레임에서 정의하며 여기서는 그리지 않습니다. 설정값은 편집 시 미리보기에만 반영되고, 저장해야 송출에 반영됩니다(§00 저장 원칙).
23개 화면을 여기 하나로 대표. 위젯 하나하나를 전부 개별 와이어프레임으로 그리는 대신, 이 마켓플레이스 화면 + 이미 만든 “채팅창/후원목표/후원자막” 3개 상세 화면이 23종 전체의 진입점과 공통 골격을 대표합니다(개별 카드 단위 스펙은 “위젯 라이브러리 상세 카탈로그” 화면에서 22개 카드 · 위젯 기준 23종으로 전수 기재). 즉 이 화면은 진입점, 카탈로그 화면은 필드 명세를 담당합니다. 상세 화면이 필요한 특정 위젯이 있으면 알려주시면 그 화면만 추가로 그립니다. 어느 원본 서비스에서 왔는지(위플랩/투네이션) 구분은 UI에 노출하지 않습니다 — 통합 플랫폼은 각 서비스의 장점만 가져와 하나로 합친 것이므로, 사용자에게는 출처 구분 없이 동등한 위젯 23종으로 제공합니다.
1
전체 23
표시·통계형
인터랙션·미니게임형
사운드·연출형
2
팬아웃 층 — 후원 1건이 이 위젯을 반응시키는 조건
전체
A층 · 항상
B층 · 값 있으면
C층 · 유형 일치
D층 · 반응 없음
3
채팅창 위젯D층
채팅을 오버레이로 노출
+ 추가
후원목표B층
후원금액 목표를 설정해 시청자와 소통
+ 추가
후원랭킹B층
후원금 기준 순위를 화면에 노출
+ 추가
후원 QR코드D층
QR코드로 후원 링크 공유
+ 추가
후원누적금액B층
기간 누적 후원금액 노출
+ 추가
최근알림A층
최근 후원을 흐르는 텍스트로 노출
+ 추가
이벤트D층
플랫폼 네이티브 이벤트 통합 피드
+ 추가
미니후원D층
1,000캐시 미만 소액후원 전용 표시
+ 추가
전광판B층
채팅 명령어 기반 문구 노출
+ 추가
엔딩 크레딧D층
방송 종료 시 6종 랭킹 크레딧
+ 추가
투표D층
리스트·평점·단어 민심측정 투표
+ 추가
퀘스트
도네이터 요구를 미션으로 수행 — 별도 widget_type 없는 콘텐츠분리형, 팬아웃 층 미적용
+ 추가
그림후원C층
실시간 드로잉 캔버스 후원
+ 추가
럭키박스
확률 기반 박스 열기 후원 — 별도 widget_type 없는 콘텐츠분리형, 팬아웃 층 미적용
+ 추가
플레이
퀴즈 3종(객관식·초성·그림) — 별도 widget_type 없는 콘텐츠분리형, 팬아웃 층 미적용
+ 추가
뽑기
가챠형 상품 뽑기 연출 — 별도 widget_type 없는 콘텐츠분리형, 팬아웃 층 미적용
+ 추가
벽지C층
후원 시 남긴 이미지를 화면에 고정 노출
+ 추가
크루후원B층
크루 단위 후원 랭킹
+ 추가
시그니처 빙고판C층
N×N 빙고 그리드 구독 전용
+ 추가
이모티콘 리액션D층
후원 수단별 개별 이모티콘 애니메이션
+ 추가
커스텀 사운드C층
지정 단어 입력시 설정 음성 재생
+ 추가
아바타 채팅D층
캐릭터 의인화 채팅 + 미니게임 4종
+ 추가

주석 — 기획서 필드 대응표

#영역필드타입옵션 값 / 제약사항입력 예시
1검색위젯 검색text위젯 이름 부분일치, 1~20자, 카테고리 필터와 AND 조합"채팅" 입력 → 채팅창/아바타채팅 노출
1카테고리 필터카테고리 chipchip select(단일)전체 / 표시·통계형(후원목표·후원랭킹·QR코드 등) / 인터랙션·미니게임형(투표·퀘스트·플레이 등) / 사운드·연출형(커스텀사운드·이모티콘리액션 등) — 기능 기준 분류, 출처(원본 서비스) 기준 분류는 사용하지 않음"인터랙션·미니게임형"
2팬아웃 층 필터 신규팬아웃 층 chipchip select(단일)전체 / A층·항상 / B층·값 있으면 / C층·유형 일치 / D층·반응 없음 — 후원 1건이 이 위젯을 반응시키는 조건(§14.0 ⑪, acceptance WGT-02~05)을 기준으로 좁혀보는 필터. 카테고리 필터와는 별도 축(AND 조합)"C층 · 유형 일치" 선택 → 그림후원·벽지·시그니처 빙고판 등만 노출
3위젯 카드팬아웃 층 뱃지 신규readonly badge(A/B/C/D 4종, 해당 없는 카드는 미표시)A층=유형 불문 항상 반응 / B층=유형 불문 금액·메시지 등 값이 있으면 반응 / C층=대응하는 후원 유형일 때만 1:1로 반응 / D층=트리거가 후원이 아니라 반응하지 않음. 퀘스트·럭키박스·플레이·뽑기 4종은 별도 widget_type 없는 콘텐츠분리형이라 팬아웃 층 자체가 적용되지 않아 뱃지 없음"후원목표" = B층, "그림후원" = C층
3위젯 카드추가 버튼button클릭 시 해당 위젯의 widget_instances 레코드를 즉시 생성하고 상세 설정 화면(2단 골격)으로 이동 — 동일 위젯 여러 개 추가 가능(예: 채팅창 2개, 소스별로)"후원목표" 추가 → /studio/goal/:instance_id (v2.66 정정 — 기획서 §03 위젯별 라우트 + 인스턴스 id)
3위젯 카드구독 전용 뱃지readonly badge(해당 위젯만)유료 구독이 필요한 위젯에만 표시(현재는 시그니처 빙고판) — 통합 플랫폼에서의 과금 정책은 미결정(§13 참고). 원본이 어느 서비스였는지는 UI에 노출하지 않음"구독 전용" 뱃지
추가 후 경로 — v2.31 명시
—추가「추가」 클릭 후 흐름navigation추가한 위젯이 어디로 가는지가 정의돼 있지 않았다. 확정 — ① widget_instances 행 생성 ② 해당 위젯의 설정 화면으로 즉시 이동 ③ 스튜디오 셸 사이드바 “위젯” 그룹에 항목 추가(맨 위 “위젯 라이브러리” 허브 아래로) ④ 설정 화면에서 OBS 등록 가이드(채팅창 화면에 정의된 공통 컴포넌트)를 함께 노출. 목록으로 되돌아가 다시 찾게 만들지 않는다—
통합 후원 플랫폼(가칭) · 와이어프레임 v7 · 저충실도 · 기준 문서: 통합 플랫폼 기획서 §04 위젯 라이브러리 · v2: 필드별 타입·옵션·제약·입력예시 상세 스펙 추가 · v3: 누락됐던 “채팅창 위젯” 카드 추가 · v4: 위플랩/투네이션 출처 구분(뱃지·그룹) 전면 제거 — 하나의 통합 위젯 목록으로 재구성, 기능 기준 필터로 전환 · v5(검증 반영): 과금 정책 미결정 참조 §12→§13 정정, 상세 카탈로그 화면과의 역할 분담 및 개수 기준 명시 · v6: 스튜디오 셸 사이드바 “오버레이” 그룹을 “위젯”으로 개편(studio-shell.html v2.63) — 이 화면이 그 그룹의 고정 허브 항목이 됨 · v7(재감사 반영): 목업에 이미 구현돼 있던 “팬아웃 층(A~D)” 필터·카드 뱃지 UI가 와이어프레임에 없어 추가(§14.0 ⑪, acceptance WGT-02~05) — 팬아웃 층 필터 칩 신규(num2), 위젯 카드 뱃지 신규, 카드 영역 번호 2→3으로 밀림 · 2026-08-27