배달의민족 주문접수 채널에 Flutter를 도입하며 고민한 것 | 우아한형제들 기술블로그 (새 탭에서 열림)
배달의민족 주문접수 채널은 다양한 디바이스 환경에 대응하고 개발 생산성을 극대화하기 위해 Flutter와 클린 아키텍처를 도입했습니다. 단일 코드베이스를 통해 Android, macOS 등 멀티 플랫폼 지원을 효율화하는 한편, 플랫폼별 차이는 추상화 계층으로 격리하여 유지보수성을 확보했습니다. 나아가 비즈니스 로직의 빠른 변화에 대응하기 위해 Flutter 기반 앱 셸(App Shell)에 웹뷰를 결합한 하이브리드 구조로 진화하며 일관된 사용자 경험을 제공하고 있습니다. ### 멀티 플랫폼 대응을 위한 Flutter 도입과 전략 * Windows, Android, iOS를 넘어 macOS 및 POS 환경까지 확장되는 파트너 요구사항에 대응하기 위해 단일 코드베이스인 Flutter를 선택했습니다. * "Write Once, Run Everywhere"의 이상보다는 플랫폼별 차이(업데이트 방식, 권한 관리 등)를 인정하고 공통 인터페이스로 대응하는 "Write Once, Adapt Everywhere" 접근법을 취했습니다. * 플랫폼별 구현이 다르거나 외부 라이브러리 의존성이 높은 경우, 혹은 테스트를 위해 Mock이 필요한 지점에만 선택적으로 추상화를 적용하여 불필요한 코드 복잡도를 제어했습니다. * 최근 실시간 통신 방식을 MQTT에서 SSE(Server-Sent Events)로 변경할 때, 인터페이스 기반 설계 덕분에 비즈니스 로직 수정 없이 구현체만 교체하여 작업을 완료할 수 있었습니다. ### 클린 아키텍처와 BLoC을 활용한 안정적인 상태 관리 * 계층 간 관심사를 명확히 분리하기 위해 데이터(Data), 도메인(Domain), 프레젠테이션(Presentation), 인프라(Infrastructure) 계층으로 구성된 클린 아키텍처를 적용했습니다. * 상태 관리 도구로는 BLoC(Business Logic Component) 패턴을 채택하여, 이벤트와 상태 변화를 명시적으로 로깅하고 추적함으로써 복잡한 주문 흐름의 디버깅 효율을 높였습니다. * 기능(Feature) 단위로 모듈을 분리하여 각 기능이 독립적으로 동작하고 확장될 수 있는 구조를 마련했습니다. ### 웹뷰 기반 앱 셸(App Shell)로의 전환과 유연성 확보 * 잦은 비즈니스 요구사항 변경에 실시간으로 대응하기 위해, 핵심 로직은 웹(WebView)으로 구현하고 기기 제어 기능은 Flutter(Native)가 담당하는 하이브리드 구조를 도입 중입니다. * Flutter는 프린터 제어, 오디오 출력, 푸시 알림, 로컬 DB 관리 등 하드웨어 및 OS 밀착형 기능을 '앱 셸'로서 제공합니다. * 웹과 Flutter 간의 통신은 JavaScript Bridge를 통해 이루어지며, 이를 통해 앱 스토어 심사 없이도 웹 업데이트만으로 새로운 비즈니스 기능을 즉시 반영할 수 있는 체계를 구축했습니다. 성공적인 멀티 플랫폼 서비스를 위해서는 단일 프레임워크 도입에 그치지 않고, 플랫폼별 차이를 수용할 수 있는 인터페이스 설계와 비즈니스 변화 속도에 맞춘 아키텍처(하이브리드 구조 등)를 전략적으로 선택하는 것이 중요합니다. 특히 클린 아키텍처를 통한 계층 분리는 기술적 부채를 최소화하면서도 급변하는 요구사항에 유연하게 대응할 수 있는 기반이 됩니다.