백엔드 개발자가 리액트 네이티브로 달력 앱을 배포해보았습니다.

저는 2016년부터 꾸준히 백엔드 개발을 해왔습니다. 백엔드 개발하면서 백오피스개발도 해왔기에 기본적인 프론트엔드 개발 기술은 알고 있는 상태였습니다. 웹 프론트엔드 기술 중 바닐라, 리액트, Nextjs, Angularjs 를 활용해서 웹 프론트엔드를 개발해왔지만 앱을 만들어 본적은 없었어요.

퇴근 회사를 퇴사하면서 이번에 앱을 만들어 보고자 크로스 플랫폼에 대해서 공부했습니다.

리액트 네이티브 vs 플러터

빠르고 간단하게 앱을 만들고 싶었기에 당연하게 크로스 플랫폼 기반으로 앱을 만들기로 정했습니다. 그리고 리액트 네이티브와 플러터를 비교해보았고 저는 리액트 네이티브 를 선택했습니다.

제가 리액트 네이티브를 선택한 이유는…

1. 자바스크립트(타입스크립트)로 개발이 가능합니다.

자바스크립트로 개발을 할 수 있다는 것은 굉장히 큰 메리트였습니다. 웹 프론트엔드 개발 경험이 있어서 자바스크립트에 대해서는 크게 불편함이 없었기에 언어에 대한 허들이 낮았기에 쉽게 접근 할 수 있을 거라 생각 했습니다. 그리고 플러터를 개발하기 위해 Dart(다트) 언어를 공부해도 되지만 제가 다시 앱을 만들지 않는 이상 Dart 언어를 사용할 일은 없을 거라 아마 다시 까먹게 될 언어라고 생각했습니다.

2. 프레임워크 생태계가 리액트 네이티브가 더 커요.

리액트 네이티브는 리액트 기반이기 때문에 플러터보다 먼저 오픈소스 생태계가 활성화 되어 있었기 때문에 구글링으로 빠르게 이슈를 해결할 수 있을 거라 생각했습니다. 앱 개발에 있어서 이슈 해결을 위한 프레임워크 생태계는 생각보다 많이 중요하기 때문입니다.

3. 플러터의 장점이 저에게 있어선 큰 장점이 아니었어요.

플러터가 리액트 네이티브보다 성능면에서 좋다고 합니다. 제가 플러터를 경험해보지 않았고 직접 경험해보지 않았지만 확실히 성능 측면에서는 차이가 있다고 해서 조금 고민을 했습니다. 하지만 제가 만들 달력 앱은 간단한 앱이기 때문에 애니메이션, 렌더링, 데이터 처리 등등 성능 측면에서 큰 문제가 되지 않을 거라 생각했습니다. 만약 성능 측면에서 많이 고려해야하는 앱을 만들 예정이었다면 플러터를 고려하지 않았을까 생각됩니다.

위 3가지의 이유로 리액트 네이티브를 선택하였고 개발을 시작했죠.

라이브러리 선택의 갈림길

개발은 생각보다 순조로웠고 어렵다는 생각이 들지 않았습니다.

1. 상태 관리 라이브러리는 무엇을 맞을까? (Redux vs Recoil)

과거 리액트 시장에서는 상태 관리 라이브러리는 당연히 Redux 였습니다. 하지만 몇 년전 recoil 이라는 새로운 라이브러리를 리액트에서 만들었고 많이 사용되고 있죠. Redux 는 과거부터 사용해왔기에 당연히 생태계와 안정성은 많은 사람들에게 인정받아왔고 지금이 많이 활용되고 있습니다. 하지만 저는 Recoil 을 사용하기로 했습니다. 이유는 상태 관리가 그렇게 복잡하지 않을 뿐더러 복잡하더라도 Redux 보다는 리액트에서 직접 만든 Recoil 이 저에게 있어서 좀 더 신뢰도가 높기 때문입니다. 사용성도 편한 것 같고..

2. 스타일링 라이브러리는 무엇이 좋을까?(Styled Component VS Style Sheet)

처음 개발 시작 할 때에는 Style Sheet 를 사용했어요. 테마 기능을 넣으려고 보니 Style Sheet 로는 한계점이 보였고 과감하게 Styled Component 로 옮겼습니다. 테마 관리에 있어서는 Styled Component 가 훨씬 편하기 때문입니다.

프레임워크 생태계가 방대하다는 것은 다양한 라이브러리가 존재하고 개발자 취향에 따라 원하는 라이브러리를 선택할 수 있다는 점이지만 때로는 선택을 하는데 너무 많은 시간을 소비해야하는 단점이 있는 것 같네요.

피그마로 앱 아이콘, 앱 소개 이미지를 만들어 보았어요.

달력앱을 만드는 것은 어렵지 않았어요. 오히려 기본 기능을 개발 후 배포하는 것이 더 어렵고 힘든 작업이었습니다. 혼자서 하려니 생각할 것이 너무나 많았습니다.

디자이너가 만든 피그마를 확인해서 개발한 적은 있지만 직접 피그마로 디자인해보는 건 처음 이었어요. 다행히 피그마에는 앱 아이콘, 앱 소개 이미지를 위한 다양한 템플릿이 있었고 이것 저것 사용해보다가 초보인 제가 사용하기 쉬운 템플릿으로 앱 아이콘과 앱 소개 이미지를 제작했습니다.

• 앱 아이콘 템플릿
• 앱 이미지 템플릿

앱 노출 극대화를 위한 키워드 리서치, 앱 소개글 작성하기

흔히 ASO 라고 해서 앱 스토어에서 앱 노출 극대화를 위해 키워드 리서치를 합니다. 키워드 리서치할 때 많이 사용하는 툴은 드래곤 메트릭스와 같은 툴을 많이 사용하지만 저는 ChatGPT 를 사용했어요 귀찮…

결론

백엔드 개발자인 제가 앱을 배포해본다는 것은 좋은 경험이었고 저와 같이 일하는 다른 팀원분들의 고충도 이해하게 되었습니다.