프로젝트 구조
Server : AWS, NestJS, Pm2
DB : Mysql, TypeORM
CI/CD : Github actions
Package Manager : Pnpm
Client : React, React-Native
<하루정리> 앱은 React-Native 안에 react-native-webview를 얹어 react로 개발한 클라이언트 화면을 보여주는 형태의 애플리케이션입니다. 네이티브 앱으로 개발하지 않은 이유는 심사에 소요되는 시간으로 인해 빠른 수정과 배포를 할 수 없다는 점이 불편하게 다가왔습니다. 그리고 추후에는 웹 서비스를 제공할 수도 있기 때문에 이렇게 개발했지만 역시 웹 개발과 네이티브 개발을 동시에 해야 하는 점이 귀찮게도 느껴졌습니다.
아쉬웠던 점
1. eas 빌드 과정
React-native 로 앱을 개발하면 expo라는 패키지를 통해 네이티브 설정이나 자잘한 것들은 고려하지 않고 빠르게 앱을 개발할 수 있습니다. expo가 다 해주기 때문입니다. eas(Expo Application Service)는 빌드부터 앱 배포까지의 일련의 과정을 편리하게 해 줍니다.
당연히 처음 시작하는 개발자라면 선택하지 않을 이유가 없죠. 하지만 eas 배포는 무료버전으로 사용하기엔 단점(오랜 시간 대기, 월별 정해진 배포횟수 등) 이 많았습니다. 따라서 처음에 뭣 모르고 eas를 사용하다가 불편함을 느낄 시점엔 유로 결제를 고민할 수밖에 없습니다. 하지만 저는 여기에 돈을 쓰고 싶지 않았습니다(너무 비싸기도 했고요). 그래서 이제 eas 없이 직접 XCode를 통해 앱을 빌드하고 배포하는 과정을 선택했습니다. 물론 번거로움이 따릅니다. 하지만 제가 원하는 시점에 기다림 없이 빌드하고 배포할 수 있다는 점이 편리했습니다.
expo는 강력한 툴이긴 하지만 eas는 잘 모르겠습니다.
2. webview 로 구현한 점
왜 굳이 webview로 구현해?라는 질문이 저도 처음엔 있었습니다. 그래서 react-native 만으로 개발하려고 했지만 IOS 심사 과정이 저를 괴롭혔습니다. 운이 좋으면 하루 만에 심사가 완료되기도 합니다. 하지만 주말이나 이럴 때는 한없이 기다려도 심사가 완료되지 않을 때도 있습니다. 최대 3일까지 소요됐던 적도 있습니다. 그래서 저는 지독한 애플 놈들의 심사를 최소한으로 받고 싶어 웹으로 개발하고 이 웹사이트를 webview로 감싸서 보여주자, 그러면 내가 원하는 시점에 수정도 하고 배포도 할 수 있을 거라 생각했습니다.
하지만 웹뷰로 감싸는 것이 관리 포인트가 더 많아지기도 하고 사용자 경험 측면에서 그리 좋지 않긴 합니다. 처음 웹뷰를 로드하는 시간이 길어지면 사용자는 첫 화면을 보는 데까지 걸리는 시간이 길어지는 셈이 되고 OS단에서 앱의 메모리를 정리하는 과정에서 웹뷰를 초기화 시켜 빈 화면이 떠있는 경우도 간혹 가다 존재합니다. 최대한 react-native-webview 옵션을 통해 해결하긴 했지만 정말 어쩌다 한번 발생하면 당혹스럽긴 합니다.
만족스러운 점
1. 모노레포
처음엔 Backend, FrontEnd, App 세 프로젝트를 하나의 프로젝트로 관리하려 했지만 Native 가 패키지 매니저의 제한이 좀 있어서 App 프로젝트만 따로 구성하고 Backend 와 FrontEnd는 turborepo로 하나의 레포지토리를 구성했습니다. 모노레포로 구성하니 빌드와 실행, 배포까지도 한 큐에 진행할 수 있어서 매우 편리했습니다.
2. CI/CD
Github actions 를 통해 yaml파일을 작성하여 CI/CD를 구성했습니다. feature 브랜치에서 개발하고 main 브랜치에 합병한 다음 원격 레포지토리에 push를 하면 빌드와 테스트를 거쳐 aws ec2 서버에 빌드된 파일을 전송하고 nestjs 프로세스를 재기동시키는 일련의 과정이 한번 yaml 파일을 잘 작성해서 구현해 놓으면 너무나 편리하게 배포를 할 수 있는 점이 좋았습니다.
3. 위젯 기능 구현
앱 위젯은 React-Native 와 관련 없이 온전히 Native 개발이기 때문에 처음엔 고민을 많이 했습니다. 하지만 할 일 정리의 경우 앱 실행 없이 바탕화면에서부터 확인할 수 있다면 엄청 편리할 것 같아서 구현했습니다. 구현할 때는 Native 관련 설정이나 라이브러리 설치 등 과정이 어려웠지만 그래도 하나 둘 해결해 나가면서 구현을 마쳤을 때는 너무 좋았습니다.
4. 푸쉬 알림 기능 구현
꼭 필요한 기능일까?라는 의구심이 들지만 있으면 좋지 않을까?라는 생각이 들어 구현한 기능입니다. 할 일을 앞두고 있는 경우 앱 푸시 알림을 통해 한번 더 상기시켜 주면 사용자 경험을 더 증진시킬 것이라 생각이 들었고 제 앱의 매력 포인트가 되었습니다. Firebase 설정과 푸시 서비스 구현이 쉽지 않았지만요..ㅎ
5. 소셜 로그인
앱의 개인 컨텐츠 강화를 위해서 로그인 기능을 추가했고, 로그인을 해야지만 가능한 기능들을 설정해 둠으로써 사용자를 로그인하게끔 유도를 했습니다. 물론 로그인 없이도 앱을 이용하는데 아무 불편함은 없지만 데이터 유지나 보존을 위해서 로그인 후 서버에 데이터를 저장하는 기능을 추가했고 추후 개인에게 맞춤형 콘텐츠를 개발할 의향이 있기 때문에 소셜 로그인을 구현했습니다. 처음엔 카카오 로그인만을 구현했지만 ios 심사에서 애플 로그인도 구현하라고 했기에 카카오 로그인과 애플로 로그인하기 기능을 구현했습니다.
추가 개발 계획
하루를 정리하는 사용자에게 가장 필요한 기능은 무엇일까 ? 를 고민하고 있습니다. 하루를 나눌 수 있는 채팅 기능을 구현하거나 다른 사람의 하루를 확인하거나 나의 하루를 공유하는 SNS 기능도 있으면 좋을 것 같습니다. 우선은 핵심 기능인 메모, 할 일, 가계부 기능을 최대한 강화하려고 합니다. 그래야 기존에 있는 Todo 앱이나 Memo앱을 사용하지 않고 제가 개발한 앱을 사용하는 사용자가 늘어날 테니까요.
'개발 프로젝트' 카테고리의 다른 글
Nodejs 메모리 leak 현상 해결하기 (0) | 2025.01.02 |
---|---|
[PyQt5] 자동 배포 프로그램 (2) | 2024.01.03 |
[PyQt5] 성경 프롬프터 프로그램 (41) | 2023.11.29 |
[Programmers] 숫자 카드 나누기 -Javascript (1) | 2023.10.28 |
Chrome Extension - Html Tag wrapper (0) | 2023.10.27 |