PROJECT 03

DID / CONTENT OPERATIONS & REALTIME CONTROL

콘텐츠를 설정하는 곳부터
여러 화면이 재생되는 순간까지

플레이어 화면, CMS, WebSocket 서버를 모두 개발했습니다. 운영자가 설정한 콘텐츠가 현장 화면에서 재생되도록 연결하고, 여러 단말의 전환 시점과 그룹별 스케줄을 제어했습니다.

담당: 플레이어 · CMS · WebSocket 서버
핵심 작업: 콘텐츠 운영 · 동기 재생 · 스케줄 전환
적용 환경: Windows · Android DID

01 / MY ROLE

운영과 재생을 연결하는 세 영역을 담당했습니다

01
CMS
운영자가 콘텐츠와 재생 순서를 설정하고, 단말 상태를 확인하는 관리 화면
02
WebSocket 서버
스케줄 그룹별 연결과 역할을 관리하고 재생 명령을 전달하는 서버
03
플레이어 화면
콘텐츠를 미리 준비하고 수신한 신호에 맞춰 다음 화면을 재생하는 클라이언트

CMS의 운영 설정, 서버의 명령 전달, 플레이어의 화면 전환을 함께 다루며 각 단계에서 어떤 데이터를 주고받고 언제 동작해야 하는지 맞췄습니다.

02 / CONTENT OPERATIONS

재생할 콘텐츠와 순서를
운영자가 관리할 수 있도록

이미지·영상 콘텐츠의 운영 기간을 확인하고 재생 목록과 순서를 설정하는 CMS를 개발했습니다. 스크린세이버와 광고 콘텐츠를 설정하는 운영 경험을 DID 스케줄 관리까지 연결했습니다.

상태 확인과 원격 운영

30초 주기로 전달받는 상태를 바탕으로 단말 접속 여부와 자원 사용량을 확인하고, 별도의 명령 전달 애플리케이션을 통해 재실행·재부팅을 요청할 수 있도록 했습니다.

디바이스 관리와 통계 CMS구현 과정 펼치기구현 과정 접기

디바이스 상태와 원격 명령

단말이 30초마다 보낸 상태 정보로 접속 여부, CPU·메모리 사용량과 최종 접속 시각을 표시했습니다. CMS에서 재실행·재부팅을 요청하면 WebSocket 명령을 전달하는 애플리케이션을 거쳐 키오스크로 전달됩니다.

이용 기록을 일일 배치로 집계

키오스크가 전송한 TXT 이용 기록을 하루 한 번 배치 작업으로 처리해 통계 테이블에 반영했습니다. CMS에서는 시간대별 사용량, 검색 매장과 카테고리 이용 현황을 집계 데이터로 조회합니다.

03 / SYNCHRONIZED PLAYBACK

다음 콘텐츠를 준비한 뒤
같은 신호로 화면을 전환합니다

대형 화면이 이어진 공간에서는 단말마다 로딩과 전환 시점이 달라지면 어긋남이 드러납니다. 콘텐츠 준비와 재생 명령을 분리해 전환 순간의 로딩 대기를 줄이도록 구성했습니다.

PRELOAD

전환 전에 준비

플레이어가 다음 이미지·영상을 미리 불러오고 화면에 표시할 준비를 합니다. 콘텐츠 로딩은 각 단말에서 처리합니다.

PLAY

수신한 신호로 전환

WebSocket으로 재생 시점을 전달하고, 플레이어는 준비된 콘텐츠를 화면에 올립니다.

롯데백화점 수원점 · 보이드 DID

세로로 배치된 세 개의 대형 화면이 스케줄에 맞춰 함께 전환되는 환경에 적용했습니다. 다음 화면을 사전 로드하고 전환 신호를 맞추는 방식으로 구성했습니다.

04 / GROUP SCHEDULES

평소에는 그룹별로,
정해진 시간에는 전체가 함께

이 프로젝트의 특수 요구사항으로, 각 단말은 자기 그룹과 공통 LED의 두 스케줄을 시간에 따라 재생합니다. 용산 아이파크 도파민스테이션은 스케줄 그룹마다 독립 재생하면서, 매시 00분·30분에는 약 10분 동안 LED 콘텐츠를 전체 화면에 공통 재생해야 했습니다.

01
그룹별 독립 재생
02
00분·30분 공통 전환
03
LED 콘텐츠 공통 재생
04
원래 그룹 스케줄 복귀

그룹별 방 분리

스케줄 그룹을 Socket.IO 방으로 나누고, 해당 그룹의 재생 명령은 같은 방에 전달합니다.

공통 재생의 우선순위

공통 시간에는 전체 명령으로 전환하고, 종료 후 각 그룹의 원래 스케줄로 돌아가도록 흐름을 구분했습니다.

재접속과 역할 관리

늦게 접속한 단말은 리더에게 현재 재생 정보를 요청하고, 리더 연결이 끊기면 역할을 이전하도록 구성했습니다.

스케줄 동기화 구조 · 아이파크몰

Node.js · Socket.IO 서버그룹별 방과 역할 관리 · 명령 중계

그룹 A

방장 A1

재생 시점 결정

서버를 통해 preloadNext · playNext 전달

멤버 A2 · A3

각 단말이 콘텐츠를 준비하고 재생

그룹 B

방장 B1

그룹 A와 독립된 스케줄

서버를 통해 같은 그룹에 명령 전달

멤버 B2 · B3

각 단말이 콘텐츠를 준비하고 재생

LED 그룹

LED 방장

00분·30분에 공통 재생 시작

서버를 통해 연결된 전체 단말에 전달

10분·40분에 공통 구간 종료

각 그룹 방장이 자기 목록 처음부터 재생

