# AI 비행 추적기 혁신: 손 제스처로 조작하는 터치리스 인터페이스 만들기 (AI 비행 추적기, 손 제스처 제어, 터치리스 인터페이스)
# # 서론 – “손으로 비행기를 잡는다”?
2025년, 인공지능(AI) 기술이 일상에 스며들면서 **터치리스 인터페이스**가 새로운 표준이 되고 있습니다.
하지만 “손으로 비행기를 추적한다”는 말은 아직도 많은 사람에게는 낯선 개념이죠.
이번 포스팅에서는 **AI 비행 추적기**를 손 제스처로 제어하는 프로젝트를 초보자도 따라 할 수 있게 단계별로 풀어봅니다.
*왜 손 제스처가 필요할까?*
- 위생 문제: 코로나 이후 비접촉 조작이 선호됩니다.
- 직관성: 손 움직임 하나로 복잡한 UI를 대체합니다.
- 접근성: 물리적 마우스·키보드가 어려운 환경에서도 사용 가능하죠.
이제 직접 “손으로 비행기를 잡고, 움직이는” 경험을 만들어 보세요!
# # 1️⃣ 프로젝트 개요 – 어떤 기술을 쓸까?
| 요소 | 설명 | 선택 이유 |
|------|------|-----------|
| **AI 모델** | MediaPipe Hands (구글 오픈소스) | 실시간 손 랜드마크 추출, 경량화 |
| **프로그래밍 언어** | Python + Flask | 빠른 프로토타입, 웹 기반 UI |
| **지도 API** | Google Maps JavaScript API | 풍부한 지도 데이터와 실시간 항공기 위치 |
| **데이터 소스** | OpenSky Network 실시간 ADS‑B | 무료로 전 세계 항공기 정보를 제공 |
위 구성은 **초보자도 쉽게 설치하고 실행**할 수 있도록 설계되었습니다.
# # 2️⃣ 환경 설정 – 준비물부터 설치까지
1. **Python 3.9 이상 설치**
```
bash
sudo apt-get update
sudo apt-get install python3 python3-pip
```
2. **가상환경 만들기**
```
bash
python3 -m venv venv
source venv/bin/activate
```
3. **필수 패키지 설치**
```
bash
pip install mediapipe opencv-python flask requests
```
4. **Google Maps API 키 발급** – 구글 클라우드 콘솔에서 “Maps JavaScript API”를 활성화하고 키를 복사합니다.
> **팁**: API 키는 `config.py` 파일에 `GOOGLE_MAPS_KEY = 'YOUR_KEY'` 형태로 저장하면 보안에 유리합니다.
# # 3️⃣ 손 제스처 인식 구현 – MediaPipe 활용하기
MediaPipe Hands는 21개의 손 랜드마크를 30fps 이상 실시간으로 반환합니다. 아래 코드는 웹캠 영상을 받아 손 좌표를 추출하고, **‘손을 펴면 확대, 손을 모으면 축소’** 동작을 매핑합니다.
```
python
import cv2, mediapipe as mp
mp_hands = mp.solutions.hands
hands = mp_hands.Hands(max_num_hands=1, min_detection_confidence=0.7)
cap = cv2.VideoCapture(0)
while cap.isOpened():
ret, frame = cap.read()
if not ret: break
rgb = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
result = hands.process(rgb)
if result.multi_hand_landmarks:
hand = result.multi_hand_landmarks[0]
# 손목(0)과 중지 끝(12) 거리 계산
wrist = hand.landmark[0]
middle_tip = hand.landmark[12]
distance = ((wrist.x - middle_tip.x)**2 + (wrist.y - middle_tip.y)**2)**0.5
# 거리 기준으로 확대/축소 신호 전송
if distance > 0.2:
gesture = 'zoom_in'
else:
gesture = 'zoom_out'
# 여기서 Flask 서버에 gesture 전송
cv2.imshow('Hand', frame)
if cv2.waitKey(1) & 0xFF == 27: break
cap.release()
cv2.destroyAllWindows()
```
위 코드를 실행하면 손 모양에 따라 `gesture` 변수가 `'zoom_in'` 혹은 `'zoom_out'` 값을 가집니다. 이제 이 값을 **Flask**를 통해 웹 페이지에 전달하면 지도 UI를 제어할 수 있습니다.
# # 4️⃣ Flask 서버와 지도 연동 – 손 제스처가 지도에 반영되다
`app.py` 파일을 만들고 아래와 같이 작성합니다.
```
python
from flask import Flask, render_template, jsonify, request
import threading, time
app = Flask(__name__)
# 전역 변수: 현재 제스처 상태
current_gesture = None
@app.route('/')
def index():
return render_template('index.html') # 지도와 UI가 들어간 HTML
@app.route('/gesture', methods=['POST'])
def receive_gesture():
global current_gesture
data = request.get_json()
current_gesture = data['gesture']
return jsonify(status='ok')
@app.route('/status')
def status():
return jsonify(gesture=current_gesture)
if __name__ == '__main__':
app.run(debug=True)
```
`templates/index.html` 은 Google Maps와 간단한 JavaScript 로직을 포함합니다.
```
html
손 제스처 비행 추적기
```
이제 **손을 펴면 지도 확대, 손을 모으면 축소**가 실시간으로 동작합니다. 비행기 마커는 OpenSky에서 5초마다 업데이트되니, 실제 항공 흐름을 눈으로 확인할 수 있습니다.
# # 5️⃣ 프로젝트 확장 아이디어 – 더 풍부한 경험 만들기
| 아이디어 | 구현 방법 | 기대 효과 |
|----------|----------|-----------|
| **다중 제스처** (예: 손가락 2개 → 특정 항공편 고정) | MediaPipe 손가락 개수 판단 로직 추가 | 사용자 맞춤형 정보 제공 |
| **음성 피드백** (제스처 인식 시 “확대합니다”) | Google Text‑to‑Speech API 연동 | 접근성 향상 |
| **AR 모드** (스마트폰 카메라에 비행기 라인 오버레이) | ARCore 혹은 WebXR 활용 | 몰입감 높은 시각화 |
위와 같은 확장은 **AI 비행 추적기**를 단순 도구가 아닌 **스마트 여행 어시스턴트**로 발전시킬 수 있습니다.
# # 결론 – 손끝에서 시작되는 AI 비행 추적기의 미래
이번 포스팅을 통해 **AI 비행 추적기**와 **손 제스처 제어**, **터치리스 인터페이스**라는 세 가지 핵심 키워드를 연결해 보았습니다.
1. MediaPipe Hands 로 손을 인식하고,
2. Flask 로 실시간 제스처를 웹에 전달하며,
3. Google Maps 와 OpenSky 데이터를 결합해 비행기를 시각화합니다.
시작은 간단하지만, 위에서 제시한 확장 아이디어를 적용하면 **맞춤형 항공 정보 서비스**를 직접 만들 수 있습니다.
지금 바로 코드를 복제하고, 손을 들어 **당신만의 터치리스 비행 추적기**를 실행해 보세요!
> **행동 유도**: 레포지토리를 포크하고, `README.md`에 있는 설치 가이드를 따라 실행해 보세요. 실행 후 느낀 점이나 개선 아이디어를 댓글로 남겨주시면, 다음 업데이트에 반영하겠습니다. 🚀