KillKagi 실행 오류 해결: 포트 충돌과 브라우저 미열림 점검
KillKagi 실행 후 화면이 열리지 않거나 OBS 오버레이가 보이지 않을 때 확인할 포트, 방화벽, 브라우저, 종료 순서를 단계별로 정리했습니다.
OBS 브라우저 소스 오버레이 연결 방법과 권장 설정
OBS Browser Source에 방송 오버레이를 연결할 때 필요한 URL, 해상도, 새로고침, 투명 배경, 캐시 설정을 실제 방송 기준으로 정리했습니다.
목차
OBS Browser Source는 웹 페이지를 방송 화면 위에 얹는 기능입니다. 방송 알림, 채팅창, 목표 진행률, 킬카운트 같은 오버레이는 대부분 이 기능으로 연결합니다.
KillKagi 같은 로컬 방송 도구도 같은 방식으로 연결합니다. 프로그램이 로컬 서버를 열고, OBS는 그 주소를 브라우저 소스로 불러옵니다. 처음 사용하는 분은 KillKagi 설치·사용 가이드를 먼저 보고, 실행 오류가 있다면 KillKagi 실행 오류 해결 가이드를 같이 확인하세요.
OBS 공식 옵션부터 확인하기
OBS Browser Source는 웹 페이지를 장면 안에 띄우는 기본 소스입니다. URL, 로컬 파일, 너비, 높이, 새로고침 옵션처럼 방송 도구와 직접 맞물리는 설정이 많습니다. 옵션 이름이 헷갈릴 때는 OBS Browser Source 공식 문서를 먼저 확인하는 편이 안전합니다.
방송 오버레이를 붙일 때는 아래 순서로 값을 기록해 두세요.
| 확인 항목 | 권장 기록 |
|---|---|
| 소스 이름 | KillKagi Overlay처럼 역할이 드러나는 이름 |
| URL | localhost인지 공유 URL인지 구분 |
| 너비와 높이 | 방송 캔버스와 같은 크기 |
| 새로고침 옵션 | 장면 전환 시 새로고침 여부 |
| 캐시 대응 | 디자인 변경 후 삭제/재추가 필요 여부 |
이 기록이 있으면 화면이 검게 보일 때 URL 문제인지, 크기 문제인지, 캐시 문제인지 순서대로 분리할 수 있습니다.
기본 연결 순서
OBS에서 오버레이를 추가하는 순서는 단순합니다.
- OBS를 엽니다.
소스영역에서+버튼을 누릅니다.브라우저를 선택합니다.- 이름을 입력합니다. 예:
KillKagi Overlay - URL에 오버레이 주소를 넣습니다.
- 너비와 높이를 지정합니다.
- 확인을 누르고 화면에서 위치를 조정합니다.
KillKagi 기본 오버레이 주소는 보통 아래 형식입니다.
http://localhost:3000/overlaylocalhost는 내 PC를 뜻합니다. 같은 PC에서 KillKagi와 OBS를 함께 실행한다면 이 주소를 사용할 수 있습니다. 다른 PC에서 보는 공유 오버레이는 별도 URL을 사용해야 합니다.
권장 해상도
오버레이가 작게 잘리거나 흐릿하게 보이면 브라우저 소스 크기를 먼저 확인해야 합니다.
일반적인 권장값은 다음과 같습니다.
| 방송 캔버스 | 브라우저 소스 권장 크기 |
|---|---|
| 1920 x 1080 | 1920 x 1080 |
| 1280 x 720 | 1280 x 720 |
| 세로 쇼츠/릴스 | 1080 x 1920 |
오버레이가 화면 일부만 쓰더라도 브라우저 소스는 캔버스 전체 크기로 잡는 편이 편합니다. 그래야 CSS에서 화면 위치를 기준으로 배치할 수 있고, 나중에 디자인을 바꿔도 다시 맞출 일이 줄어듭니다.
자주 켜는 옵션
OBS Browser Source에는 방송 도구와 잘 맞는 옵션이 몇 가지 있습니다.
- 소스가 활성화될 때 브라우저 새로고침
- 장면이 활성화될 때 브라우저 새로고침
- OBS를 통해 오디오 제어
- 사용자 지정 CSS
실시간 오버레이는 장면 전환 후 오래된 상태가 남으면 곤란합니다. 그래서 “장면이 활성화될 때 새로고침” 옵션을 켜두면 안정적인 경우가 많습니다.
다만 오버레이가 서버와 실시간 연결을 계속 유지해야 한다면 너무 자주 새로고침되는 것도 좋지 않습니다. 방송 중에는 설정을 자주 바꾸지 말고, 테스트 장면에서 먼저 확인한 뒤 실제 장면에 적용하세요.
투명 배경 확인하기
오버레이는 대부분 투명 배경을 전제로 합니다. 그런데 투명 배경은 정상이어도 검은 화면처럼 보이는 경우가 있습니다.
확인 방법은 간단합니다.
- 브라우저에서 오버레이 주소를 직접 엽니다.
- 배경이 투명하거나 비어 보이는지 확인합니다.
- 상태 텍스트나 숫자가 실제로 표시되는지 확인합니다.
- OBS에서 같은 URL을 넣고 크기를 충분히 크게 잡습니다.
검은 사각형이 보인다면 오버레이 페이지의 CSS 문제일 수 있습니다. 반대로 아무것도 안 보인다면 아직 표시할 데이터가 없거나, OBS 소스가 너무 작거나, URL이 잘못된 경우가 많습니다.
캐시 문제 해결
오버레이 디자인을 수정했는데 OBS에 예전 화면이 계속 보일 때는 캐시를 의심해야 합니다.
먼저 브라우저 소스 속성에서 “현재 페이지 새로고침”을 눌러 봅니다. 그래도 바뀌지 않으면 소스를 삭제하고 다시 추가하는 것이 가장 빠릅니다.
로컬 도구를 쓰는 경우에는 다음 순서가 안전합니다.
- OBS Browser Source 새로고침
- KillKagi 대시보드 새로고침
- OBS 장면 전환 후 다시 확인
- KillKagi 종료 후 재실행
- OBS 재실행
방송 중에는 캐시 문제를 오래 붙잡는 것보다 임시 장면으로 전환한 뒤 재실행하는 편이 안전합니다.
합방에서 공유 URL을 쓸 때
같은 PC에서만 쓰는 오버레이는 localhost로 충분합니다. 하지만 합방에서 참가자마다 자기 OBS에 같은 진행 상황을 띄워야 한다면 localhost 주소는 쓸 수 없습니다.
localhost는 각자의 PC를 가리키기 때문입니다. A 스트리머의 localhost는 A의 PC이고, B 스트리머의 localhost는 B의 PC입니다. 같은 화면을 보려면 외부에서 접근 가능한 공유 오버레이 URL이 필요합니다.
KillKagi에서 CHANNEL_SUM 또는 PARTY 모드를 쓰는 경우에는 공유 URL이 필요한지 먼저 확인하세요. 공유 URL 사용 방식은 KillKagi 소개 페이지와 KillKagi 설치·사용 가이드에 연결해 두었습니다.
방송 전 테스트 루틴
오버레이는 방송 시작 전에 한 번만 제대로 점검하면 대부분 안정적으로 동작합니다.
- OBS 테스트 장면을 하나 만듭니다.
- 실제 방송 장면과 같은 캔버스 크기를 씁니다.
- 브라우저 소스 URL을 입력합니다.
- 목표값이나 테스트 데이터를 넣어 표시 여부를 확인합니다.
- 장면 전환 후에도 값이 유지되는지 확인합니다.
- 방송 송출 미리보기에서 글자가 잘리는지 확인합니다.
폰트가 너무 작거나 화면 모서리에 붙어 있으면 모바일 시청자가 보기 어렵습니다. 방송 화면에서 중요한 숫자는 생각보다 크게 잡는 편이 좋습니다.
관련 글
관련 글
KillKagi 설치·사용 가이드: Node.js 설치부터 OBS 오버레이 연동까지
KillKagi 초보자를 위한 설치 및 사용 가이드입니다. Node.js 설치 여부 확인, EXE 실행, Setup 입력, OBS 오버레이 URL 연결, 공유 URL 활용법을 순서대로 설명합니다.
OBS 오버레이 React 제작 가이드: Browser Source 실시간 연동
OBS Browser Source에서 동작하는 React 오버레이 제작 방법을 정리했습니다. 투명 배경 처리, SSE 실시간 연동, 배포형 오버레이 확장까지 실전 기준으로 설명합니다.