DAY 39 | 개인 프로젝트 — 유지보수 (2)
웹 배포에 대해 간단히 살펴본 후 각자의 프로젝트를 진행하는 시간을 가졌다. 심사를 넣는 사람도 있고 테스터를 등록하는 사람도 있고 등등. 나는 어차피 테스터들이 다 테스트를 잘 해줄 것 같지는 않아서 12인 비공개 테스트 인원 중 일부는 내 계정으로 애뮬레이터에서 시용해 보았다. 내가 실제로 사용하는 기기와 비율 차이가 큰 애뮬레이터를 생성하여 동작을 확인해 보기로 했다. 거기에 최적화하지는 않았지만 어떻게 보이는지 최소한의 이슈는 잡고 넘어가는 게 좋을 것 같으니 말이다.
나는 얼마 전에 커스텀 도메인에 꽂혀서 고민하고 있다가 결국 관심 있는 도메인 두 개를 구매해 버렸다. 그리고 그 중 개인적인 목적으로 쓰려는 것의 서브 도메인으로 이 프로젝트를 연결해 보면 어떨까 하는 생각을 했다. Cloudflare랑 Gmail을 연결해 보기도 하고. 몇 가지 이메일 라우트를 만들어 각각의 전용 메일함으로 연결되게 해 보았다. Firebase 및 스토어 이메일도 수정해 놓아야지.
우선 support email을 movesketch@neonsigntrap.com으로 변경했다. 여기로 오는 메일은 내 메일함의 [NST/프로젝트/무브스케치]로 들어간다. 앱 심사 등과 관련된 메일은 dev@neonsigntrap.com으로 연결되도록 했다. velog나 github의 이메일도 me@neonsigntrap.com으로 바꿔볼까 싶기도 하고. git commit 하는 이메일은 GPG key랑 연결되어 있기도 하고, 언젠가 변경될 수 있는 개인 도메인보다는 고정적인 gmail이 나을 것 같으니 그냥 두고, 그 외의 이것저것은 변경해도 좋을 것 같다.
이 프로젝트를 위한 서브도메인은 movesketch.neonsigntrap.com이다. 왜냐하면 이 앱의 패키지 이름이 "com.neonsigntrap.move_sketch" 이기 때문이다. 현재로서는 이 루트 라우트에는 아무것도 없고 일부 정적 페이지 HTML만 존재할 뿐이지만. 여유가 되면 세션 진행 등 모바일이 필수인 기능을 제외하고 피드나 기록 정도는 웹으로도 볼 수 있게 추가해도 좋을 것 같다.
관리자 페이지
앱 버전 업데이트 정보를 Firestore에 담고 앱 실행 시 앱 버전을 비교하기로 했는데, Firestore에 직접 수정하다 보면 실수하기도 쉽고 번거로워서 관리자 페이지에서 Firestore에 버전 정책을 업로드할 수 있도록 하기로 했다. 관리자 페이지는 앱 빌드에서는 제외하고 웹으로만 접속할 수 있도록 하며, 인가된 사용자에게만 접근 가능하도록 한다. 관리자 권한은 Firestore Rules까지 이중으로 처리한다.
Flutter web으로 구현하되 웹 브라우저에서 보기에 너무 어색하지 않은 정도. 웹 개발 경험도 딱히 없지만 그래도 기술교육원 디지털콘텐츠디자인과 다니고 웹디자인개발기능사 자격증 딸 때 웹 브라우저 크기를 조절해 가며 반응형 웹을 고려하여 작업해 본 적은 있으니까. 가로로 지나치게 넓어지지 않게 1200px 제한을 두는 등의 기본적인 처리는 해둘 수 있겠지.
앱 내 알림 화면에서 공지사항을 확인할 수 있는 기능도 있는데 거기에 공지사항을 보내는 것도 관리자 페이지에 추가했다. 그리고 앱을 다운로드받지 않은 사용자나 공지사항 알림을 지운 사용자도 지난 공지사항을 확인할 수 있도록 Firebase hosting으로 공지사항을 모아 놓은 페이지를 만들었다.
수업 시간에 웹 배포를 다루면서 URL에서 # 빼는 것과 favicon 추가하는 것 등을 살펴보았으니 그런 것도 적용해봐야겠다. # 을 빼려면 pubspec.yaml 에 다음과 같은 의존성을 추가하고 pub get 해야 한다.
pubspec.yamlflutter_web_plugins: sdk: flutter
그러고나서 lib/main.dart 의 main() 에서 usePathUrlStrategy(); 를 해주면 쉽게 처리할 수 있다.
이 # 이 붙는 건 전통적인 SPA에서 서버 설정 없이도 동작하도록 브라우저 해시 앵커를 사용하는 방식이라고 한다. 브라우저가# 뒤의 주소를 서버로 전송하지 않고 클라이언트 JS가 내부 라우팅을 수행한다나.
일단은 웹으로 접속하면 관리자 페이지로 연결되게 하여 권한 없는 사용자는 모바일 앱만 사용할 수 있도록 해놓기로 했다. 완성되지 않은 웹 페이지에 사용자가 접근하는 것을 방지하기 위해서. 쓸 만한 화면으로 최적화한 후에 다른 화면으로도 접근할 수 있도록 수정해야지.
https://movesketch.neonsigntrap.com 접속 시 관리자 페이지로 이동하는 것까지 확인했다.
