Flutter) MVVM 패턴 구현

개요

캡스톤 디자인 프로젝트를 진행하면서 깨닫고 중요한 부분인 프로젝트를 어떻게 설계하고 구현(구체화)하였는지 적어보려고 한다. 먼저 우리 학교 컴퓨터공학과 캡스톤 과목은 1년 동안 진행되며 하나의 어플리케이션을 개발한다. 우리팀이 개발 중인 어플리케이션은 사진 위치 기반 모바일 어플리케이션이다. 타겟 플랫폼은 안드로이드이며 서비스 대상자들은 자연 사진, 동물 사진 찍는 것을 즐기는 모든 연령대의 사람들이다.

 

 

우리가 선택한 프론트엔드 프레임워크는 Flutter이다. 플러터는 dart 언어를 사용하며 Google에서 개발한 프론트엔드 프레임워크다. 플러터를 처음 배울 때 프로그래밍 언어에 친숙하지 않아 많은 어려움 있었던 걸로 기억난다.(함수식 표현 , 의존성 주입 ...) 화면 구성이나, 디렉토리 구조 더 나아가 어플리케이션이 아키텍처, 사용될 라이브러리 패키지들을 정리하지 않고 개발했던 것이 나에게 큰 벽을 만나게 해주었다. 또한 ChatGPT나 AI의 도움으로 작성된 코드는 내가 하나씩 밟고 지나가야할 단계들을 전부 생략해버리는 느낌을 받기도 하였다. 일에 순서가 있듯이 휼륭한 개발자로 거듭하기까지 과정이 있다. 이제 글의 제목에 대해 이야기해보자.  

---

 

MVVM 패턴이란?

먼저 MVVM 패턴에 대해 알아보자. MVVM 패턴은 다음 그림을 보고 알 수 있다. Flutter를 기준으로 설명하겠다.

View는 사용자한테 보여지는 화면을 말하며 위젯들로 구성되어 있다. ViewModel은 화면에서 발생한 이벤트를 처리하는 서비스 계층과 같은 역할을 담당한다. Model은 ViewModel에서 사용될 정형화된 데이터라고 보면 된다. Server Client 구조에서 대부분의 데이터는 서버로부터 전달받기에 그림에서 Handler한테 데이터를 요청하고 Model을 반환한다. 

 

 

 

MVVM 패턴을 바탕으로 디렉토리 구성

전체적인 구조)

해당 디렉토리 구성은 우리 프로젝트 구조에 맞게 고안해놓은 것이다. RestAPI 구축해놓은 서버와 웹소켓 통신을 위한 서버들이 있다. 클라이언트에서는 해당 서버들과 통신하기 위해 호출과 관련된 로직들을 모아놓은 services 디렉토리를 이용한다. 

 

 

디렉토리 단위로 분류한다. bar, popup, screen 에 대한 ViewModel을 작성할 수 있으며 프로젝트의 요구사항에 맞게 작성하면 된다. 

 

 

 

 

 

화면 구성)

어플리케이션 화면 구성이 어떻게 설계되었는지도 중요하다. 그래서 왼쪽 사진에 간단한 화면 구성도가 있다. 이를 바탕으로 주요 화면 위주로 디렉토리를 나누어 오른쪽 사진과 같이 표현할 수 있다. 

 

화면 매핑)

위젯별로 어떤 디렉토리에 위치시킬지 정하는 것도 중요하다. 왜냐하면 프로젝트 규모가 커질수록 점점 더 스파게티 코드가 되기 때문에 파편화를 잘해놔야지 문제가 생겼을 때 어떤 부분을 참고해야되는지 알 수 있다. 사진에서 볼 수 있듯이 내가 구현한 지도 화면은 나름대로 이해할 수 있는 수준으로 파일 별로 위젯을 나눈 것을 볼 수 있다. 물론 다른 개발자가 언뜻 봤을 땐 이해하기 힘들 순 있겠지만 조금의 시간만 투자하면 바로 이해할 수 있는 구조라고 생각한다. 

 

마무리

결국 MVVM 패턴을 구현하는 데 있어 중요한 것은 바로 개발하고자 하는 어플리케이션 현재 어떻게 설계되어 있는지다. 설계의 내용은 어떤 Flutter 패키지들을 이용할 것인지(특히 상태 관리 패키지), 화면은 어떻게 구성되어 있는지, 서버와 어떤 형태로 통신할 것인지가 포함되어 있다. 이는 워드나 노션으로 문서화 작업을 하거나 drawio를 이용하여 시각화해 표현하기도 하고 피그마와 같은 UI tool을 이용해 화면별 디자인을 확인할 수 있을 것이다.

한 번 이렇게 감을 잡고 나면 다음 프로젝트에선 어떻게 MVVM 패턴을 적용시킬지에 대한 고민이 덜 할것이다. 다시 한 번은 말하지만 중요한 것은 어떤 어플리케이션을 만들 것이냐다.