SEONGGUK.SYS
◀ ITEM BOX

Nihongo

PRODUCT

간격 반복과 AI 튜터를 결합한 일본어 학습 PWA

기간
2026.08 ~ 2026.09
역할
기획 · 구현 · 배포 단독
사용 기술
React 19 · Firebase · IndexedDB · Gemini API
SITE ▶CODE

개요

SM-2 간격 반복과 마스코트·연속 학습·일일 미션을 연결한 일본어 학습 PWA입니다. 콘텐츠 수보다 매일 복습할 이유와 끊기지 않는 학습 흐름에 집중했습니다.

가나·한자·회화·독해·JLPT 모의고사를 기본 학습 흐름으로 구성하고, Gemini 튜터와 작문 첨삭은 필요할 때 선택하는 보조 도구로 분리했습니다.

문제와 해결

  1. 01

    오프라인에서도 이어지는 발음 학습

    이동 중에도 학습할 수 있어야 하지만 TTS는 네트워크가 끊기면 재생되지 않습니다.

    발음 오디오를 IndexedDB에 저장해 한 번 들은 소리는 오프라인에서도 다시 재생할 수 있게 했습니다.

  2. 02

    학습 데이터의 저장 경계 분리

    프로필·학습 상태·SRS·라이브러리는 데이터 크기와 저장 시점이 달라 하나의 Firestore 문서에 두면 불필요한 쓰기와 충돌이 늘어납니다.

    문서를 profile / state / srs / library로 분리하고 각 기능이 필요한 범위만 갱신하도록 저장 경계를 나눴습니다.

  3. 03

    애니메이션 내부 카드 폭 고정

    가운데 정렬된 flex 영역 안에서 motion.div의 폭이 0으로 계산되며 글자가 한 글자씩 세로로 배치됐습니다.

    문제가 발생한 래퍼의 폭을 직접 지정하고, 같은 flex·motion 조합을 프로젝트 문서에 재현 조건과 함께 기록했습니다.

주요 구현

회고

학습 도구의 완성도는 기능 수보다 사용자가 다시 돌아올 이유와 이동 중에도 이어지는 학습 흐름에서 결정된다는 점을 확인했습니다.

화면

◀ ITEM BOX