리액트 네이티브로 버스 시간표 앱 만들기 : 마음먹기부터 구현 전까지

올해 초부터 앱에 대해 꾸준히 생각했다.  

나는 부산 강서구로 출퇴근 셔틀 버스를 애용하고 있는데, 부산경제진흥청에서 운영하는 것으로 보이는 앱이 잘 작동하지 않을 때가 있었다. 난 이게 IOS 만의 문제인 줄 알았다. 직장동료에게 물어보니 안드로이드도 마찬가지였다. 

가장 큰 문제는 이 부분이었다. 가끔 출퇴근 시간표가 제대로 리스트업되지 않는다는 것.  

 

 

 

출근 전날 시간표를 확인하고 싶어도 알 수가 없다. 아마도 서버에서 시간표를 요청하거나 혹은 특정 시간대에만 확인할 수 있도록 처리를 한 것이 아닐까 싶었다. 

 

 

정리하자면 이번 프로젝트는 ‘언제든 볼 수 있는 버스 시간표’ 라는 다소 일차원적인 문제를 해결하기 위함이 우선이다. 그리고 두번째는 협업에 대한 감각을 회사 외부에서 느껴보고 리엑트네이티브를 처음 사용하는 것이 차순위가 되겠다. 

 

이번 프로젝트는 petiteZel과 함께했다. 어떤 부분을 케어하고 도움을 받아야 같이 시너지 낼 수 있는지 알고 있어서 좀 수월했다.

 

 

아무튼 사족이 길었다. 어떻게 만들었는지 한번 살펴보도록 하자. 

 

 

---

 

컨셉잡기 

우선 앱을 만들기 전에 무엇이 필요할까 생각했다. 동료는 리액트 경험이 있었지만 난 리액트 경험도 없었다. 더군다나 디자인은 우리 둘다 쥐약이었다. 우리는 앱의 어떤 컨셉을 잡기 위하여 레퍼런스를 참조하기로 했다. 

 

 

우리가 참조한 앱이다. 디자인 관련 레퍼런스는 pinterest에서 구했다. 감사합니다 핀터레스트.

 

전체적인 색깔은 좀 산뜻한 녹색을 쓰는게 어떨까 제안했다. 동료는 아주 긍정적으로 답해줬고. 우리는 하얀색 + 초록색 조합의 컨셉으로 밀고 나가기로 했다.

 

 

 

데이터 관리하기 

버스 시간표는 부산 경제진흥청에 ‘정보공개청구’ 제도를 통해 정보공개청구 신청했다. 대학생 때부터 필요한 프로젝트나 자료에 대해 정보공개청구를 적극적(?)으로 활용한 덕에 데이터 수집은 생각보다 수월했다. CSV 파일로 변환할 것을 고려하여 excel 파일로 요청했으며 약간의 가공하여 데이터 수집은 끝냈다. 

문제는 어떻게 보여줄 것인가 인데, 처음에는 클라우드 가상서버에서 만들어서 관리를 할까하다가도, 역시 비용이 걱정됐다. 그리고 클라우드가 꺼지면 해당 앱은 영원히 그 목적을 달성할 수 없게 된다. 

웹호스팅 업체에서 저렴하게 혹은 무료로 제공되는 데이터베이스를 통하여 필요한데이터를 요청만하면 되지 않을까 싶어서 고려해봤다. 지금은 웹호스팅 업체에서 돌릴 프레임워크 작업하면서 편하게 만들겠지만 그때는.. .어케하지.. 좀 귀찮네... 하면서 보류했다. 

마지막으로 고려한 방법이 sqlite다. Sqlite는 앱 자체에 데이터베이스를 붙여서 설치하는 방법이다. 이러면 데이터 자체를 관리하는 것도 편할 것 같다고 생각했다. 쿼리문도 기존에 작성하던 쿼리문과 크게 다르지 않았다. 

 

우리는 SQLITE를 선택하고 작업하기로 결정했다. 

• 작업범위 및 역할 배분 

작업범위는 아래와 같았다. 

1. 최소 기능 배포 범위 

1. 시간표 

1. 지도 

1. 실시간 위치 

1. 추가 기능 배포 범위 

1. 경로 

1. 도착 위치 근처 도달 시 푸시 알림 

일단 시간표는 petitzel이, 지도는 내가 맡기로 했다.  

 

 

이 다음은 구체적인 구현 방법에 대해서 설명토록 하겠다.