[Flutter] 프로젝트 생성 후 폴더 구조가 복잡할 때: 구조 이해부터 MVVM까지

 

Flutter의 프로젝트 폴더 구성

 

Spring 기반 백엔드만 사용하다가 처음으로 Flutter를 세팅해 보았습니다.

하지만 프로젝트 구조가 너무 복잡하여 "도대체 어디에 코드를 작성해야 하지?" 라는 생각이 들었습니다.

저뿐만이 아니라 처음 Flutter를 세팅해 본 다른 사람도 뭐가 뭔지 모르는 상황이 올 것 같아서 제가 공부한 폴더를 소개해주려고 합니다.

[프로젝트 이름]/
├─ android/
├─ ios/
├─ lib/
│  └─ main.dart
├─ test/
├─ pubspec.yaml
└─ 기타 파일들 (.gitignore, README.md 등)

lib 폴더

• 저희들이 주로 개발하게될 Flutter앱의 메인 코드 위치입니다.
• 앱 UI / 기능 개발하는 메인 영역입니다.
• 즉, Flutter 앱의 심장이며 Dart 코드로 여기로 작성될 것입니다!!

android  / ios폴더

• Flutter 앱을 Android/iOS에서 실행되게 해주는 코드가 존재하는 곳입니다.
  즉, 각 네이티브 플랫폼 연동 코드가 있는 곳입니다.
• 알림, 앱 권한, 외부 SDK연동 할 때 아니면 거의 손댈 이유가 없습니다.
• android는 Java,Kotlin으로 작성되며 ios는 Swift, Objective-C로 작성됩니다.

test 폴더

• 기능 구현한 것이 잘 작동하는지 Dart 언어로 테스트 코드를 작성하는 곳입니다.
• 단위 테스트와 위젯 테스트 등이 있습니다.

pubspec.ymal

• 스프링의 application.yml과 같은 성격입니다.
• 라이브러리 및 리소스 설정 파일 즉, Flutter 앱의 설정 파일입니다.

[그림1] 플러터 프로젝트 구조

 

 

MVVM 패턴이란?

 

Model - View - ViewModel로 이루어진 패턴이며 UI와 로직을 분리한 것입니다.

 

• Model : 데이터 구조 / 상태를 가집니다.
  ex. Domain 객체 User
• View : 화면 (UI) 구성을 합니다.
  ex. StatelessWidget, StatefulWidget
• ViewModel : 상태 관리 & UI 로직을 가집니다.
  ex. ChangeNotifier, Provider, Riverpod

 

Flutter MVVM 흐름

View ↔ ViewModel ↔ Repository ↔ API/DB

• View : 사용자 입력(버튼 클릭 등)을 받고
• ViewModel : 상태를 바꾸고 비즈니스 로직 수행
• Model : 데이터 구조 또는 API 결과값
• Repository : 외부와의 통신 (HTTP, DB)

 

왜 MVVM을 쓸까?

• View와 ViewModel을 분리하기 위함입니다.
• UI 상태관리를 ViewModel에서 일괄관리하며 따로 테스트를 작성하기 위함입니다.

 

 

 

MVVM 모듈화 구조 설명

 

지금은 모듈화를 하기 위해 예시로 나타내어 봤습니다.

왜 도메인 기반으로 나누었냐면 각 도메인 별(모듈 별)로 팀이 나눠질 수도 있으며 각 책임도 쉽게 분리할 수 있어서 분리하였습니다.

lib/
├── app/                    # 앱 전반 설정 (main, routes, themes 등)
│   ├── app.dart
│   ├── routes.dart
│   └── theme.dart
│
├── core/                   # 전역 공통 기능
│   ├── constants/
│   ├── exceptions/
│   ├── utils/
│   └── widgets/            # 공통 UI 컴포넌트 (e.g. CustomButton)
│
├── features/
│   ├── auth/               # [Feature Module: Auth]
│   │   ├── data/           # API, repository 구현
│   │   ├── domain/         # entity, repository 인터페이스
│   │   ├── presentation/   # UI(View), ViewModel
│   │   │   ├── screens/
│   │   │   ├── viewmodels/
│   │   └── auth_module.dart
│   │
│   ├── todo/               # [Feature Module: Todo]
│   │   ├── data/
│   │   ├── domain/
│   │   ├── presentation/
│   │   │   ├── screens/
│   │   │   ├── widgets/
│   │   │   └── viewmodels/
│   │   └── todo_module.dart
│
└── main.dart

 

 

 

감사합니다.