와이어프레임 · 저충실도 · 화면 3/N

채팅창

통합 후원 플랫폼(가칭) 기획서 §03 오버레이 스튜디오 기준. 왼쪽은 크리에이터가 조작하는 설정 패널, 오른쪽은 OBS 소스에 실제로 얹히는 미리보기입니다.
핵심 설계 원칙 검증 화면. 이 화면이 기획서의 “테마는 투네이션처럼, 조정은 위플랩처럼” 구조를 처음 구현한 사례입니다. 왼쪽 패널이 “① 테마 갤러리 → ② 상세 설정” 순서로 이어지는 한 화면이며, 나머지 오버레이 위젯(후원알림·목표·자막 등) 전부가 동일한 패턴을 재사용합니다. 신규: 방송 중인 연결 플랫폼들의 채팅을 하나로 합쳐 보여주는 “통합 채팅 모드”와 플랫폼별 개별 시청자수 표시를 추가했습니다(멀티스트리밍 시 사용).
변경(v6) — 탭 전환 UI 제거. 기존엔 패널 상단에 “테마 갤러리[1단]”/“고급 설정[2단]” 탭이 있고 하단엔 별도로 “고급 설정 펼치기” 토글까지 있어 같은 걸 두 가지 방식으로 숨기고 있었습니다. 두 장치 모두 없애고 테마 갤러리 아래로 상세 설정이 그냥 이어서 보이는 한 화면으로 바꿨습니다 — 탭을 눌러야만 보이는 구조가 오히려 “뭐가 더 있는지” 파악을 어렵게 한다는 판단(사용자 피드백 반영). 아코디언 그룹(상세/필터링/알림 등) 각각은 계속 개별적으로 접고 펼 수 있음.
테마 갤러리 UX 개선(신규, §03 후원자막에서 먼저 확정된 패턴을 원본인 이 화면에도 역적용). 검색·스타일필터·정렬·즐겨찾기 고정 그룹 + 내부 스크롤 그리드로 재구성하고, 설정 패널 폭을 380px→500px로 넓혀 3열을 유지했습니다. 미리보기 축소나 상하 스택 대신 즉시 미리보기 확인 흐름을 지키는 쪽을 택한 이유는 legend 참고.
변경(v9) — 설정 패널·미리보기 비율 역전, 스크롤→페이지네이션. 설정 패널을 고정폭(500px)에서 가변폭(1fr, 남은 공간 전부)으로 바꾸고 대신 미리보기를 고정 360px로 좁혔습니다 — 테마 갯수가 늘면서 설정 패널이 더 넓어야 한다는 판단(§03 후원목표에서 먼저 검증 후 채팅창·후원자막·룰렛·빙고판에 동일 적용). “전체 테마” 목록은 내부 스크롤 대신 5열×2줄 고정 + <›> 페이지네이션으로 전환(짧은 박스 안 스크롤바가 작아 조작하기 어렵다는 이슈 — Baymard/NN·g 등 UX 리서치 근거). 미리보기는 스크롤해도 화면에 고정되는 sticky로 변경.
이 화면은 스튜디오 셸의 콘텐츠 영역입니다. 사이드바(21개 메뉴)·전역 헤더(모드 전환·🔴 LIVE 배지·🔔 알림)·저장 바는 스튜디오 셸 와이어프레임에서 정의하며 여기서는 그리지 않습니다. 설정값은 편집 시 미리보기에만 반영되고, 저장해야 송출에 반영됩니다(§00 저장 원칙).
1
URL 프리셋
기본 프리셋 ▾
https://•••••••••••••••••••••••••••••••••
복사
열기
+ 추가
OBS 소스 미리보기 — 통합 채팅 모드 예시(3개 플랫폼 동시 방송 중)
5
SOOP 1.2만 치지직 890 YouTube 340
SOOP구독닉네임1안녕하세요 방가방가
치지직일반닉네임2오늘 방송 잘보고 있어요
YouTube후원닉네임3화이팅!!
SOOP매니저닉네임4공지 확인해주세요
2
테마 갤러리
🔍 테마 이름으로 검색
전체
미니멀
레트로
캐릭터
인기순 ▾
★ 즐겨찾기
★
기본
★
고양이
전체 테마 · 인기순
1 / 2
‹
›
☆
한줄 · 테두리
☆
두줄 · 심플
☆
메신저형
☆
네온
☆
파스텔
☆
버블형
☆
다크 심플
☆
…외 12종
3
상세 설정
상세 표시·정렬·자동숨김
시청자 닉네임 표시
채팅 최대 표시 줄8
자동 숨김 (초)15
6
통합 채팅 모드
필터링 사용자·단어·봇
알림 후원·입장·채팅
7
위젯 시청자수(플랫폼별)·공지·타이머·고정
아이콘 · 색상 플랫폼×등급 매트릭스
폰트 · 배경 전 위젯 공통
이 프레임을 추가한 이유 — 크리에이터의 첫 관문인데 “URL을 복사한 다음 무엇을 하는지”가 어느 화면에도 없었습니다. OBS를 처음 쓰는 사용자는 여기서 막힙니다.
STEP 1
URL 복사
https://…/w/ab12cd34  [복사]
이 주소는 비밀 주소입니다. 방송 화면에 그대로 노출하지 마세요 — 남이 알면 내 오버레이를 열어볼 수 있습니다.
STEP 2
OBS에 브라우저 소스 추가
OBS 소스 추가 화면
스크린샷 자리
소스 + → 브라우저 → URL 붙여넣기.
너비·높이는 아래 권장값을 넣으세요.
STEP 3
크기 확인
권장 400 × 700
위젯마다 권장값이 다름
화면에 안 나오면 소스 우클릭 → 새로고침. 그래도 안 나오면 리모컨에서 이 위젯이 꺼져 있는지 확인하세요.
이 가이드는 전 위젯 공통입니다. 다른 위젯 화면(후원목표·자막·룰렛·빙고판 등)에서도 URL 발급 필드 옆에 같은 컴포넌트를 재사용하며, 권장 크기 값만 위젯별로 다릅니다 — 화면마다 따로 그리지 않습니다.

