OpenAI API를 활용해 두 개의 언어 사이를 자동으로 통역하는 모바일 친화적 웹 애플리케이션입니다. 언어 A로 말하면 언어 B로, 언어 B로 말하면 언어 A로, 그리고 그 외의 언어는 항상 언어 B로 번역합니다.

• 🎤 음성 녹음 & 자동 전사: 브라우저에서 바로 음성을 녹음하고 OpenAI gpt-4o-mini-transcribe 모델로 텍스트로 변환합니다.
• 🔁 지능형 번역 규칙: 언어 A ↔ 언어 B를 자동으로 전환하며, 그 외의 언어는 항상 언어 B로 번역합니다.
• 🌍 여러 언어 지원: 영어, 스페인어, 한국어, 일본어 등 16개 주요 언어 중에서 A/B 언어를 선택할 수 있습니다.
• 🔐 API 키 로컬 저장 옵션: 브라우저의 LocalStorage를 사용해 API 키를 안전하게 보관하거나 세션마다 입력할 수 있습니다.
• 📱 모바일 친화적 UI: 반응형 레이아웃으로 스마트폰 브라우저에서도 쉽게 사용할 수 있습니다.

python3 -m http.server 4173

프로젝트 루트에서 위 명령을 실행하면 http://<호스트 IP>:4173 주소로 접속할 수 있습니다. 동일 네트워크의 모바일 기기에서 해당 주소를 열면 앱을 사용할 수 있습니다.

index.html 파일을 데스크톱 브라우저에서 직접 열어도 동작합니다. 모바일 기기에서는 간단한 정적 서버(위 명령)나 정적 호스팅 서비스(Vercel, Netlify 등)를 사용하는 것이 가장 안정적입니다.

1. OpenAI API 키 입력: 첫 화면에서 API 키(sk-...)를 입력합니다. 원한다면 "Remember" 옵션을 선택해 브라우저에 저장할 수 있습니다.
2. 언어 선택: 드롭다운에서 언어 A와 언어 B를 각각 선택합니다.
3. 녹음 시작: "Start Listening" 버튼을 누르고 말합니다. 최대 15초 동안 녹음되며, 완료되면 자동으로 전사 → 번역이 진행됩니다.
4. 번역 결과 확인: 인식된 원문과 번역 결과가 카드 형태로 표시됩니다.

• 프론트엔드: 바닐라 HTML, CSS, JavaScript
• 오디오 캡처: MediaRecorder API
• 전사 모델: gpt-4o-mini-transcribe
• 번역 모델: gpt-4o-mini
• 배포 형태: 정적 웹 앱 (PWA manifest 포함)

• OpenAI API 키가 반드시 필요하며, 사용량에 따라 비용이 청구될 수 있습니다.
• 일부 모바일 브라우저는 MediaRecorder API를 지원하지 않을 수 있습니다. 최신 Chrome/Edge 기반 브라우저 사용을 권장합니다.
• OpenAI API의 CORS 정책에 따라 네트워크 환경에서 직접 호출이 제한될 수 있습니다. 문제가 발생하면 간단한 프록시 서버를 두고 호출하는 방법을 고려하세요.

• index.html – 앱의 루트 HTML 문서
• styles.css – 모바일 친화적 UI 스타일
• app.js – 오디오 녹음, 전사, 번역 로직
• manifest.json – 홈 화면 추가를 위한 PWA 메타데이터

즐겁게 사용하세요! 🎧