토이 프로젝트 회고 - React Native와 Firebase로 만든 단어 학습 앱, Pudding!

 

지난 주말과 오늘까지 시간을 할애하여 작은 토이 프로젝트를 진행해 보았다. 이름은 Pudding!이다. 카드 스와이핑, 플래시카드 등의 기능을 활용하여 단어를 외울 수 있도록 돕는 앱이다.

이름이 왜 푸딩이냐면, 1) 어감이 좋았고 2) (UI와 테마 색깔을 보고 눈치 챘을 수도 있겠지만) 영어 회화 학습 앱 Cake에 영감을 받아 만들었기 때문이다. 메인 기술 스택은 Firebase SDK(Auth, Firestore), React Native(Expo)를 사용했다. 

 

나흘 동안 홀로 해커톤 하듯 열심히 달렸는데, 새로 배우거나 깨달은 사실이 정말 많았다. 시간은 짧았지만 귀중한 경험들을 많이 해서, 잊기 전에 간략하게나마 정리하고자 한다. 

 

1. 좋았던 점

- 시작부터 끝까지, 리액트 네이티브를 제대로 복습했다. 나의 경우 지금 진행 중인 장기 프로젝트를 통해 리액트 네이티브를 접했는데, 개발 팀에 후발 주자로 들어간 탓에 초기 세팅에 대한 경험이 아쉬운 상태였다. 가령 파이어스토어 쿼리는 잘 날리지만 RN에 파이어베이스를 끼얹는 건 자신이 없었다. 하지만 이번 프로젝트에서는 내 손으로 직접 파베를 세팅하고, 전체 네비게이션 구조를 설계했다! 비록 엑스포의 큰 은총을 누린 덕에 bare한 RN에 비해 간편하게 프로젝트를 시작할 수 있었지만, 그래도 무에서 유를 창조하는 것은 매우 특별한 경험이었다. 

- 크로스 플랫폼 앱을 처음으로 구현해 보았다. 지금 꾸준히 진행 중인 프로젝트에서는 사정 상 RN으로 ios 앱만 개발하고 있다. 때문에 '크로스 플랫폼을 지원한다'는 특장점을 제대로 경험해 볼 수가 없었는데, 이번 프로젝트를 계기로 안드로이드에서도 잘 돌아가는 앱을 만들어 볼 수 있었다. OS에 따라 화면 전환 애니메이션, 컴포넌트, 스타일링 등을 조정하는 것이 재미있었다. 특히 스택 네비게이션에서의 기본 스크린 전환이 OS마다 달라서, 별도로 설정(cardStyleInterpolator)해 주어야 한다는 점이 새로웠다. OS에 상관 없이 같은 화면을 띄워주기 위해, 안 쓰는 안드로이드 디바이스를 꺼내 테스트도 했다. 

기념사진도 찍었다. 가짜 아이폰 11과 진짜 갤럭시 A6..

- 엑스포를 경험해 보았다. 앞서 계속 언급한 RN 장기 프로젝트의 경우 React native cli를 사용하고 있다. 보통 엑스포에서 native cli로 넘어가는 경우가 많은데, 나는 반대였다😅엑스포에 대한 인상을 요약하자면 편리한 대신 무겁다고 할 수 있을 것 같다. 하지만 이번 프로젝트는 매우 소규모였기 때문에, 편리한 부분이 더 컸던 것 같다. 특히 실제 디바이스에서 제작 중인 앱을 쉽게 돌릴 수 있는 기능이 참 좋았다. 또, 간단한 초기 세팅도 만족스러웠다. 특히 커스텀 폰트 설정을 하면서 깜짝 놀랐다. 너무 쉬워서!

어떻게 하냐면, expo-font라는 모듈을 이용하여 앤트리포인트(수준의 상위 컴포넌트)에서 다음과 같은 함수를 작성한 후,

const fetchFonts = () => {
  return Font.loadAsync({
  // asset 폴더에 미리 다운받아 놓은 웹폰트들이다.
    'Sriracha-Regular': require('../assets/fonts/Sriracha-Regular.ttf'),
    'GothicA1-Regular': require('../assets/fonts/GothicA1-Regular.ttf'),
    'GothicA1-Light': require('../assets/fonts/GothicA1-Light.ttf'),
    'GothicA1-Bold': require('../assets/fonts/GothicA1-Bold.ttf'),
  });
};

  componentDidMount에서 호출 하면 된다. 그럼 끝! 적용 당시 공식 doc을 보면서도 이게 진짜 끝인가 의아했던 기억이 난다. (React native cli에서 폰트 적용을 할 때, XCode한테 당한 게 많아 그랬던 것 같다. 외계어 같은 온갖 설정 항목들..)

- 나흘 간 프로젝트에만 몰두한 것. 지난 주 금요일 늦은 퇴근 후 월요일 저녁까지(코드 마무리는 늦은 저녁에 끝났지만, README 파일 작성까지 합치면 자정이 되어 끝난 셈이다), 해커톤을 혼자 치르듯 밤낮 없이 코딩을 했다. 다른 생각 없이 만들고자 하는 것에만 집중을 하니, 기능 하나가 구현될 때마다 정말 뛸듯이 기뻤다. 또 평소 내가 RN에 대해 얼마나 이해하고 있는지 궁금했는데, 이번을 계기로 뭘 모르고 아는지가 명확해지기도 했다. 이렇게 개발에 집중하는 시간을 마련하기가 쉽지 않은데 여러모로 좋은 기회였다.

