하루만에 앱 개발하고 출시하기 "Scroll Browser"
 |  |  |
|---|
eBook이나 웹툰이나 웹소설을 오랜 시간 볼때면 스크롤하는 손가락이 피로해진다. 일부 뷰어는 자동 스크롤을 지원하기도 하는데 극히 일부이고 내 입맛에 맞지 않았다.
그래서 아이디어 노트에 적어뒀던 앱이 "Scroll Browser"로 자동 스크롤 기능을 지원하는 앱이었다.
구현한 기능들과 어떻게 구현할지는 미리 생각해두었기에, 빠르게 구현하자는 생각이 들었고. 세세한 부분보다는 주요 기능 구현에 집중해서 하루만에 개발을 목표로 잡고 진행했다.
실제로 구현한 순서대로 간단히 작성해보겠다.
1. React Native 프로젝트 환경 구성
Expo를 사용하면 더 빠르겠지만 익숙하고 확장성을 고려해서 react native cli로 구성. react native 공식 문서에 cli로 시작하기가 보기 어렵게 숨겨져있는데 expo를 권장하는 걸로 보인다. (왜..?)
- react native 프로젝트 생성 및 기본 환경 구성
- react-navigation 설치 및 적용
- react-native-webview 설치 및 적용
4. 메인 화면 개발
마치 모바일 브라우저 화면처럼 웹뷰와 하단에는 주소창이 위치하는 화면이다. 웹페이지를 누르거나, 하단의 재생버튼을 누르는 등의 동작으로 스크롤 편의 기능을 활성화한다.
Claude와 함께 빠르게 개발을 진행했다. 혹시나 해서 대략적으로 "이런 기능을 구현해줘"라고 했는데 기대했던 결과와는 거리가 멀었다. 그래도 필요한 기능과 구현 방법을 알았기에, 올바른 방향과 방법만 제시하면 빠르게 결과를 얻어낼 수 있었다.
웹페이지를 누르고 있거나, 누르거나, 스와이프하면 스크롤 기능이 동작하는데 웹페이지의 존재하는 버튼 등과 같은 개체의 상호작용이 방해받지 않고 정상적으로 작동하게 하기 위한 부분이 시간이 걸렸다.
5. 바텀시트 컴포넌트 개발
바텀시트 컴포넌트는 Claude를 활용해 빠르게 구현했다. 그러나 SafeArea와 관련된 처리는 제대로 하지 못해서 직접 수정하였다.
5. react-native-mmkv 적용
한 화면에서만 개발하다보니 state만 활용하고 전역 상태 저장 및 유지를 잊고 있어 늦게 적용하게 되었다. 앱을 재실행해도 마지막으로 접속한 웹페이지를 유지하기 위함이었고, 추가로 설정값들도 유지하기 위함이다.
6. 추가 설정 화면 개발
자동 스크롤의 스크롤 속도나, 누르는 동안 스크롤시, 롱프레스 판정 지연값 등의 세세한 설정이 가능하도록 구현했기에 세세한 설정을 할 수 있는 화면을 만들었다.
7. Splash 화면 적용 & 아이콘 생성 및 적용
Splash 화면 전에 우선 아이콘 에셋을 만들었다. DALL.E를 통해 대략적으로 몇개의 이미지를 생성하고 포토샵으로 수정과 합성을 거쳐 아이콘을 만들었다. 맘에 쏙 들진 않지만 지금은 좋은 생각이 나지 않아 일단 이걸로 결정.
7. 배포 준비
개발이 아닌 부분이 많지만 배포를 위해서는 꼭 해야하고 너무 대충할 수도 없기에 시간이 많이 걸리는 부분이다.
- App의 Display name이나 최소 요구 버전, 아이콘 에셋 등의 정보를 수정 => iOS App Archive
- 앱 프로모션 이미지 생성. 포토샵을 가지고 예쁘진 않아도 기본은 한 정도로..
- iOS App Connect 정보 입력. 개인정보처리방침, 지원URL용 구글 설문 생성, 앱 제목 및 설명 등 작성....
- 심사 요청!
|  |  |  |  |
|---|
etc. 이슈 리포트
- ios Archive시 문제가 생겼다. react-native <=> hermes 사이의 오류로 파악되었고 rn repo를 보니 최신 버전에서 현재 진행 중 이슈였다. patch level에서 버전을 하나 낮추는 것으로 해결했다.
- iOS 심사에서 연령 등급으로 인해 거절되었다. 브라우징이 가능해 어느 컨텐츠로든 접근이 가능하기 때문에 17+ 등급이 필요하다. 수정 후 재심사 요청.