#react-native

개요 최근 AI 기술이 급격히 발전하면서, 모바일 애플리케이션에서도 머신러닝(ML) 모델을 활용하는 사례가 증가하고 있다. 하지만 기존의 AI 모델을 모바일 환경에서 실행하려면 높은 연산 비용과 클라우드 의존도가 문제로 작용했다. 이런 문제를 해결하기 위해 React Native ExecuTorch가 등장했다. ExecuTorch는 Meta(구 페이스북)의 React Native와 PyTorch의 ExecuTorch를 결합하여 모바일에서 AI 모델을 효율적으로 실행할 수 있도록 돕는 기술이다. 이를 통해 React Native 기반의 모바일 앱에서도 AI 기능을 쉽게 통합할 수 있으며, 클라우드 서버에 의존하지 않고도 디바이스에서 직접 AI 연산을 수행할 수 있다. React Native를 기반으로 실행되기 때문에 한 번의 개발로 iOS와 Android에서 모두 작동하며, 네이티브 개발이 필요 없이 JavaScript 및 TypeScript 코드만으로 AI 모델을 쉽게 실행할 수 있다는 점이 가장 큰 장점이다. 또한, 앱 내에서 AI 기능을 직접 실행하므로 데이터가 외부 서버로 전송되지 않아 보안성이 높고, 네트워크 연결이 필요 없어 빠른 응답 속도를 제공한다. 그럼 React Native ExecuTorch의 개념, 특징, 사용 방법, 그리고 실제 적용 방법을 다뤄보겠다. 1. React Native ExecuTorch란? React Native ExecuTorch는 React Native 환경에서 PyTorch 모델을 실행할 수 있도록 지원하는 경량 머신러닝 실행 엔진이다. 기존에는 AI 모델을 모바일에서 실행하려면 TensorFlow Lite(TFLite)나 ONNX Runtime을 사용해야 했지만, 이제는 ExecuTorch를 활용하여 PyTorch 모델을 직접 실행할 수 있다. React Native에서 실행되기 때문에 갖는 주요 장점 iOS와 Android 동시 지원 – 한 번의 개발로 여러 플랫폼에서 실행할 수 있어 개발 비용 절감. 네이티브 브릿지 불필요 – 추가적인 네이티브 코드 작성 없이 AI 모델을 실행할 수 있어 유지보수 간편. 빠른 개발 속도 – JavaScript/TypeScript만으로 AI 모델을 사용할 수 있어 React Native 개발자들이 쉽게 접근 가능. 온디바이스 머신러닝(ML) 지원 – AI 모델이 스마트폰에서 직접 실행되므로 네트워크 의존성이 낮고 응답 속도가 빠름. 데이터 프라이버시 강화 – AI 연산이 클라이언트 측에서 실행되므로, 사용자의 개인 데이터가 서버로 전송되지 않아 보안성이 뛰어남. 배터리 및 리소스 효율성 – 클라우드 AI 대비 낮은 전력 소비와 빠른 실행 속도를 제공. 기존 AI 모델 실행 방식과 비교 실행 방식 클라우드 필요 여부 응답 속도 데이터 프라이버시 클라우드 기반 AI 필요 느림 (네트워크 의존) 낮음 (데이터가 서버로 전송됨) TensorFlow Lite 불필요 빠름 높음 ExecuTorch (React Native) 불필요 매우 빠름 매우 높음 ExecuTorch는 PyTorch 기반의 모델을 직접 React Native에서 실행할 수 있도록 지원하며, 클라우드 의존도를 최소화하면서도 빠른 속도를 제공한다. 2. React Native ExecuTorch의 구조 React Native에서 ExecuTorch를 활용하려면 다음과 같은 절차를 거쳐야 한다. PyTorch에서 AI 모델 학습 ExecuTorch 포맷으로 모델 변환 React Native 앱에서 ExecuTorch로 모델 로드 모델 실행 및 결과 반환 그럼 이제 단계별로 구현 방법을 살펴보자. 3. React Native ExecuTorch 적용 방법 Step 1: React Native 프로젝트 설정 먼저, React Native 프로젝트를 생성한다. npx react-native init MyExecuTorchApp cd MyExecuTorchApp 그다음, ExecuTorch 라이브러리를 설치한다. npm install react-native-executorch Step 2: PyTorch 모델 변환 PyTorch에서 간단한 머신러닝 모델을 생성하고 ExecuTorch 포맷으로 변환한다. import torch # 간단한 모델 정의 class SimpleModel(torch.nn.Module): def forward(self, x): return x * 2 # 모델 인스턴스 생성 model = SimpleModel() # ExecuTorch 실행을 위해 모델 변환 scripted_model = torch.jit.script(model) scripted_model.save("simple_model.pt") 변환된 simple_model.pt 파일을 React Native 프로젝트 내부에 추가한다. Step 3: React Native에서 ExecuTorch 실행 이제 변환된 AI 모델을 React Native 앱에서 실행해보겠다. import { ExecuTorch } from 'react-native-executorch'; // 모델 로드 const loadModel = async () => { const model = await ExecuTorch.loadModel('simple_model.pt'); // 입력 데이터 생성 const input = [1, 2, 3, 4, 5]; // 모델 실행 const output = await model.run(input); console.log('AI Model Output:', output); }; // 모델 실행 함수 호출 loadModel(); 이제 앱을 실행하면 AI 모델이 React Native 환경에서 실행된다. 4. React Native ExecuTorch의 활용 사례 ExecuTorch를 활용하면 다양한 AI 기능을 React Native 앱에서 직접 구현할 수 있다. ① 이미지 처리 및 객체 감지 const detectObjects = async (imageData) => { const model = await ExecuTorch.loadModel('object_detection.pt'); const results = await model.run(imageData); console.log('Detected Objects:', results); }; ② 실시간 음성 인식 const transcribeAudio = async (audioData) => { const model = await ExecuTorch.loadModel('speech_to_text.pt'); const transcript = await model.run(audioData); console.log('Transcribed Text:', transcript); }; ③ 자연어 처리(NLP) 기반 챗봇 const chatbotResponse = async (userMessage) => { const model = await ExecuTorch.loadModel('chatbot_model.pt'); const response = await model.run(userMessage); console.log('Chatbot Reply:', response); }; 5. 결론 React Native ExecuTorch는 모바일에서 AI 모델을 실행할 수 있도록 돕는 강력한 도구이다. 특히 React Native 기반으로 동작하기 때문에 멀티 플랫폼 지원, 빠른 개발 속도, 데이터 프라이버시 보호 등의 이점을 극대화할 수 있다. React Native 기반 앱에서 이미지 인식, 음성 인식, 자연어 처리, 추천 시스템 등 다양한 AI 기능을 추가하려면 ExecuTorch를 활용하는 것이 좋을 것이다.

