1. 프로젝트 소개
Flicksy는 Flutter로 개발된 영화 정보 앱으로, TMDB(The Movie Database) API를 활용하여 현재 상영 중인 영화, 인기 영화, 평점 높은 영화, 개봉 예정 영화 등의 정보를 제공합니다.
사용자는 영화의 포스터, 개봉일, 영화 설명, 장르, 흥행 정보, 제작사 로고 등 다양한 세부 정보를 확인할 수 있습니다.
2. 주요 기능
- TMDB 영화 데이터 연동
- 클린 아키텍처 기반 구조
- 당겨서 새로고침(Pull to refresh)
- Riverpod을 활용한 상태 관리
- 영화 상세 페이지에서 다양한 정보 제공
- .env 파일을 통한 API 키 관리
- 화면 이동시 Hero 애니메이션
3. 프로젝트 구조
lib/
├── feature/ # 기능 단위로 나눈 구조
│ └── home/ # '홈' 도메인의 모든 코드
│ ├── core/ # 홈 기능에 한정된 공통 상수
│ │ ├── constants/ # 포스터 URL 등
│ │ └── poster_base_url.dart
│ │
│ ├── data/ # 외부 데이터 소스 (API, Provider 등)
│ │ ├── dtos/ # TMDB API 응답 모델 정의
│ │ ├── providers/ # 데이터 계층의 Provider
│ │ ├── repositories/ # 데이터 구현체 (Repository Impl)
│ │ └── services/ # TMDB API 호출 서비스
│ │
│ ├── domain/ # 비즈니스 로직 계층
│ │ ├── entities/ # 핵심 Entity 정의
│ │ ├── providers/ # 유스케이스 Provider
│ │ ├── repositories/ # 추상화된 Repository 인터페이스
│ │ └── usecases/ # UseCase 클래스
│ │
│ └── presentation/ # UI 및 상태 관리 계층
│ ├── detail/ # 영화 상세 화면
│ │ ├── widgets/ # 상세 화면용 위젯
│ │ └── detail_page.dart
│ │
│ ├── home/ # 홈 화면
│ │ └── widgets/ # 홈 UI 구성 위젯
│ │
│ ├── providers/ # ViewModel Provider 정의
│ └── viewmodels/ # ViewModel 정의
│
└── main.dart # 앱 진입점
4. 트러블슈팅
5. GitHub
https://github.com/Meezzi/flicksy-app
6. 회고
1) TMDB API 연동 및 클린 아키텍처 적용
TMDB API를 연동하면서 Service, Repository, Usecase, UI, 테스트 코드를 작성했다.
요구하는 필드가 많아 DTO, Entity를 작성하는 데 꽤 시간이 걸렸고,
어떤 계층에서 Null 데이터를 처리해야 할지, Null이 나오면 어떻게 할지 명확하지 않아 혼란스러웠다.
하지만 전체적인 구조를 클린 아키텍처에 맞춰 정리함으로써 어느 정도 이해할 수 있게 된 것 같다.
2) Hero 애니메이션 적용
화면을 이동할 때 Hero 애니메이션을 적용했다.
처음에 tag를 설정하는 곳에서 고민이 많았다.
한 화면에 동일한 사진이 3장(가장 인기 있는 영화, 인기 있는 영화 리스트, 상영 중인 영화 리스트)이 있어 동일한 tag를 사용하지 않도록 주의가 필요했다.
이는 popular, nowPlaying이라는 섹션 ID를 붙여 해결했다.
사용자 입장에서 화면 이동이 매끄럽게 이어져 좋은 점이 많은 것 같다.
Clean Architecture와 Riverpod을 이용한 상태관리, MVVM 패턴을 적용하며 앱을 개발하였다.
개념적으로는 어느정도 이해하고 있었는데 직접 실전에서 겪으니 아직 어려운 것 같다.
향후 프로젝트에도 적용하여 더 익숙하게 느껴지도록 연습이 필요한 것 같다.
