Flutter 앱에서 웹으로 이미지를 브릿지를 통해 전달하기

왜 Base64로 인코딩해서 웹으로 보냈는가?

1. 브라우저 친화성:
• 웹 브라우저에서 Base64는 이미지 데이터를 다루기 위한 범용적인 형식이다..
• Base64 문자열은 <img> 태그의 src 속성에서 Data URI로 바로 사용 가능기 때문도 한몫 했다.

<img src="data:image/png;base64,[Base64 데이터]" />

2. 브릿지의 제한:
• 브릿지를 통해 이미지를 직접 파일 형태로 전달하는 데 제약이 있었다… 그래서 안넘어가던것?.. 그래서 방식을 바꾸었다.
• 파일 시스템 경로나 이진 데이터는 웹에서 바로 처리하기 어려운 경우가 많다고 공부하였다… Base64 형식으로 변환해 텍스트 형태로 안전하게 전달하면? 이란 생각에 도달했고 실행에 옮겼다.

3. 플랫폼 간 호환성:
• Base64는 문자열로 처리되므로, 안드로이드, iOS, 웹 등 플랫폼 간 호환성이 뛰어나다! 추후 웹을 생각해야하는 DOF 프로젝트에 알맞는다 생각하여 진행했다.
• 추가적인 파일 경로 관리나 저장소 접근 권한 처리가 필요 없어 더 간단했다 IOS 저격…

4. 안정성과 유연성:
• Base64로 인코딩하면 데이터가 텍스트 형태로 변환되기 때문에 네트워크 전송 중 손상 가능성이 줄어들었다 이로 안전한 사진 전달이 가능해진 상황으로 변경되었다.

setState(() {
  selectedImages.addAll(validImages);
  // 선택된 이미지가 3장을 초과하면 가장 오래된 이미지를 삭제
  if (selectedImages.length > 3) {
    selectedImages = selectedImages.sublist(selectedImages.length - 3);
  }
});

• 사용자가 이미지를 계속 업로드할 경우, 메모리 초과와 불필요한 데이터 누적을 방지하게 된다.

• 최대 3장의 이미지만 유지하도록 설정하여 효율적으로 관리하도록 개발했다.

• 최신 이미지 유지: 가장 오래된 이미지를 삭제하고 새로 추가된 이미지를 저장한다.

for (XFile image in validImages) {
  final bytes = await image.readAsBytes();
  final base64Image = base64Encode(bytes);

• 앞서 이야기했듯 이미지를 Base64 문자열로 변환해 플랫폼 간 전송의 안정성을 확보시켰고

• 네트워크 전송 중 손상을 방지하며, 브라우저에서 바로 렌더링 가능한 형식으로 처리하였다.

await webViewController?.evaluateJavascript(source: jsCode);

• JavaScript 코드를 실행하여 브라우저와의 연결을 유지하고, 정확히 처리되었는지 확인한다.