작은 완료 경험을 반복하도록 구성했습니다.
퀴즈를 10문제로 나누고 노선도·잠금 해제·고양이 응원 애니메이션으로 진행을 보여줍니다. 한 번에 많은 단어를 제시하기보다 지금 풀 분량과 다음 목표가 분명한 화면을 설계했습니다.
단어한끼
학습 분량의 부담을 줄이고 짧은 복습을 이어가도록 만든 중국어 학습 앱입니다. 10문제 퀴즈와 노선형 학습 흐름을 설계하고 Flutter 화면·학습 기록·음성 기능을 구현했습니다. 콘텐츠 API 연동부터 App Store 배포까지 직접 진행했습니다.
App Store에서 보기실제 사용 화면
한 역씩 이어가는 중국어 학습
학습 노선에서 다음 목표를 확인하고, 퀴즈와 발음 듣기로 단어를 익히고, 틀린 단어는 복습으로 이어갑니다.
시작한 이유
학습을 시작할 때 해야 할 분량이 많아 보이면 꾸준히 이어가기 어렵습니다. 한 번의 학습을 10문제로 나누고, 완료한 만큼 다음 역이 열리는 노선으로 진행 상황을 표현했습니다. 틀린 단어는 복습으로 다시 연결했습니다.
사용 흐름
퀴즈를 마치면 다음 역이 열립니다.
- 01
오늘의 노선 선택
현재 역과 잠긴 역, 전체 진행도를 한 화면에서 확인하고 학습을 시작합니다.
- 02
10문제 풀이
중국어 단어와 병음을 보고 뜻을 고릅니다. 발음을 듣고 정답을 확인할 수 있습니다.
- 03
오답과 예문 복습
헷갈린 단어를 다시 풀고 예문을 들으며 단어가 쓰이는 맥락을 확인합니다.
- 04
학습 여정 이어가기
누적 풀이와 평균 점수를 확인하고 다음 학습으로 이어갑니다.
설계에서 중요했던 것
학습 기록과 콘텐츠 API의 역할을 나눴습니다.
학습 이력은 Hive에 로컬로 저장하고, 콘텐츠는 Spring Boot REST API와 연동했습니다. 발음과 예문 듣기에는 flutter_tts, 효과음에는 audioplayers를 사용했습니다.
구현과 결과
- 앱과 인터랙션
- Flutter·Dart·GetX로 iOS 화면, 학습 노선, 잠금 상태와 응원 애니메이션을 구현했습니다.
- 학습 데이터와 음성
- Hive 학습 기록과 TTS, 효과음을 연결해 풀이·피드백·복습 경험을 구성했습니다.
- 서버와 출시
- Spring Boot REST API를 연동하고 Supabase·Koyeb을 사용했습니다. 앱 개발 이후 App Store 배포까지 진행했습니다.
완성한 것
- 단어 퀴즈·발음 듣기·예문·오답 복습을 갖춘 iOS 앱 출시
- 노선형 진행 화면과 로컬 기록으로 학습을 이어갈 수 있는 제품 경험 구현
- App Store에서 실제 제품과 출시 내용을 확인 가능