🎨 오버레이 CSS 설명서

시작하기

1. 대시보드 오버레이 탭 → 디자인 바꾸기 (CSS)에서 꾸밀 오버레이를 고릅니다.
2. 아래 오버레이별 예시를 복사해 붙여 넣고 저장합니다. OBS를 새로고침하지 않아도 5초 안에 바뀝니다.
3. 미리보기 (예시 데이터)를 누르면 예시 데이터가 나오는 화면에서 바로 확인할 수 있습니다.
4. 마음에 안 들면 기본 디자인으로를 누르면 처음 모습으로 돌아갑니다.

저장 규칙

• 오버레이 하나에 최대 30,000자까지 저장할 수 있습니다.
• 보안상 바깥 주소를 불러오는 @import와 url(http…)는 저장할 때 빠집니다. 그래서 웹 글꼴이나 인터넷 이미지 주소는 쓸 수 없습니다.
• url(data:…)처럼 글자로 바꾼 작은 이미지(아이콘)는 쓸 수 있습니다. 다만 30,000자 안에 들어가야 합니다.
• 글꼴은 OBS를 켠 PC에 설치된 글꼴 이름으로 적으면 됩니다 (예: 'Pretendard', 'Black Han Sans').

즉석 테스트 · OBS 자체 CSS 칸

• 오버레이 주소 뒤에 ?css=를 붙이면 저장된 CSS 대신 그 값을 씁니다. 잠깐 시험해 볼 때만 쓰세요. 예: …/stack?demo=1&css=:root{--ov-res-size:30px}
• OBS 브라우저 소스 속성의 '사용자 지정 CSS' 칸도 동작하지만 그 PC·그 소스에만 적용됩니다. 두 곳에 나눠 적으면 어느 쪽이 이길지 헷갈리니, 한 곳(대시보드)에서만 꾸미는 걸 권합니다.

CSS 기초 3분

① 변수 바꾸기 — 가장 쉬움

오버레이마다 색·크기·위치를 정하는 변수가 있습니다. :root { } 안에 변수: 값;을 적으면 됩니다. 아래 오버레이별 표의 변수만 바꿔도 대부분 해결됩니다.

:root {
  --ov-item-accent: #00ffa3;   /* 강조선 색 */
  --ov-res-size: 26px;         /* 결과 글자 크기 */
}

② 이름으로 골라서 꾸미기

