Flutter 앱 개발기 (3/5) — 콰이어트 개발기: Riverpod와 Play Store 등록

-
콰이어트(텍스트 북리더) 개발기 — Riverpod 상태 관리와 Play Store 등록

Flutter로 텍스트 뷰어 앱을 만들고 Play Store에 올리기까지의 과정

핵심 요약

  • Flutter + Riverpod + Hive 스택으로 텍스트 북리더 앱 "콰이어트"를 개발했다
  • Claude Code와의 페어 프로그래밍으로 개발 속도를 높였고, 하네스 구조를 앱 개발에도 적용했다
  • Play Store 등록 과정에서 구글 심사 기준과 메타데이터 준비의 중요성을 경험했다

배경

텍스트 파일로 소설이나 기술 문서를 읽을 때 기존 앱들이 만족스럽지 않았습니다. 기능은 많은데 정작 텍스트를 편하게 읽는 데 집중한 앱이 드물었습니다. 배경, 폰트, 줄간격, 페이지 넘김 — 읽기에 집중할 수 있는 최소한의 설정만 제공하는 깔끔한 앱을 만들고 싶었습니다.

동시에 Flutter 앱 개발 경험을 쌓고 Play Store 등록까지 경험하고 싶었습니다. 콰이어트는 이 두 가지 목표를 위한 프로젝트입니다.

본문

2. UX 설계 —

1. 기술 스택 선택

Flutter: 크로스플랫폼 개발이 가능하고, UI 커스터마이징이 자유롭습니다. 텍스트 뷰어는 UI가 핵심이기 때문에 Flutter의 위젯 시스템이 적합했습니다.

Riverpod: 상태 관리 라이브러리. Provider의 후속 버전으로, 타입 안전성과 테스트 용이성이 개선되었습니다. 텍스트 뷰어에서 관리해야 할 상태(현재 페이지, 폰트 설정, 밝기, 책갈피)가 많아서 체계적인 상태 관리가 필요했습니다.

Hive: 로컬 저장소. 사용자 설정, 읽기 진행 상황, 책갈피를 기기에 저장합니다. SQLite보다 설정이 간단하고, 키-값 저장에 적합합니다.

2. UX 설계 — "읽기"에만 집중

콰이어트의 UX 원칙은 단순합니다: 화면의 90%는 텍스트에 할당합니다.

핵심 기능: - 파일 불러오기: .txt, .epub 파일 지원 - 커스텀 폰트/줄간격/배경: 5가지 테마 제공 (기본, 세피아, 다크, 블랙, 그린) - 페이지 넘김: 탭, 스와이프, 볼륨 버튼 선택 - 책갈피: 위치 저장 및 복원 - 진행률 표시: 현재 위치 백분율

뺀 기능이 더 중요합니다: - 소셜 기능 없음 (공유, 댓글, 리뷰) - 서버 연동 없음 (로그인 불필요) - 광고 없음 (읽기 방해 요소 제거)

"조용히 읽는다"는 앱 이름 그대로의 경험을 제공하는 것이 목표입니다.

4. Claude Code 페어 프로그래밍

3. Riverpod 상태 관리 실전

텍스트 뷰어에서 관리해야 할 상태:

  • ReadingState: 현재 파일, 현재 위치, 전체 길이
  • ThemeState: 폰트 크기, 줄간격, 배경색, 글자색
  • BookmarkState: 저장된 책갈피 목록
  • SettingsState: 페이지 넘김 방식, 화면 꺼짐 방지 등

Riverpod의 StateNotifier로 각 상태를 독립적으로 관리합니다. 상태 간 의존성은 ref.watch로 반응형으로 처리합니다.

실전에서 배운 점: 상태를 너무 세분화하면 Provider가 폭발적으로 늘어납니다. 관련 있는 상태는 하나의 StateNotifier로 묶는 것이 관리하기 편합니다. 예를 들어 폰트 크기와 줄간격은 별도보다 ThemeState 하나로 묶는 것이 낫습니다.

4. Claude Code 페어 프로그래밍

콰이어트 개발에서 Claude Code의 역할: - 위젯 구현: 복잡한 커스텀 위젯(페이지 뷰어, 설정 패널)의 초안 작성 - 상태 관리 설계: Riverpod Provider 구조 설계 및 리팩토링 - 버그 수정: Flutter 빌드 에러, 상태 불일치 문제 진단 - 테스트 작성: 위젯 테스트, 상태 테스트

