손짓으로 조작하는 비행 정보 추적기, 개발 비하인드 스토리!

React, TypeScript 기반으로 제스처 인식을 통한 비행 정보 추적 앱을 개발함

MediaPipe를 사용하여 손 제스처 인식 기능을 구현하고, OpenSky Network API로 실시간 비행 데이터를 가져옴

WCAG AAA 기준의 테마 시스템과 커스텀 훅 아키텍처를 통해 사용자 경험과 코드 재사용성을 향상시킴

MediaPipe를 활용한 제스처 인식

MediaPipe WASM 런타임을 사용하여 브라우저에서 실시간 손 추적을 구현했다. 구체적으로, Hands API를 통해 손의 랜드마크를 추출하고, 이를 기반으로 4가지 제스처를 인식한다. 따라서, 컴퓨터 비전 기술을 활용하여 사용자 인터랙션을 개선했다.

커스텀 훅 아키텍처의 장점

프로젝트는 8개의 커스텀 훅을 활용하여 코드의 재사용성과 유지보수성을 높였다. useMediaPipe 훅은 MediaPipe 초기화 및 정리를 담당하고, useGestures 훅은 제스처 인식 로직을 캡슐화한다. 결과적으로, 컴포넌트의 복잡성을 줄이고, 관심사 분리를 달성했다.