방송 화면에 실시간 게임 정보 띄우기 - API 오버레이 활용법

API 오버레이란 무엇인가

API 오버레이는 게임사나 외부 서비스가 제공하는 데이터(API)를 가져와서 방송 화면 위에 실시간으로 표시하는 기술이다. 쉽게 말해, 롤(League of Legends) 방송을 하면서 화면 한쪽에 자신의 현재 티어, 승률, 최근 10경기 전적이 자동으로 업데이트되어 표시되는 것이다.

이 기술이 방송에 가져다주는 효과는 세 가지다. 첫째, 시청자가 스트리머의 실력을 직관적으로 파악할 수 있다. 둘째, 스트리머가 직접 전적을 검색해서 화면에 띄우는 수고가 사라진다. 셋째, 방송 화면의 정보 밀도가 높아져 전문적이고 풍성한 인상을 준다.

기술적으로 API 오버레이는 이렇게 작동한다. 웹 페이지(HTML/CSS/JavaScript)가 일정 주기로 게임 API에 데이터를 요청하고, 받아온 데이터를 시각적으로 표시한다. 이 웹 페이지를 OBS의 '브라우저 소스'로 추가하면 방송 화면 위에 투명 배경으로 오버레이된다. 방송 중에도 데이터가 자동으로 갱신되므로, 스트리머가 신경 쓸 것이 없다.

주요 게임별 공개 API 목록

2026년 현재 방송 오버레이에 활용할 수 있는 주요 게임 API를 정리했다.

Riot Games API (롤, TFT, 발로란트)

라이엇 게임즈의 공식 개발자 포털(developer.riotgames.com)에서 API 키를 발급받을 수 있다. 개인 프로젝트용 키는 즉시 발급되며, 하루 2만 건의 요청이 가능하다. 소환사 정보, 랭크 데이터, 최근 매치 기록, 챔피언 마스터리 등을 조회할 수 있다. 발로란트 API는 별도로 val.api.riotgames.com에서 제공된다.

Steam Web API (스팀 게임 전반)

steamcommunity.com/dev/apikey에서 키를 발급받는다. 플레이어 프로필, 보유 게임 목록, 최근 플레이 시간, 도전과제 달성률 등을 가져올 수 있다. CS2, 도타2 등 스팀 기반 게임에 범용적으로 사용 가능하다.

Blizzard API (오버워치 2, WoW, 디아블로4)

develop.battle.net에서 OAuth 인증 기반의 API를 제공한다. 오버워치 2의 경쟁전 랭킹, WoW 캐릭터 정보, 디아블로4 시즌 캐릭터 정보를 조회할 수 있다. 인증 절차가 라이엇보다 복잡하지만 문서화가 잘 되어 있다.

Fortnite Tracker API

fortnitetracker.com에서 제공하는 서드파티 API로, 포트나이트 플레이어의 전적, K/D, 승률 등을 조회할 수 있다. 공식 API는 아니지만 데이터 정확도가 높고 무료 티어에서 분당 30건 요청이 가능하다.

osu! API

osu.ppy.sh/docs에서 공식 API v2를 제공한다. 플레이어 랭킹, 최근 플레이 기록, 비트맵 정보 등을 가져올 수 있다. 리듬 게임 방송에서 활용도가 높다.

PUBG API

developer.pubg.com에서 공식 API를 제공한다. 매치 데이터, 시즌 통계, 생존 기록 등을 조회할 수 있다. 분당 10건의 요청 제한이 있으므로, 캐싱을 적용하는 것이 좋다.

HTML+JS로 오버레이 직접 만들기

Riot Games API를 예시로 롤 전적 오버레이를 만드는 과정을 설명한다. 프로그래밍 경험이 조금이라도 있다면 1~2시간이면 완성할 수 있다.

기본 구조:

오버레이는 하나의 HTML 파일로 구성된다. 이 파일이 OBS 브라우저 소스로 로딩되며, 내부 JavaScript가 주기적으로 API를 호출해 데이터를 갱신한다.

Step 1: HTML 프레임 작성

배경이 투명한 HTML 파일을 만든다. body의 background를 transparent로 설정하고, 표시할 정보의 레이아웃을 CSS로 잡는다. 예를 들어 소환사명, 티어 아이콘, 승/패 수, LP를 가로로 배치하는 박스 형태가 깔끔하다. 폰트는 웹폰트(Google Fonts의 Noto Sans KR 등)를 사용하면 어떤 환경에서든 일관된 표시가 가능하다.

Step 2: API 호출 함수 작성

JavaScript의 fetch 함수를 사용해 Riot API를 호출한다. 먼저 소환사명으로 계정 ID를 가져오고(Summoner API), 그 ID로 랭크 정보를 조회한다(League API). API 키는 JavaScript 코드에 직접 넣으면 노출되므로, 간단한 프록시 서버를 거치거나, Cloudflare Workers 같은 서버리스 함수를 사용하는 것이 안전하다.

호출 결과 예시: 티어(DIAMOND), 디비전(II), LP(67), 승리(152), 패배(138). 이 데이터를 HTML 요소에 바인딩하면 화면에 표시된다.

Step 3: 자동 갱신 설정

setInterval 함수로 60초(60000ms)마다 API를 재호출하도록 설정한다. 너무 짧은 간격은 API 요청 한도를 초과할 수 있으므로 30~60초가 적당하다. 데이터가 갱신될 때 자연스러운 페이드 애니메이션을 CSS transition으로 추가하면 방송 화면에서 세련되게 보인다.

