이번 포스팅은 Line ABCStudio의 김종식 님이 강연해주신 "Flutter Web를 활용해 제품 개발 환경 개선하기" 바탕으로 작성되었습니다.
최근 Future Flutter 행사에서 김종식님의 "Flutter Web을 활용해 제품 개발 환경 개선하기"라는 강연을 들을 기회가 있었다.
이번 강연은 플러터 웹을 이용해 앱을 웹 환경에서 어떻게 구현하고, 발생하는 문제를 어떻게 해결했는지를 다룬 매우 실용적인 경험담이었다.
Focus on Flutter Web
Flutter Web 강연의 중점은 단순히 웹으로 UI를 그리는 것이 아니라, 웹 화면을 Flutter로 어떻게 효율적으로 보여주고 최적화할 수 있는지와 에러 핸들링에 있었다.
특히, Flutter로 개발한 모바일 앱을 웹에서 구현할 때 발생하는 여러 문제와 해결 과정을 다루며, 이를 통해 Flutter Web이 가지는 실제 사용성에 대한 시각을 제공해 주셨다.
첫 번째 앱 웹 구현: 초기 에러와 해결 방법
첫 번째 앱을 웹으로 변환하는 과정에서 가장 먼저 직면한 문제는 플랫폼 종속성을 언급하셨다.
Flutter는 다양한 플랫폼에서 동작하지만, Platform.isAndroid나 Platform.isIOS와 같은 플랫폼 체크 코드를 웹에서 사용하면 에러가 발생한다.
이를 해결하기 위해서는 kIsWeb을 사용해 웹인지 여부를 정확히 분기 처리해야 했고,
이를 통해 불필요한 플랫폼 구분 코드를 제거하고, 플랫폼 간 호환성을 유지할 수 있었다고 하셨다.
또 다른 중요한 이슈로는 Flutter Secure Storage를 사용할 때 발생한 DomException다.
이 오류는 웹 페이지 세션이 종료된 후에도 데이터가 브라우저의 데이터베이스(DB)에 저장되면서 발생했고, 보안이 취약할 수 있는 웹 환경에서 데이터가 저장되는 것은 문제가 될 수 있었다.
이 문제를 해결하기 위해서는 데이터 저장 방식에 대한 근본적인 수정이 필요했다.
web 개발을 하면서 한번쯤 보게되는 CORS 이슈도 큰 문제 중 하나였다.
웹에서 다른 출처의 리소스를 요청할 때 발생하는 XMLHttpRequest error가 원인이었고, 해당 요청이 보안 정책에 의해 차단되었기 때문에 발생했다.
로컬 환경에서는 disable-web-security 옵션을 사용해 우회할 수 있었지만 이는 배포 환경에서는 절대 사용할 수 없는 임시 해결책임을 강조하셨다.
두 번째 웹 프로젝트: 관계자와 공유하기 위한 웹 버전
두 번째 프로젝트에서는 이미 웹으로 제공되는 앱을, 관계자들에게 새로운 기능을 보여주기 위해 사용했다고 하셨다.
이 과정에서 모바일과 동일한 UI/UX를 웹에서 구현하는 것이 핵심 과제였다.
커스텀 린트(Custom Lint) 를 사용해 플랫폼 구분과 에러 처리에 대한 코드 분기를 자동화하고, 에러에 효율적으로 대응할 수 있었다.
시간이 지남에 따라 Flutter의 패키지들이 웹 지원을 시작하면서, 첫 번째 프로젝트 때보다 훨씬 수월하게 대응할 수 있었다고 하셨다.
그러나 모든 기능을 웹에서 제공할 수 없기 때문에, 의도적으로 웹에서 특정 기능을 제한하는 방식도 필요했고, CustomLint를 통해 웹에 맞는 구현체를 반환하도록 코드를 수정하셨다.
특히 Google Maps JavaScript API를 활용해 지도 기능을 구현한 경험을 공유해 주셨는데, 배달 앱을 내부 웹으로 구현했을 때 직원들이 오히려 웹 버전으로 배달을 시키는 일이 발생했다고 하셨다.
웹으로 주문하는 것이 컴퓨터를 사용하는 환경에서는 오히려 편했기에 현장 결제 기능을 활용하는 유저에게 더 쉽게 다가갈 수 있는 흥미로운 이야기였다.
세 번째 프로젝트: 리테일 앱의 웹 배포
세 번째 프로젝트에서는 리테일 앱을 웹으로 별도로 배포하는 과정에서 그 'CORS' 이슈가 매우 많이 발생했다고 하셨다.
이 문제를 해결하기 위해 서버 개발자 및 인프라 개발자들과 긴밀히 협력해 다른 출처의 리소스 문제를 해결했다고 하셨지만 정말 수많은 개발단계에서의 고충이 있었을 것 같았다...
이 과정에서 웹 환경에서 발생하는 이슈를 미리 예측하고, 개발 단계에서부터 서버와의 협력을 매우 중요하게 언급하셨다.
웹 환경에서의 팁과 교훈
강연을 마무리하시면서 몇가지 팁을 제공해주셨다.
먼저, Platform.isAndroid나 Platform.isIOS를 사용하는 것을 지양하고, 웹 오류를 확인하고 분기 처리하는 것이 중요하다는 점을 강조하셨다.
또한, 특정 기능이 웹 환경에서 반드시 필요한지, 혹은 불필요하게 웹에서 제공될 필요가 없는지에 대한 고민이 필요하다고 하셨다.
브라우저 쿠키 및 캐시 제거와 관련된 제약사항도 중요한 이슈로 언급되었다.
쿠키 대응에 대해서는, 실제 서비스 환경이 아니었기 때문에 디테일한 대응을 하진 못했지만, 함께 작업하는 사용자들 덕분에 문제를 비교적 수월하게 해결할 수 있었다고 하셨다.
(쿠키 및 캐시 대응은 웹 개발에서 가장 어려운 것 같다..)
Question
질문으로 "테스트 디바이스를 활용하는 것이 더 낫지 않은가?" 라는 질문이 들어왔었다.
테스트 디바이스 제공이 중요한 경우도 있지만, 인원 수가 많고 물리적인 거리가 있는 경우 웹으로 바로 기능을 공유하는 것이 훨씬 더 효율적이라는 답변을 남겨주셨고, 개인적으로 테스트 디바이스는 QA 같은 실제와 같아야 하는 환경에서는 유효하지만 빠르게 개발하고 컨펌을 받아야하는 기획자나 디자이너와는 Flutter Web이 굉장히 유효하다고 생각했다.
Future < Flutter Web >
강연은 단순히 에러 해결 과정을 나열하는 것 말고도 지금 현재의 Flutter Web과 미래의 환경에 대해 생각해 볼 수 있었다.
과거의 Flutter Web이 가진 불편한 제약에도 불구하고, 이를 극복하고 실제 제품 개발 환경에서 어떻게 활용할 수 있는지와 현재에도 Flutter Web이 어떻게 활용 될 수 있는지 보여주셨다.
그러나 내 생각에는 여전히 Flutter Web은 다른 웹 기술에 비해 '앱을 그대로 웹에서 보여주는' 수준에 머물러 있다는 점에서 아쉬움이 남았다.
내년에는 전폭적으로 지원된다는 Flutter Web이 더욱 발전하여 웹 환경에서 더욱 경쟁력 있는 솔루션이 되길 기대해본다!
References
출처 : * Flutter Web를 활용해 제품 개발 환경 개선하기 - 김종식@Line ABCStudio
Future Flutter에서의 강연을 기반으로 작성되었으며, 문제 시 삭제하겠습니다.
