Daehan Lim

Header Project Icon

FilmMind - 영화 정보 앱

📝 개요

📌 앱 소개: TMDB API를 활용한 영화 정보 조회 및 추천 앱
🕒 기간: 2025.05.13 ~ 2025.05.15 (3일)
📱 플랫폼: Flutter 크로스 플랫폼 앱 (iOS, Android)
👥 개발 인원: 1명 (개인 프로젝트)
💼 역할: 앱 전체 설계 및 개발, API 연동, 성능 최적화
🛠️ 주요 사용 기술: Flutter Dart TMDB API Riverpod Clean Architecture Dio GitHub Actions Hero Animation Shimmer
🔗 GitHub: daehan-lim/flutter-film-mind-app

1 home screen 7 home scroll screen 3 detail screen 4 detail loading screen 5 detail scroll 1 screen 6 detail scroll 2 screen 2 home loading screen 8 Naver screen 9 Google screen

📖 프로젝트 설명

FilmMind는 TMDB API를 활용하여 현재 상영작, 인기 영화, 평점 높은 영화, 개봉 예정작 등 다양한 카테고리의 영화 정보를 제공하는 Flutter 기반 모바일 애플리케이션입니다. Clean Architecture 패턴과 MVVM 구조를 적용하여 확장 가능하고 유지보수가 용이하도록 설계되었으며, Hero Animation을 통한 자연스러운 화면 전환과 Google/Naver 검색 연동 기능을 통해 사용자가 영화 정보를 직관적으로 탐색하고 추가 정보를 조회할 수 있는 환경을 제공합니다.

🛠️ Tech Stack

Flutter Dart Riverpod Clean Architecture MVVM Dio TMDB API GitHub Actions Cached Network Image Shimmer URL Launcher Flutter Dotenv Flutter SVG

📋 프로젝트 구조

├── app/                               # 앱 전체에서 설정 및 공통 상수, 테마 등  
│   ├── constants/                     # 앱 상수 정의  
│   │   ├── app_colors.dart            # 색상 정의  
│   │   ├── app_constants.dart         # 상수 값 정의  
│   │   └── app_styles.dart            # 스타일 정의  
│   └── theme.dart                     # 앱 테마 설정  

├── core/                              # 앱 전체에서 사용되는 핵심 기능 및 유틸리티  
│   ├── exceptions/                    # 앱 전체에서 사용되는 예외 클래스  
│   │   └── data_exceptions.dart       # 데이터 관련 예외 클래스  
│   ├── extensions/                    # 확장 메서드 정의  
│   │   ├── date_extensions.dart       # 날짜 관련 확장 메서드  
│   │   └── number_extensions.dart     # 숫자 관련 확장 메서드  
│   ├── providers/                     # 공통 프로바이더  
│   │   └── repository_providers.dart  # 리포지토리 프로바이더  
│   └── utils/                         # 유틸리티 함수  
│       ├── navigation_util.dart       # 네비게이션 관련 유틸리티  
│       ├── snackbar_util.dart         # 스낵바 관련 유틸리티  
│       └── dialogue_util.dart         # 다이얼로그 관련 유틸리티  

├── data/                              # 데이터 관련 클래스 및 데이터 액세스 계층  
│   ├── data_source/                   # 데이터 소스 클래스 
│   ├── dto/                           # 데이터 전송 객체 
│   └── repository/                    # 리포지토리 구현체 

├── domain/                            # 비즈니스 로직 및 엔티티 정의  
│   ├── entity/                        # 도메인 엔티티 
│   ├── repository/                    # 리포지토리 인터페이스
│   └── usecase/                       # 유스케이스 

├── presentation/                      # UI 관련 코드  
│   ├── pages/                         # 앱 화면  
│   │   ├── home/                      # 홈 화면  
│   │   │   ├── home_page.dart         # 홈 페이지 위젯  
│   │   │   ├── home_view_model.dart   # 홈 화면 뷰모델  
│   │   │   └── widgets/               # 홈 화면 관련 위젯 
│   │   └── detail/                    # 상세 화면 
│   └── widgets/                       # 공통 위젯 

└── main.dart                          # 앱 진입점

🌟 수행 내용 및 성과

Clean Architecture 기반 앱 구조 설계

TMDB API 연동 및 영화 데이터 처리

UI/UX 및 애니메이션 구현

전계층 단위 테스트 구현

GitHub Actions를 통한 CI 파이프라인

개발 효율성 및 코드 품질

🌱 트러블슈팅

1. Hero Animation 태그 중복 충돌 문제

// 수정된 Hero 태그 생성
Hero(
  tag: 'movie-image-${movie.id}-$categoryName',
  child: AppCachedImage(imageUrl: movie.getPosterUrl()),
)

2. GitHub Actions에서 TMDB API 키 보안 관리

- name: Create .env file
  run: |
    echo "TMDB_BEARER_TOKEN=$" > .env

- name: Install dependencies
  run: flutter pub get

- name: Run tests
  run: flutter test

🎞️ 시연 영상

Watch the Video