seoul app contest with node and react native

Posted in Javascript

2017 서울 앱 공모전

Github repository

2년전 참여했던 서울 앱 공모전을 다시 참가하게 되었는데... 똑같이 10월 31일까지 제출이었네요. 2015 서울 앱 공모전 그때의 실패를 밑바탕으로 다시 한 번 도전하게 되었습니다.

결과부터 말하자면!!! 아직 결과는 안나왔습니다... (쪼오금 기대를 하고는 있습... 읍읍)


1. 서론

2년전 서울 앱 공모전에서 씁쓸함을 맛봤던 기억이 계속 생각이 났었습니다. 회사에 이력서를 쓰면서도 실패함에 있어서 많은 것을 배웠습니다. 라고 썼지만, 정작 시간을 들이고 실패를 맛본건 스스로였기 때문에 언젠가 다시 한 번 도전해보고 싶었습니다. 그래서 8월에 시작해서 시간이 부족했던 부분도 있었기에 7월 말부터 팀원을 구하기 시작했습니다. 함께 인턴을 했던 디자이너 K님을 우선 섭외하여 15년도에 진행한 아이디어를 발전시켜 강화된 가이드 매칭 시스템을 만들기로 하였습니다. 하지만 웹이 아닌 앱을 만들어야 했고, 네이티브를 경험해본 적이 없었기에, 졸전을 함께한 안드로이드 개발자 L님을 추가적으로 섭외하였습니다. 사공이 늘어나자 배가 산으로... 아이디어 회의부터 다시 시작하게 되었고 결국 8월까지 아이디어 회의로 시간을 보내게 되었습니다. 서울시의 산책로를 소개해주는 "설래발" 프로젝트를 진행하기로 하였고 자연스레 서버 개발자가 되어 API를 모두 만들었습니다. 하지만, 안드로이드 개발자를 위해 서울시의 API 서울시 걷고 싶은 서울길 정보 를 살펴보니 좌표계가 뭔가 이상했습니다... GRS80TM 라는 좌표계를 사용하였고, 이는 일제 강점기때 만들어진 동경 좌표계였습니다. 지도 API를 제공해주는 네이버나 다음, 구글 등에서 지원하지 않는 좌표계였고, 이를 문의하기 위해 서울시에 전화를 걸어보니 무려 13번이나 전화를 돌려주시는;;; 엄청난 일을 겪었습니다. 14번째로 돌려주셨을때는 3번째? 정도에 전화를 돌려주셨던 분께 다시 돌아가서 포기하게 되었습니다. 그러던 와중에 안드로이드 개발자가 취직을 했다는 소식을 전해주었고, 안타깝게 팀이 와해되게 되었습니다.

9월 초, 완전 초반부터 함께 프로젝트를 진행한 디자이너 K님과 다시 시작해보기로 하고 기획자 C님을 영입합니다. 안드로이드나 ios 개발자가 무조건적으로 필요했지만, 지인들만으로 구하는 것에는 한계가 있었습니다. 회사 동기들 또한 안타깝게도 시간이 안된다고 했기에, 15년도처럼 웹앱을 해야하나... 고민이 되었습니다. 그러던 찰나에 평소 관심이 있었던 react-native를 생각하게 되었고, 그러던 사이 아이디어 확정과 기획이 뼈대를 갖추며 10월이 되어가고 있었습니다. 마땅한 대안이 없었기 때문에 무작정 간단한 공부 후 개발을 시작하였습니다. API를 다 만들고 나서도 인력에 대한 대안이 없었기에 react-native로 개발을 시작했습니다.

2. 시작

react native로 개발을 하면서 제일 힘들었던 best 5 정도에서 처음 세팅 및 도입부는 단연 최고 난이도입니다. 다른 튜토리얼들과 다르게, 그새 업데이트가 되서 그런지 시작 파일도 index.android.js 형식에서 index.js 형식으로 바뀌어 있었고, 네이티브 지식이 없는 상항에서 manifest 파일 수정이나 bundle.gradle 에 대한 수정은 정말 이해하기가 힘들었습니다.

사실 react native 개발을 하면서 크게 힘들었던 부분은 third party 부분에서 서로 꼬인 부분들은 정말 애들 장난이라고 할 수 있게 만들어 준 부분이 native적인 부분들이었습니다. native 지식의 부족으로 Application -> 다중 Activity 구조로 들어가야 하는데, react native에서 Activity를 따로 생성(있는데 못찾은 걸수도...!)할 수 없었습니다. 응? react native는 기본적으로 단일 Activity 구조잖아요? 라고 할 수 있으나, 다중 Activity 구조에 내부적인 기능을 react native로 한다면 월등한 시너지 효과가 난다는 갓-react native 안드로이드 개발자님 (밑에서 설명)께서 알려주셨습니다.