1월 21일 이제 막 공개된 React Native 0.77! 이번 버전은 예고했던 것보다 더 큰 변화를 담고 있습니다. 요즘은 모바일 앱 개발이 워낙 빠르게 돌아가다 보니 새 버전이 출시될 때마다, 새롭게 추가된 기능들을 놓치지 않고 챙기는 게 중요할 것 같습니다 React Native 공식 블로그의 내용을 토대로, 특히 이번에 추가되고 변경된 주요 기능들 중심으로 살펴볼께요. React Native 0.77 주요 변경점 1. 새로운 CSS 기능: 디자인·레이아웃 강화 React Native 0.77 버전은 더 풍부한 레이아웃 옵션을 제공하기 위해 다양한 CSS 속성들이 새로 도입되었거나 개선되었다고 합니다 아래 기능들은 최신 New Architecture(Fabric, TurboModules 기반)에서만 사용할 수 있다고 하니 참고하면 좋을 것 같습니다 (1) display: contents 설명: 요소를 레이아웃 트리에선 제거하되, 자식 요소들은 그대로 부모의 직계 자식처럼 렌더링되도록 하는 기능입니다 장점: 래퍼(Wrapper) 컴포넌트를 사용해야 하지만, 해당 래퍼가 레이아웃에 영향을 주지 않고 이벤트만 처리하고 싶을 때 유용할 것 같습니다 예를 들어, 아래처럼 기본 컨테이너와 적색 박스(Widget)가 있다고 해봅시다 여기에 파란색 배경을 가진 Alerting 래퍼를 씌우면, 별도의 파란 레이아웃 박스가 생기면서 우리가 의도한 범위와 다르게 이벤트가 발생할 수 있습니다 하지만 display: contents를 사용하면 파란색 박스는 레이아웃 트리에서 제거된 상태로 이벤트 핸들링만 수행하게 됩니다 결과적으로 아래 그림처럼, 자식(Widget)의 원래 크기와 위치가 그대로 유지되면서 래퍼가 이벤트만 감지할 수 있습니다 예시 코드 function Alerting({children}) { return ( <View style={{display: 'contents'}} onPointerDown={() => alert('Hello World!')}> {children} </View> ); } 이렇게 display: contents를 적용하면, Alerting 자체는 레이아웃 박스가 사라지고 이벤트만 감지합니다 (2) boxSizing 설명: 요소의 width, height 등을 계산할 때, 패딩이나 테두리를 어떻게 포함시킬지를 정하는 CSS 속성입니다 옵션 border-box: 기존 React Native 기본값으로, 테두리와 패딩을 너비·높이에 포함해 계산합니다 content-box: 웹과 동일하게 내용 영역만으로 사이즈를 잡습니다 주의: 웹의 기본값은 content-box지만, React Native에선 호환성을 위해 계속 border-box가 기본값으로 유지됩니다 아래는 border-box와 content-box의 차이를 시각적으로 확인할 수 있는 예시입니다 (3) mixBlendMode 설명: 요소의 배경색 또는 상·하위 요소 색과 어떻게 혼합(blend)해 렌더링할지 지정하는 속성입니다 대표 값: normal, multiply, screen, overlay 등 다양한 블렌딩 모드가 있습니다 isolation 속성: 특정 요소에 isolation: isolate를 설정해 별도의 스택 컨텍스트를 형성할 수 있습니다 이미지나 배경색을 겹쳐서 표현할 때 다양한 연출이 가능해 보입니다 아래 예시는 수박 이미지를 다양한 블렌딩 모드로 렌더링했을 때의 모습이라고 할 수 있습니다 (4) Outline 관련 props 설명: outlineWidth, outlineStyle, outlineSpread, outlineColor 등이 추가되어, 요소의 바깥쪽 테두리 선을 그릴 수 있습니다 장점: border와 달리 요소의 실제 레이아웃에 영향을 주지 않고 시각적인 강조만 줄 수 있습니다 아래처럼 다양한 형태와 색으로 아웃라인을 줄 수 있는 예시를 생각해볼 수 있습니다 2. 안드로이드 15 & 16KB 메모리 페이지 지원 Android 15 Edge-to-Edge Android 15는 targetSdkVersion 35 이상 빌드 시, 강제로 전체화면(Edge-to-Edge) 디스플레이가 적용되어 UI가 깨질 수 있습니다 react-native-safe-area-context 등을 사용해 대응할 수 있을 것 같습니다 16KB 페이지 사이즈 지원 기존 4KB 메모리 페이지에서 16KB 페이지로 전환이 가능해지며, 성능 개선을 기대할 수 있습니다 React Native 0.77에서 이미 이 변경을 지원하도록 준비해주었네요^^ 당분간 안드로이드 최신 기기 호환성에도 문제 없을 것 같습니다 3. iOS 커뮤니티 템플릿: Swift로 전환 기존 Objective-C++ 기반 템플릿 대신, Swift를 활용한 커뮤니티 템플릿이 기본으로 제공되기 시작했습니다 장점: 템플릿 파일이 단순해져서, 프로젝트 구조를 간결하게 유지할 수 있습니다 호환성: C++ 기반 로컬 모듈을 사용하는 경우에는 Swift와의 호환 이슈가 있으므로, 기존 Objective-C++ 방식을 유지해야 할 수도 있습니다 RCTAppDependencyProvider 추가 0.77 버전부터 iOS AppDelegate 내부에 RCTAppDependencyProvider 등록을 누락하면 런타임 문제가 발생할 수 있으니 주의해야 합니다 // Objective-C++ 예시 #import <ReactAppDependencyProvider/RCTAppDependencyProvider.h> // ... self.dependencyProvider = [RCTAppDependencyProvider new]; // Swift 예시 import ReactAppDependencyProvider // ... self.dependencyProvider = RCTAppDependencyProvider() 4. Community CLI와 Breaking Changes react-native init 명령어 완전 폐지 0.75 버전부터 예고되었던 사항이며, 이제 더는 사용 불가합니다 대신 npx @react-native-community/cli init 또는 Expo의 npx create-expo-app 등을 권장한다고 합니다 Metro에서 a, i 단축키 제거 Metro 터미널에서 a(run Android), i(run iOS)를 호출하던 단축키가 더는 지원되지 않습니다 앞으로는 직접 CLI 명령어를 입력하거나, 사용하는 프레임워크(예: Expo)에서 제공하는 명령어를 써야 합니다 console.log() 스트리밍 제거 Metro 콘솔에서 console.log() 출력이 실시간 스트리밍되던 기능이 제거되었습니다 디버깅 시에는 다른 로깅 툴이나 디버거를 사용하면 될 것 같습니다 결론 요즘은 모바일 앱 개발 영역에서도 웹 수준의 섬세한 스타일 및 레이아웃을 요구받는 추세인 것 같습니다 React Native 0.77은 이러한 트렌드를 반영해 새로운 CSS 속성을 강화하고, 안드로이드와 iOS 지원 범위를 확장한 점이 눈에 띕니다 한 단계 앞선 레이아웃과 플랫폼 대응성을 원하는 개발자라면, 이번 0.77 버전을 적극적으로 시도해보는 것도 좋을 것 같습니다.