하네스 구조(CLAUDE.md, 스킬, 메모리)를 앱 개발에도 적용했습니다. 기술 에이전트와 동일한 구조로, 프로젝트의 규칙, 결정 사항, 시행착오를 체계적으로 관리합니다.

5. Play Store 등록 과정

앱 개발보다 Play Store 등록 준비가 더 까다로웠습니다.

준비물: - Google Play Developer 계정 (등록비 $25) - 앱 아이콘 (512x512) - 스크린샷 (최소 2장, 권장 8장) - 기능 그래픽 (1024x500) - 앱 설명 (한국어 + 영어) - 개인정보 처리방침 URL

심사 과정에서 주의할 점: - 콘텐츠 등급: 설문 기반으로 결정됨. 텍스트 뷰어는 "모든 연령" 가능 - 타겟 연령대: 어린이 대상이 아님을 명시해야 함 - 데이터 수집 선언: Hive 로컬 저장소만 사용, 외부 전송 없음을 명시

등록 후 심사까지 약 3일 소요되었습니다.

시행착오

epub 파싱의 복잡성: .txt는 간단하지만 .epub은 HTML + CSS + 이미지가 포함된 압축 파일입니다. epub 파서 라이브러리에 의존하면서도 커스텀 렌더링이 필요해서 예상보다 시간이 많이 걸렸습니다.

볼륨 버튼 페이지 넘김: 안드로이드에서 볼륨 버튼을 캡처하려면 플랫폼 채널이 필요합니다. Flutter 순수 Dart로는 불가능하고, Kotlin 네이티브 코드를 추가해야 했습니다.

마무리

콰이어트는 "간단한 텍스트 뷰어"로 시작했지만, Flutter 앱 개발의 전 과정(설계, 구현, 테스트, 배포)을 경험하는 프로젝트가 되었습니다. 기술적으로 화려한 앱은 아니지만, 하나의 기능(읽기)에 집중한 덕분에 완성도를 높일 수 있었습니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

"LLM 핵심 학습 (1/6) — 기본: 토큰화·임베딩·어텐션·위치 인코딩"

-
이미지
(시리즈 시작) 📚 시리즈 목차 2/6 파인튜닝 → 트랜스포머 한 블록의 데이터 흐름을 문자열 → 토큰 → 임베딩 → 어텐션 → 출력 표현 까지 손으로 풀어 본다. 이번 편이 끝나면 "왜 \(\sqrt{d_k}\)로 나누는가", "RoPE는 무엇을 회전시키는가", "한국어가 영어보다 토큰이 많은 까닭은 무엇인가"가 한 줄로 설명될 수 있다. 0. 학습 목표 이 편을 마치면 다음을 직접 할 수 있다. BPE 토크나이저 가 어휘를 어떻게 학습하고 새 문자열을 어떻게 자르는지 종이 위에서 시뮬레이션한다. 임베딩 행렬 의 모양과 초기화, weight tying의 의미를 한 줄로 설명한다. Scaled Dot-Product Attention 의 식을 차원 단위로 추적하고 PyTorch 30줄로 재현한다. Multi-Head Attention 이 한 헤드와 비교해 무엇이 다른지, 헤드 수가 늘면 어디가 비싸지는지 답한다. Sinusoidal·RoPE·ALiBi 세 위치 인코딩의 식과 외삽 성질을 구분한다. 컨텍스트 확장이 왜 \(O(N^2)\)인지, "Lost in the Middle"이 왜 발생하는지 설명한다. 1. 핵심 요약 트랜스포머의 입력은 문자열 이 아니라 정수 ID 시퀀스 다. 토크나이저가 문자열 → ID로 자른다. 임베딩은 정수 ID를 \(d\)차원 벡터로 lookup하는 학습 가능한 테이블이다. Self-Attention은 \(\text{softmax}(QK^\top / \sqrt{d_k}) V\) 한 줄이 핵심이고, 멀티헤드는 같은 연산을 여러 부분 공간에서 병렬화한 것이다. 위치 정보는 임베딩에 직접 더하거나(Sinusoidal), Q·K에 회전을 가하거나(RoPE), 어텐션 스코어에 거리 패널티를 더해서(ALiBi) 주입한다. 컨텍스트 길이 \(N\)에 대해 표준 어텐션은 \(O(N^2)\) 비용을 갖고, 긴 컨텍스트에서는 중간 위...
Read more »

