와이어프레임 · 저충실도 · 화면 14/N (P1) — 마지막 착수 화면

리모컨

통합 후원 플랫폼(가칭) 기획서 §02 리모컨 기준. 위플랩의 “위젯 단위 ON/OFF”와 투네이션의 “후원유형·플랫폼이벤트 단위 ON/OFF”를 4개 아코디언 그룹으로 통합했습니다. 방송 중 OBS와 나란히 띄워놓고 쓰는 화면이라 정보 밀도를 의도적으로 높였습니다.
이 화면은 스튜디오 셸의 콘텐츠 영역입니다. 사이드바(21개 메뉴)·전역 헤더(모드 전환·🔴 LIVE 배지·🔔 알림)·저장 바는 스튜디오 셸 와이어프레임에서 정의하며 여기서는 그리지 않습니다. 설정값은 편집 시 미리보기에만 반영되고, 저장해야 송출에 반영됩니다(§00 저장 원칙).
정정 이력 반영 화면. 처음엔 “리모컨은 위플랩 고유 기능”으로 잘못 판단했다가, 실제 투네이션 URL(toon.at/widget/controller)을 확인해 두 서비스 모두 보유한 것으로 정정했던 화면입니다. 이 화면은 그 정정 내용을 그대로 반영한 통합 설계입니다.
A
현재 방송 세션 경과 00:00:00
방송 세션 종료
1
알림 일시정지
현재 알림 취소
알림 모두 취소
스킵
후원 테스트
2
⏸
⏭ 다음
재생 제어 · 정지됨 — 리액션 대기중
현재: 시그니처 · "시그니처명 A" · 닉네임2 · 50,000원
대기 3건 ▾
1. 닉네임7시그니처 "이벤트 응원봉" · 30,000
2. 닉네임8텍스트 · 3,000
3. 닉네임9룰렛 · 1,000
B
⚔
배틀 진행 중 — 하시유튜브
남은 12:34 · 게이지 6 : 4 (우세)
듀얼 영상 URL 복사
게이지 URL 복사
조기 종료
3
개수 이상
종류 ▾
검색어
종류내용시간이름후원·구독기능
텍스트화이팅!21:04닉네임15,000▶ ✕
시그니처"시그니처명 A"21:02닉네임250,000▶ ✕
구독—20:58닉네임3—▶ ✕
룰렛—20:51닉네임41,000▶ ✕
팔로우—20:47닉네임5—▶ ✕
4
즉석 입력
공지
종류 ▾ · 내용 입력 · 적용
타이머
카운트다운/업 · 시간값 · 시작/정지
5
위젯 단위 화면 전체 ON/OFF
채팅창
후원목표
후원자막
아바타 채팅
6
후원유형 단위 12종
텍스트
영상
그림
럭키박스
…외 8종
크루 후원 받기
7
플랫폼 이벤트 단위 12종
팔로우
구독
슈퍼챗
…외 9종
8
볼륨 믹서 11종
채팅창
후원알림음
TTS
영상
M
리모컨 LIVE
M1
후원 안 받기  OFF → ON
M2 · 위젯 단위 ON/OFF
채팅창
후원알림
후원목표
후원자막
…외 위젯 펼치기 ▾
M3 · 재생 제어
⏸ 정지
⏭ 다음
✕ 취소
M4 · 볼륨
후원알림음50% ───●───
TTS60% ────●──
배치는 사고 대응 순서를 따른다 — 평상시 사용 빈도가 아니라 급할 때 먼저 눌러야 하는 순서로 위에서부터 놓았다.
이력 테이블·즉석 입력(공지·타이머)·후원 테스트는 모바일에서 제외한다 — 사고 대응에 필요 없고 화면만 복잡해진다.

주석 — 기획서 필드 대응표

