프로젝트 배경
1) 문제점
- 기존 디지털 사이니지 솔루션은 하나의 화면에 다양한 정보를 동시에 노출하기 어렵습니다. 최대 2~3개의 이미지 혹은 1개의 영상 송출이 한계였습니다. 이로 인해 사이니지를 도입하더라도 활용도가 낮아지는 문제가 발생했습니다.
2) 프로젝트 목표
- 본 프로젝트는 누구나 쉽게 콘텐츠를 구성·관리할 수 있는 멀티존 디지털 사이니지 플랫폼을 구축하는 것을 목표로 했습니다. 하나의 디스플레이를 여러 영역으로 분할해 다양한 콘텐츠를 동시에 운영할 수 있도록 하고, 관리자 페이지를 통해 원격에서 실시간으로 제어 가능한 시스템을 구현하고자 했습니다.
3) 주안점
- 비전문가도 바로 사용할 수 있는 직관적인 편집 UX, 다양한 화면 크기와 해상도를 고려한 유연한 레이아웃 구조, 그리고 실제 운영 환경에서도 안정적으로 동작하는 실시간 반영 및 관리 구조에 중점을 두었습니다.
또한 상용 솔루션 대비 부담 없이 도입할 수 있도록 가볍고 확장 가능한 시스템 설계를 핵심 방향으로 삼았습니다.
- 기존 디지털 사이니지 솔루션은 하나의 화면에 다양한 정보를 동시에 노출하기 어렵습니다. 최대 2~3개의 이미지 혹은 1개의 영상 송출이 한계였습니다. 이로 인해 사이니지를 도입하더라도 활용도가 낮아지는 문제가 발생했습니다.
2) 프로젝트 목표
- 본 프로젝트는 누구나 쉽게 콘텐츠를 구성·관리할 수 있는 멀티존 디지털 사이니지 플랫폼을 구축하는 것을 목표로 했습니다. 하나의 디스플레이를 여러 영역으로 분할해 다양한 콘텐츠를 동시에 운영할 수 있도록 하고, 관리자 페이지를 통해 원격에서 실시간으로 제어 가능한 시스템을 구현하고자 했습니다.
3) 주안점
- 비전문가도 바로 사용할 수 있는 직관적인 편집 UX, 다양한 화면 크기와 해상도를 고려한 유연한 레이아웃 구조, 그리고 실제 운영 환경에서도 안정적으로 동작하는 실시간 반영 및 관리 구조에 중점을 두었습니다.
또한 상용 솔루션 대비 부담 없이 도입할 수 있도록 가볍고 확장 가능한 시스템 설계를 핵심 방향으로 삼았습니다.
핵심 기능



하나의 디스플레이에 여러 영상 및 콘텐츠 멀티 재생
- 복수개 영상 슬라이드 효과로 자동 재생
- 복수개의 이미지 슬라이드 전환 효과
- 문서 게시
- 재생 오디오에 싱크된 노래방 자막 효과
- 텍스트 효과
- 복수개의 이미지 슬라이드 전환 효과
- 문서 게시
- 재생 오디오에 싱크된 노래방 자막 효과
- 텍스트 효과


