언어학습 앱 링고붐붐
언어학습 앱 링고붐붐은 생성형 AI(OpenAI)와 웹 표준 기반의 로컬 퍼시스턴스 기술(SQLite WASM, OPFS, Web Speech API)을 융합하여, 학습자가 자신만의 맞춤형 스토리를 생성하고 다각도로 정독·정듣·복습·퀴즈를 수행할 수 있도록 개발한 웹 기반 언어 학습 플랫폼입니다.
야간과 주말 시간만 투여하여 기획, 설계, 구현, 테스트까지 1.5개월 정도 작업하여 완성한 자체 프로젝트입니다. 구현작업은 90% 이상 Vibe 코딩으로 진행하였습니다.
본인의 역할
- 전체 아키텍처 설계 및 구현
- 프론트엔드 UI/UX 커스텀 설계, 로컬 데이터베이스 아키텍처 구축, 백그라운드 멀티스레딩 파이프라인 설계, OpenAI API 연동 및 TTS 음성 엔진 최적화 등 전 과정 수행.
이 앱을 사용해서 사용자가 언어학습을 위해 할 수 있는 일들
- AI 기반 동적 맞춤형 스토리 생성 및 학습
- 원하는 주제, 상황, 학습 언어(영어, 스페인어, 일본어, 중국어 등) 및 모국어를 선택하여 자신만의 대화문/스토리를 즉시 생성.
- 유럽언어공통기준(CEFR 레벨 A1~C1)에 맞춘 난이도별 맞춤 문장 구조 제공.
- 입체적 대화문 뷰어 및 연속 낭독
- 단어별 분해 뷰어: 문장을 단어 단위 타일로 쪼개어 클릭 한 번으로 발음, 품사, 예문 문맥을 즉시 확인.
- 반복 낭독(TTS Loop): 개별 문장 및 전체 스토리의 무한 루프 재생을 통해 듣기 집중 훈련.
- 인터랙티브 대화형 퀴즈 (4종 점검 체계)
- 단어 맞추기: 문맥에 알맞은 단어 조합 선택.
- 문장 짝 맞추기: 번역문과 원문 문장을 터치/드래그하여 1:1 매칭.
- 번역 보고 문장 조립: 번역 힌트를 기반으로 블록 단어를 조립하여 완성.
- 음성 듣고 문장 조립: TTS 음성을 듣고 청해 능력에 기반하여 문장 완성.
- 스마트 단어장 저장 및 플래시카드 복습
- 학습 중 조회한 단어가 오프라인 단어장(Vocab Logs)에 자동 누적 기록.
- 문맥 예문이 결합된 플래시카드(WordFlash) 및 오프라인 리마인더 팝업을 통한 자가 테스트.
사용한 언어, 프레임워크, 기술 등
앱을 위한 자체 백엔드 없이 프론트엔드와 AI API 호출만으로 동작하는 웹앱입니다.
| 구분 | 언어, 프레임워크, 기술 등 |
| 프론트엔드 | React, JavaScript, Vite, MUI, Jotai, React Router |
| 로컬 데이터베이스 | SQLite WebAssembly, OPFS (Origin Private File System), Web Worker(Background Thread) |
| AI Integration | OpenAI API (Node/JS SDK), BYOK (Bring Your Own Key) 클라이언트 직접 연동 아키텍처 |
| 사운드 & Voice Engine | Web Speech API (SpeechSynthesis), Google Cloud High-Quality TTS 자동 스코어링 선별 |
핵심 기술 아키텍처 및 상세 구현
1. 로컬 디스크 SQLite 데이터베이스 (SQLite WASM + Web Worker + OPFS)
- WebAssembly 기반 로컬 DB: 서버 단 데이터베이스 없이 브라우저 내에서 완전한 관계형 데이터베이스(SQLite3)를 직접 실행하도록 구축.
- Web Worker 넌블로킹(Non-blocking) 연산: DB I/O 처리를 전용 비동기 백그라운드 스레드로 격리하여 메인 UI 스레드의 정체(Lag)를 원천 차단.
- OPFS (Origin Private File System) 영구 저장: 브라우저 로컬 디스크에 초고속 비동기 파일 시스템으로 데이터베이스를 저장하여 새로고침이나 브라우저 재시작 후에도 데이터를 완전 영구 보존.
- 스키마 마이그레이션 및 데이터 백업/복원: PRAGMA user_version을 이용한 자동 스키마 마이그레이션 관리와 ArrayBuffer 변환 기반의 DB Export/Restore 기능 제공.
2. BYOK (Bring Your Own Key) 기반 OpenAI API 연동
- Zero Server-Cost Client Architecture: 백엔드 서버를 거치지 않고 사용자가 보유한 OpenAI API Key를 직접 브라우저에 등록하여 사용하는 BYOK 방식 구현.
- CEFR 프롬프트 엔지니어링: 사용자의 Target 언어 수준에 맞추도록 CEFR 레벨(A1~C1)별 구문 제약조건, 지문-대화 융합 가이드라인을 토큰 최적화된 프롬프트 구조로 설계하여 자연스러운 고품질 대화문 생성.
3. Google TTS 기반 음성 파이프라인 (Web Speech API)
- 스마트 음성 엔진 스코어링: 브라우저/OS에 탑재된 음성 목록 중 Google 고품질 TTS(Google US English 등) 및 OS 프리미엄 음성을 자동 감지 및 스코어링하여 최적의 목소리를 우선 할당.
- 비동기 이벤트 버그 방지: 다양한 웹 브라우저(Chrome, Safari 등)에서 발생하는 speechSynthesis.cancel() 비동기 큐 쓸림 현상 및 리로드 시 목소리 목록 미로딩 버그를 싱글톤 리스너 구조와 타이머 지연 로직으로 완벽 해결.
엔지니어링 핵심 성과 (Engineering Value)
- 서버 유지비 0원의 Zero Server-Cost 아키텍처 구축
- 백엔드 서버 구축 없이 브라우저 로컬 DB(SQLite WASM)와 클라이언트 BYOK(OpenAI API + Web Speech API) 구조만으로 완벽히 동작하는 100% 클라이언트 사이드 웹 앱 실현.
- Web Worker 연산 격리를 통한 60fps 극상의 UI 성능 유지
- 대용량 학습 기록 및 단어 쿼리 작업을 백그라운드 스레드로 분리하여, 렌더링 스레드의 프레임 드랍 없는 최적의 유저 경험 보장.
- 개인정보 보호 및 완전한 데이터 소유권 (Privacy-First Data Ownership)
- 사용자의 API Key, 생성된 스토리, 단어장 및 개인 학습 통계 데이터가 외부 서버로 유출되지 않고 사용자의 디스크(OPFS)에만 안전하게 암호화/저장되는 아키텍처 구현.
- 웹 표준 기반 크로스 브라우저 음성 안정성 확보
- 브라우저별 Web Speech API의 캔슬 버그 및 렌더링 딜레이 이슈를 커스텀 훅(useTTS.js) 레벨에서 흡수/방어하여 중단 없는 안정적인 연속 낭독 환경 제공.
- 구현작업은 90% 이상 Vibe 코딩으로 완료 (Vibe 코딩의 유용성 확인)