#영역필드타입옵션 값 / 제약사항입력 예시
A상단 세션바 보완(고충실도 목업 동기)현재 방송 세션 경과 / 방송 세션 종료readonly timer + button(확인 필요)broadcast_sessions.ended_at을 기록하는 유일한 수단(RMT-06/INV-14) — 방송을 실제로 끄는 스위치가 아니라, 이 서비스가 세션을 얼마나 봤는지 종료 시점을 남기는 기록용 컨트롤이다. 클릭 시 확인 모달("세션 종료") 필수, 종료 후 버튼 라벨이 "세션 종료됨"으로 바뀜"00:42:17" · "세션 종료" 확인 후 종료
1상단 액션바알림 일시정지toggle button통합 알림창 위젯 송출 전체를 끔 — #2 재생 제어(개별 알림 단위)와는 별개의 뭉툭한 스위치OFF(기본)
1상단 액션바현재 알림 취소 / 알림 모두 취소button현재 재생중 1건만 종료 / 대기열 전체 삭제(되돌리기 불가, 확인 필요)"현재 알림 취소" 클릭
1상단 액션바스킵button현재 알림을 즉시 종료하고 큐의 다음 항목으로 이동클릭 시 즉시 다음 알림
1상단 액션바후원 테스트개수+채팅입력+아이디+닉네임+플랫폼 select+후원종류 select+button실제 결제 없이 알림 렌더링만 시험 발송"테스트닉네임" · 5,000 · 시그니처
재생 제어(리액션 대기 큐) — 신규
2재생 제어일시정지/재개 토글⏸/▶ 버튼리액션 대기 모드 프리셋의 알림이 뜨면 자동 정지, 클릭 시 재개 — 재개하면 큐의 다음 항목 자동 재생"⏸ 정지됨" → "▶ 재생"
2재생 제어다음button(⏭)현재 항목을 건너뛰고 큐의 다음 항목으로 즉시 이동클릭 시 큐 2번째 항목 재생
2재생 제어현재 재생 항목 — 썸네일 신규image(readonly, 등록된 상품 이미지 그대로)시그니처·기프트·럭키박스·뽑기 등 등록된 상품이 연결된 후원 유형일 때만 노출, 정사각형 32×32. 텍스트·음성 등 상품이 없는 유형은 빈 자리(placeholder 없음)시그니처명 A의 등록 이미지
2재생 제어현재 재생 항목 — 상품명 신규readonly text§03 시그니처·위시리스트 등에서 크리에이터가 등록한 이름을 그대로 표시 — "시그니처"라는 유형명만으로는 어떤 상품인지 알 수 없어 추가"시그니처 · "시그니처명 A" · 닉네임2 · 50,000원"
2대기열 미니 리스트대기열 카운터badge(readonly) + 클릭 시 펼침대기중인 후원 건수 표시, 클릭 시 닉네임·유형·상품명·금액 미니 리스트 펼침"대기 3건"
2대기열 미니 리스트항목별 상품명 신규readonly text(유형명 뒤에 병기)상품이 연결된 유형만 유형명 뒤에 큰따옴표로 상품명 표기, 리스트 폭이 좁아 썸네일은 미노출(전체 화면은 위 “현재 재생 항목”에서 확인)"시그니처 "이벤트 응원봉" · 30,000"
2재생 제어사용 여부 / 타임아웃readonly(설정 위치 안내)프리셋별 사용 여부는 §통합후원알림에서 설정(기본 시그니처·룰렛 ON), 무응답 자동 재개 타임아웃도 그 화면에서 분 단위로 설정"§03 통합후원알림에서 설정"
이력 필터 / 테이블
3이력 필터개수 이상number이 값 미만인 후원(개수 기준 유형)은 목록에서 숨김1
3이력 필터종류select전체 또는 12 후원유형 + 12 플랫폼이벤트 중 선택 (v2.28 정정: 14→12)"시그니처"
3이력 필터검색어text닉네임/아이디/채팅 내용 부분일치"닉네임2"
3이력 테이블종류readonly text유형명만 표시(상품·메시지 등 부가 내용은 옆 “내용” 열로 분리)"텍스트", "시그니처"
3이력 테이블내용 변경text(+조건부 image 16×16)종류별로 다른 내용 표시 — 메시지형(텍스트·게임·음성 등)은 채팅 내용, 상품형(시그니처·기프트·럭키박스·뽑기 등)은 등록 썸네일+상품명, 구독·팔로우처럼 부가 내용이 없는 유형은 “—”"화이팅!" / [썸네일]"시그니처명 A" / "—"
3이력 테이블기능(▶/✕)button × 2(행별)▶=해당 알림 다시 재생, ✕=이력에서 삭제(실제 후원 취소 아님)"▶" 클릭 → 재생
즉석 입력
4공지종류 / 시간·업타임 / 삭제 / 내용select + 토글 + text + 적용버튼공지 내용 최대 40자, 시간 표시는 카운트다운 또는 업타임(경과시간) 중 선택"오늘 21시까지 방송!"
4타이머방향 / 시간값 / 시작·정지select(카운트다운/업) + number + button시간값은 시:분:초, 0 이하 입력 불가"00:10:00" 카운트다운
위젯 단위 ON/OFF
5위젯 단위화면 전체 토글toggle × N + 새로고침채팅창/후원목표/후원자막/아바타채팅 등 등록된 위젯 인스턴스 전부, 화면 자체를 통째로 껐다 켬"후원자막" OFF
후원유형 단위 ON/OFF (12종)
6후원유형유형별 토글toggle × 12시그니처·텍스트·게임·음성·영상·룰렛·퀘스트·그림·기프트·럭키박스·플레이·뽑기 — donations.donation_type 12종과 1:1. v2.28 정정 기존 14종에서 크루후원·미니후원 제외: 크루후원은 유형이 아니라 수신 구조(donations.crew_id)라 별도 스위치로, 미니후원은 표시 위젯이라 위젯 단위 ON/OFF로 이동 — 도너가 고를 수 없는 값이 유형 목록에 섞여 있던 문제 해소"그림" OFF
플랫폼 이벤트 단위 ON/OFF (12종)
7플랫폼 이벤트이벤트별 토글toggle × 12Twitch 6종(팔로우/구독/비트/구독선물/구독선물개수/레이드) + YouTube 2종(슈퍼챗/스폰서) + 치지직 2종 + 투네이션 자체 2종"슈퍼챗" OFF
볼륨 믹서 (11종)
8볼륨 믹서항목별 슬라이더slider × 11(0~100%)위플랩 4종(채팅창/후원알림음/후원TTS/목표그래프) + 투네이션 7종(TTS/영상/음성녹음/룰렛/럭키박스/플레이/뽑기)"TTS" 60%
기타 즉시 제어(이 화면엔 시각적으로 미표시 — 스크롤 하단 또는 별도 탭)
—기타후원 최소 개수number + 적용버튼이 값 미만인 개수형 후원(럭키박스 등)을 일시적으로 차단1
—기타아바타채팅 트리거게임 select + 닉네임 text경주 등 아바타 채팅 미니게임을 리모컨에서 즉시 실행(채팅 명령어 없이)"경주" + "닉네임5"
—기타전역 토글toggle × 4후원 안받기 / 음성만 노출 / 영상 자동재생 / 광고 자동재생 — 모두 기본 OFF"후원 안받기" OFF
B · 배틀 진행 패널 — v2.31 신규 · 배틀 중일 때만 노출
B배틀 패널진행 상태 · 남은 시간 · 게이지조건부 readonlybattle_sessions.status='active'일 때만 나타난다. 기존에 배틀 콘솔이 “리모컨 확장 패널”이라고 정의돼 있었는데 정작 리모컨 화면에 그 패널이 없어, 배틀이 시작되면 리모컨이 어떻게 변하는지가 문서상 비어 있었다"남은 12:34 · 6:4"
B배틀 패널오버레이 URL 복사 × 2button × 2듀얼 영상·승부 게이지 각각의 OBS URL. 배틀은 즉석에서 성사되므로 방송 중에 바로 OBS에 붙일 수 있어야 한다 — 별도 화면으로 이동시키지 않고 리모컨에서 바로 복사—
B배틀 패널 — 상세 펼치기승부 게이지 사용여부 보완(고충실도 목업 동기)toggle(즉시제어, 저장 불필요)배틀 패널을 "상세 펼치기"로 열면 나오는 토글 — OFF 시 승부 게이지 오버레이 URL이 빈 화면으로 렌더링된다(위 §04 승부 게이지 URL 행과 연동). 게이지 값 자체는 index.html §00 결정("승부 게이지는 예외적으로 항상 실시간 산출")에 따라 이 토글과 무관하게 항상 계산되고, 이 토글은 오버레이 표시 여부만 제어ON(기본) → 나 62% : 상대 38% 표시 / OFF → 오버레이 빈 화면
B배틀 패널조기 종료 L1button + 확인확인 다이얼로그 필수(§00 파괴적 액션 위험도). 종료 시 final_score_*·winner_id를 스냅샷하고 오버레이에 종료 연출을 띄운다. 종료 정책(편측 vs 상호 동의)은 §13 미결정—
B배틀 패널알림 센터 연계—알림 센터에서 배틀을 수락하면 이 패널이 있는 리모컨으로 이동한다 — 수락 후 어디로 가는지가 정의돼 있지 않던 문제 해소—
M · 모바일 리모컨(375px) — v2.31 신규 · 스튜디오 중 유일한 모바일 필수 화면
M모바일 대응왜 리모컨만 예외인가정책스튜디오는 데스크톱 전용이 원칙이지만 리모컨만 모바일 필수다. 방송 중에는 PC가 OBS로 점유돼 있어, 폰으로 끄는 것이 사실상 유일한 사고 대응 수단이기 때문(§11 뷰포트 정책)375px
M1전역 차단후원 안 받기toggle(강조)가장 위에, 가장 크게. 사고 시 첫 번째로 눌러야 하는 스위치라 다른 컨트롤과 시각적으로 분리하고 경고색 테두리를 준다OFF → ON
M2위젯 차단위젯 단위 ON/OFFtoggle × N문제가 된 오버레이만 골라 끈다. 자주 쓰는 4개를 먼저 보이고 나머지는 접어둔다. 터치 타깃은 44px 이상"후원자막" OFF
M3재생 제어정지 / 다음 / 취소button × 3지금 재생 중인 알림 1건에 대한 즉시 조치. 버튼 3개를 같은 크기로 나란히 둬 오터치를 줄인다"⏸ 정지"
M4볼륨믹서(축약)slider × 2~4소리 사고 대응. 전체 11종을 다 넣지 않고 알림음·TTS 등 사고 빈도가 높은 것만 노출하고 나머지는 접는다TTS 60%
—모바일 제외이력 테이블 · 즉석 입력 · 후원 테스트—모바일에서는 렌더링하지 않는다. 사고 대응에 필요 없고, 좁은 화면에서 목록·폼이 섞이면 정작 급할 때 토글을 못 찾는다—
통합 후원 플랫폼(가칭) · 와이어프레임 v10 · 저충실도 · 기준 문서: 통합 플랫폼 기획서 §02 리모컨 · v2: 재생 제어(리액션 대기 큐) 추가 · v3: 필드별 타입·옵션·제약·입력예시 상세 스펙 추가 · v4: 후원최소개수·아바타채팅트리거·전역토글 4종 추가(DB 설계용 완전성 보강) · v5: 재생 제어·대기열·이력 테이블에 상품형 후원(시그니처 등)의 상품명·썸네일 노출 추가 · v6: 이력 테이블의 별도 채팅 열을 없애고 종류 셀에 채팅 내용/상품명을 바로 병기 · v7: 종류와 내용을 다시 별도 열로 분리(종류=유형명만, 내용=채팅·상품명) · v8(검증 반영): 통합후원알림 참조 §04→§03 정정 · v9(v2.31): 모바일 리모컨(375px) 프레임 추가 — 스튜디오 중 유일한 모바일 필수 화면, 배치는 사고 대응 순서 · 2026-08-14 · 정정(2026-08-19): 이력 테이블의 종류 셀(.typecell)에 display:flex가 걸려 table-cell이 해제되며 셀 높이가 1px 어긋나던 문제 수정(시그니처·위시리스트 관리에서 발견된 것과 같은 원인) · v10(재감사 보완): 상단 액션바 위에 방송 세션 종료 컨트롤(현재 방송 세션 경과 + 세션 종료 버튼, RMT-06/INV-14) 추가, 배틀 진행 패널 legend에 승부 게이지 사용여부 토글 행 추가 — 둘 다 고충실도 목업(remote.html)에는 있었으나 와이어프레임에 없던 필드