Flutter 앱 개발기 (1/5) — Flutter 3개 프로젝트의 공유 패턴: UI·상태관리 재사용

-

콰이어트, 마인스위퍼, 성장 일지 — 세 프로젝트가 공유하는 Flutter 패턴 구조

핵심 요약

  • 콰이어트(Riverpod + Hive), 마인스위퍼(BLoC + Hive), 성장 일지(Riverpod + SQLite) 3개 Flutter 프로젝트의 공유 패턴과 재사용 전략을 정리했다
  • 테마 시스템, 설정 패널, 커스텀 위젯 등 UI 패턴을 프로젝트 간 공유하여 개발 중복을 줄였다
  • 프로젝트 간 [tech] 관계를 온톨로지에 명시하면, 한 프로젝트의 버그 수정이 다른 프로젝트의 동일 버그를 예방하는 구조가 된다

배경

Flutter 프로젝트를 하나만 운영하면 패턴 재사용을 고민할 이유가 없습니다. 세 개가 되면 이야기가 달라집니다. 비슷한 UI를 세 번 만들고, 비슷한 버그를 세 번 고치고, 비슷한 설정 화면을 세 번 설계하게 됩니다.

콰이어트(텍스트 북리더), 마인스위퍼(육각 지뢰찾기), 성장 일지(GrowNote) — 세 앱은 목적이 다르지만 Flutter 스택을 공유합니다. 이 공유 지점을 체계화하면 개발 속도와 품질 모두 개선됩니다.

본문

1. 공유 UI 패턴 — 테마, 설정, 위젯

테마 시스템: 세 앱 모두 다크/라이트 모드를 지원합니다. 콰이어트에서 처음 설계한 테마 전환 구조(ThemeData 생성 함수 + 사용자 설정 저장)를 마인스위퍼와 성장 일지에 그대로 적용했습니다. 앱별 색상 팔레트만 다르고 구조는 동일합니다.

// 공통 테마 팩토리 패턴 (앱별 색상만 주입)
ThemeData buildAppTheme({
  required ColorScheme colorScheme,
  required TextTheme textTheme,
}) {
  return ThemeData(
    colorScheme: colorScheme,
    textTheme: textTheme,
    useMaterial3: true,
  );
}

설정 패널: 설정 화면의 레이아웃 패턴이 수렴합니다. 섹션 헤더, 토글 스위치, 슬라이더, 선택지 리스트 — 이 조합이 반복됩니다. 콰이어트에서 만든 SettingsTile, SettingsSection 위젯을 일반화하여 다른 프로젝트에서 재사용합니다.

커스텀 위젯: 로딩 인디케이터, 빈 상태 화면, 에러 화면 같은 공통 위젯도 패턴이 같습니다. 앱별 일러스트나 문구만 다를 뿐 구조는 동일합니다.

2. 상태 관리 비교 — Riverpod vs BLoC, 언제 무엇을

세 프로젝트는 두 가지 상태 관리 도구를 사용합니다.

프로젝트 도구 상태 특성
콰이어트 Riverpod 반응형, 설정 중심
마인스위퍼 BLoC 이벤트 기반, 트랜잭션 중심
성장 일지 Riverpod 데이터 기반, CRUD 중심

선택 기준은 명확합니다. 데이터가 흐르는 앱(설정 변경 → UI 반영, DB 변경 → 목록 갱신)에는 Riverpod의 선언적 반응성이 적합합니다. 이벤트가 상태를 바꾸는 앱(사용자 입력 → 복잡한 로직 → 상태 전이)에는 BLoC의 명시적 흐름이 적합합니다.

// Riverpod — 반응형 데이터 흐름 예시 (성장 일지)
final growthEntriesProvider = StreamProvider<List<GrowthEntry>>((ref) {
  final db = ref.watch(databaseProvider);
  return db.watchAllEntries();
});

// BLoC — 이벤트 → 상태 전이 예시 (마인스위퍼)
class GameBloc extends Bloc<GameEvent, GameState> {
  GameBloc() : super(GameInitial()) {
    on<RevealCell>(_onRevealCell);
    on<FlagCell>(_onFlagCell);
    on<ResetGame>(_onResetGame);
  }
}

두 도구를 병행하면 학습 비용이 드는 것은 사실입니다. 그러나 문제에 맞는 도구를 선택하는 것이 장기적으로 유지보수 비용을 낮춥니다.

3. 온톨로지의 [tech] 관계 — 왜 명시하는가

프로젝트 온톨로지에 이런 관계가 정의되어 있습니다: - 콰이어트 ↔ 마인스위퍼: Flutter 스택 공유 — UI 패턴, 상태 관리 [tech] - 콰이어트 ↔ 성장 일지: Flutter 스택 공유 — UI 패턴, 상태 관리 [tech] - 마인스위퍼 ↔ 성장 일지: Flutter 스택 공유 — 위젯 패턴 재사용 [tech]

