비 개발자가 플러터플로우 코드 직접 수정하기 1편

⌜비 개발자가 플러터플로우를 쓰기 위해 알아야 하는 것들⌟ 1편과 2편에서 언급한 플러터플로우 사용 후기의 핵심은 "코드를 직접 작성할 줄 알면 작업 속도가 훨씬 빨라질 것"이라는 점이다. 비 개발자이지만 챗지피티와 코드 변환기 Figma to code의 도움으로 일부 수정은 할 수 있겠다는 생각으로 시작한 작업은 마치 게임에서 새로운 맵에 들어선 느낌을 선사했다. 난항을 오래 겪을 수 있지만 배울 점이 많은 방식이다.  

 

먼저 플러터플로우 코드는 유료 플랜 구독 시 다운로드할 수 있으며 플러터플로우 내에서는 코드 수정이 불가하다. 다운로드한 코드는 비주얼스튜디오 코드에서 편집하면 된다. 문제는 앱을 테스트할 때 플러터플로우에서는 없었던 오류가 비주얼스튜디오 코드에서 발생한다는 것이다. 비주얼스튜디오 코드는 프로그램 실행에 필요한 파일을 사용자가 직접 설치해야 해서 이러한 현상이 일어나는 것으로 추측하고 있다. 비주얼스튜디오 코드에서 편집하기 위해서는 플러터와 다트부터 설치해야 하며, 설정을 관리하는 pubspec.yaml 파일에서 필요한 디펜던스(의존성, dependencies)을 갖춰야 한다. 디펜던스란 패키지^[각주:1]와 플러그인^[각주:2]을 지정하는 부분이다. 

 

---

 

비주얼스튜디오 코드에서 앱 테스트 시 발생하는 오류와 그 원인 

 

1. 구글 로그인 - 로그아웃 

 

개발 중인 앱은 구글 로그인 기능을 사용 중이다. 오류는 아래와 같이 세 가지다. 

1. 로그인 화면에서 구글로그인 버튼 클릭하지 않아도 계정 선택 창 팝업
2. 로그아웃 후 로그인 페이지 돌아가면 자동로그인 실행
3. 계정 두 개 로그인하는 시점부터 크롬 에러코드 5 표시

세 가지 오류의 원인은 아직 파악하지 못했다. 구글 로그인 기능을 플러터플로우에서 구현해 디버깅이 어려운 상태라 해당 기능을 비주얼스튜디오 코드에서 처음부터 끝까지 구현하는 방법을 염두하고 있다. 크롬 에러코드 5의 경우 원인은 다양하며 최선의 해결책은 브라우저 삭제 후 재설치인데 3번 오류를 해결하는 데 도움이 되지 못했다. 

 

2. 유저 프로필 이미지 불러오기 실패 

 

개발 중인 앱은 유저가 자신의 프로필 이미지를 설정할 수 있다. 플러터플로우에서는 정상적으로 보였던 이미지가 비주얼스튜디오 코드에서는 보이지 않아 크롬에서 개발자 모드로 들어가 오류 메시지를 확인했다. 그 결과 CORS(Cross-Origin Resource Sharing) 정책^[각주:3]에 의해 파이어베이스에 저장된 이미지 접근이 차단되었음을 알 수 있었다. 

---

문제 해결 시도 

 

1. 구글 로그인 - 로그아웃 

 

자동 로그인의 경우 SharedPreferences prefs = await SharedPreferences.getInstance(); await prefs.clear(); 코드를 넣었더니 해당 현상이 더이상 일어나지 않았다. 다만 로그아웃 코드에 사용자 데이터를 제거하는 기능이 있는데 이 이상의 제거(clear)는 데이터 저장과 관련된 문제를 야기할 우려가 있어 위 코드는 삭제했다. 스택오버플로우에서 같은 오류에 대한 글을 찾았지만 답변을 명확히 이해할 수 없었다. 

 

2. 유저 프로필 이미지 불러오기 실패 

 

먼저 파이어베이스 콘솔 - 링크 외부 접근 권한 설정에서 테스트 도메인이 추가되어 있는지 확인 후 파이어베이스 스토리지에서 CORS 설정을 했다. 설정 후 크롬 검사에서 이전과 같은 오류 메시지는 뜨지 않았지만 여전히 프로필 이미지는 불러올 수 없었다. 개발자들이 많이 사용하는 방식인 웹 보안 비활성화도 마찬가지였으며 보안 상의 문제로 재활성화를 시도했는데 실패했다는 점이 인상 깊다. 스택오버플로우를 보니 생각보다 많은 사람들이 웹 보안 재활성화를 하는 데 어려움을 겪고 있었다. 

 

- 2편에서 계속

---

용어 설명

1. 기능 확장, 재사용에 쓰이는 다양한 다트 코드 모음 [본문으로]
2. 네이티브 코드로 작성된 기능을 호출하는 것 [본문으로]
3. 브라우저는 보안을 위해 웹페이지가 다른 도메인의 리소스를 불러오지 못하게 하는 동일 출처 정책(Same-Origin Policy)을 따르고 있음. CORS는 외부 리소스에 안전하게 접근할 수 있게 하는 정책 [본문으로]