React Native iOS 빌드 문제 해결 과정 기록 (2024.12.15)

React Native 프로젝트를 iOS로 빌드하는 과정에서 발생했던 문제들을 기록하고, 이를 해결한 방법과 앞으로 해결해야 할 과제를 정리해보았습니다. 이 글은 같은 문제를 겪는 개발자들에게 도움이 되었으면 하는 마음에서 작성했습니다.

---

문제와 해결 과정

1. Firebase 모듈 중복 문제

문제

• Firebase 모듈이 중복 설치된 상태로 인해 빌드 충돌이 발생했습니다.
• 원인은 firebase-iOS-sdk를 직접 설치하면서 React Native용 Firebase 모듈과 충돌이 발생한 것이었습니다.

해결 방법

1. Podfile에서 firebase-iOS-sdk를 제거했습니다.
2. React Native에서 제공하는 Firebase 모듈만 사용하도록 구성했습니다.

테스트 결과

• Firebase 모듈 중복 문제는 완전히 해결되었으며, 빌드가 정상적으로 진행되었습니다.

---

2. Font 인식 문제

문제

• Android에서 잘 사용하던 Font가 iOS에서 제대로 렌더링되지 않는 문제가 발생했습니다.
• Android는 .ttf 파일 이름으로 Font를 인식하지만, iOS는 PostScript 이름을 사용해야 합니다.

해결 방법

1. macOS의 서체 관리자를 열어 Font 파일을 확인했습니다.
2. 해당 Font의 PostScript 이름을 확인 후, 
3. RN 코드에서 폰트패밀리 = "PostScript" 이렇게 적용해야함 ( android 에서는 그냥 .ttf 앞에 폰트이름 )

테스트 결과

• Font를 찾을 수 없다는 로그는 더 이상 출력되지 않았습니다.
• 하지만 검은 화면 문제로 인해 실제로 Font가 렌더링되는지 확인하지는 못했습니다.

---

3. SplashScreen 이후 검은 화면 문제

문제

• SplashScreen이 종료된 후, 앱이 검은 화면에 멈춰 있는 문제가 발생했습니다.
• 네비게이션 로직이 제대로 작동하지 않는 듯 보였으며, 렌더링 문제로 SplashScreen에서 다음 화면으로 넘어가지 않았습니다.

해결을 위해 시도한 방법

1. CustomBackground 컴포넌트에 SafeAreaView를 추가했습니다.
   • SafeAreaView는 화면의 안전한 영역을 보장하며, UI 요소가 시스템 UI(노치, 상태바 등)와 겹치지 않도록 돕습니다.
   • 하지만 문제 해결에는 영향을 주지 않았습니다.
2. 애니메이션 로직, 네비게이션 상태, WebSocket 연결 상태를 점검했으나 명확한 원인을 파악하지 못했습니다.

원인 추정

• SplashScreen에서 애니메이션이나 렌더링 중 특정 조건이 충족되지 않았을 가능성.
• 네이티브 모듈이나 iOS 설정 관련 문제.

---

내일의 계획

1. 경고 로그 분석

현재 iOS 빌드 과정에서 많은 경고가 발생하고 있습니다. 특히, Hermes 및 Run Script 관련 경고가 다수 포함되어 있습니다.

• 경고 로그를 분석해 불필요한 Pod 및 빌드 스크립트를 정리하고, Xcode의 설정을 최적화할 계획입니다.

2. SplashScreen 검은 화면 문제 해결

• SplashScreen에서 조건에 따라 다음 화면으로 넘어가지 않는 문제를 디버깅합니다.
• 애니메이션 종료 조건, 네비게이션 설정, WebSocket 연결 로직을 재검토할 예정입니다.

3. Font 적용 여부 확인

• 검은 화면 문제를 해결한 후, Font가 실제로 올바르게 적용되었는지 확인할 계획입니다.

4. 빌드 설정 재검토

• Xcode의 Build Phases에서 Run Script 단계와 관련된 설정을 점검하고, 불필요한 스크립트가 있는지 확인합니다.

---

현재까지의 진행 상황

작업 항목상태비고

Firebase 모듈 중복 문제	✅ 해결 완료	빌드 충돌 없이 정상 작동.
Font 관련 문제	✅ 해결 완료	PostScript 이름으로 설정. 검은 화면 문제 해결 후 적용 여부 확인 필요.
SplashScreen 검은 화면 문제	🚧 미해결	원인 분석 중. 네비게이션 및 렌더링 상태 점검 필요.
경고 로그 분석	🚧 진행 예정	Hermes 및 Run Script 관련 경고 해결 필요.

---

마무리

이번 작업을 통해 Firebase 모듈과 Font 문제는 해결했지만, SplashScreen 이후 검은 화면 문제는 여전히 남아 있습니다. 내일은 경고 로그를 분석해 더 많은 단서를 얻고, 남은 문제를 하나씩 해결해 나갈 계획입니다.

React Native로 iOS 빌드를 진행하면서 많은 문제를 만날 수 있지만, 하나씩 해결해나가면서 프로젝트를 개선할 수 있습니다. 앞으로 이 글이 비슷한 문제를 겪는 분들께 도움이 되길 바랍니다.

감사합니다! 🚀