# 나쁜 예시 (너무 모호):
"AI로 뭔가 음악 관련된 거 만들고 싶어"

# 좋은 예시 (구체적):
"웹캠으로 손동작을 인식해서, 
손가락 위치에 따라 Ableton Live의 
트랙 볼륨과 이펙트를 실시간으로 제어하는 
웹 앱을 만들고 싶다"

# 더 좋은 예시 (기술 + 범위 명시):
"MediaPipe Hands + OSC 프로토콜을 사용하여,
오른손 검지의 Y축 위치로 볼륨(0~100%)을,
검지-엄지 사이 거리로 리버브 양(dry~wet)을 
제어하는 웹 인터페이스. 
Node.js 서버로 OSC 브릿지 구현."

codex "다음 프로젝트에 적합한 기술 스택을 추천해줘.

## 프로젝트: 손동작으로 Ableton 제어

## 내 상황:
- 프로그래밍 경험 없음 (음악 전공)
- MediaPipe는 이미 예제에서 사용해봄
- Ableton Live 12 사용 중
- TouchDesigner도 기초 수준으로 알고 있음
- 컴퓨터: MacBook Pro M2

## 고려 사항:
1. 가장 간단한 스택 (코드량 최소)
2. 튜토리얼/문서가 많은 기술
3. 실시간 성능이 중요 (레이턴시 50ms 이하)
4. 나중에 포트폴리오 웹사이트로 보여줄 수 있으면 좋겠음

## 질문:
- React/Vue 같은 프레임워크가 필요한가?
- TypeScript를 써야 하나?
- OSC 라이브러리 추천 (node-osc vs osc.js)
- 서버를 꼭 써야 하나? 브라우저에서 직접 OSC 못 보내나?"

# 스프린트 1: 카메라 + 손 인식
codex "AGENTS.md를 읽고, 스프린트 1을 시작해줘.
src/index.html과 src/js/hand-tracker.js를 만들어줘.
카메라 연결과 MediaPipe 손 인식 기능만 구현.
다른 기능(OSC, 매핑 등)은 아직 만들지 마."

# 스프린트 2: 좌표 → 값 매핑
codex "스프린트 2야. src/js/mapper.js를 만들어줘.
hand-tracker.js에서 받은 손 좌표를 
0.0~1.0 범위의 값으로 변환하는 모듈.
smoothing 처리도 포함해줘.
기존 파일은 수정하지 말고, 
새 파일만 만들어."

# 스프린트 3: OSC 서버
codex "스프린트 3이야. server/bridge.js를 만들어줘.
mapper.js에서 나온 값을 OSC로 전송하는 서버.
WebSocket으로 프론트엔드와 통신.
기존 파일과의 연결은 다음 스프린트에서."

# IP 주소로 접속 (외우기 어려움)
http://123.45.67.89:3000

# 도메인으로 접속 (기억하기 쉬움)
https://hand-controller.mysite.com

# DNS가 하는 일:
# hand-controller.mysite.com → 123.45.67.89 변환

# 포트 번호 예시
http://localhost:3000   # 우리 앱 (3000번 문)
http://localhost:8080   # 다른 프로젝트 (8080번 문)

# 하나의 서버에서 여러 앱 동시 실행 가능
# 각각 다른 포트를 사용하면 충돌 없음

# 기본 포트 (생략 가능):
# http = 80    → http://mysite.com:80  = http://mysite.com
# https = 443  → https://mysite.com:443 = https://mysite.com

# UFW (Ubuntu 방화벽) 설정 예시
sudo ufw allow 22    # SSH (관리자만)
sudo ufw allow 80    # HTTP
sudo ufw allow 443   # HTTPS
sudo ufw enable      # 방화벽 활성화

# 나머지 포트(3000, 8080 등)는 자동 차단
# → 외부에서 직접 접속 불가
# → Nginx를 통해서만 접근 가능

# Nginx 리버스 프록시 설정 예시
# /etc/nginx/sites-available/hand-controller

server {
    listen 443 ssl;
    server_name hand-controller.mysite.com;

    # SSL 인증서 (Let's Encrypt)
    ssl_certificate /etc/letsencrypt/live/mysite.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/mysite.com/privkey.pem;

    # 모든 요청을 내부 포트 3000으로 전달
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        
        # WebSocket 지원 (OSC 브릿지에 필요!)
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }
}

인터넷의 사용자 (관객)
       │
       ▼
   방화벽 (경비원)
   [22, 80, 443만 허용]
       │
       ▼
   Nginx (안내 데스크)
   [443 포트에서 대기]
       │
       ├── hand-controller.mysite.com
       │   → 127.0.0.1:3000 (MediaPipe 앱)
       │
       ├── portfolio.mysite.com
       │   → 127.0.0.1:8080 (포트폴리오)
       │
       └── api.mysite.com
           → 127.0.0.1:5000 (API 서버)