[Flutter 메뉴 도입] Start. 기획, 설계 과정 기록 및 회고록

•  

 

- 가장 처음 직면한 문제.

프로토타입 개발 시  공통클래스가 없다 !!

그동안 회사에서 개발할때는 공통UI가 있기 때문에 이걸 가져다 쓰면 되는데 신규 플랫폼으로 개발하려니

공통위젯이 없다는 점에서 막힘..

>> 역할을 나누어 공통위젯과 스타일을 정의하는게 우선

 

 >> 개발 시간 보다는 기획과 설계에 더 많은 시간을 할애하여 재사용성과 확장성을 확보하고자 함

 

---

 

[ 1. 도입 기술 검토 ]

React Native와 Flutter의 개발 편의성, 확장 가능성, 네이티브 코드와의 통합 용이성 등을 비교 분석하여 Flutter 채택 
  1) RN vs Flutter 플랫폼간 특징 비교  (참고: https://soultreemk.tistory.com/260)
  2) 기존 네이티브 소스코드에 크로스플랫폼 프로젝트 통합 가능 여부 체크.
    - React Native는 의존성설치 문제로 적용 불가하다고 판단 (참고: https://soultreemk.tistory.com/261)

 

[ 2. 기획 및 설계 ]

화면 구현, MethodChannel을 활용해 네이티브와의 데이터 통신 구조 설계 및 구현
화면 구조 및 UI설계
 - 화면의 전반적인 구조와 주요 UI 컴포넌트를 정의.

1. 화면 구조 설계:
   • 화면 간의 관계(네비게이션 흐름) 정의.
   • 각 화면의 UI 레이아웃(와이어프레임) 작성.
2. 공통 컴포넌트 정의:
   • 반복적으로 사용될 컴포넌트 식별(AppBar, 카드뷰, 버튼 등).
   • 재사용 가능한 공통 위젯 설계.
3. 상태 관리 방식 선택:
   • Provider, Riverpod, BLoC, Redux 등 프로젝트에 적합한 상태 관리 도구 선정.

[ 3. 구현 ]
 1) 공통컴포넌트 구현, 스타일가이드에 따른 공통스타일 정의

  - 작은위젯부터 불록쌓듯 

이렇게 협업을 하는구나...ㅠ 신세계

 

> 업무공유시스템에 각자 개발한 위젯 & property 설명, 예시 기재 : 사용자가 쉽게 가져다 사용할 수 있도록

 

2) 화면단위 개발
  1.  Provider, MethodChannel을 통해 네이티브-크로스플랫폼 간 데이터 전달 구현
  - Widget클래스에서는 UI와 사용자 인터랙션만구현.
  - Provider를 통해 데이터로직과 UI로직을 나누고 위젯이 직접상태관리를 하지 않도록 개발.

  - MethodChannel은 역할별로 그룹화 하여 관리

 

 

 2. 화면전환 구현 (라우팅, 네비게이션 연결)

 3. 네이티브앱에 메뉴 연동 (entry point, 메뉴를 나갔을때 연결된 화면 등)

[ 4. 심화 ]

네이티브와의 결합도를 낮추기 위한 퍼사드패턴/Bridge패턴 도입
   > 크로스플랫폼과 네이티브 간 빈번한 통신은 성능 저하로 이어질 수 있고,   크로스플랫폼에서의 코드 수정이 네이티브 코드에 영향을 미치면 작업 양이 증가하기 때문에 이를 최소화함
  > 이부분은 추가 정리를 해야함 !!

 

 

 

---

[ 적용 결과 ]

 

* 아쉬운점:
1인 1화면 개발로 속도에 집중

>> 각 개발자가 독립적으로 화면을 구현하다 보니, 코드 스타일이나 공통 위젯 사용이 일관되지 않을 수 있음.
(ex. 개발하다 추가로 필요한 공통위젯을 각자 만들고있는 상황)

 

화면 간 데이터 전달이나 네이티브 통합 작업에서 추가 시간이 소요

 

* 개선방안:

공통 모듈 개발자 지정

페어프로그래밍: 한 화면을 두명이 협업하여 구현 (정/부)

 - 정: 화면의 주요 기능(로직)구현

 - 부: 공통위젯 구현

 

 

좋은점:

 

~~~~~

 

---

 

• 주요 기여 및 문제 해결 (Key Contributions and Problem-Solving)
  1. 직면한 문제:
  2. 해결 방법: 

 

• 배운점 및 개선점
  - 프로젝트를 통해 배운 기술, 지식 또는 개선사항
  1. 개발 측면
  
  
  2. 프로젝트 수행 측면
  설계의 중요성. 공통위젯을 어떻게 나눠서 개발할지 역할분담.