P & D
Research and Development가 아니라 Philosophy and Development의 P & D 입니다. 개발글에 있어서 새로운 시도를 하고 있습니다. 그저 개발기를 적어 내려가는 것이 아니라, 어떤 철학을 가지고 개발을 해나가고 있는지, 어떤 시도를 했는지, 개발은 어떻게 하는지를 적어 내려갑니다. 이번 시리즈는 도움을 주고 받는 방법 - 이타인클럽의 철학과 개발 과정을 다룰 것입니다.
이전글 - [철학과 개발] #12 동네 사람끼리는 서로 돕고 싶어한다
철학: 블록체인 기술을 적용하는 것이 필수적인가?
실시간 도움 주고 받기 앱을 만들 때, 어떤 것들을 구현해야 할지 생각해 보게 됩니다. 온라인 도움 주고 받기도 그렇지만 오프라인으로 집을 방문하여 도움을 주는데 확실한 신원인증 방법이 필요하다고 생각했습니다.
그래서, 당시 블록체인 기술도 습득도 했고, 향후 유망한 기술이기에 적용하면 멋져 보일 거 같고, 당근마켓보다 확실한 신원인증을 구현할 수 있겠다는 생각을 했습니다.
그런데 과연 앱에 블록체인 기술을 적용하고 안하고가 중요할까요?
이 질문을 사용자 입장에서 생각해 보게 됐습니다.
사용자는 블록체인이 어떤 기술인지도 잘 모릅니다. 그것이 신원인증, 보안을 높여준다고 해도 이해하기 어렵습니다. 결론적으로 블록체인 기술은 필수적인 것이 아니라고 판단했습니다. 유망 기술이 탑재된 앱이라고 홍보하긴 좋을 수 있지만, 사용자 입장에서 블록체인 기술이 적용되지 않아도 겉으로 느끼는 것은 같을 것이라고 생각했습니다.
필수기능1 - 메시지 발신 및 수신, 1:1 채팅
그렇다면 가장 필수적인 기능은 무엇일까요?
그것은 바로 도움을 요청을 하면 모든 사용자에게 빠르게 전달되고, 제일 먼저 요청을 수락한 사람과 안전하게 연결되는 기능이라고 판단했습니다. 추가적으로 연결된 사람과 1:1 채팅을 가능하게 하는 것입니다.
매우 간단한 내용이지만, 이와 같은 앱을 처음 만들 때는 무척 난감합니다. 서버를 어떻게 구축해야 하며, 채팅관련 DB를 어떻게 구성해야 하는지.. 많은 고민을 하게 됩니다.
필수기능2 - 다중 언어 지원
또, 앱을 개발하면서 다중언어를 지원하는 것이 필수적이라고 판단했습니다. 앱을 기획하면서 걱정되는 부분은 영어권 사회보다 한국 사회가 도움 주고 받기에 거부감? 같은 것이 있다는 것이었습니다. 그리고 우리 주변의 외국인들이 도움 요청을 더 많이 할 것이라고 생각했습니다.
그래서 개발 초기부터 영어와 한글을 지원하는 방법을 고민하였습니다.
블록체인 기술은 기본적인 앱이 동작하고 사람들의 반응을 보고 추후에 구현하는 방향으로 결정했습니다.
개발
위에 언급한 필수기능을 구현하는 것은 간단해 보입니다. 메시지를 사용자 전체에게 보내고, 먼저 수락한 사람과 채팅으로 연결하면 끝입니다. 아 영어, 한글 동시에 지원해야 하는 것도 있습니다. 요즘은 많은 앱들이 다중언어를 지원하니 간단해 보일 수 있습니다.
그리고 안드로이드 앱과 아이폰 앱을 만들고 싶었습니다.
간단해 보이지만, 앱 개발 경험이 부족한 제게는 머리를 띵하게 만드는 일이었습니다.
개발 Framework
이 앱을 개발하기 전에 리액트를 좀 배워서 블록체인 기반의 꿈일기를 공유하는 웹페이지를 개발한 적이 있습니다. 그때 안드로이드 앱, 아이폰 앱을 하나의 소스로 빌드할 수 있다는 것을 알게 됐습니다. 솔깃하죠. 누구나 바라는 일이 아니겠습니다. 안드로이드/아이폰 앱을 한 번에 만들 수 있다니까요..
이런 것을 cross framework라고 하는데, 웹 프로그래밍에 있어서 다음 세 개가 유명합니다.
- AngularJS : 구글이 공식적으로 개발, 지원
- React Native: 페이스북이 공식 개발, 지원
- Vue.js: 구글 퇴사 직원이 키워 내고 커뮤니티가 개발, 지원
여기서 React Native만 스마트폰 앱을 만들 수 있는 프레임워크입니다. 최근에 구글에서 Flutter라는 크로스 프레임워크를 개발하고 홍보하고 있습니다. 이것은 Dart라는 언어를 사용하고 리액트 네이비트처럼 안드로이드/아이폰 앱을 하나의 소스에서 빌드할 수 있도록 합니다. 단점은 사용자가 리액트 네이티브보다 작다는 것입니다. 따라서 문제가 생겼을 때 해결하기가 어렵습니다.
그래서 개발 프레임워크는 대세인 리액트 네이티브(앞으로 대세가 유지될지는 모르겠습니다)로 결정했습니다.
개발 프레임워크: 리액트 네이티브
블록체인 프레임워크 검토
모바일 앱에 블록체인의 스마트컨트랙트와 연동하는 기능을 추가할 수 있습니다. 생짜로 구현할 수도 있지만 이더리움의 경우 Truffle이라는 프레임워크가 비교적 많이 쓰이고 있습니다. 찾아보니, Truffle에 Drizzle이라는 리액트 네이티브용 툴박스가 존재하는 것을 알게 됐습니다.
https://www.trufflesuite.com/tutorials/drizzle-and-react-native
https://github.com/truffle-box/drizzle-react-native-box
이 툴박스를 발견하고 빙고를 외치고 좋아했지만, 한가지 문제가 있었습니다. 당시 리액트 네이브티가 059에서 0.60으로 메이저 업데이트가 진행되던 시점입니다. 많은 내용이 개선되어 0.60을 사용하는 것이 이로운데, 아쉽게도 drizzle 툴박스는 0.59만 지원했습니다 (지금도 0.59만 지원하는 걸로 나타납니다).
그래서 아쉽게도 블록체인 기능 추가는 과감히 버렸습니다.
리액트 네이티브 버전: 0.60 이상
서버
예전에 일반 개발자가 서버를 사용할 필요성은 많이 없었는데, 요즘은 서버가 없이 돌아가는 앱이 별로 없는 거 같습니다. 사용자 DB나 채팅 DB, 로그인 관리, 데이터 저장 등 서버가 없이는 제대로 된 서비스 구현이 어렵습니다. 이럴 때 보통 생각하는 것이 아마존의 AWS 클라우드 서버입니다. 요즘은 MS의 Azure도 있고, 구글의 클라우드 서비스도 있습니다.
무엇으로 할까 고민하던 차에 @jacobyu님께서 firebase를 소개해 주셨습니다. 이건 정말 환상이더군요. firebase를 서버라고 하지는 않고 serverless 서비스라고 하는 거 같습니다. 서버에세 제공하는 대부분의 기능들이 firebase에서 지원되고 있습니다. 그것도 무료로!!!! 와우! 지원되는 기능은 아래 그림처럼 매우 다양합니다.
개발하고자 하는 앱에서 firebase의 다음과 같은 기능을 사용합니다.
- cloud messaging: 앱 사용자 전체에 push notification 발송
- storage: 사용자의 프로필, 채팅 첨부 이미지 등 저장
- database: 사용자 db, 채팅 db 관리
- hosting: 앱 설명을 위한 홈페이지 호스팅
- authentication: 앱 로그인 관리 (전화번호 가입, 이메일 가입/인증)
- functions: DB의 변경사항 발생했을 때, push notification 전송 (cloud messaing과 연동)
- crashlytics: 앱이 죽는 경우 원인 로그, 분석
너무나 훌륭한 기능들이 무료로 제공되니 이보다 좋은게 어딨습니까.. 물론 사용량이 많아지면 요금을 내야 합니다만 왠만한 비인기 앱의 경우는 무료로 이 기능들을 전부 사용할 수가 있습니다. 이것 외에도 많은 기능들을 지원합니다. firebase는 구글에서 인수했는데, 이렇게 충성 고객을 모으는 비즈니스를 하고 있는 것이지만 영세 개발자에겐 매우 좋은 선택입니다.
서버: Firebase 사용
구현 내용
요약하면 주요 구현 플랫폼 및 내용은 다음과 같습니다.
- React Native ^0.60
- Firebase
- 전화번호 로그인
- 한글, 영어 다국어 지원
- 1:1 채팅, 채팅 리스트
- 방해금지시간 설정
- 주변 사용자 표시
- 도움 랭킹
도움 주고 받는 앱 helpus
앱 사용자 중 다음과 같은 도움이 가능하 사용자들이 있습니다.
- 최면 상담, 치료
- 영어, 일본어 관련 문제
- 건강 상담, 심리 상담
- 숙박, 용돈 (미확인)truffle, drizzle, ethereum
react-native 지원 버전
물론, 저도 명상, 루시드 드림 관련 상담이 가능합니다.
실시간 도움 주고 받기 앱 helpus가 구글 플레이와 애플 앱 스토어에 출시되었습니다.
구글 플레이: https://play.google.com/store/apps/details?id=club.etain.helpus
애플 앱 스토어: https://apps.apple.com/us/app/helpus-instant-help-in-town/id1496615309
소개 영상
사용법
보다 자세한 내용은 홈페이지를 참고해 주세요.
https://etain.club