OBS 오버레이를 React로 만드는 법

OBS 브라우저 소스란?

OBS Studio에는 브라우저 소스(Browser Source) 기능이 있습니다. 이 기능을 사용하면 웹 페이지를 OBS 화면에 오버레이로 추가할 수 있습니다.

브라우저 소스는 Chromium 기반이라 HTML, CSS, JavaScript를 모두 사용할 수 있습니다. 즉, React로 만든 앱도 그대로 사용 가능합니다!

프로젝트 세팅

Vite + React 프로젝트 생성

pnpm create vite obs-overlay --template react-ts
cd obs-overlay
pnpm install

필요한 패키지 설치

pnpm add socket.io-client
pnpm add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

기본 오버레이 구조

OBS 오버레이는 투명 배경이 핵심입니다.

/* index.css */
body {
  background: transparent !important;
  overflow: hidden;
}

// App.tsx
function App() {
  return (
    <div className="w-screen h-screen bg-transparent flex items-end justify-start p-4">
      <KillCounter />
    </div>
  );
}

킬 카운터 컴포넌트

// components/KillCounter.tsx
import { useState, useEffect } from 'react';
import { io } from 'socket.io-client';

interface KillData {
  current: number;
  target: number;
  lastDonor?: string;
  lastAmount?: number;
}

export function KillCounter() {
  const [data, setData] = useState<KillData>({
    current: 0,
    target: 10,
  });
  const [isAnimating, setIsAnimating] = useState(false);

  useEffect(() => {
    const socket = io('http://localhost:3000');

    socket.on('kill-update', (newData: KillData) => {
      setData(newData);
      // 업데이트 시 애니메이션 트리거
      setIsAnimating(true);
      setTimeout(() => setIsAnimating(false), 500);
    });

    return () => {
      socket.disconnect();
    };
  }, []);

  const progress = (data.current / data.target) * 100;

  return (
    <div className="bg-black/80 backdrop-blur-sm rounded-xl p-4 min-w-[280px] border border-white/10">
      {/* 헤더 */}
      <div className="flex items-center justify-between mb-3">
        <span className="text-white/60 text-xs font-mono uppercase tracking-wider">
          Kill Goal
        </span>
        <span
          className={`text-white font-bold font-mono text-lg transition-transform ${
            isAnimating ? 'scale-125 text-red-400' : 'scale-100'
          }`}
        >
          {data.current} / {data.target}
        </span>
      </div>

      {/* 프로그레스 바 */}
      <div className="w-full h-2 bg-white/10 rounded-full overflow-hidden">
        <div
          className="h-full bg-red-500 rounded-full transition-all duration-500 ease-out"
          style={{ width: `${Math.min(progress, 100)}%` }}
        />
      </div>

      {/* 최근 도네이션 */}
      {data.lastDonor && (
        <div className="mt-2 text-white/50 text-xs">
          {data.lastDonor} · {data.lastAmount?.toLocaleString()}원
        </div>
      )}
    </div>
  );
}

애니메이션 추가

CSS 애니메이션으로 킬 달성 시 이펙트를 추가할 수 있습니다.

// 목표 달성 시 폭죽 효과
useEffect(() => {
  if (data.current >= data.target) {
    triggerConfetti();
  }
}, [data.current, data.target]);

function triggerConfetti() {
  // canvas-confetti 라이브러리 사용
  confetti({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6 },
    colors: ['#FF3333', '#FFFFFF', '#FFD700'],
  });
}

OBS에 추가하기

1. Vite 개발 서버 실행: pnpm dev
2. OBS Studio 실행
3. 소스 추가 → 브라우저 선택
4. URL: http://localhost:5173
5. 너비/높이를 원하는 크기로 설정
6. 사용자 지정 CSS 탭에서 배경 투명화:

   body { background-color: rgba(0, 0, 0, 0) !important; }

프로덕션 배포

로컬 서버 없이 사용하려면 빌드 후 파일 경로로 접근할 수 있습니다.

pnpm build
# dist/index.html을 OBS에서 직접 열기

OBS 브라우저 소스 URL에 file:///path/to/dist/index.html을 입력하면 됩니다.

마무리

React로 OBS 오버레이를 만드는 것은 생각보다 훨씬 간단합니다. 핵심은 투명 배경과 실시간 데이터 연동입니다.

이 방법을 응용하면 채팅 오버레이, 팔로워 알림, 게임 통계 등 다양한 오버레이를 만들 수 있습니다.

���� ��

• ���� ����Ʈ 1
• ���� ����Ʈ 2