🧭 웹 개발자가 앱 마이그레이션을 맡으면 생기는 일 .zip
“안녕하세요, 5년차 웹 프론트엔드 개발자입니다.”
“아, 그럼 앱도 할 줄 아시겠네요?”
”(??!?!!)”
그 말을 들은 날, 제 React Native 설치 창에는 npm install과 함께 신호 없이 찾아온 여정이 열렸습니다.
👶 React Native 처음 써봤습니다. 말 그대로 처음
처음엔 그냥 웹처럼 div, className, px 단위 쓰면 되겠지~ 싶었습니다.
네, 바로 뚝배기 맞았습니다. React Native에는 div도 없고, className도 없고, px도 그냥 무시당합니다.
대신 View, Text, StyleSheet.create() 같은 낯선 친구들과 친해져야 했고, 어느샌가 저는 “Metro 번들러가 터졌을 때는 캐시부터 지워보자”는 신념을 가진 개발자가 되어 있었습니다.
🔀 구조 파악부터 컴포넌트 분해까지
기존 앱은 Flutter 기반이라 구조가 전혀 달랐고,
이를 RN으로 옮기기 위해선 먼저 전체 플로우와 UI 구조를 세세하게 분석해야 했습니다.
- 라우팅 방식 다름 → React Navigation으로 재구성
- 스크롤/페이지 전환 UX → Flutter처럼 구현하려면 커스텀 작업 필요
- 컴포넌트 분리 기준 → 재사용성 vs platform specific 분기 처리
- WebView ..ㅠㅠ
이걸 혼자 하려니, 하루에 폴더 구조만 3번 뒤엎은 날도 있었습니다.
“내가 만든 코드인데 내가 이해 못하는 느낌...”
📱 크로스 플랫폼 = 같은 코드, 다른 버그 (참 쉽죠?)
RN은 하나의 코드베이스로 Android와 iOS를 모두 지원합니다.
…라는 말은 이론이고요. 실제로는:
- iOS에선 잘 되는데 Android에선 깜빡임
- Android에선 터지는데 iOS에선 멀쩡
- 시뮬레이터에선 되는데 실기기에선 죽음
- 됐다가 갑자기 안됌
“어디서 분명 된다는데, 왜 나는 안 되지?”라는 자문을 하루 3번씩 하게 됐고, 결국 Platform.OS 조건문을 코드 곳곳에 심으며 종교처럼 외웠습니다:
“이건 Android 때문이야. 분명히 그래. (iOS일 수도 있지만…, 도 아닐 수도 있지만...)”
📐 디바이스 반응형 이슈: 내 앱이 왜 씹히죠...?
웹에서는 media query 한 줄이면 끝나던 반응형.
앱에서는 아이폰 미니, 삼성 폴드, 플립 등 다 따로 놀며 SafeArea가 아니라 Danger Zone이었습니다.
- iPhone 13 mini: 버튼이 잘려서 못 누름
- 폴드, 플립: 텍스트가 뭉개짐
그제서야 깨달았습니다. 앱 개발자들이 테스트폰을 5대씩 쌓아두는 이유는 그냥 멋이 아니었다는 걸.
useWindowDimensions, percentage-based layout, SafeAreaView, StatusBar, FlatList 등 온갖 키워드를 던지며, 결국은 화면 비율별 조건 분기라는 폭풍 속으로 빠져들었습니다.
🔧 디버깅은 고행이었고, 캐시는 배신자였다 (feat. 삽질의 연속)
웹에서는 새로고침이면 되던 걸, 앱에서는 npm start --reset-cache, npx pod-install, gradlew clean 등 주술급 명령어를 외워야만 했습니다.
iOS는 Xcode가 삐지면 30분 날아가고, Android는 에뮬레이터 하나 띄우는 데도 메모리와 싸워야 했습니다.
하루에 앱을 10번은 지웠다 깔고, “도대체 뭐가 문제야…”라는 말을 매일 중얼거렸습니다.
그러다 보니깐 주술급 명령어들을 어느순간 다 외워지는... SUPER MAGIC
📱 그럼에도 앱스토어에 올라갔습니다. 나름(?) 당당하게.
이 모든 던전 클리어 끝에 앱스토어에 배포 완료.
그때 깨달았죠.
‘개발자란, 코드를 잘 짜는 사람이 아니라 끝까지 버티는 사람이다.’
🧑🚀 웹 개발자의 앱 도전, 그 이후
이번 경험 덕분에 React Native라는 새로운 영역에서 한 뼘 더 성장할 수 있었고, 무엇보다 “나도 앱 만든 사람이다”라는 자신감이 생겼습니다. 아직도 앱을 열 때마다 감회가 새롭습니다. “와 이걸 내가 만들었어?” 하면서요.
😎 끝으로 한 마디만…
웹 개발자라고 앱 못 만드는 거 아니잖아요. 다만, 약간의 멘탈 관리 능력은 필수입니다.
고군분투 했던 저의 앱이 궁금하신 분들은 아래를 보고 다양한 피드백 부탁드립니다~!
https://play.google.com/store/apps/details?id=com.FhTArrLMPEaw.natively&hl=ko
영끌 - 영수증 끌어모아 포인트 적립 - Google Play 앱
영끌, 영수증 끌어오면 돈이 된다!
play.google.com
'React-Native' 카테고리의 다른 글
| RN - 프론트엔드 개발자를 위한 모바일 앱 개발 가이드 🚀 (0) | 2025.02.26 |
|---|