1) 문제점
- 전시 관람객이 수동적으로 작품을 감상하는 기존 방식의 한계
- 여러 관람객이 동시에 참여할 수 있는 인터랙티브 플랫폼 부재
- 대형 스테이지와 실시간 상호작용할 수 있는 시스템 필요
- 웹 기반으로 즉시 참여 가능하며 현장 참여자만 접근 가능한 솔루션 필요
⠀
2) 프로젝트 목표
- **멀티유저 실시간 조종 시스템**: 여러 사용자가 동시에 나비를 만들고 조종할 수 있는 네트워크 플랫폼
- **WebSocket 기반 저지연 통신**: 브라우저와 Unreal Engine 서버 간 실시간 양방향 통신
- **대형 프로젝션 연동**: Unreal Engine 렌더러로 스테이지에 실시간 CG 나비 투영
- **반응형 웹 지원**: 앱 설치 없이 모든 디바이스에서 즉시 참여 가능
⠀
3) 주안점
- WebSocket 실시간 통신 및 멀티유저 상태 동기화
- 조이스틱 UI를 통한 직관적인 나비 조종 경험
- 저지연 네트워크 통신으로 즉각적인 피드백
- Unreal Engine 렌더러 서버와의 안정적인 연동
- 모바일 터치 입력 최적화 및 크로스 디바이스 호환성

1) 포트폴리오 소개
⠀
뮤지엄X앙상블 행사를 위한 실시간 멀티유저 인터랙티브 전시 플랫폼. 여러 관람객이 모바일 웹에서 나비를 디자인하고, WebSocket을 통해 Unreal Engine 렌더러 서버와 실시간 통신하여 대형 스테이지에 투영된 나비를 조이스틱으로 동시 조종하는 인터랙티브 미디어 아트 시스템입니다.
⠀
2) 작업 범위
⠀
- 웹 프론트엔드 개발 (JavaScript, HTML, CSS)
- Canvas API 기반 나비 드로잉 시스템 개발
- WebSocket 실시간 통신 구현 (브라우저 ↔ Unreal Engine 렌더러 서버)
- 조이스틱 UI 및 실시간 조종 시스템 개발
- 멀티유저 동시 접속 및 상태 동기화
- 지원 환경: 반응형 웹 (모바일, 태블릿, 데스크톱)
⠀
3) 주요 업무
⠀
- **WebSocket 실시간 통신**: 브라우저와 Unreal Engine 렌더러 서버 간 양방향 실시간 통신 구현. 저지연 조종 입력 전송 및 상태 동기화
- **멀티유저 시스템**: 여러 사용자가 동시에 접속하여 각자의 나비를 생성하고 조종할 수 있는 네트워크 아키텍처 구현
- **조이스틱 UI 및 조종 시스템**: 터치 기반 가상 조이스틱 UI 개발. 실시간 입력을 WebSocket으로 서버에 전송하여 스테이지 나비 조종
- **Canvas 나비 드로잉 시스템**: Canvas API 기반 나비 디자인 툴 구현. 브러시, 색상 팔레트, 터치/마우스 입력 지원
- **대형 프로젝션 연동**: Unreal Engine 렌더러와 연동하여 대형 스테이지에 실시간 CG 나비 투영
⠀
4) 주안점
⠀
- **실시간 네트워크 성능**: WebSocket 기반 저지연 통신으로 조이스틱 입력이 즉각 반영되는 반응성 확보
- **멀티유저 동기화**: 여러 사용자의 나비가 동시에 스테이지에서 조종되는 안정적인 상태 관리
- **터치 최적화**: 모바일 터치 입력에 최적화된 조이스틱 UI. 직관적인 조종 경험
- **크로스 디바이스**: 모든 디바이스와 브라우저에서 동일한 품질의 경험 제공
- **Unreal Engine 연동**: 웹 프론트엔드와 Unreal 렌더러 서버 간 원활한 데이터 통신 및 동기화
- **사용자 편의성**: 직관적인 UI로 누구나 쉽게 나비를 만들고 조종할 수 있는 인터페이스