이 명시가 왜 필요한가? 콰이어트에서 테마 관련 버그를 수정하면, "마인스위퍼와 성장 일지에도 같은 패턴이 있으므로 확인이 필요하다"는 맥락이 자동으로 활성화됩니다. 온톨로지의 관계 정의는 단순한 문서가 아니라 작업 범위를 결정하는 실행 가능한 메타데이터입니다.

4. 크로스 프로젝트 학습 — 버그 전파 방지

실제 사례: 콰이어트에서 다크 모드 전환 시 특정 위젯의 색상이 즉시 반영되지 않는 버그가 있었습니다. 원인은 const로 선언된 위젯이 테마 변경을 감지하지 못하는 것이었습니다.

// 문제 — const 위젯은 테마 변경을 감지하지 못함
const Icon(Icons.settings, color: Colors.grey)  // ❌

// 수정 — const 제거하여 테마 반영 허용
Icon(Icons.settings, color: Theme.of(context).iconTheme.color)  // ✓

이 버그를 수정한 뒤, 같은 패턴을 사용하는 마인스위퍼와 성장 일지를 점검했습니다. 마인스위퍼에서 동일한 문제가 잠복해 있었고, 사전에 수정할 수 있었습니다. 버그가 사용자에게 도달하기 전에 차단한 셈입니다.

프로젝트 간 관계를 인지하지 않으면 이런 크로스 프로젝트 학습은 불가능합니다. 각 프로젝트를 완전히 독립적으로 관리했다면 같은 버그를 세 번 경험했을 것입니다.

5. 공유 테스트 패턴

세 프로젝트에서 반복되는 테스트 패턴:

위젯 테스트: 설정 화면이 올바르게 렌더링되는지, 토글 전환이 상태를 변경하는지. 테스트 구조가 거의 동일하여 한 프로젝트에서 작성한 테스트 템플릿을 다른 프로젝트에 복사 후 수정합니다.

상태 관리 테스트: Riverpod의 경우 ProviderContainer를 생성하고 상태 변화를 검증하는 패턴, BLoC의 경우 blocTest를 사용하는 패턴이 각각 정형화되어 있습니다.

// Riverpod 테스트 패턴 (공통 구조)
test('setting change reflects in state', () async {
  final container = ProviderContainer();
  addTearDown(container.dispose);
  // ...
});

// BLoC 테스트 패턴 (공통 구조)
blocTest<GameBloc, GameState>(
  'emits [GamePlaying] when RevealCell added',
  build: () => GameBloc(),
  act: (bloc) => bloc.add(RevealCell(row: 0, col: 0)),
  expect: () => [isA<GamePlaying>()],
);

골든 테스트: UI 회귀를 잡기 위한 스크린샷 비교 테스트. 테마 변경, 다크/라이트 모드 전환, 다양한 화면 크기에서의 렌더링을 검증합니다. 이 패턴도 세 프로젝트에서 동일하게 적용합니다.

테스트 패턴을 공유하면 새 프로젝트의 테스트 셋업 시간이 크게 줄어듭니다.

시행착오

과도한 추상화 시도: 세 프로젝트에서 공유하는 코드를 별도 패키지로 추출하려 했습니다. 하지만 앱별 커스터마이징이 많아서 추상화 비용이 재사용 이득을 초과했습니다. 코드 복사 후 수정이 현실적으로 더 효율적이었습니다.

상태 관리 통일 시도: 하나의 도구로 통일하면 학습 비용이 줄 것이라는 가정으로 마인스위퍼도 Riverpod으로 시작했다가 이벤트 처리가 어색해져서 BLoC으로 전환했습니다. 도구 통일보다 문제에 맞는 도구 선택이 더 중요합니다.

마무리

Flutter 멀티 프로젝트 운영에서 핵심 원칙은 "패턴은 공유하되 도구는 문제에 맞게 선택한다"입니다. 테마 시스템, 설정 패널, 테스트 구조 같은 패턴은 프로젝트 간에 이전할 수 있습니다. 그러나 상태 관리 도구나 저장소 선택은 각 앱의 데이터 특성에 따라 달라져야 합니다.

온톨로지에 프로젝트 간 [tech] 관계를 명시하는 것은 단순한 문서화가 아닙니다. 한 프로젝트의 경험이 다른 프로젝트로 자동 전파되는 구조를 만드는 것입니다. 프로젝트가 늘어날수록 이 관계 정의의 가치가 커집니다.

시리즈 전체 안내: 시리즈 목차

댓글

댓글 쓰기

이 블로그의 인기 게시물

"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 »