![FEConf 2025 [A1] 60 FPS in React Native](https://i.ytimg.com/vi/kWjyMHzeRKw/maxresdefault.jpg)
FEConf 2025 [A1] 60 FPS in React Native
FEConf 2025 A트랙 · YouTube
AI 핵심 요약
React Native로 만든 게임 프로토타입이 안드로이드에서 프레임 저하와 제스처 인식 지연을 겪자, 발표자는 성능 모니터와 React Profiler로 병목을 찾고 React Native의 스레드별 렌더링 과정을 살펴봤습니다. Jotai로 상태 구독 범위를 좁히고, Reanimated의 Worklet으로 UI 스레드에서 스타일을 갱신했으며, 여러 플링 제스처를 하나의 Pan 제스처와 각도 계산으로 바꾸고 이미지 스프라이트도 적용했습니다. 그 결과 프로토타입에서 안드로이드 60 FPS 애니메이션을 구현했으며, 불필요한 렌더링을 줄이고 애니메이션 작업을 적절한 스레드에서 처리하는 것이 부드러운 앱의 핵심이라고 설명했습니다. Reanimated, Skia, Lottie, Rive 등 인터랙션 구현에 활용할 라이브러리와 에셋 최적화 방법도 소개했습니다.
- React Native DevTools의 렌더링 하이라이트와 React Profiler로 불필요한 렌더링과 원인을 먼저 확인하세요.
- Jotai처럼 상태를 작은 단위로 나누고 필요한 컴포넌트만 구독하게 하면 상태 변경에 따른 리렌더링 범위를 줄일 수 있습니다.
- 애니메이션이나 스타일처럼 잦은 UI 업데이트는 Reanimated의 Shared Value와 Worklet을 활용해 UI 스레드에서 처리할 수 있습니다.
- 여러 방향의 스와이프를 각각 별도 제스처로 만들기보다 하나의 Pan 제스처와 각도 계산으로 판별하면 제스처 처리 비용을 줄일 수 있습니다.
- Lottie 에셋은 앱에 넣기 전에 최적화하고, 2D 그래픽이나 상태 기반 인터랙션에는 Skia와 Rive 같은 도구도 검토하세요.
소개
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-1 60 FPS in React Native 문대현 | Nabi 60 FPS의 부드러운 React Native 앱을 만들기 위한 성능 최적화와 애니메이션에 대해 이야기합니다. 성능 이슈 진단 방법과 스레드별 최적화 방법, 비주얼 인터렉션 등 High Quality App을 만드는데 필요한 인사이트를 소개합니다. ==== 업로드 오류로 10.14 재업로드
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 22 - 미친 생산성을 위한 React Native
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A2] 플러그인 시스템 기반의 유연한 React Native CodePush 대안
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A1] 60 FPS in React Native FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-2 플러그인 시스템 기반의 유연한 React Native CodePush 대안 강선규 | Toss RN Framework팀 App Center 종료 이후, React Native에서 벤더 종속 없이 OTA 업데이트를 적용할 수 있는 방법에 대해 이야기합니다. 기존 CodePush 방식의 한계를 극복하고, 플러그인 기반 아키텍처로 구성된 오픈소스 프로젝트 'hot-updater'를 소개드릴게요. 다양한 인프라—AWS, Supabase, Cloudflare, Firebase 등—와 유연하게 연동되는 구조와, 단일 명령어로 셀프 호스팅 가능한 업데이트 파이프라인을 어떻게 만들었는지 공유드리겠습니다.
모바일 앱 개발 데브옵스 · 인프라
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A3] Swift·Kotlin 한줄 없이 만드는 Expo 전용 OTA 업데이트 시스템(feat. Next.js)
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-3 Swift·Kotlin 한줄 없이 만드는 Expo 전용 OTA 업데이트 시스템(feat. Next.js) 김도윤 | 온아웃 Expo를 사용하면 TypeScript만으로 간단하게 React Native 앱을 만들 수 있습니다. 하지만 Expo의 OTA 기능(eas update)은 비용이 비싸고, 대부분의 서드파티 솔루션은 Expo의 모든 기능을 온전히 지원하지 않습니다. 이에 따라, 네이티브 코드를 작성하지 않고도 프론트엔드 개발자에게 친화적인 방식으로 Expo 프로젝트에서 OTA를 구현하는 방법을 소개합니다. ==== 업로드 오류로 10.14 재업로드
프론트엔드 모바일 앱 개발
컨퍼런스 INFCON 2024
React Native와 함께 인프런 앱 새로 만들기│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 React Native와 함께 인프런 앱 새로 만들기 - 권건우, 이문기 왜 React Native를 사용했는지, 플레이어는 어떻게 만들었는지 등 인프런 앱을 만들면서 했던 선택들을 공유합니다. 그리고 React Native와 Native를 함께 다루면서 미리 알았다면 좋았을 문제들을 나눕니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
모바일 앱 개발
컨퍼런스 Unite Seoul 2025
[Unite Seoul 2025] 부드러운 모바일 게임: 최고의 성능을 위한 그래픽 최적화
컨퍼런스 Unite Seoul 2025
🔹부드러운 모바일 게임: 최고의 성능을 위한 그래픽 최적화🔹 지난 4월 15일 개최되었던 Unite Seoul 2025의 세션 레코딩 영상들을 공개합니다! 🎉 Unity 6의 그래픽 아키텍처의 필수 구성 요소에 대해 자세히 알아보세요. 본 세션에서는 그래픽 처리 방법에 대한 개요부터 시작하여 렌더링 파이프라인에 영향을 줄 수 있는 가장 일반적인 성능 병목 현상을 살펴 봅니다. 또한 게임 그래픽을 최적화하기 위한 실행 가능한 모범 사례와 함께, 플레이어에게 보다 원활하고 효율적인 경험을 제공하는 방법을 확인합니다. 마지막으로 성능을 측정하고 진단하는 데 사용할 수 있는 주요 GPU 프로파일링 도구와, 이러한 도구를 효과적으로 사용하여 그래픽 관련 문제를 식별하고 해결하는 방법을 살펴보겠습니다. 사전 제작, 제작, 라이브 중 무엇이든 상관없습니다. 이 세션에서는 모바일 게임의 성능을 향상시키기 위한 지식과 기술을 갖추게 됩니다. 🎤 연사자 정보 Elbert Perez / U...
게임 프로그래밍 게임 아트 · 그래픽
컨퍼런스 Unite Seoul 2025
[Unite Seoul 2025] Mobile native debugging & ANR
컨퍼런스 Unite Seoul 2025
🔹Mobile native debugging & ANR🔹 지난 4월 15일 개최되었던 Unite Seoul 2025의 세션 레코딩 영상들을 공개합니다! 🎉 이 세션에서는 디버깅 전략과 함께, 모바일 플랫폼에서 발생하는 다양한 ANR 문제를 추적하고 분석하는 방법을 다룹니다. 특히 Android 환경에서의 네이티브 크래시 캡처, 스택 트레이스 분석, ANR 이슈 탐지 등 실제 개발 현장에서 활용할 수 있는 구체적인 사례를 공유합니다. 이 세션은 모바일 게임 개발자, 라이브 서비스 운영팀을 대상으로 하며, 참가자들은 실제 프로덕션 환경에서 발생하는 다양한 문제들을 효과적으로 파악할 수 있는 노하우를 얻을 수 있습니다. 🎤 연사자 정보 이희소 Unity Technologies Senior Software Engineer ✨ 추천대상자 프로그래머 여러분의 게임 개발 능률을 향상시켜줄 Unity의 유용한 기능 및 사용 방법, 성공 사례와 전략을 소개합니다! 유니티가 직접 큐...
모바일 앱 개발 게임 프로그래밍