"LLM 핵심 학습 (2/6) — 파인튜닝: LoRA·QLoRA·증류·Adapter"

-
이미지
← 1/6 기본 📚 시리즈 목차 3/6 디코딩과 생성 → 사전학습된 LLM을 내 데이터 에 적응시키는 방법을 비용·메모리·일반화 관점에서 정리한다. Full FT의 한계 → Adapter → LoRA → QLoRA → Distillation 순으로 같은 그림을 점점 확대해 본다. 0. 학습 목표 Full fine-tuning의 메모리 병목을 옵티마이저 상태·그래디언트·가중치·활성화 의 4분할로 설명한다. Adapter(Houlsby 2019)와 LoRA(Hu 2021)의 식 차이를 한 줄로 적는다. LoRA의 \(A, B\) 행렬이 왜 저랭크 이고, rank \(r\) 선택이 무엇을 결정하는지 답한다. QLoRA(Dettmers 2023)의 NF4·double-quant·paged optimizer를 분리해서 설명한다. Catastrophic Forgetting을 분포 시프트 관점에서 정의하고 완화 기법을 두 개 이상 든다. Hinton 2015의 Knowledge Distillation 식을 손으로 유도한다. 1. 핵심 요약 Full FT는 메모리/디스크/시간 모두 비싸다. 7B 모델 full FT는 V100 8장 + A100 1장으로도 큰 부담이다. PEFT(파라미터 효율 파인튜닝) 일가족은 극히 일부 파라미터만 학습 해 같은 효과를 얻는다. LoRA: \(\Delta W = BA\) (rank \(r \ll \min(d_{\text{in}}, d_{\text{out}})\))로 가중치 업데이트를 저랭크 분해. QLoRA: 베이스 모델을 4-bit(NF4)로 양자화한 채 LoRA만 풀-정밀(BF16)으로 학습. Catastrophic Forgetting: 새 분포에 적응하느라 이전 능력이 무너지는 현상. PEFT 자체가 부분 완화책. Distillation: 큰 교사 모델의 soft target 을 학습 신호로 써서 작은 학생 모델 을 만든다. 2. 직관: 왜 사전학습만으로는 부족한가 사전학습은 일반...
Read more »

"ML 기초 학습 (1/9) — 머신러닝과 sklearn: 학습의 좌표계"

-
이미지
(시리즈 시작) 📚 시리즈 목차 2/9 이웃 알고리즘 → 이 시리즈는 신경망과 로컬 LLM으로 가기 전에 손에 익혀 둬야 할 머신러닝 기초 9편이다. 1편은 모든 ML 코드가 공유하는 공통 문법 을 잡는 데 쓴다. sklearn은 그 문법을 가장 일관되게 보여주는 도구다. 이번 편이 끝나면 어떤 모델을 만나도 fit → predict → score → 평가 흐름이 같다는 것이 손에 잡힌다. 0. 학습 목표 이 편을 마치면 다음을 할 수 있어야 한다. 지도학습·비지도학습·강화학습을 한 문장씩 구분해 설명한다. sklearn의 estimator 인터페이스 ( fit , predict , score , transform )를 코드 한 화면 안에서 쓸 수 있다. train/validation/test 분할을 왜 하는지, 어디서 데이터 누수가 생기는지 식과 그림으로 설명한다. 분류·회귀의 핵심 평가 지표(accuracy, precision, recall, F1, MSE, R²)를 정의에서 직접 계산할 수 있다. k-fold 교차검증 을 코드 한 줄로 돌리고, 결과의 평균과 표준편차를 함께 보고할 수 있다. Pipeline 으로 전처리와 모델을 묶어 데이터 누수를 구조적으로 막는 방법을 설명한다. 1. 핵심 요약 머신러닝은 데이터에서 함수 \(f: X \to Y\)를 찾는 작업 이다. 어떤 모델이든 이 본질은 같다. sklearn은 모든 모델을 같은 인터페이스( fit , predict , score )로 통일해, 모델을 바꿀 때 한 줄만 바꾸면 되게 한다. train/val/test 세 분할이 표준이다. 검증으로 하이퍼파라미터를 고르고, 테스트는 마지막에 한 번만 본다. 데이터 누수 (test 정보가 train에 새는 현상)는 ML 입문자가 가장 자주 만드는 실수이며, Pipeline + cross_val_score 조합으로 구조적으로 막을 수 있다. 평가 지표는 문제 유형 (분류/회귀) 과 클래스 불균형...
Read more »