OBS Broadcast Realtime SNS Layer NetCity Web Server
OBS와 웹서버로 실시간 SNS형 메시지 소통 구축
웹페이지에서 만든 메시지가 서버에 저장되고, OBS 브라우저 소스가 이를 실시간으로 받아 투명 오버레이 형태로 송출하는 NetCity 자체 운영 구조입니다.
[NETCITY PAGE] NetCity가 OBS 방송 화면에 실시간으로 메시지를 띄우는 SNS형 메시지 소통 시스템을 자체 웹서버 기반으로 구축했습니다. 별도의 외부 채팅 위젯에 의존하지 않고, 웹페이지에서 입력한 메시지가 서버에 저장되고 OBS 브라우저 소스가 이를 실시간으로 받아 방송 화면 위에 표시되는 방식입니다.
이번 작업의 목표는 단순한 메신저 디자인이 아니라, 유튜브 방송 화면 위에 SNS 댓글처럼 흐르는 메시지를 직접 운영하는 것이었습니다. 실제 인스타그램, X, 유튜브 댓글을 API로 가져오려면 각 플랫폼 인증키가 필요하지만, OBS에 표현하는 기술 구조는 그와 같은 실시간 데이터 표현 방식에 맞춰졌습니다.
OBS
브라우저 소스 투명 오버레이
SSE
실시간 메시지 이벤트 스트림
SNS
프로필, 이미지, 썸네일 표현
Web Server Control
관리 화면에서 입력하고 방송 화면에서 바로 보여줍니다.
구축된 주소는 https://is.netcity.co.kr/obs-messenger/ 아래에서 운영됩니다. 관리 화면은 회원 로그인 또는 관리키로 열 수 있고, 송출 화면은 OBS 브라우저 소스에 넣을 수 있도록 투명 배경으로 만들어졌습니다. 특히 방송용 크롬 화면은 OBS에 들어가는 최종 출력 화면이기 때문에 가장 중요한 검수 지점입니다.
Signal Architecture
메시지, 아이디, 플랫폼, 이미지가 같은 데이터 흐름으로 움직입니다.
OBS용 출력 화면은 방송 화면을 가리지 않도록 투명 배경으로 구성했습니다. 초기의 메신저 박스형 UI에서 방송 전용 메시지 줄만 남기고, 각 메시지에는 읽기 쉬운 반투명 배경을 얹었습니다.
YouTube Reference
영상으로 전체 흐름을 함께 확인합니다.
OBS와 웹서버 기반 메시지 송출 구조를 페이지 중간에서 바로 확인할 수 있도록 유튜브 영상을 삽입했습니다. 설명 문맥을 끊지 않도록 16:9 프레임으로 배치했습니다.
Broadcast Overlay
메시지는 투명 배경 위에서 흐릅니다.
메시지는 오른쪽 고정이 아니라 화면 가로 기준으로 맞춰 배치되고, 계속 남아 있는 항목들이 아래에서 위로 밀려 올라가는 형식으로 표시됩니다.
- 텍스트가 길어도 줄바꿈으로 처리해 방송 화면에서 잘리지 않도록 조정했습니다.
- 메시지 줄에는 약한 반투명 배경을 넣어 영상 위에서도 읽기 쉽게 만들었습니다.
- 방송용 크롬 화면은 실제 송출 전 최종 확인 화면이므로 메시지 위치, 투명 배경, 이미지 표시, 유튜브 썸네일 표시를 가장 먼저 검수해야 합니다.
- 사진과 유튜브 썸네일은 메시지 본문 아래가 아니라 우측 미디어 슬롯에 배치해 글줄 높이가 과하게 늘어나지 않도록 구성했습니다.
- OBS 장면, 브라우저 소스 주소, 웹소켓 기반 런타임 상태를 파일로 저장하고 복원하는 운영 구조까지 함께 준비했습니다.
Media Transform
유튜브 주소와 이미지 주소는 화면용 미디어로 바뀝니다.
유튜브 주소를 메시지나 이미지 URL 칸에 넣으면 주소 문자는 숨기고 유튜브 썸네일만 표시되도록 했습니다. 이미지 주소 역시 같은 방식으로 처리되며, JPG, PNG, GIF, WebP 업로드도 지원합니다. 방송 화면에서는 텍스트는 왼쪽, 사진과 유튜브 썸네일은 오른쪽으로 분리해 메시지 흐름을 유지합니다.
지원 흐름
- 일반 텍스트: 아이디와 메시지 출력
- 이미지 파일: 서버 업로드 후 방송 화면 표시
- 이미지 URL: 주소 텍스트 숨김, 이미지로 표시
- YouTube URL: 주소 텍스트 숨김, 썸네일과 재생 배지 표시