이번 학습에서는 Flutter로 책검색 앱(Book Search App) 을 구현하며
앱 구조 설계, 상태관리, 데이터 흐름, API 연동의 핵심 개념을 중심으로 학습했다.
1. MVVM 아키텍처의 이해
프로젝트를 MVVM(Model–View–ViewModel) 구조로 구성했다.
- Model : 데이터 구조 정의 및 JSON 변환 (Book 클래스)
- Repository : 외부 API 통신과 데이터 가공 담당 (BookRepository)
- ViewModel : 비즈니스 로직과 상태 관리 (HomeViewModel)
- View(UI) : 사용자 인터페이스 및 데이터 표시 (HomePage, DetailPage)
이 구조를 통해 UI와 데이터 로직을 분리하여 유지보수성과 확장성을 높였다.
2. Riverpod 기반 상태관리
Riverpod의 Notifier와 ProviderScope를 활용하여 앱 전역 상태를 관리했다.
HomeViewModel이 HomeState를 제어하고,
UI에서는 ref.watch()로 상태를 구독하여 변경사항을 자동 반영했다.
→ 이로써 단방향 데이터 흐름(One-way data flow) 과
리액티브 UI의 개념을 실습할 수 있었다.
3. UI 구성의 원리
AppBar, TextField, GridView, BottomSheet 등 다양한 위젯을 사용했다.
- AppBar에 검색창(TextField)을 배치하여 입력 이벤트 처리
- GridView.builder로 동적 리스트 생성 및 UI 효율화
- GestureDetector를 이용해 UX 향상 (탭 시 키보드 해제 등)
- showModalBottomSheet로 하단 요약창 구현
이 과정을 통해 Flutter 위젯 트리와 레이아웃 빌드 과정을 이해했다.
4. 네트워크 통신과 비동기 처리
http 패키지를 통해 네이버 책 검색 Open API를 호출하고,
async/await 구문으로 비동기 요청을 처리했다.
try–catch문을 사용해 네트워크 오류를 예외적으로 관리함으로써
비동기 흐름 제어와 예외처리의 중요성을 실감했다.
5. 데이터 모델링과 JSON 변환
API 응답(JSON)을 다루기 위해 Book 모델을 정의하고
fromJson / toJson 메서드를 작성했다.
이를 통해 Flutter에서의 데이터 직렬화(Serialization) 개념과
모델 객체의 구조적 설계를 학습했다.
6. ViewModel과 Repository의 역할 분리
BookRepository는 외부 데이터를 가져오는 책임만,
HomeViewModel은 그 데이터를 상태로 관리하고 UI에 반영하는 역할만 수행했다.
이로써 관심사 분리(Separation of Concerns) 원칙을 이해할 수 있었다.
7. 데이터 바인딩과 반응형 UI
ConsumerStatefulWidget을 사용하여 ref.watch()로 상태 변화를 감시하고,
검색 결과가 변경될 때마다 GridView가 자동으로 업데이트되도록 했다.
이는 데이터 바인딩(Data Binding) 과 리액티브 프로그래밍의 기본 원리였다.
8. WebView 활용과 외부 콘텐츠 렌더링
flutter_inappwebview 패키지를 활용해 상세페이지에서 책의 외부 링크를 로드했다.
이를 통해 앱 내부에서 웹 콘텐츠를 표시할 수 있는
플랫폼 채널과 네이티브 브라우저 통합 개념을 익혔다.
이번 학습을 통해 Flutter 앱 개발의 핵심 개념인
상태관리, 데이터 흐름, 비동기 로직, UI 구조화, API 통신을 명확히 이해했다.
특히 MVVM과 Riverpod을 결합함으로써
앱의 유지보수성과 확장성을 높일 수 있다는 점이 인상 깊었다.
앞으로는 이런 구조를 기반으로 실제 프로젝트에서도
UI–데이터–로직 간의 책임 분리를 명확히 하는 설계를 지향할 것이다.