주석 — 기획서 필드 대응표

#영역필드타입옵션 값 / 제약사항입력 예시
1URL 프리셋프리셋 선택selectOBS 소스별로 여러 개 저장 가능, 프리셋마다 독립적인 설정값 보유"기본 프리셋", "서브캠 전용"
1URL 프리셋URL 추가button신규 프리셋 생성, 이름 입력(text, 최대 20자)"보이스채널용"
2테마 갤러리테마 검색 신규text테마 이름 부분일치, 입력 즉시 그리드 필터링"고양이" 입력 → "고양이" 테마만 표시
2테마 갤러리스타일 필터 신규chip 단일선택전체/미니멀/레트로/캐릭터 등 — 운영자가 테마 등록 시 태그 부여"캐릭터" 선택
2테마 갤러리정렬 신규select인기순(기본, 사용 크리에이터 수 기준) / 최신순(등록일) / 이름순"인기순"
2테마 갤러리즐겨찾기 그룹 신규card group(조건부 노출) + ★ 토글즐겨찾기한 테마가 1개 이상일 때만 그리드 최상단에 별도 섹션으로 고정 노출 — 검색·필터와 무관하게 항상 최상단"기본", "고양이" 즐겨찾기됨
2테마 갤러리테마 선택 파라메트릭(parametric)썸네일 클릭 단일 선택, 5열×2줄 고정 그리드 + ‹› 페이지네이션투네이션 9종 + 위플랩 11+종 병합 카탈로그, 클릭 1회로 적용 완료 — 각 썸네일은 레이아웃 뼈대만 정의, 색상·폰트는 상세 설정에서 override(§00 “테마 공급 방식 분류” 참고). v9: 설정 패널 폭을 미리보기보다 넓게(1fr : 미리보기 360px 고정) 조정하고, 목록은 내부 스크롤 대신 페이지네이션으로 전환(검색·필터·정렬 바는 상단 고정)"기본", "한줄·테두리", "고양이"
2테마 갤러리전체 테마 페이지네이션 v9 신규‹ › 버튼 + N/M 페이지 표시5열×2줄(10개) 고정 그리드로 한 페이지 구성, 내부 스크롤 대신 페이지 이동으로 탐색 — 짧은 고정높이 박스에서 스크롤바가 작고 조작하기 어렵다는 이슈로 스크롤→페이지네이션 전환(v9)"1 / 2"
2테마 갤러리채팅 정렬radio + checkboxradio: 한줄정렬/닉네임구분선/시작라인정렬/개별라인정렬 — checkbox로 세부 옵션 조합 가능"닉네임구분선"
—테마 갤러리알림 효과select × 2Fade In / Fade Out — 채팅 라인이 나타나고 사라질 때의 전환 효과(위젯 라이브러리 마켓플레이스 버전 필드, 스튜디오 메인 화면과 공유)Fade In="fade"
—테마 갤러리닉네임 컬러 사용toggle기본 OFF — 아이콘·색상 그룹의 "닉네임 랜덤색/설정색"과 별개로, 마켓플레이스 카탈로그에서 확인된 단순 on/off 스위치(중복 가능성 있음, 최종 통합 시 하나로 정리 필요)OFF
상세 설정 — 표시 · 정렬 · 자동숨김
—상세방송 플랫폼 아이콘 표시/감추기checkbox기본 표시 ONON
6상세통합 채팅 모드 신규toggle기본 OFF. 켜면 방송 중인 연결 플랫폼 전체 채팅을 하나로 합침, 오프라인 플랫폼은 자동 제외. 각 메시지에 플랫폼 배지 강제 표시OFF → ON 시 SOOP/치지직/YouTube 동시 표시
—상세스크롤 사용checkbox기본 ON — OFF 시 최신 메시지가 상단 고정, 스크롤 없이 교체 방식ON
—상세시청자 닉네임/아이디 표시checkbox × 2닉네임 기본 ON, 아이디 기본 OFF — 동시 ON 가능닉네임 ON, 아이디 OFF
—상세닉네임 랜덤색/설정색 사용checkbox × 2랜덤색 ON 시 사용자별 해시 기반 고정 색상 자동 배정, 설정색 ON 시 등급별 색상표(아이콘·색상 그룹) 사용랜덤색 ON
—상세닉네임 배경(화이트)radio항상 / 어두운 닉네임색일 때만 / 사용안함 — 기본 "어두운 닉네임색일 때만""어두운 닉네임색일 때만"
—상세채팅 최대 표시 줄number정수, 1~30 범위, 기본 88
—상세채팅 상단 페이드아웃checkbox기본 ON — 최대 줄 수 초과 시 위쪽 메시지부터 서서히 흐려짐ON
—상세자동 숨김 사용 / 시간checkbox + number(초)기본 OFF. ON 시 시간값 5~300초 범위, 기본 15초OFF (ON일 때 15)
상세 설정 — 필터링(전 화면 공통)
—필터링사용자 필터링text(닉네임/아이디, 쉼표구분) + checkbox × 2후원알림필터링/봇필터링 체크박스 — 봇필터링 기본 ON, 필터링된 사용자는 채팅 자체가 노출 안 됨"악성유저1, 악성유저2"
—필터링단어 필터링text(쉼표구분) + checkbox필터링 단어는 하트(♡)로 마스킹 처리, 후원알림메시지필터링 체크 시 후원 메시지에도 동일 적용"욕설1, 욕설2" → "♡♡♡"
—필터링숨길 닉네임 추가text + 추가버튼 → 태그목록Nightbot·MooBot·StreamElements 등 봇 계정 기본 등록, 직접 추가/삭제 가능"Nightbot"(기본 등록됨)
상세 설정 — 알림
—알림후원 알림radio사용안함 / 텍스트 / 이미지 — 기본 "텍스트""텍스트"
—알림입장 알림radio사용안함 / 텍스트 / 알림음 / 음성 — 플랫폼별 개별 설정 가능SOOP="텍스트", YouTube="사용안함"
—알림채팅 알림radio사용안함 / 알림음 / 음성 — 기본 "사용안함""사용안함"
상세 설정 — 위젯(채팅창 내 미니 위젯)
7위젯시청자수 위젯 확장URL + 표시위치 + 표시방식표시위치: 사용안함/아래/위 — 표시방식: 합산/플랫폼별 개별(신규), 통합 채팅 모드와 독립적으로 사용 가능"아래" + "플랫폼별 개별"
—위젯공지URL + 스타일 프리셋4종 프리셋(단순텍스트/박스형/스크롤형/팝업형), 공지 내용은 리모컨에서 즉석 입력"박스형"
—위젯타이머테마 프리셋 + 표시위치 + 기본시간기본시간: 표시안함/현재시간/업타임(방송 경과시간)"업타임"
—위젯채팅 고정text(닉네임/아이디) + checkbox × 2음성고정(TTS 반복 재생)/자동숨김 체크박스"공지봇" 고정
상세 설정 — 아이콘 · 색상
—아이콘·색상등급별 배지 아이콘 표시checkbox × 7(플랫폼별 반복)스트리머/매니저/후원수단/후원/구독/선물/기타 — 플랫폼마다 개별 on/offSOOP 스트리머=ON
—아이콘·색상색 일괄 적용preset button × 8흰색닉네임/검정닉네임/흰색채팅/검정채팅/플랫폼별/등급별 조합 프리셋, 클릭 시 아래 개별 색상값을 일괄 덮어씀"흰색닉네임" 클릭
—아이콘·색상등급별 닉네임색/채팅색color × 10(플랫폼별 반복)스트리머·매니저·후원·구독·일반 5등급 × 닉네임/채팅 2종 — hex 색상값스트리머 닉네임 #FF4D4D
—아이콘·색상공통 색상color × 2후원알림메시지/입장알림메시지 색상, 기본 #FFE000#FFE000
상세 설정 — 폰트 · 배경(전 위젯 공통)
—폰트·배경폰트 선택 / 굵게 / 웹폰트 사용select + checkbox × 2시스템 폰트 목록 + 업로드한 웹폰트(ttf/otf, 5MB 이하)"제주고딕", 굵게 OFF
—폰트·배경폰트 크기 / 외곽선slider(px) / color + slider(px)폰트크기 10~48px 기본 28px, 외곽선 두께 0~4px 기본 2px·색상 기본 #000000dd28px / #000000dd 2px
—폰트·배경배경색 사용 / 배경 이미지checkbox / 파일선택 + 외부링크(text) + 채우기(radio)배경 이미지는 5MB 이하, 채우기 옵션: 채우기/맞춤/반복배경색 OFF (투명)
통합 후원 플랫폼(가칭) · 와이어프레임 v9 · 저충실도 · 기준 문서: 통합 플랫폼 기획서 §03 채팅창 · v2: 통합 채팅 모드 + 플랫폼별 시청자수 표시 추가 · v3: 필드별 타입·옵션·제약·입력예시 상세 스펙 추가 · v4: 위젯 라이브러리 마켓플레이스 버전(w-chat2)의 알림효과·닉네임컬러사용 필드 보강 · v5: 테마 갤러리에 검색·스타일필터·정렬·즐겨찾기 고정 그룹 추가 + 설정 패널 380px→500px 확장(테마 수 증가 대응 UX, §03 후원자막과 동일 패턴) · v6: 테마 공급 방식 분류 반영(supply_type=parametric) · v7: 상단 “테마 갤러리[1단]/고급 설정[2단]” 탭과 하단 “고급 설정 펼치기” 토글을 모두 제거 — 두 장치가 같은 걸 이중으로 숨기고 있었음, 테마 갤러리 아래 상세 설정이 탭 전환 없이 이어지는 한 화면으로 변경(사용자 피드백) · v8(검증 반영): legend 그룹헤더를 화면 섹션명과 맞춰 “고급 설정”→“상세 설정”으로 정정(첫 그룹은 “상세 설정 — 상세” 중복 표기라 “표시·정렬·자동숨김”으로 변경) · v9: 설정 패널·미리보기 폭 비율 역전(500px 고정→1fr 가변, 미리보기 360px 고정), 전체 테마 목록 내부 스크롤→5열×2줄 페이지네이션 전환, 미리보기 sticky 고정(§03 후원목표에서 먼저 검증) · 2026-08-28