3. 이슈

1) react-navigation

react-navigation이 현존하는 navigation 라이브러리에서는 제일 많이 사용된다는 점을 알고 이 라이브러리를 선택했으나, 사용하고자 하는 일에 맞진 않았던 것 같습니다. 사용하고자 한 부분은 tab navigation > tab navigation .... 같이 동일한 네비게이션이 중첩되는 구조로 사용되는 것이었는데, 처음에는 최대한 react-navigation에 의존하여 개발하려고 끙끙거렸지만, 어느정도 익숙해진 후 navigation 위에 다시 올라가는 navigation은 직접 구현하거나 했습니다.

2) react-native-google-signin

구글 plus 서비스의 로그인을 유지하는 기능인데, 로그인 내역을 로그아웃 후, revoke 해도 이전 로그인 기록으로 로그인하기 와 같은 부분에 내역이 그대로 남아있습니다. 이 부분은 구글 plus 설정에 직접 들어가서 지워줘야 했고, 왜 제대로 지워지지 않는지는 라이브러리 자체 이슈인 것 같습니다.

3) 뒤로가기로 바탕화면에 갔다가 다시 앱으로 들어오면 재실행이 되는 현상

뒤로가기 버튼을 눌러 바탕화면으로 나갔다가, 다시 앱을 눌러 돌아오면 앱이 한번 더 실행되는 이슈가 발견되었습니다. 레퍼런스와 지인의 도움으로 해결은 했으나, 이 역시 native적인 부분이 있어 해결하는데 어려움이 있었고, 지인의 설명으로는 안드로이드와 ios를 동시에 지원하려다 보니 생기는 충돌점이 아니었나... 생각한다고 하시네요.

4) 느린 tab 전환

이 부분은 아직 수정되지 않았느나, 해결 방법에 대한 생각을 끝마친 상태입니다. 탭을 전환할 때 마다 새로운 화면을 reflow & repaint 할 것이 아니라, 화면을 토글하는 방식으로 보여주는 것이었는데, 시간에 쫓김과 개발 초기에 react-navigation에 많이 의존하다 보니 생긴 이슈였습니다.

4. 도움

이슈 탭의 3번 이슈를 해결하기 위해 스캐터랩 을 무려 제출 하루전에(...이슈가 3~5개 쯤 남아있었는데;;) 방문했습니다. 찾아간 레퍼런스와 도움을 받아 이슈를 잘 해결할 수 있었습니다. (모두 화기애애한 분위기(?)의 독특한 회사였습니다.) 또한 서론에서 언급한 다중 Activity 구조도 스캐터랩 개발자분들이 알려주셨는데, 이 영역부터는 native 지식이 없으면 아예 할 수가 없을 것 같네요... (라이브러리를 찾아보니 third party로 Activity를 추가할 수도 있는 것 같습니다. 하지만 별로 내키지 않네요.)

5. 단점

react native를 처음 하면서 느낀 단점은 native 지식이 없으면 힘들다는 점입니다. (많이많이 힘들다...) 또한, android보다는 ios에 많이 힘을 주는 느낌을 받았고, 아직 이슈가 많아 불안정하다는 느낌을 받았습니다. 개발 당시 이슈는 600개 중반 정도에, 제가 해결하지 못한 이슈들 또한 3~4개 정도 등록이 되어있었고, third party 라이브러리들이 너무 무분별하게 존재한다는 점이었습니다. (대부분이 지속적인 개발이 없었음.)

6. 장점

이건 무조건 개발속도!!! 처음 써보지만, native 지식이 없지만 js만 안다면 프로토 타입은 후딱! 만들 수 있게 해주는 속도적인 장점이 있습니다. 하지만 이 장점도 앱의 난이도에 따라 고민해야 할 영역이 커진다고 생각합니다.

7. 발전 방향

개발이 끝나고 뿌듯함과 아쉬움이 정말 많이 남았습니다. 그만큼 많은 힘을 쏟았고 짧은 시간동안 많은 집중으로 개발을 했었습니다. 2~3가지의 수정 사항과 함께 기획서에서 deprecated 된 내용들을 다시 추가해볼 예정입니다.

image
image

좋은 결과가 있기를 기다리고 있고, 짧은시간동안 재미있게 (힘들게...) 개발했습니다. 처음 경험하는 내용들이 대다수였지만, 항상 새로운 프로젝트는 즐거운 것 같습니다. 다음에도 새로운 공모전이나 새로운 스킬셋을 익힐 기회가 있었으면 좋겠네요! 감사합니다~

프론트 개발을 좋아하고 꾸준히 공부하는 백엔드 개발자. 새로운 기술에 관심이 많음. React + Vue 개발 진행중. 현재 Kakaopay 재직중.