[정보통신기획평가원 KSW Square] Rabbit 어플제작 프로젝트 회고

2022년 9월 1일 ~ 2022년 12월 22일까지

미국 인디애나주 웨스트라피엣 퍼듀대학교에서 Visiting Scholar 신분으로 'K-SW Square Fall 2022 프로그램'에 참여하게 되었다.

 

미국에서의 일상은 https://blog.naver.com/hyun_record

로현, 청춘의 기록 : 네이버 블로그

네이버 블로그에서 기록중이므로 이곳에는 프로젝트 관련 내용을 기록하고자 한다.

 

프로젝트 설명은 이곳에 기록했다.

https://yeshyun.tistory.com/27

K-SW Square Fall 2022 프로젝트 시작 (Rabbit App) - 1주차

---

0. 어플리케이션 사진

https://github.com/YesHyeon

YesHyeon - Overview

설명하기에 앞서 우선 어플리케이션 사진을 첨부한다.

개발한 어플리케이션은 다음과 같다.

"Hopping the dangerous area Navigation Algorithm & Service that guides you to avoid dangerous areas"

즉, 미국 각 지역의 범죄 데이터를 분석하여 사용자의 프로필에 맞게 위험한 지역을 피해 목적지까지 안내해주는 네비게이션 어플이다.

예를들어 21살 여성이면 상대적으로 성범죄가 적은 지역으로 안내를 해주는 방식이다.

 

어플리케이션 페이지는

스플래시 페이지 - 로그인 페이지 - 회원가입 페이지 - 메인페이지(경로검색) - 경로추천 페이지 

데이터 분석결과 페이지 - 프로필 페이지 - 프로필 수정 페이지로 구성했다.

 

디자이너 팀원이 없었기에 디자인 업무까지 겸업하며 개발을 진행했다.

 

 

[Rabbit 시연영상]

 

1. 개발환경 세팅

---

내가 속한 팀은 총 5명으로 데이터분석 2명, 백엔드 2명, 프론트엔드 1명으로 구성됐다.

그 중 프론트엔드는 혼자였고, 막중한 부담감을 껴안은채 프로젝트를 시작했다.

해당 프로그램의 목표는 논문을 작성하는 것이었기에, 어플 구현 파트의 중요성이 크지 않다고 생각했다.

하지만 어플의 중요성이 거대해졌고.. 점점 많은 기능들이 추가되었다.

• 초기세팅

Xcode: 13.3.1
react-native-cli: 7.0.4
type-script: 6.10.4
react-native: 0.68.2
Home brew: 3.6.1(패키지 관리자, 다양한 소프트웨어 패키지를 빌드, 설치 및 관리할 수 있는 보다 일반적인 도구)
nvm: 0.39.1
node: 16.10.0
watchman: 2022.09.12
cocoapods: 1.11.3
JDK(java): 11
ffi

초기 개발환경 세팅은 다음과 같은 버전들로 맞추었고, 최대한 안정적인 버전을 사용하려고 했다.

 

1.1 왜 React Native를 이용했는지?

 

React를 이용해 앱내에 Webview를 띄우는 방식으로 구현을 할지

오로지 React Native만을 이용해 앱을 구현할지 고민을 많이 했는데, 결론적으로 React Native만을 이용해 앱을 구현하는 방식으로  결정했다.

 

이유는 간단했다.

첫 째, 프로그램 지원상 배포는 하지 못했기에 추후 배포와 관련된 유지보수를 하지 않아도 된다는 점.

그래서 재빠른 배포를 할 수 있다는 장점이 있는 Webview의 장점이 사라졌다.(프로그램 지원상 배포는 하지 못했기에)

둘 째, 지도를 이용하는 서비스이기에 위치권한 문제가 가장 중요했고, 로컬스토리지를 이용하기 위함이다.

 

1.2 TypeScript를 사용한 이유?

 

조금 더 익숙한 바닐라 자바스크립트를 이용해 구현을 할 수 있었지만, TypeScript를 공부하고 싶었다.

혼자 프론트엔드 파트를 맡아야 됐기에, 기한내에 과연 TypeScript 공부를 하면서 진행할 수 있을까? 걱정이 있었지만 할 수 있다 믿었다.또한 이전 인턴 생활을 하면서 Type을 할당할 수 있다는 게 유지보수에 용이하다는 것을 깨달았기 때문이다.

 

 

2. 프로젝트에 사용한 라이브러리

---

구글맵 기능을 사용해야했기에, 구글맵 라이브러리를 이용했고 

리액트네이티브에서 제공하는 지도 검색, 경로 검색 기능을 제공하는 라이브러리가 주된 라이브러리였다.

• react-native-google-places-autocomplete
  react-native-google-places-autocomplete

react-native-google-places-autocomplete

• react-native-maps-directions
  react-native-maps-directions

react-native-maps-directions

• Google Maps API
  Google Maps Platform | Google Developers

Google Maps Platform  |  Google Developers

• gorhom/react-native-bottom-sheet
  https://github.com/gorhom/react-native-bottom-sheet

GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom sheet with fully configurable options 🚀

 

3. 여러 고민들

• 유저마다 다른 데이터 분석이 필요하지만, GPU 서버의 한계로 인해 서버로부터 응답받는 속도가 느렸다. 그래서 기능을 쓰는 시점이 아닌 회원가입을 할 때 서버로부터 데이터를 받아온 후, EncryptedStorage에 저장을 하는 방식을 이용하고자 했다. 하지만 유저의 프로필이 변경될 때 또다시 서버로부터 데이터를 불러오는 과정에서 응답시간 문제로 인해 사용자의 경험을 헤치는 문제가 있었다. 이는 Alert창을 이용해 관련 공지를 했고, 데이터를 불러오는 과정에서 다른 기능은 계속해서 사용할 수 있도록 했다.
  
  
• 로그인 기능은 구현하지 않는 방향으로 생각했지만, 사용자의 프로필을 저장해야될 이유가 프로젝트 중간에 생겼다.회원가입 할 때 발행되는 index 값을 이용해서 사용자를 판별했고, 로그인에 성공했을때 로컬 저장소에 로그인 여부를 저장해 다시 접속했을 때도 로그인이 끊기지 않도록 했다. 회원가입 할 때 발행되는 index 값을 이용해서 사용자를 판별했고, 로그인에 성공했을때 로컬 저장소에 로그인 여부를 저장해 다시 접속했을 때도 로그인이 끊기지 않도록 했다.
  
  
• 혼자 프론트엔드 개발을 담당 하고있어, 시행착오도 많고 혼자 결정해야될 사항들이 많았다. 예를들어 로컬저장소로 asyncStorage와 EnryptedStorage 중 어느 것을 사용해야 좋을지. 어떠한 지도API를 이용하여 map을 띄워 경로를 추천하는 코드를 구현할지 등 생각해야할 것이 많았다.
  
  
• 디자인과 프론트 개발을 짧은 시간내에 동시에 진행해야 하다보니, 조금 더 쉬운 UI로 구현을 해야할지 스스로에 대한 갈등이 있었다. 하지만 유저가 더 나은 어플 사용경험을 있는 UI를 구현하고자 계속 연구하고 개발했다.
  
  
• 여러 페이지에서 같은 State값을 써야하는 경우가 많았기에 전역 저장소를 구현했다. 심플하고 코드 구현이 상대적으로 Redux보다 간단한 Recoil을 사용할 수 있었지만, 그동안 Recoil만을 써왔기에 Redux를 한 번 사용해보고자 했다. 그래서 변수를 저장할 저장소로는 useState, Redux, EncryptedStorage 총 3가지를 사용했다.