Flutter와 앱 간의 데이터를 원활하게 전달하기 위해 많은 노력을 기울였다. 특히, 앱과 웹 간의 데이터 주고받기가 필요한 상황에서 모바일의 사진, 위치 정보와 같은 데이터를 직접 전달해야 하는 경우가 자주 발생했다.
이를 해결하기 위해 Bridge를 활용하여 두 플랫폼 간의 연결을 구축했다. Bridge를 통해 이벤트 핸들러를 구현함으로써, 모바일에서 웹으로, 웹에서 모바일로 데이터를 주고받는 기능을 개발했다.
구체적으로는 다음과 같은 방식을 사용했다:
- 이벤트 핸들러 구현
- Flutter의
flutter_inappwebview와 JavaScript 인터페이스를 활용해 양방향 통신이 가능하도록 이벤트 핸들러를 설계했다.
// 한가지 예로 들면-------------------------------------------------------| // 위치 정보 요청 핸들러 _registerJavaScriptHandler( handlerName: 'requestLocation', callback: (args) async { try { // 현재 위치 가져오기 Position position = await Geolocator.getCurrentPosition(); return { 'latitude': position.latitude, 'longitude': position.longitude }; } catch (e) { // 에러 처리 return {'error': e.toString()}; } }, ); // requestLocation 라는 핸들러를 통해 앱과 웹 간의 데이터 주고받기가 가능해졌다.
- 데이터 전달 로직 설계
- 모바일 앱에서 사진이나 위치 정보를 수집해 JSON 형식으로 웹에 전달하도록 구현했다.
- 반대로, 웹에서 발생한 특정 이벤트나 데이터를 모바일로 전달하는 함수를 작성해 양방향 통신의 완결성을 높였다.
- 안정성과 보안성 고려
- 데이터를 전달하는 과정에서 안전한 통신이 이루어질 수 있도록 데이터 검증과 보안 프로토콜을 적용했다.
- 적극적인 라이브러리 활용
- Flutter의 가장 큰 장점 중 하나는 활발하게 운영되고 있는 커뮤니티 플랫폼인
pub.dev라고 할 수 있다. 이 플랫폼은 수많은 라이브러리를 체계적으로 정리해 제공하며, 필요한 기능에 맞는 라이브러리를 쉽게 찾고 도입할 수 있는 환경을 제공한다. - 프로젝트를 진행하며
pub.dev를 통해 원하는 라이브러리를 탐색하고, 이를 적극적으로 도입하면서 발생하는 모든 이슈를 하나씩 해결해 나갔다. 특히, 각 라이브러리의 문서와 커뮤니티 피드백은 문제를 분석하고 적합한 해결책을 찾는 데 큰 도움이 되었다. - 이런 과정을 반복하며 단순히 라이브러리를 활용하는 데 그치지 않고, 문제 해결 능력과 새로운 기술을 배우는 역량도 크게 향상되었다. 단순히 Flutter 개발 기술뿐만 아니라, 새로운 도구와 환경에 적응하는 경험까지 쌓을 수 있었던 소중한 시간이 되었다.
// 적극적인 라이브러리 활용. import 'package:geolocator/geolocator.dart'; import 'package:image_picker/image_picker.dart'; import 'package:flutter_secure_storage/flutter_secure_storage.dart';
이 과정을 통해 앱과 웹 간의 데이터 전달 문제를 효과적으로 해결했으며, 보다 안정적이고 확장 가능한 구조를 완성할 수 있었다.
Share article