- 앱 이름이 귀엽고 멋지다. 😎

- 꽤 고심하며 깃헙 리드미를 작성했다. 그다지 길지 않지만, 굉장히 고민하면서 작성했다. 예전에 만든 레포지토리에서는 이렇게 각잡고(?) 리드미를 작성한 적이 없었기 때문이다. 어떤 기준으로 내용을 채울지 생각하다가 '누가 읽을까'를 최우선으로 고려하기로 했다. 그래서 나온 아이디어가 아래 세 가지였고, 최대한 실제 내용에 반영하려 애썼다.

  1. 해당 레포지토리가 공개되었을 때, 이게 대체 어떤 프로젝트인지 빠르게 들여다 보고 싶은 사람을 위해 기능에 대한 간단한 설명을 gif 이미지와 함께 올리자.

  2. React native expo나 firebase 등에 익숙지 않은 사람도 있을 수 있으니, 설치 부분에서 관련 자료를 같이 첨부해 주자.

  3. contribution을 하고 싶은 사람들과 유저 일반을 위해, 현재 앱에서 무엇이 문제이고 향후에는 어떤 계획이 있는지 명시하자.

지금 pudding!의 레포지토리는 프라이빗으로 되어 있지만 조만간 퍼블릭으로 바꿀 예정이다. 그렇다면 손님들이 늘 방문할 수 있는 공간이 될 테고, 잘 쓴 리드미가 더 중요해지겠구나 하는 생각을 했다. 다른 사람들이 쓴 좋은 리드미를 유심히 살펴, 내 리드미에 적용할 수 있는 게 있을지 꾸준히 찾아보아야겠다.

 

2. 어려웠던 점

- 파이어스토어(의 noSQL) 데이터베이스 구조 짜기. 아직까지 noSQL이 낯설어서, 매우 간단한 프로젝트였음에도 데이터 구조 설계를 하는 데 삽질을 많이 했다. 그래도 '화면에 랜더되는 것은 독자적인 컬렉션, 그렇지 않은 것은 doc의 필드로 하자'는 나름의 대원칙(?)을 수립하게 되었다.

- 디자이너나 서비스 정책 기획서 없이 무엇인가 만들기가 쉽지 않았다. 어떻게 해야 좋은 앱을 만들 수 있을지, 어떤 앱이 사용하기에 좋을지 하는 고민을 많이 하고 싶다.  

- 내가 딱 원하는 오픈 API가 없었다는 점. 한글 뜻, 영어 단어, 난이도 정도가 제공되는 학습 api를 찾고 있었는데 아무리 살펴도 나오지 않았다. 결국 인터넷 상에 떠돌아다니는, 수능 영단어 1800개가 담긴 엑셀 파일(자세히 보면 오타도 엄청 많다)를 JSON화 하여 데이터베이스에 올렸다. 옥스포드 사전 API가 공개되어 있는 것으로 아는데, 앞으로 어떻게 Pudding!에 접목시킬 수 있을지 방법을 한 번 찾아봐야겠다. 

- expo에서는 invertase의 firebase-react-native를 쓸 수 없다. expo 공식 docs에서도 '지원 안 됨!'하고 명시하고, 대신 firebase web sdk를 쓸 것을 권유하고 있다. 참 안타까운 일인데, rn용 sdk와 웹용 sdk 둘 다 써본 사람으로서 바로 눈치챌 수 있을 만큼 웹 sdk가 훨씬 느렸다. 특히 인증 과정에서 속도가 심각해서, '이 정도라면 사용자 경험을 위해서라도 파이어베이스 웹 사용은 지양하는 것이 낫겠다' 싶을 정도였다. expo에서 firebase-react-native를 지원되지 않는 것에 꽤 많은 유저들이 불만을 품고 있는 모양이던데, 지원될 가능성은 정말 미미해 보인다.,

- 안드로이드 머신에서 개발 모드로 앱을 실행할 때 자꾸 타이머 관련한 warning 메시지가 여러 개씩 떴다😫 관찰해보니 파이어스토어로 비동기 요청을 할 때마다 출력이 되고 있었다. 처음에 나는 '내가 비동기 함수를 얼마나 괴상하게 썼기에 이런 일이 발생하나' 하고 애꿎은 코드나 들여다봤다. 하지만 다행히 구글링을 통해, 내 잘못이 아니라 지나치게 느린 파이어베이스 웹과 참을성 부족한 엑스포의 조합 때문이라는 사실을 깨달았다. 참고

 

3. 앞으로 하고 싶은 일

- 계획했던 부가 기능 더 구현하고, 버그 잡아서 완성도 높이기.  

- 리액트 네이티브와 관련한 블로그 포스팅 열심히 하기. 이번 프로젝트를 진행하며, RN에 대한 자료가 별로 없다는 사실을 새삼 느꼈다. 아무래도 자라나고(?) 있는 기술이라 더욱 그런 것 같다. 이번 토이 프로젝트를 하면서 어떤 부분을 포스팅 하면 다른 사람들에게 도움이 될지 아이디어를 몇 얻었는데, 조만간 여유가 생길 예정이니 그때부터는 간략하게라도 튜토리얼을 하나씩 만들어볼까 한다.