[NETCITY NEWS] OBS Studio 방송 화면에 매거진 최신뉴스가 실시간으로 표시되는 구조는 단순한 이미지 삽입이 아니다. 웹페이지와 데이터베이스, PHP API, JavaScript, CSS 디자인을 OBS 브라우저 소스에 결합한 방식이다. 방송자는 OBS에서 하나의 오버레이 소스만 켜지만, 그 안에서는 매거진의 최신 기사 데이터가 주기적으로 수신되고 방송국 스타일 팝업으로 렌더링된다.
현재 NETCITY 방송 화면의 좌측에는 LIVE BULLETIN과 NEWS FEED 라벨이 붙은 팝업 박스가 표시된다. 이 영역은 매거진 사이트의 최신 공개 기사 6개를 불러와 일정 간격으로 회전한다. 제목, 카테고리, 시간, 출처 도메인이 함께 표시되며 새 항목이 바뀔 때는 짧은 플래시 효과가 들어간다.
OBS는 DB를 직접 읽지 않는다
중요한 점은 OBS가 매거진 데이터베이스에 직접 접속하지 않는다는 것이다. OBS는 웹페이지를 불러올 뿐이고, 실제 최신뉴스 조회는 서버의 PHP API가 맡는다. 이 방식은 방송 프로그램과 데이터베이스를 분리하기 때문에 안정적이다. 방송 화면에는 필요한 제목·분류·시간·URL만 전달되고, 내부 데이터베이스 접속 정보는 화면이나 OBS 설정에 노출되지 않는다.
현재 최신뉴스 API는 obs-latest-news-feed.php가 담당한다. 이 파일은 매거진 설정을 통해 데이터베이스에 접속하고, articles 테이블에서 공개·승인된 기사만 최신순으로 조회한다. 이후 결과를 JSON 형식으로 정리해 브라우저 오버레이에 제공한다.
매거진 DB → PHP JSON API → 웹 오버레이 → OBS Browser Source → YouTube Live
브라우저 소스가 방송 그래픽 엔진이 된다
OBS의 브라우저 소스는 일반 웹페이지를 방송 화면에 얹을 수 있는 기능이다. 여기에 투명 배경 HTML을 사용하면 자막, 로고, 최신뉴스, 신호 상태, 스캔라인, 빛 효과 같은 그래픽 요소를 실제 영상 위에 겹칠 수 있다. 이번 구성에서는 obs-video-fx-overlay.php가 방송형 화면 디자인을 만들고, 그 내부 JavaScript가 fetch()로 최신뉴스 API를 호출한다.
현재 동작 방식은 30초마다 최신뉴스 목록을 다시 불러오고, 약 5.6초마다 기사 1개씩 화면에 표시하는 구조다. 캐시로 인해 오래된 뉴스가 남지 않도록 요청에는 현재 시각 값이 붙고, API 응답에는 캐시 방지 헤더가 적용된다. 그래서 매거진에 새 기사가 올라오면 방송 팝업도 다음 갱신 주기에 맞춰 바뀔 수 있다.
사용된 프로그램과 기술
이 연동에는 여러 프로그램이 함께 쓰인다. OBS Studio는 최종 합성과 송출을 맡고, OBS 브라우저 소스는 오버레이 웹페이지를 화면에 올린다. PHP는 최신뉴스 API를 만들고, MariaDB 또는 MySQL은 매거진 기사 데이터를 저장한다. JavaScript는 API를 호출하고 뉴스 항목을 회전시키며, HTML/CSS는 방송국 스타일의 팝업 디자인과 특수효과를 만든다. Nginx 같은 웹서버는 이 모든 오버레이 파일을 OBS가 접근할 수 있는 주소로 제공한다.
필요하면 obs-websocket도 함께 사용할 수 있다. 이 경우 장면 전환, 소스 위치 조정, 방송 시작·중단 같은 OBS 제어를 외부 스크립트에서 자동화할 수 있다. 즉 최신뉴스 연동은 단독 기능이 아니라 자막, 카메라, 모니터 캡처, 로고, 팝업창, 특수효과와 함께 확장되는 방송 운영 구조의 일부가 된다.
결국 이 방식은 개인 방송이나 소규모 미디어 운영에서도 방송국형 정보 화면을 만들 수 있음을 보여준다. 웹사이트에 올라온 글이 방송 화면의 뉴스 팝업으로 이어지고, 시청자는 유튜브 라이브에서 실시간 영상과 최신 정보를 동시에 보게 된다. OBS는 단순 캡처 프로그램을 넘어 웹과 연결되는 실시간 미디어 콘솔이 되는 셈이다.