MQTT로 구현한 멀티플레이어 수화 게임, 직접 경험해보세요!
p5.js와 ml5.js를 활용하여 수화(ASL)를 인식하는 머신러닝 기반 게임을 개발, MQTT(Message Queuing Telemetry Transport)를 멀티플레이어 기능 구현에 사용
Tauri 프레임워크를 사용하여 데스크톱 애플리케이션을 구축, Vanilla HTML, CSS, JavaScript를 사용하여 웹 기술 기반의 게임 환경을 구성
Mosquitto를 MQTT 브로커로 활용, 룸 코드를 통해 멀티플레이어 게임을 구현, 실시간 수화 인식(Real-time ASL Recognition)을 통해 사용자 간 상호작용 지원
머신러닝 모델 학습 문제, MQTT 설정, 데스크톱 앱 개발 등 다양한 기술적 난관에 직면, 데이터 수집 및 모델 튜닝(Model Tuning)을 통해 문제 해결 시도
MQTT를 활용한 멀티플레이어 게임 아키텍처
본 프로젝트는 MQTT(Message Queuing Telemetry Transport)를 사용하여 멀티플레이어 기능을 구현했다. MQTT는 IoT(Internet of Things) 환경에 특화된 프로토콜로, 제한된 환경(Constrained Devices)에서 효율적인 통신을 지원한다.
Mosquitto 브로커: MQTT 브로커(Broker)로 사용, 룸 생성 및 사용자 연결 관리
메시지 전송: p5.js와 ml5.js를 통해 수화(ASL) 데이터를 캡처하고, MQTT를 통해 다른 플레이어에게 전송
데이터 흐름: 사용자의 수화 동작 -> ml5.js 모델 -> MQTT 메시지 전송 -> Mosquitto 브로커 -> 다른 플레이어에게 전달
이러한 아키텍처는 실시간 통신(Real-time Communication)을 가능하게 하며, IoT 환경뿐만 아니라 웹 기반 멀티플레이어 게임에도 적용될 수 있음을 보여준다.
ml5.js를 활용한 수화 인식 모델 개발
본 프로젝트는 ml5.js를 사용하여 수화(ASL)를 인식하는 머신러닝 모델을 개발했다. ml5.js는 웹 브라우저에서 머신러닝 모델을 쉽게 사용할 수 있도록 도와주는 라이브러리이다.
포즈 추정(Pose Estimation): ml5.js의 Handpose 모델을 사용하여 사용자의 손가락 관절 좌표를 추출
데이터 수집: 각 수화(ASL) 알파벳에 대한 2000개 이상의 포즈 추정 데이터(Pose Estimation Data) 수집
모델 학습: 수집된 데이터를 기반으로 머신러닝 모델을 학습시켜, 실시간으로 수화를 인식
문제점: 학습 데이터 부족으로 인해 특정 알파벳(X, Y)의 인식률 저하, 데이터 증강(Data Augmentation) 또는 더 많은 데이터 수집을 통해 해결 가능
ml5.js를 활용하면 복잡한 머신러닝 모델을 웹 환경에서 쉽게 구현할 수 있으며, 다양한 응용 분야에 적용할 수 있다.
Tauri를 이용한 데스크톱 애플리케이션 개발
본 프로젝트는 Tauri 프레임워크를 사용하여 데스크톱 애플리케이션을 개발했다. Tauri는 웹 기술(HTML, CSS, JavaScript)을 사용하여 데스크톱 애플리케이션을 만들 수 있게 해주는 프레임워크이다.
웹 기술 활용: HTML, CSS, JavaScript를 사용하여 UI(User Interface)를 구성하고, 애플리케이션의 로직을 구현
보안: Tauri는 웹 기술을 사용하면서도 보안(Security)을 강화하기 위해, 렌더러 프로세스를 제한하고, 시스템 API에 대한 접근을 제어
성능: Tauri는 웹 기반 애플리케이션보다 더 나은 성능(Performance)을 제공하며, 네이티브 애플리케이션과 유사한 사용자 경험을 제공
Tauri를 사용하면 웹 개발 지식을 활용하여 데스크톱 애플리케이션을 쉽게 개발할 수 있으며, 다양한 플랫폼(Windows, macOS, Linux)을 지원한다.
MQTT와 WebSockets 비교 분석
본문에서는 MQTT를 웹 소켓(WebSockets) 대신 선택한 이유를 설명한다. MQTT는 IoT 환경에 특화되어 설계되었으며, 제한된 환경(Constrained Devices)에서 효율적인 통신을 지원한다.
프로토콜 특징: MQTT는 경량 프로토콜(Lightweight Protocol)로, 적은 리소스를 사용하며, 낮은 대역폭 환경에서도 안정적인 통신을 제공
WebSockets: 양방향 통신(Two-way Communication)에 적합하며, 실시간 웹 애플리케이션에 널리 사용
차이점: MQTT는 브로커 기반(Broker-based)으로, 메시지 큐잉(Message Queuing) 기능을 제공하며, WebSockets는 클라이언트-서버(Client-Server) 모델을 사용
선택 기준: IoT 환경에서는 MQTT가 적합하며, 실시간 웹 애플리케이션에서는 WebSockets가 더 적합하다. 본 프로젝트는 IoT 디바이스(Arduino)를 활용하므로 MQTT를 선택했다.
