영어 공부 합시다
Voca Master: 사용자가 등록한 영단어의 품사와 문장 구조를 AI가 자동 분석하여 스마트 퀴즈를 출제하고, 5번 연속으로 맞춘 단어만 자물쇠를 풀어 졸업(삭제)시키는 완벽 암기 지향형 모바일 영단어장 앱입니다.
💡 만든 동기
기존 단어장의 한계 극복: 시중의 일반적인 단어장 앱들은 단순히 '영어 단어-한국어 뜻'만 매칭하여 보여주기 때문에, 단어가 문장 속에서 어떤 품사로 쓰이는지, 뒤에 어떤 구조가 오는지(문장 형식 및 사용 구조)를 파악하기 어려웠습니다. 스마트한 암기와 자동화: 매번 사전을 찾아가며 품사와 예문을 직접 타이핑하는 번역 과정이 비효율적이라고 느꼈습니다. 단어만 입력하면 자동으로 언어 모델(Gemini)이 품사, 문장 구조, 맞춤형 예문과 번역까지 한 번에 도출해 주는 AI 기반의 능동적인 단어 암기 시스템을 만들고자 개발을 시작했습니다. 영구 암기를 위한 규칙 도입: 단순히 한두 번 맞췄다고 단어를 지워버리면 금방 망각하게 됩니다. 따라서 최소 5번은 연속으로 맞추는 엄격한 기준(Mastered 시스템)을 통과해야만 단어장에서 완전히 졸업(삭제)할 수 있도록 강제하는 '완벽 암기 훈련 도구'를 목표로 삼았습니다.
🤔 어려웠던 점
불완전한 API 응답과 모델 관리: 사용자가 입력한 영단어 중 사전에 등록되지 않은 단어이거나, 네트워크가 불안정할 때 API 에러가 발생하여 앱 전체가 멈추는 현상이 있었습니다. 또한 Gemini 모델명(gemini-2.5-flash 등)이 버전 업그레이드에 따라 유효하지 않게 되어 통신이 끊어지는 문제가 존재했습니다. 무분별한 데이터 삭제 및 예외 상황: 사용자가 열심히 외우던 단어를 실수로 지우거나, 브라우저 개발자 도구(콘솔)를 통해 강제로 삭제 함수를 실행할 경우, 암기 스택 검증 로직을 우회하여 데이터가 소실될 수 있는 보안 및 정밀성 제어 문제가 있었습니다. 다양한 퀴즈 유형 분기 로직: 단어장에서 단순히 객관식 문제만 출제하면 지루해질 수 있어, '객관식', '주관식 타이핑', '예문 빈칸 채우기' 3가지 유형을 난수로 제공해야 했습니다. 이때 예문 데이터가 없는 단어에서 '빈칸 채우기' 유형이 걸리면 빈 화면이 뜨거나 에러가 나는 버그가 발생했습니다.
🛠 해결한 방법
지수 백오프(Exponential Backoff) 및 다중 모델 Fallback 설계: * 통신 실패 시 바로 에러를 뱉지 않고 시간을 점진적으로 늘려가며 최대 3회 재시도하는 로직을 심었습니다. API 키의 소유 여부에 따라 gemini-2.5-flash, gemini-1.5-flash 등 차순위 모델을 순차적으로 대입 시도하는 구조를 만들어 서비스의 생존율을 극대화했습니다. UI 제한 및 JS 2중 보호 로직 (자물쇠 기능): 1차 방어(UI): 단어의 streak 카운트가 5 미만이면 휴지통 아이콘을 숨기고 클릭 불가능한 자물쇠 아이콘(🔒)을 렌더링했습니다. 2차 방어(Code): 비정상적인 방법으로 삭제 함수(deleteWord)가 직접 호출되더라도, 내부에서 해당 단어 객체의 streak 속성을 다시 한번 검사하여 5 미만일 경우 showToast 경고 메시지와 함께 함수를 즉시 탈출(return)하게 만들어 무단 삭제를 완벽히 차단했습니다. 퀴즈 엔진 예외 처리 및 유효성 검사: 퀴즈를 생성할 때 단어에 예문(example) 필드가 비어있거나 기본 텍스트 상태인지를 검사하는 예외 처리 구문을 추가했습니다. 예문이 부족한 단어는 자동으로 객관식(유형 0)으로 유형을 강제 전환(Fallback) 시켜 프로그램이 끊김 없이 부드럽게 흐르도록 보완했습니다.
✨ 배운 점
AI 및 사전 API 연동 인터페이스 구축: 오픈 API(Free Dictionary API)로 원어민 발음(Audio)과 국제음성기호(Phonetic)를 가져오는 동시에, Gemini API를 결합하여 구조화된 JSON 데이터(partOfSpeech, sentenceType 등)를 dynamic하게 받아오는 비동기 통신(async/await, fetch) 구조를 마스터했습니다. 사용자 중심의 UI/UX 설계 (Tailwind CSS): 모바일 웹 환경에 최적화된 최대 480px 크기의 컨테이너와 하단 탭 바 레이아웃을 구현했습니다. 특히 단어의 상태(학습 중 vs 마스터 완료)에 따라 카드 배경색을 다르게 하고, 미달성 단어에는 자물쇠 아이콘(🔒)을 배치하여 사용자가 직관적으로 시스템 규칙을 인지하도록 디자인하는 법을 배웠습니다. 프론트엔드 상태 및 데이터 관리: 애플리케이션의 핵심인 단어 데이터 배열(words)을 localStorage에 연동하여, 웹 브라우저를 새로고침하거나 껐다 켜도 데이터와 암기 스택(streak)이 안전하게 유지되는 브라우저 데이터베이스 활용법을 익혔습니다.