dotgimon 제작기 05. Expo Router + NativeWind 마이그레이션과 에셋 정리
앱 뼈대를 Expo Router와 NativeWind로 갈아끼웠다
Expo Router + NativeWind 마이그레이션을 했다. Expo Router는 Next.js App Router처럼 파일 경로가 곧 라우트가 되는 React Native용 라우터이고, NativeWind는 React Native 컴포넌트에 Tailwind 클래스를 쓸 수 있게 해주는 라이브러리다. 앱 진입점도 Expo Router 엔트리 라우트로 전환했다.
이 과정에서 Skia, Reanimated, expo-audio를 package.json 의존성에 정식으로 넣었다. Reanimated는 애니메이션 값을 JS 스레드가 아닌 UI 스레드에서 돌리는 라이브러리이고, expo-audio는 Expo의 오디오 재생 모듈이다. README도 이날 추가했다.
몬스터 87종, 알 7종, 효과음 10종을 에셋으로 넣었다
몬스터 87종과 알 7종의 GIF 94개, 효과음 10종을 에셋으로 넣었다. 이 에셋을 만드는 생성 스크립트도 같이 넣었다.
대전 모달과 리셋 연출을 붙였다
QR 링크로 대전·합체를 여는 모달을 넣었다. 몬스터를 처음부터 다시 키우는 하드 리셋 버튼과, 진화할 때 나오는 커튼 연출도 붙였다. 밥·훈련·고기 아이콘은 다시 그렸다.
쓰이지 않던 DEV_TIME_SCALE도 제거했다.
웹 엔진을 그대로 둔 채 렌더러만 바꿀 수 있었다
이 프로젝트는 웹 버전 pixel-pet을 React Native로 옮겨온 것이고, RN 쪽 Skia 렌더링은 이미 돌고 있었다. Skia는 React Native에서 쓰는 2D 그래픽 라이브러리로, 웹의 Canvas와 비슷한 역할을 한다.
| 레이어 | 웹 | RN |
|---|---|---|
| 게임 엔진 | Canvas 2D | 같은 코드, PixelCtx 인터페이스로만 그림 |
| LCD 도트 | <canvas> | Skia Picture를 Reanimated shared value에 담음 (React 리렌더 0회) |
| 효과음 | Web Audio 오실레이터 | 같은 파형을 WAV로 미리 렌더링 → expo-audio |
Reanimated shared value는 UI 스레드에서 읽히는 값 컨테이너다. LCD 도트를 여기에 담아두니 React 리렌더 없이 화면이 갱신됐다.
그리기 인터페이스를 fillRect 수준으로 좁혀 두면 렌더러를 바꿔도 엔진은 그대로 쓸 수 있었다.