[NETCITY NEWS] NetCity가 OBS 방송 화면에 실시간으로 메시지를 띄우는 SNS형 메시지 소통 시스템을 자체 웹서버 기반으로 구축했다. 별도의 외부 채팅 위젯에 의존하지 않고, 웹페이지에서 입력한 메시지가 서버에 저장되고 OBS 브라우저 소스가 이를 실시간으로 받아 투명 오버레이 형태로 송출하는 구조다.
이번 작업의 목표는 단순한 메신저 디자인이 아니라, 유튜브 방송 화면 위에 SNS 댓글처럼 흐르는 메시지를 직접 운영하는 것이었다. 실제 인스타그램, X, 유튜브 댓글을 API로 가져오려면 각 플랫폼 인증키가 필요하지만, OBS에 표현하는 기술 구조는 그와 같은 실시간 데이터 표현 방식에 맞춰졌다.
웹서버에서 직접 만든 송출형 메시지 시스템
구축된 주소는 https://is.netcity.co.kr/obs-messenger/ 아래에서 운영된다. 관리 화면은 회원 로그인 또는 관리키로 열 수 있고, 송출 화면은 OBS 브라우저 소스에 넣을 수 있도록 투명 배경으로 만들어졌다. 메시지, 아이디, 플랫폼, 이미지, 유튜브 썸네일이 모두 같은 데이터 흐름으로 처리된다.
| 구성 | 역할 | 적용 내용 |
|---|---|---|
| 관리 화면 | 메시지 입력·송출 제어 | 회원 로그인, 관리키, 이미지 첨부, 유튜브 URL 입력 지원 |
| API/SSE | 실시간 데이터 전송 | 상태 JSON과 EventSource 스트림으로 OBS 화면 갱신 |
| OBS 오버레이 | 방송 화면 출력 | 투명 배경, 메시지만 표시, 아래에서 위로 흐르는 애니메이션 |
| 회원 연동 | 사용자 식별 | Google 로그인 회원의 닉네임과 프로필 사진을 메시지 아바타에 반영 |
메시지는 투명 배경 위에서 흐른다
OBS용 출력 화면은 방송 화면을 가리지 않도록 투명 배경으로 구성했다. 초기에는 메신저 박스 형태였지만, 방송용으로는 메시지 줄만 남겼다. 각 메시지에는 반투명 배경을 살짝 넣어 화면 위에서도 읽히도록 했고, 텍스트가 잘리지 않도록 줄바꿈과 이미지 표시 영역도 조정했다.
유튜브·이미지 주소도 자동 변환
유튜브 주소를 메시지나 이미지 URL 칸에 넣으면 주소 문자는 숨기고 유튜브 썸네일만 표시되도록 했다. 이미지 주소 역시 같은 방식으로 처리된다. JPG, PNG, GIF, WebP 파일 업로드도 지원해 방송 중 필요한 안내 이미지나 현장 이미지를 메시지처럼 띄울 수 있다.
지원 흐름 - 일반 텍스트: 아이디와 메시지 출력 - 이미지 파일: 서버 업로드 후 방송 화면 표시 - 이미지 URL: 주소 텍스트 숨김, 이미지로 표시 - YouTube URL: 주소 텍스트 숨김, 썸네일과 재생 배지 표시
Google 회원 프로필까지 반영
관리 화면은 IS 사이트의 회원 세션과 연결됐다. Google 로그인 회원이 메시지를 보내면, 회원 테이블에 저장된 닉네임과 프로필 사진이 메시지 데이터에 함께 들어간다. 그 결과 OBS 프리뷰와 실제 송출 오버레이에서 이니셜 대신 Google 프로필 사진을 아바타로 사용할 수 있다.
OBS 설정 백업까지 염두에 둔 운영 구조
이번 구축은 화면 하나를 만드는 데서 끝나지 않았다. OBS 장면과 브라우저 소스 주소, 웹소켓 기반 런타임 상태를 파일로 저장하고 복원하는 스크립트도 함께 준비했다. 운영 중인 방송 환경을 백업해 두면, 장면 전환이나 브라우저 소스 URL을 다시 맞춰야 하는 시간을 줄일 수 있다.
결과적으로 NetCity는 자체 웹서버에서 생성한 메시지를 OBS로 직접 송출하는 기반을 갖췄다. 이 구조는 향후 실제 유튜브 댓글, X 게시물, 인스타그램 반응을 API 인증과 연결해 받아오는 단계로 확장할 수 있다. 지금 단계에서는 플랫폼 데이터 수집보다 먼저, 방송 화면에 안정적으로 표현되는 실시간 SNS형 메시지 레이어를 완성한 셈이다.