Step 4: 시각적 꾸미기

배경에 반투명 검정(rgba(0,0,0,0.7))을 깔고, 티어에 따라 색상을 다르게 표시한다(아이언=회색, 브론즈=갈색, 실버=은색, 골드=금색, 플래티넘=청록, 다이아=파랑, 마스터 이상=보라). 티어 아이콘은 Riot의 Data Dragon에서 공식 이미지를 가져올 수 있다. 최근 5경기 승패를 작은 원(초록=승, 빨강=패)으로 표시하면 한눈에 컨디션을 파악할 수 있다.

OBS 브라우저 소스에 연동하는 과정

완성된 HTML 파일을 OBS에 연동하는 건 매우 간단하다.

로컬 파일 사용 시:

1. OBS에서 소스 추가 → 브라우저 선택
2. '로컬 파일' 체크박스를 활성화
3. 만들어둔 HTML 파일 경로를 지정
4. 너비와 높이를 오버레이 사이즈에 맞게 설정 (예: 400x100)
5. '사용자 지정 CSS' 필드에 body { background-color: rgba(0,0,0,0); margin: 0; } 입력
6. 확인을 누르면 즉시 화면에 표시

웹 호스팅 사용 시:

HTML 파일을 GitHub Pages, Netlify, Vercel 등에 배포하고 URL을 사용할 수도 있다. 이 방법의 장점은 코드를 수정하면 재배포만 하면 되고, OBS를 재설정할 필요가 없다는 점이다. 또한 여러 PC에서 같은 오버레이를 사용할 수 있다.

성능 최적화 팁:

• OBS 브라우저 소스의 FPS를 30으로 설정한다. 오버레이는 빠른 갱신이 필요 없으므로 60fps는 낭비다.
• '비활성화 시 소스 끄기'를 체크하면 해당 씬이 아닐 때 브라우저가 멈춰 CPU 부하를 줄인다.
• API 응답을 로컬에 캐싱하여 불필요한 반복 요청을 줄인다.
• 이미지(티어 아이콘 등)는 미리 로컬에 다운받아 사용하면 로딩이 빠르다.

트러블슈팅:

OBS 브라우저 소스에서 API 호출이 작동하지 않는 경우, 대부분 CORS(Cross-Origin Resource Sharing) 문제다. 게임 API 서버가 브라우저 직접 호출을 차단하는 경우가 있으므로, 프록시 서버를 거쳐야 한다. Cloudflare Workers를 무료 티어로 사용하면 하루 10만 건까지 프록시 요청을 처리할 수 있어 개인 방송용으로 충분하다.

코딩 없이 쓸 수 있는 기성 오버레이 도구

코딩이 어렵다면 이미 만들어진 도구를 활용하는 방법도 있다.

1. OP.GG 오버레이

한국의 대표적 게임 전적 사이트 OP.GG에서 OBS용 오버레이를 제공한다. op.gg/overlay에서 소환사명을 입력하면 자동으로 전적 오버레이 URL이 생성되고, 이를 OBS 브라우저 소스에 넣기만 하면 된다. 롤, TFT를 지원하며 커스터마이징 옵션은 제한적이지만 가장 간편하다.

2. Overwolf 앱

Overwolf는 게임 오버레이 앱 플랫폼으로, 다양한 게임의 전적 오버레이 앱을 다운받아 사용할 수 있다. 대표 앱으로 Porofessor(롤), Tracker Network(포트나이트, 에이펙스, 발로란트) 등이 있다. 방송 모드를 활성화하면 OBS에 캡처 가능한 형태로 오버레이가 표시된다.

3. StreamElements 커스텀 위젯

StreamElements의 위젯 편집기를 사용하면 드래그 앤 드롭으로 오버레이를 구성할 수 있다. API 연동은 '커스텀 위젯' 기능에서 HTML/CSS/JS를 직접 입력할 수 있어, 약간의 코딩 지식만 있으면 게임 API와 연동 가능하다. StreamElements 서버를 통해 제공되므로 별도 호스팅이 필요 없다.

4. Streamer.bot + API 연동

Streamer.bot은 방송 자동화 도구로, C# 스크립트를 통해 게임 API를 호출하고 결과를 OBS 텍스트 소스에 직접 출력할 수 있다. 코딩 난이도가 있지만, 한번 설정하면 가장 안정적으로 작동한다. 커뮤니티에서 공유하는 프리셋 액션을 가져와 사용하면 처음부터 만들 필요 없이 바로 적용할 수 있다.

5. 게임 전용 오버레이 사이트

특정 게임만을 위한 전용 오버레이 서비스도 있다. 예를 들어 발로란트는 tracker.gg/valorant/overlay, 에이펙스 레전드는 apexlegendsstatus.com/live 등에서 방송용 오버레이를 직접 생성할 수 있다. 해당 게임만 방송한다면 이런 전용 서비스가 가장 완성도가 높다.

어떤 방법을 선택하든, 오버레이가 게임 화면의 중요한 정보(미니맵, HUD 등)를 가리지 않도록 배치에 신경 쓰자. 화면 모서리의 빈 공간에 작고 깔끔하게 배치하는 것이 시청 경험을 해치지 않는 방법이다.