음성 녹음 및 확인 기능을 제공하는 웹 애플리케이션입니다.

• 🔐 회원가입 및 로그인 (Supabase 인증)
• 🎤 실시간 음성 녹음
• ⏸️ 녹음 일시정지 및 재개
• ⏱️ 실시간 녹음 시간 표시
• 🔊 녹음된 오디오 재생
• 💾 녹음 파일 다운로드
• 🌐 실시간 번역 (OpenAI Realtime API 사용)
• 📊 실시간 오디오 파형 시각화

npm install

프로젝트 루트에 .env 파일을 생성하고 다음 내용을 추가하세요:

# OpenAI API 키 (실시간 번역 기능용)
OPENAI_API_KEY=your_openai_api_key_here
# Supabase 설정 (회원가입/로그인 기능용)
VITE_SUPABASE_DB_URL=https://your-project.supabase.co
VITE_SUPABASE_DB_PUBLIC_KEY=your_supabase_anon_key

API 키 발급 방법:

• OpenAI API 키: OpenAI Platform
• Supabase 설정: Supabase Dashboard → 프로젝트 → Settings → API

npm run dev
# 또는 브라우저에서 자동으로 열기
npm run dev -- --open

개발 서버가 실행되면 http://localhost:5173 (또는 표시된 포트)에서 애플리케이션에 접속할 수 있습니다.

1. 브라우저에서 애플리케이션 열기

   • 개발 서버 실행 후 브라우저에서 접속합니다.

2. 마이크 권한 허용

   • 처음 사용 시 브라우저에서 마이크 사용 권한을 요청합니다.
   • "허용" 또는 "Allow"를 클릭하여 권한을 부여합니다.

3. 녹음 시작

   • "녹음 시작" 버튼을 클릭합니다.
   • 녹음이 시작되면 화면 상단에 빨간 점이 깜빡이며 "녹음 중" 상태가 표시됩니다.
   • 녹음 시간이 실시간으로 표시됩니다 (MM:SS 형식).

4. 녹음 일시정지 (선택사항)

   • 녹음 중 "일시정지" 버튼을 클릭하면 녹음이 일시정지됩니다.
   • "재개" 버튼을 클릭하면 일시정지된 지점부터 녹음이 계속됩니다.

5. 녹음 중지

   • "녹음 중지" 버튼을 클릭하여 녹음을 종료합니다.
   • 녹음이 완료되면 자동으로 저장됩니다.

6. 녹음 확인

   • 녹음이 완료되면 "녹음 확인" 섹션에 오디오 플레이어가 표시됩니다.
   • 재생 버튼을 클릭하여 녹음된 내용을 확인할 수 있습니다.

7. 파일 다운로드

   • "다운로드" 버튼을 클릭하면 녹음된 파일이 WebM 형식으로 다운로드됩니다.
   • 파일명은 recording-[타임스탬프].webm 형식으로 저장됩니다.

1. 번역 모드 활성화

   • 상단의 "실시간 번역 모드" 체크박스를 활성화합니다.
   • 원본 언어와 번역 언어를 선택합니다.

2. 번역 시작

   • 번역 모드가 활성화된 상태에서 녹음을 시작하면 실시간으로 번역이 진행됩니다.
   • 말하는 내용이 자동으로 선택한 언어로 번역되어 화면에 표시됩니다.

3. 번역 결과 확인

   • 번역된 텍스트가 실시간으로 "번역 결과" 섹션에 표시됩니다.
   • 번역 모드를 끄면 번역이 중지됩니다.

• 마이크 권한: 브라우저 설정에서 마이크 권한이 차단되어 있으면 녹음이 시작되지 않습니다. 브라우저 설정에서 마이크 권한을 허용해주세요.
• HTTPS 또는 localhost: 일부 브라우저에서는 보안상의 이유로 HTTPS 또는 localhost 환경에서만 마이크 접근을 허용합니다.
• 파일 형식: 녹음된 파일은 WebM 형식으로 저장됩니다. 일부 오디오 플레이어에서는 지원하지 않을 수 있으니, 브라우저에서 재생하는 것을 권장합니다.

• Chrome/Edge: 완전 지원
• Firefox: 완전 지원
• Safari: 지원 (일부 기능 제한 가능)
• 모바일 브라우저: 대부분 지원

프로덕션 빌드를 생성하려면:

npm run build

프로덕션 빌드를 미리보려면:

npm run preview

Vercel에 배포하는 방법은 DEPLOYMENT.md를 참고하세요.

# Vercel CLI 설치
npm i -g vercel
# 로그인
vercel login
# 배포
vercel --prod

배포 전 필수 확인사항:

• 환경 변수 설정 (OpenAI API Key, Supabase URL/Key)
• Supabase Redirect URLs 설정
• 로컬 빌드 테스트 (npm run build)

• SvelteKit: 웹 프레임워크
• Tailwind CSS: 스타일링
• Supabase: 인증 및 데이터베이스
• MediaRecorder API: 음성 녹음
• Web Audio API: 오디오 파형 시각화
• OpenAI Realtime API: 실시간 번역
• @openai/agents: OpenAI Agents SDK
• Vite: 빌드 도구

1. 브라우저 설정에서 마이크 권한을 확인하세요.
2. 다른 애플리케이션에서 마이크를 사용 중인지 확인하세요.
3. 시스템 설정에서 마이크가 활성화되어 있는지 확인하세요.
4. 브라우저를 재시작해보세요.

• WebM 형식을 지원하는 플레이어를 사용하세요.
• 브라우저의 기본 오디오 플레이어를 사용하는 것을 권장합니다.

1. .env 파일에 올바른 OpenAI API 키가 설정되어 있는지 확인하세요.
2. OpenAI API 키에 Realtime API 접근 권한이 있는지 확인하세요.
3. 브라우저 콘솔에서 에러 메시지를 확인하세요.
4. 네트워크 연결 상태를 확인하세요.