이렇게 폐쇄망, Cross Domain, Bridge 이슈를 정리·해결함으로써, Web 기반 Back-Office Application이 실제 운영 환경에서 안정적으로 동작할 수 있는 기반을 마련할 수 있었습니다. 

Modular Architecture가 만든 빠른 서비스 확장

서비스 개발 당시, 통화비서 서비스에 포함된 모든 기능을 완전히 파악하지 못한 상태에서, Web Application(상담원 앱)을 병렬로 개발해야 하는 상황이었습니다.

이때 서비스의 아키텍처가 Feature First / 모듈러(modular) 구조였다는 점이 큰 도움이 되었습니다.

만약 통화비서 서비스가 Layer First 구조로 구현되어 있었다면, 통화비서 서비스에서 필요로 하는 외부 기능들을 찾기 위해 공통 레이어, 도메인 레이어, 인프라 레이어 등을 광범위하게 추적해야 했을 것이고, 실제로 어떤 레포지토리/서비스가 통화비서와 직접 관련 있는지 판단하는 데 상당한 시간이 소요되었을 것입니다.

반면, 통화비서 서비스는 모듈러 아키텍처로 구성되어 있어, 통화비서 도메인에서 필요한 기능을 모듈 내부에서 자체적으로 처리하고 있었고, 외부 기능 의존성은 명시적인 의존성 주입(Dependency Injection)을 통해서만 연결되고 있었습니다.

이 덕분에, 현재 사장이지 서비스가 약 40여 개의 비즈니스 로직(Domain)을 수용하고 있음에도 이 모든 Repository를 일일이 분석할 필요 없이, 통화비서 모듈에서 명시적으로 주입받는 6개의 Domain만 확인하면 아래와 같은 내용들을 빠르게 파악할 수 있었습니다. 

즉, Feature First / 모듈러 구조 덕분에 '전체를 다 이해해야만 시작할 수 있는' 상황을 피할 수 있었고, 통화비서 모듈을 중심으로 국소적인 이해만으로도 개발을 진행할 수 있었습니다. 

결과적으로 Feature First / 모듈러 구조로 인해, 기능 파악 및 설계에 들어가는 시간을 크게 줄일 수 있었습니다.

부가적인 Flutter Web 개발 과정에서의 어려움

1. 서비스 내부에서 사용되는 모바일 환경 전용 API들에 대한 제한

기존 통화비서 서비스 feature 내부에서 사용자의 device api 를 기반으로 특정 동작을 지원하는 기능이 있었습니다.

web 환경에서는 device api를 접근할 수 없어서, 해당 기능들에 대한 처리 방식을 외부에서 주입 받는 방식으로 변경하여 처리했습니다.

추가로 device permission을 요청하는 기능도 있었으나, Web환경에서 제공 할 수 없어서 해당 기능은 권한이 동의된 상태를 가정하도록 주입해 주었습니다.

2. import 과정에서의 web과 mobile 간 구분

공통 코드가 모바일과 웹에서 같이 동작해야 하는 이슈가 발생했습니다. 

가장 큰 예시로 서비스 전반적으로 사용하는 WebView가 그에 해당되는데, WebView를 사용하는 측에서 web인지 여부(*kISWeb)를 검사하여 구분하게 되면, 모바일 환경에서 발생할 수 있는 side-effect가 많을 것으로 판단하여 Facade pattern(GOF design pattern) 방식을 채용했습니다.

Facade pattern 방식

1. interface class를 구성

2. 해당 interface를 구현하는 파일을 웹 과 모바일 환경을 구분하여 구성

3. interface class를 export하는 파일을 구성하여 웹 과 웹이 아닌 경우를 구분

TypeScript

JavaScript

TypeScript

Python

Java

C

C++

C#

Go

PHP

Ruby

Swift

Kotlin

Rust

Scala

SQL

Bash

Shell

HTML

CSS

JSON

XML

​/// interface export file
export 'package:webview_core/src/iframe_widget/view/iframe_webview_widget.dart' 
  if (dart.library.html) 'webview_web_widget.dart'; 
/// webview_web_widget 와 iframe_webview_widget 두 file 모두다 IFrameWebViewWidget 에 대한 구현부를 갖고 있어서
/// 사용하는 측에서 별도 분기 없이 platform 에 따라 자동 구분되어 import 및 사용이 된다.

12345