우리는 이번 공모전을 준비하면서 가장 중요한 요소로 '생산성'을 두었습니다. 우리는 다양한 선택지 중에서 가장 적합한 방향을 고민했고, 네이티브 개발과 하이브리드 앱(React Native, 플러터)을 고려하였습니다. 그러나 네이티브 개발은 프론트엔드 인력의 경험이 부족하며, 큰 러닝 커브와 앱 심사의 어려움이 있었습니다. 또한, 하이브리드 앱 역시 경험이 없고 앱 심사의 문제가 예상되었습니다.
이에 우리는 웹뷰를 선택한 이유는 웹뷰 환경을 구축함으로써 프론트엔드 인력의 경험을 살려 빠르게 개발할 수 있었습니다. 또한, 기존에 갖춰진 풍푸한 프론트엔드 인프라를 최대한 활용할 수 있었고, 앱 심사에 대한 부담이 줄어들었습니다. 웹뷰를 통해 앱을 배포하면 웹 부분은 별도의 심사 없이도 업데이트가 가능하며, 이는 하이브리드 앱과 비교해 충분한 장점이 있다고 생각했습니다.
또한 Expo를 사용하여 React Native안에서 각각 안드로이드, ios코드를 볼필요 없게 세팅하여 앱을 만들었습니다. 또한 Expo앱을 활용하여 모바일 기기로 편하게 디버깅을 하였습니다.
이 앱은 사용자 경험을 개선하기 위해 브릿지 기술을 적극적으로 활용하였습니다.
- 라우팅 개선: 앱의 안드로이드 버전에서 발생한 뒤로가기 버튼 클릭 시 앱이 꺼지는 현상을 개선하였습니다. 이제 사용자는 뒤로가기 버튼을 통해 이전 페이지로 원활하게 이동할 수 있습니다.
- 음성녹음 기능: 앱 내에서 녹음한 내용을 웹으로 보내고 서버로 전송하는 방식을 선택하였습니다. 이를 통해 음성 녹음 기능이 확장되며, 브릿지를 통한 원활한 데이터 전송이 이루어집니다.
- 안드로이드 스튜디오 세팅.
- 코드를 clone 받는다.
- root의 WebviewContainer에서 targetUrl 에 본인의 ip 주소를 입력한다. (ip주소 찾는법은 web 레포에 있음)
- npm run android 명령어 입력 후 실행