화면의 각 부분에는 이름(클래스 .이름, 아이디 #이름)이 있습니다. 이름 { 속성: 값; }으로 꾸밉니다.

.ov-nick { color: #ffd43b; font-weight: 900; }   /* 닉네임 노랗게 굵게 */
.ov-meta { display: none; }                    /* 시각 숨기기 */

③ 자주 쓰는 속성

④ 색 적는 법

• #ff4d6d — 16진수 색 (색상표에서 복사)
• rgba(0,0,0,.5) — 마지막 숫자가 투명도 (0 투명 ~ 1 불투명)
• linear-gradient(135deg, 색1, 색2) — 대각선 그라데이션
• transparent — 완전 투명

⑤ 움직임 넣기

@keyframes pulse { 50% { transform: scale(1.05); } }
.ov-item:first-child { animation: pulse 1.2s ease-in-out infinite; }   /* 최신 결과 두근두근 */

⑥ 우선순위

여러분이 저장한 CSS는 항상 기본 디자인 뒤에 들어가므로 같은 이름을 적으면 여러분 것이 이깁니다. 그래도 안 바뀌면 값 뒤에 !important를 붙여 보세요 (예: width: 300px !important;).

알림 (슬롯·원판·TTS) alert

후원·포인트 룰렛 결과, 리롤, 결과 사용, 출석체크를 토스트(작은 카드)로 띄우고 TTS로 읽어 줍니다. 기본 위치는 오른쪽 아래입니다.

권장 브라우저 소스 크기: 1920×1080 (화면 전체에 두고 위치는 CSS로) · 변수 접두사 --al-

화면 구조 — 들여쓴 것이 안쪽 요소. 이 이름으로 골라서 꾸밉니다

.alert-container                     ← 토스트들이 쌓이는 상자 (위치: --al-bottom / --al-right)
└ .alert-toast                        ← 토스트 1개. 종류별 클래스가 같이 붙음
   │   (.point-roulette 포인트 룰렛 · .greet 출첵 · .reroll 리롤 · .use 결과 사용 · .style-wheel 원판 연출 · .exiting 사라지는 중)
   ├ .alert-icon                      ← 왼쪽 아이콘 (돌아가는 중엔 .spinning)
   └ .alert-body
      ├ .alert-reroll-headline        ← 리롤일 때만 "🎁 리롤 룰렛!"
      ├ .alert-head
      │  ├ .alert-nickname            ← 닉네임
      │  └ .alert-counter             ← 여러 번 돌릴 때 "3 / 10"
      ├ .slot-reel > .slot-strip > .slot-item   ← 슬롯 연출 (멈춘 칸은 .landed)
      │   또는
      ├ .wheel-wrap (.wheel-pointer · .wheel-disc · .wheel-labels > .wheel-label · .wheel-hub) + .wheel-result   ← 원판 연출
      └ .alert-meta                   ← 아래 작은 글씨 (룰렛 이름·금액 등)

CSS 변수 — 색·크기·위치를 바꾸는 가장 쉬운 방법

상태별로 고르기

예시 — 복사해서 대시보드 CSS 칸에 붙여 넣고 저장

.alert-container { top: 40px; left: 40px; right: auto; bottom: auto; }

:root {
  --al-bg: linear-gradient(135deg, #00c9a7, #00897b);
  --al-nick-size: 20px;
  --al-slot-size: 18px;
  --al-radius: 20px;
}

.alert-toast.greet { display: none; }

:root {
  --al-wheel-c1: #ff6b6b; --al-wheel-c2: #ffd93d; --al-wheel-c3: #6bcB77; --al-wheel-c4: #4d96ff;
  --al-wheel-c5: #ff6b6b; --al-wheel-c6: #ffd93d; --al-wheel-c7: #6bcB77; --al-wheel-c8: #4d96ff;
}

룰렛 오버레이 roulette

룰렛이 돌 때 그 룰렛의 연출(원판 또는 슬롯머신)과 디자인대로 화면 가운데 크게 보여 줍니다. 추첨할 때는 같은 자리에 이름 슬롯이 나옵니다. 원판은 그림(canvas)이라 CSS로 못 바꾸고, 슬롯머신은 CSS 변수(--sm-…)로 색을 바꿀 수 있습니다. 디자인마다 body 에 .th-이름 이 붙고, 슬롯일 때는 .mode-slot 도 붙습니다 (예: body.th-neon.mode-slot).

권장 브라우저 소스 크기: 1920×1080

화면 구조 — 들여쓴 것이 안쪽 요소. 이 이름으로 골라서 꾸밉니다

body.th-디자인        ← classic · neon · casino · pastel · gameshow · mochi · horror · gold
#stage                ← 전체 (돌아갈 때 .on / 추첨 중엔 .rf)
├ #title             ← 룰렛 이름
├ #wrap > canvas#cv  ← 원판 (바늘 포함 — 그림)
├ #slotm             ← 슬롯머신 (돌 때 .spin · 멈추면 .win)
│  ├ .sm-top > .sm-title     ← 위 간판 (룰렛 이름) · .sm-bulbs 전구
│  ├ .sm-win > .reel > .cell ← 릴 · 가운데 결과 칸 .cell.hit · .sm-line 당첨 줄
│  ├ .sm-foot                ← 아래 (닉네임 · n / N)
│  └ .sm-handle              ← 손잡이 (클래식·호러·골드 = 레버, 파스텔·모찌 = 돌리는 손잡이)
├ #barm .bm          ← 슬롯(바) 한 줄 (돌 때 #barm.spin · 멈추면 .win)
│  ├ .bm-l > .bm-ic · .bm-rn · .bm-nk  ← 왼쪽 아이콘 · 룰렛 이름 · 닉네임
│  ├ .bm-win > .reel > .cell           ← 도는 칸 (결과 .cell.hit · 여러 번이면 요약 .cell.sum)
│  └ .bm-r                             ← 오른쪽 (n / N · 연차 · 포인트)
├ #raffle            ← 추첨 슬롯 (.slot · 당첨 순간 .slot.win · .wins 당첨자 목록)
└ #result .card      ← 결과 (.nick 닉네임 · .items 결과 · .pts 포인트 · .rr 리롤)
#fx                   ← 당첨 효과 (꽃가루 등) 캔버스

이 오버레이는 변수가 없어 아래 이름(선택자)을 직접 꾸밉니다.

상태별로 고르기

예시 — 복사해서 대시보드 CSS 칸에 붙여 넣고 저장

#result .items { font-size: 44px; color: #ffd43b; }

#title { display: none; }

.th-neon #title { color: #ffe600; text-shadow: 0 0 10px #ffe600; }

#fx { display: none; }

.mode-slot.th-classic { --sm-body: linear-gradient(180deg, #3b82f6, #1e3a8a); }

.sm-handle { display: none !important; }

#stage.barmode { justify-content: flex-end; padding-bottom: 60px; }

.mode-bar.th-clean { --bm-lbg: linear-gradient(90deg, #3b82f6, #6366f1); --bm-hit: #3b82f6; --bm-rfg: #3b82f6; }

#raffle .slot.win { background: linear-gradient(90deg, #a78bfa, #ec4899); color: #fff; }

스택 목록 stack

아직 수행하지 않은 룰렛 결과를 최신순으로 보여 줍니다. 위에 대기 개수가 붙습니다.

권장 브라우저 소스 크기: 500×1080 · 변수 접두사 --ov-

화면 구조 — 들여쓴 것이 안쪽 요소. 이 이름으로 골라서 꾸밉니다

#count.ov-count            ← "🎰 대기 N" (숫자는 .ov-count-num)
#stack.ov-stack            ← 목록
└ .ov-item                ← 결과 1개 (직접 지급한 결과는 .manual 이 같이 붙음)
   ├ .ov-nick             ← 닉네임
   ├ .ov-res              ← 결과 (이모지 + 이름)
   └ .ov-meta             ← 시각 · 수동 여부
.ov-empty                  ← 비었을 때 "대기 중인 룰렛 없음" (?empty=0 이면 안 보임)

CSS 변수 — 색·크기·위치를 바꾸는 가장 쉬운 방법

상태별로 고르기

예시 — 복사해서 대시보드 CSS 칸에 붙여 넣고 저장

.ov-item:nth-child(n+11) { display: none; }

.ov-stack, .ov-count { left: auto; right: 20px; }

:root {
  --ov-item-bg: rgba(0,0,0,.35);
  --ov-item-accent: #00ffa3;
  --ov-nick-fg: #a7f3d0;
}

.ov-count { display: none; }

시간 타이머 timer

시간 항목(예: 10분 노래 금지)을 사용한 순간부터 남은 시간을 카운트다운합니다. 5분·1분 이하가 되면 색이 바뀝니다.

권장 브라우저 소스 크기: 450×800 · 변수 접두사 --tm-

화면 구조 — 들여쓴 것이 안쪽 요소. 이 이름으로 골라서 꾸밉니다

.timers-container
└ .timer                       ← 타이머 1개 (5분 이하 .expiring-soon · 1분 이하 .expiring-very-soon)
   │   data-result="결과 이름" 속성이 붙어 있어 특정 결과만 꾸밀 수 있음
   ├ .timer-header
   │  ├ .timer-result          ← 결과 이름 (여러 번 쌓이면 .timer-count "×2")
   │  └ .timer-nickname        ← 닉네임
   ├ .timer-remaining          ← 남은 시간 "04:59"
   └ .timer-progress > .timer-progress-fill   ← 진행 막대
.empty-state                    ← 진행 중인 타이머가 없을 때

CSS 변수 — 색·크기·위치를 바꾸는 가장 쉬운 방법

상태별로 고르기

예시 — 복사해서 대시보드 CSS 칸에 붙여 넣고 저장

@keyframes blink { 50% { opacity: .35; } }
.timer.expiring-very-soon { animation: blink 1s infinite; }

.timer[data-result="24시간 노방종"] { outline: 2px solid #ffd43b; }

.empty-state { display: none; }

:root { --tm-remaining-size: 34px; }
.timer-progress { height: 2px; }

룰렛 사용 패널 · 베팅 · 사다리 · 퀴즈 interactive

한 주소에 네 가지 화면이 번갈아 뜹니다: !룰렛사용 패널(오른쪽), 베팅 패널(오른쪽), 사다리(오른쪽, 6명 이상이면 넓어짐), 퀴즈(화면 가운데 큰 창).

권장 브라우저 소스 크기: 1920×1080 · 변수 접두사 --iv-

화면 구조 — 들여쓴 것이 안쪽 요소. 이 이름으로 골라서 꾸밉니다

.interactive-panel                 ← !룰렛사용 패널 (닫힐 때 .exiting)
├ .panel-header (.panel-nickname · .panel-countdown — 30초 이하 .warn, 10초 이하 .crit)
├ .panel-title
├ .item-list > .item-row (.item-number · .item-info > .item-name / .item-duration / .item-aliases · .item-count)
├ .panel-progress > .panel-progress-fill
└ .panel-footer

.betting-panel                     ← 베팅
├ .bet-header (.bet-title · .bet-status-badge — 마감되면 .locked)
├ .bet-countdown (.warn / .crit)
├ .bet-options > .bet-option (방금 걸린 선택지는 .recent)
│    ├ .bet-option-bar           ← 비율 막대
│    └ .bet-option-content (.bet-option-name · .bet-option-stats > .pct)
├ .bet-footer (.bet-grand-total)
└ .bet-result (.bet-winner · .bet-winner-sub · .bet-top-winners > .bet-top-winner > .nick / .profit)

.ladder-panel                      ← 사다리 (6명 이상 .is-wide)
├ .ladder-header (.ladder-title > .ladder-emoji · .ladder-timer)
├ .ladder-info (.ladder-cmd · .ladder-cost)
├ .ladder-participants (.ladder-participants-title · .ladder-participant)
├ .ladder-svg-wrap                  ← 사다리 그림
└ .ladder-result-list > .ladder-result-row (.arrow · .label · .reward.positive / .negative)

#quiz-overlay                      ← 퀴즈 (보일 때 .qz-on)
└ .qz-panel
   ├ .qz-tag (포인트/후원 퀴즈) · .qz-by (by 닉네임)
   ├ .qz-q                         ← 문제 ("곧 출제됩니다"는 .qz-teaser)
   ├ .qz-opts > .qz-opt (.qz-n 번호 · .qz-t 보기) — 판정 때 .qz-picked → .qz-correct / .qz-wrong / .qz-dim
   └ .qz-bar > i                   ← 제한 시간 막대 (.qz-run 동안 줄어듦)
#quiz-verdict (.qz-show)            ← 큰 판정 글씨 .qz-vtxt (.qz-ok 정답 · .qz-bad 오답 · .qz-to 시간 초과 · .qz-voidc 무효) + .qz-vsub

CSS 변수 — 색·크기·위치를 바꾸는 가장 쉬운 방법

상태별로 고르기

예시 — 복사해서 대시보드 CSS 칸에 붙여 넣고 저장

.interactive-panel, .betting-panel, .ladder-panel { right: auto; left: 32px; }

:root { --iv-bet-bg: linear-gradient(135deg, rgba(37,99,235,.94), rgba(30,64,175,.94)); }

:root { --iv-quiz-w: 640px; --iv-quiz-q-size: 24px; --iv-quiz-opt-size: 18px; }
#quiz-overlay { align-items: flex-start; padding-top: 60px; }

#quiz-verdict .qz-vtxt { font-size: 72px; }

현재 곡 nowplaying

지금 재생 중인 신청곡·BGM 제목을 한 줄로 보여 줍니다. 제목이 길면 자동으로 흐릅니다.

권장 브라우저 소스 크기: 900×120 · 변수 접두사 --np-

화면 구조 — 들여쓴 것이 안쪽 요소. 이 이름으로 골라서 꾸밉니다

.np-root                     ← 전체 (곡 없음 .is-empty · 가운데 정렬 .is-center · ?bg=black → .bg-black)
├ .np-now
│  ├ .np-pill                ← "🎵 NOW" 배지 (재생 중 .is-playing · 영상 후원 중 .is-donation)
│  └ .np-title > .np-title-inner   ← 제목 (길면 .is-marquee 로 흐름)
└ .np-queue                  ← 다음 대기 곡 수 (?queue=0 이면 .no-queue 로 숨김)

CSS 변수 — 색·크기·위치를 바꾸는 가장 쉬운 방법

상태별로 고르기

예시 — 복사해서 대시보드 CSS 칸에 붙여 넣고 저장

.np-root.is-empty { opacity: 0; }

:root { --np-bg: rgba(0,0,0,.55); --np-radius: 12px; --np-pad: 10px 18px; }

.np-pill { font-size: 0; }
.np-pill::before { content: "♪ 지금 이 곡"; font-size: 20px; }

신청곡 플레이어 song

실제로 소리가 나는 소스입니다. 대시보드 '신청곡 설정'의 화면 모드에 따라 토스트(곡 시작 알림), 카드, 영상이 보입니다.

권장 브라우저 소스 크기: 1920×1080 · 변수 접두사 --vd-

화면 구조 — 들여쓴 것이 안쪽 요소. 이 이름으로 골라서 꾸밉니다

body                         ← 재생 중 .playing · 마스크 끔 .nomask
├ #vid                       ← 영상 (영상 안 쓰는 모드면 화면 밖)
├ #mask-top · #mask-br       ← 영상 위·오른쪽 아래 유튜브 표시를 가리는 검은 띠
├ #donor-info.vd-toast       ← 곡 시작 토스트 (보일 때 .show · 위치 .bl .br .tl .tr)
│  ├ .nick (.vd-toast-nick)  ← 신청자
│  ├ .meta (.vd-toast-meta)  ← 곡 제목·정보
│  └ .msg  (.vd-toast-msg)   ← 메시지
└ #card                      ← 카드 모드 (보일 때 .on · 위치 .bl .br .tl .tr · 영상 후원으로 멈춤 .paused)
   ├ #thumb                  ← 썸네일
   └ #meta (#title · #who · #bar > #fill 진행 막대 · #badge 멈춤 안내)

CSS 변수 — 색·크기·위치를 바꾸는 가장 쉬운 방법

상태별로 고르기

예시 — 복사해서 대시보드 CSS 칸에 붙여 넣고 저장

:root {
  --vd-toast-pad: 18px 28px;
  --vd-toast-minw: 320px;
  --vd-toast-nick-size: 26px;
  --vd-toast-meta-size: 18px;
  --vd-toast-msg-size: 16px;
}

#thumb { display: none; }

#fill { background: #ff4d6d; }

:root { --vd-mask-bg: transparent; }

🎧 모니터링 TTS monitor

스트리머만 듣는 음성 소스라 평소엔 화면에 아무것도 안 보입니다. 주소 뒤에 <code>?show=1</code>을 붙이면 최근 읽은 문장이 왼쪽 아래에 잠깐 뜹니다 (확인용).

권장 브라우저 소스 크기: 아무 크기 · 변수 접두사 --mo-

화면 구조 — 들여쓴 것이 안쪽 요소. 이 이름으로 골라서 꾸밉니다

#log                         ← ?show=1 일 때만 보임
└ .mo-line                   ← 읽은 문장 한 줄 (뒤의 small = '사용'·'테스트' 표시)

CSS 변수 — 색·크기·위치를 바꾸는 가장 쉬운 방법

상태별로 고르기

예시 — 복사해서 대시보드 CSS 칸에 붙여 넣고 저장

#log { left: auto; right: 16px; bottom: auto; top: 16px; }

.mo-line { font-size: 14px; }

문제 해결

• 저장했는데 안 바뀜 — 5초 기다린 뒤에도 그대로면 오타(빠진 ; })를 확인하세요. 한 줄이 틀리면 그 뒤가 무시될 수 있습니다. 오버레이 이름을 맞게 골랐는지도 확인하세요.
• 글꼴이 안 바뀜 — 웹 글꼴 주소는 쓸 수 없습니다. OBS를 켠 PC에 글꼴을 설치하고 이름을 정확히 적으세요. 띄어쓰기가 있으면 따옴표로 감쌉니다.
• 원판(큰 화면) 칸 색 — 룰렛 편집 화면의 항목 색으로 정합니다. 알림 오버레이의 작은 원판은 --al-wheel-c1~c8로 바꿀 수 있습니다.
• 화면 밖으로 잘림 — OBS 브라우저 소스 크기를 이 설명서의 권장 크기로 맞추세요. 위치를 옮겼다면 반대쪽은 auto로 풀어야 합니다.
• 망가졌어요 — 기본 디자인으로 버튼을 누르면 저장된 CSS가 지워지고 처음 모습으로 돌아갑니다.
• CSS는 화면 모양만 바꿉니다. 소리, 표시 시간, 동작은 대시보드 설정이나 주소 뒤 옵션(예: 알림 ?mode=toast)으로 바꿉니다.