디스플레이 존 영역 단위로 컨텐츠 설정
1. 시스템 관리자가 디스플레이에 Zone 영역을 사전 설정
2. 설정된 영역에 사용자는 자신의 컨텐츠를 업로드 하여 게시 및 반영
2. 설정된 영역에 사용자는 자신의 컨텐츠를 업로드 하여 게시 및 반영
진행 단계
프로젝트 기획 및 요구사항 정의
2025.09.
활용 장소 및 환경 분석, 사용 시나리오 정리
시스템 개발
2025.10.
- 시스템 아키텍처 설계 및 UI/UX 구조 정의
- 관리자 페이지 및 디스플레이 화면 개발 (멀티존 레이아웃, 미디어 관리 기능 구현)
- 서버 구축 및 실시간 동기화 구조 적용
- 관리자 페이지 및 디스플레이 화면 개발 (멀티존 레이아웃, 미디어 관리 기능 구현)
- 서버 구축 및 실시간 동기화 구조 적용
시제품 제작
2025.11.
시스템이 작동할 디바이스 및 프레임 제작
프로젝트 상세
1) AI · 디지털 사이니지 플랫폼 : 웨딩홀, 매장, 교육 기관 등을 대상으로 한 멀티존 디지털 사이니지 관리 솔루션 개발 프로젝트입니다.
하나의 디스플레이를 여러 영역으로 분할해 영상·이미지·BGM을 동시에 제어할 수 있는 고도화된 콘텐츠 운영 플랫폼을 제공합니다.
2) 작업 범위 : 전체 서비스 기획 및 개발
- 서비스 기획, 화면 설계 및 관리자 UI/UX 설계
- Front-end 개발 (Nuxt3 기반 관리자·디스플레이 화면)
- Back-end API 개발 및 DB 설계 (PocketBase)
- 서버 인프라 구축 및 Docker 기반 배포
- 지원 환경: 반응형 웹, 디스플레이 전용 웹
3) 주요 업무 : 해당 서비스의 주요 기능 및 주요 페이지
- 멀티존(Zone) 기반 디지털 사이니지 레이아웃 편집 기능
- 이미지·영상 슬라이드쇼 및 전환 효과 시스템
- 디바이스별 콘텐츠·BGM 원격 관리 기능
- 실시간 편집 내용 동기화 및 즉시 반영 구조
- TV 인치·해상도별 프리셋 및 자동 스케일링 기능
- 관리자 페이지(레이아웃, 디바이스, 미디어 관리)
4) 주안점 : 서비스 구축 시 중점이 되었던 사항
- 비전문가도 쉽게 사용하는 직관적인 편집 UX
- 상용 솔루션 대비 비용 효율적인 자체 구축 구조
- 다양한 해상도·디바이스를 고려한 확장성과 안정성
- 실시간 운영 환경에서도 끊김 없는 콘텐츠 반영 구조
하나의 디스플레이를 여러 영역으로 분할해 영상·이미지·BGM을 동시에 제어할 수 있는 고도화된 콘텐츠 운영 플랫폼을 제공합니다.
2) 작업 범위 : 전체 서비스 기획 및 개발
- 서비스 기획, 화면 설계 및 관리자 UI/UX 설계
- Front-end 개발 (Nuxt3 기반 관리자·디스플레이 화면)
- Back-end API 개발 및 DB 설계 (PocketBase)
- 서버 인프라 구축 및 Docker 기반 배포
- 지원 환경: 반응형 웹, 디스플레이 전용 웹
3) 주요 업무 : 해당 서비스의 주요 기능 및 주요 페이지
- 멀티존(Zone) 기반 디지털 사이니지 레이아웃 편집 기능
- 이미지·영상 슬라이드쇼 및 전환 효과 시스템
- 디바이스별 콘텐츠·BGM 원격 관리 기능
- 실시간 편집 내용 동기화 및 즉시 반영 구조
- TV 인치·해상도별 프리셋 및 자동 스케일링 기능
- 관리자 페이지(레이아웃, 디바이스, 미디어 관리)
4) 주안점 : 서비스 구축 시 중점이 되었던 사항
- 비전문가도 쉽게 사용하는 직관적인 편집 UX
- 상용 솔루션 대비 비용 효율적인 자체 구축 구조
- 다양한 해상도·디바이스를 고려한 확장성과 안정성
- 실시간 운영 환경에서도 끊김 없는 콘텐츠 반영 구조

엠뷰 사이트 히어로 섹션

캔버스에 영역을 할당하고 여러 영상, 이미지 슬라이드, 문서 및 음악과 가사 표시 가능

각 영역(존) 별 컨텐츠 설정 및 변경

컨텐츠 업로드 및 관리

시간대별 스케줄링에 따른 화면 전환

관리자 페이지에서 레이아웃, 존, 디바이스 설정

관리자 페이지에서 샘플 미디어, 사용자 등 관리

존 별로 컨텐츠 할당하여 재생

TV에 액자 프레임을 씌워서 움직이는 액자 효과 활용

디스플레이 프레임 제작



