베어니
스타일 목업 전체 목록
Style Mockup Gallery

모든 화면, 한 곳에서

통합 후원 플랫폼(가칭) “베어니”의 고충실도 스타일 목업 전체입니다. 각 카드를 클릭하면 해당 화면으로 이동하고, 화면 하단에서 근거가 된 저충실도 와이어프레임 원본도 함께 확인할 수 있습니다.

32
스타일 목업 화면 (통합 안내 스텁 3 별도)
6
카테고리
공개 영역비로그인/도네이터
후원 페이지P0
크리에이터별 후원 페이지. 방식 탭 12종을 동적으로 노출합니다.
후원 완료 & 영수증
후원 직후 완료 모달과 /me 안의 상세, 영수증 화면.
캐시 충전 & 결제
캐시 충전 금액 선택부터 결제 수단, 승인까지의 흐름.
전역 랭킹
칭호, 연승 등 게이미피케이션을 노출하는 공개 랭킹 화면.
로그인 & 회원가입
소셜 로그인 4종과 크리에이터 모드 최초 전환 온보딩.
내 정보(/me)
인벤토리, 즐겨찾기, 후원 내역을 모아보는 도네이터 마이페이지.
운영대시보드 · 리모컨 · 후원 내역 · 알림 센터
스튜디오 홈(→ 대시보드에 통합됨)
오늘의 방송 현황·최근 후원 요약이 대시보드와 중복돼 제품 결정 1(2026-09-17)로 삭제됐습니다(구 화면 home.html·home-white.html은 안내로 대체).
리모컨신규
재생 제어, 위젯 on/off, 볼륨 믹서를 방송 중 나란히 띄우는 사고 대응 콘솔.
후원 내역(실시간)신규
경로, 후원자, 금액, 유형을 건별로 실시간 조회하는 순수 조회 화면.
알림 센터신규
배틀, 1:1채팅 수락, 소속사 승인, 정산 심사 등 처리가 필요한 알림을 모아봅니다. 전역 헤더 알림 아이콘에서 진입.
위젯위젯 라이브러리 & 개별 설정
위젯 라이브러리
23종 위젯을 한 그리드에서 찾아 추가하는 위젯 그룹의 허브.
위젯 라이브러리 상세
카드 17장으로 위젯 23종(별도 화면 9종 + 14종)의 필드까지 압축 정리한 카탈로그.
채팅창P0
테마 갤러리 → 상세 설정 2단 구조를 처음 구현한 기준 화면.
후원목표P1
목표 금액 대비 진행률을 보여주는 후원목표 위젯 설정.
후원자막P1
순위, 최근 후원을 자막 형태로 노출하는 위젯 설정.
전광판
채팅 명령어 기반으로 문구를 노출하는 전광판 위젯.
아바타 채팅신규
캐릭터 의인화 채팅 + 미니게임 4종. 명령어 참조표를 함께 배치.
룰렛 관리신규
테마 갤러리 + 구간별 확률 테이블을 결합한 룰렛 설정.
시그니처 관리신규
배너, 후원페이지 노출을 항목별로 독립 제어하는 아이템 관리.
시그니처 빙고판신규
완성형 테마 갤러리 + 파라메트릭 빙고 칸수 조정. 구독 게이트.
소통배틀 & 프라이빗 채팅
배틀 — 허브 & 신청신규
방송 중인 크리에이터에게 랜덤 또는 지정 배틀을 신청합니다.
배틀 — 진행 콘솔(→ 리모컨에 통합됨)신규
듀얼 영상 오버레이와 승부 게이지, 진행 타이머를 리모컨 확장 패널에서 제어합니다(BTL-09, 구 화면 battle-console.html은 안내로 대체).
프라이빗 채팅 — 설정 & 신청함신규
자격 조건과 운영 모드를 설정하고 신청을 큐로 처리합니다.
프라이빗 채팅 — 진행중 세션신규
1:1 대화 스레드와 후원자 측 신청 진입점.
수익정산 & 소속사
정산 & 보안신규
사업자 정보 등록부터 정산 신청, 내역, 로그인 기록까지.
소속사 관리신규
추천인 코드로 소속 계정을 편입하고 일괄 정산을 관리합니다.
설정칭호 & 계정
칭호 설정신규
누적 후원 금액 구간별로 도너에게 부여할 칭호를 정합니다.
계정설정신규
채널 관리, 프로필, 공개 범위, ID 관리 4탭과 세션 관리.
공통 컴포넌트화면 아님 · 카드 없이 안내만
상태·확인 규격 13종 — 빈 상태·로딩·에러(429 연타 문구 변형 포함)·실시간 연결 끊김·결제 실패·권한 없음·저장 4상태·확인 다이얼로그 L1/L2·되돌리기 토스트·리모컨 OFF 배너·뷰포트 정책·승인 확인중은 별도 화면 하나로 그려지지 않고, 해당 상태가 실제로 발생하는 화면마다 나눠 반영됩니다. 예: 빈 상태·연결 끊김 배너(후원 내역), 권한 없음(소속사 관리), 결제 실패·승인 확인중(캐시 충전), 429 연타 보호(후원 페이지), 확인 다이얼로그 L1(대시보드 채널 연결 해제·룰렛 관리 확률판 삭제). 화면별 규격·적용 근거는 states.html 주석표를 참고하세요.
스튜디오 셸 — 전역 내비게이션 · 저장 바 — 좌측 내비게이션과 하단 저장 바(변경사항 감지 · 저장 중 · 완료 · 실패 재시도, 방송 중 승격 확인 다이얼로그 포함)는 이 색인의 모든 스튜디오 화면 하단에 이미 공통 적용되어 있어 별도 카드를 두지 않습니다. 아래 화면 하단에서 직접 확인하세요.
뷰포트 정책 — 도너 공개 화면(홈·후원페이지·랭킹 등)은 모바일 우선(360/768/1024), 크리에이터 스튜디오는 데스크톱 전용(≥1280px, 미만은 안내 화면으로 전환)이며, 리모컨만 예외로 모바일을 필수 지원합니다(방송 중 PC가 OBS로 점유된 상태에서 폰으로 끄는 것이 유일한 사고 대응 수단이기 때문). 데스크톱 전용 안내는 대시보드에 실제 구현되어 있습니다(폭 1280px 미만에서 화면 폭을 줄여 확인).
베어니 스타일 목업 | 기준: docs/wireframes/index.html(와이어프레임 색인) | 각 화면 하단에서 개별 와이어프레임 원본으로 이동할 수 있습니다.