그룹명과 단말명은 구조 설명용 예시입니다. 서버가 영상 파일을 보내는 대신 재생 명령을 중계하고, 콘텐츠는 플레이어가 준비합니다.

05 / FAILURE HANDLING

방장 승계와 화면 생존 확인을
서로 다른 흐름으로

동기 재생에서는 명령을 보내던 단말의 연결이 끊겨도 남은 단말이 역할을 이어받아야 합니다. Windows 환경에서는 웹 화면의 생존 상태를 WebView 애플리케이션에 전달하는 방식도 적용했습니다.

방장 연결 종료 시 역할 승계

기존 방장 연결 종료서버가 disconnect 이벤트 처리
첫 번째 멤버 승격멤버 목록에서 다음 방장 선택
새 역할 전달해당 단말에 role: leader 통지
스케줄 제어 시작보관한 스케줄 상태로 제어 역할 인계

각 단말이 스케줄 정보를 보관하고 재생을 이어가므로, 방장 승계 때문에 나머지 화면을 멈추거나 콘텐츠를 다시 시작하지 않도록 설계했습니다. 남은 멤버가 없으면 방을 삭제합니다.

WINDOWS

웹 화면 → WebView 앱

웹 화면이 30초마다 STATUS 텍스트를 앱에 보냅니다. 앱은 분 단위로 수신 여부를 확인하고 신호가 들어오지 않으면 화면을 강제로 리로드합니다. 재생 동기화와 별개로 적용한 Windows 운영 환경의 생존 감시 방식입니다.

ANDROID

플레이어 적용

DID 플레이어는 Android 환경에도 적용했습니다. Windows에서 사용하는 WebView 생존 신호 방식은 Android에는 적용하지 않았습니다.

다시 접속한 단말의 현재 재생 정보 확인

재접속한 단말은 방에 입장한 뒤 방장에게 현재 재생 중인 스케줄을 요청합니다. 응답받은 콘텐츠를 우선 별도로 재생하고, 다음 콘텐츠 전환 명령부터 그룹과 동기화합니다. 콘텐츠가 준비되어 있다면 동기화 시점을 기다리며 검은 화면을 보여주지 않도록 했습니다.

로그아웃·재부팅 이후에도 서버가 실행되도록

Windows에서는 NSSM으로 WebSocket 서버를 서비스에 등록해 사용자 로그아웃 후에도 실행을 유지하고, 시스템이 다시 켜지면 자동 시작하도록 구성했습니다. Node.js 프로세스를 PM2로 운영한 경험과 함께, 실행 환경에 맞춰 서버 운영 방식을 적용했습니다.

장기 운영을 위한 로그 관리

logrotate를 사용해 로그를 순환 관리하고, 로그 파일이 계속 누적되어 저장 공간을 차지하지 않도록 관리했습니다.

명령 전달·사전 로드·그룹 복귀구현 과정 펼치기구현 과정 접기

방과 역할을 기준으로 명령 범위 제한

스케줄 그룹 SCH_SECT마다 Socket.IO 방을 만들고 첫 입장 단말을 리더로 정합니다. 리더가 재생 시계를 관리하고, 서버는 같은 방 멤버에게 명령을 중계합니다.

sendCommandToRoomMembers: 같은 그룹에 전달하는 명령입니다. 리더가 아니면 서버가 전달하지 않습니다.
sendCommandToAllMembers: LED 공통 재생 시간에 연결된 전체 단말로 전달합니다.
requestToLeader / respondToMember: 늦게 들어온 단말이 현재 재생 정보를 요청하고, 리더가 해당 멤버에게 응답합니다.

숨긴 DOM을 준비한 뒤 전환

리더는 콘텐츠 종료 약 4초 전에 preloadNext를 보내 다음 img·video를 숨긴 상태로 준비합니다. 종료 약 1초 전 playNext를 보내면 준비한 요소를 페이드인하고, 1초 뒤 이전 요소를 제거합니다. WAVE 타입은 한 콘텐츠의 여러 파일을 함께 준비합니다.

공통 재생이 끝나면 그룹 목록으로 복귀

아이파크몰에서는 매시 00–10분과 30–40분에 LED 리더가 전체 명령을 보냅니다. 해당 구간에는 파사드 리더의 방 루프를 멈추고, 10분·40분이 되면 각 방이 원래 playType 목록의 처음부터 재생합니다.

재접속과 연결 오류를 별도 처리

재접속한 단말은 현재 콘텐츠를 개별 재생하고 다음 전환 명령부터 그룹에 합류합니다. 연결 오류가 나면 로컬의 1초 스케줄 루프를 실행해 화면 재생을 이어갑니다. 방장 연결 종료 시에는 첫 번째 멤버가 제어 역할을 이어받으며, 남은 멤버가 없으면 방을 삭제합니다.

06 / PROJECT COVERAGE

현장별 운영 방식에 맞춘 구축 경험

대형 미디어월과 상업 공간의 DID부터 여러 지점의 회의실 예약 화면까지, 플레이어와 CMS를 현장 운영 방식에 맞춰 구축했습니다.

01 / 주요 구축

현대모비스

회의실 예약 시스템 · 3개 지점

적용 범위: Android 기반 화면
핵심 작업: SOAP API 데이터 연동

02 / 주요 구축

용산 아이파크

도파민스테이션

적용 범위: 그룹·전체 재생
핵심 작업: Socket.IO · 스케줄 복귀

추가 구축 경험 4

롯데백화점 수원점보이드 DID · 3개 화면 동시 전환
롯데 타임빌라스 수원점DID · CMS
남원 스마트DID · CMS
KCB 회의실 예약 시스템화면 · CMS