리액트 네이티브에서 비디오 에디터를 빌드하는 방법

[navigation]

TL;DR:

• React Native는 멀티플랫폼 앱의 개발 속도를 최대 30%까지 높여줍니다;
• 기성 동영상 편집기는 사용자가 콘텐츠를 제작하는 데 필요한 대부분의 기능 또는 모든 기능을 제공합니다;
• 간편한 통합, 다양한 편집 기능 및 효과를 제공하는 바누바 비디오 에디터 SDK;
• 통합하려면 아래 가이드를 따르세요.

왜 리액트 네이티브인가?

지난 몇 년 동안 이 기술은 크로스 플랫폼 모바일 애플리케이션을 개발하는 데 가장 인기 있는 프레임워크로 남아 있습니다.

널리 사용되는 자바스크립트를 사용하며 Android, iOS, 웹 간에 최대 95%의 코드 재사용률을 자랑합니다. 즉, React Native로 비디오 에디터를 구축하면 멀티플랫폼 앱의 경우 총 개발 시간이 최대 30%까지 단축되어 작업 효율성이 향상됩니다.

또한 React Native는 네이티브 기술만큼 빠르게 작동하며 네이티브 코드를 통합할 수 있습니다. 즉, React Native 비디오 처리 소프트웨어는 Swift, Java 또는 Kotlin으로 구축된 소프트웨어의 대안이 될 수 있습니다.

이 프레임워크를 사용하면 몇 주간의 작업 시간을 절약하고 훨씬 빠르게 시장에 출시할 수 있습니다. 자세한 내용은 다음 문서를 참조하세요: "모바일 동영상 편집기 앱을 개발하는 방법" 문서를 참조하세요.

리액트 네이티브 동영상 편집기가 유용한 이유는 무엇인가요?

숏폼 비디오가 모바일 앱을 지배하고 있습니다. 엔터테인먼트뿐만 아니라 커머스, 학습, 피트니스 앱에서도 비디오가 80% 더 많은 전환을 유도합니다.

하지만 사용자들은 단순히 동영상을 보기만 원하는 것이 아닙니다. 그 대신 동영상을 제작하고 싶어합니다. 바로 이 점에서 React Native 비디오 에디터를 추가하면 판도를 바꿀 수 있습니다. 사용자가 앱을 떠나지 않고도 표현하고, 공유하고, 개인화할 수 있는 도구를 제공할 수 있습니다.

물론 동영상 편집기를 처음부터 새로 구축하는 것은 야심찬 일입니다. 하지만 네이티브 비디오 처리, UI 타임라인, 내보내기까지 고려하면 금방 복잡해집니다.

그래서 많은 개발자가 React Native 비디오 편집기 라이브러리를 사용합니다. 이러한 라이브러리는 비디오 디코딩, 렌더링 및 효과와 같은 무거운 작업을 원활하게 처리하는 네이티브 모듈과 React 프론트엔드를 연결합니다.

그리고 단순히 성능만 중요한 것이 아니라 사용감이 좋은 React Native 동영상 편집기 UI도 중요합니다. 여기에는 무엇이 포함될까요?

• 드래그 앤 드롭 방식의 타임라인 편집기
• 디바이스 통합 미디어 라이브러리 선택기
• 필터 및 AR 효과 미리보기
• 음악 오버레이 및 오디오 트리밍 도구
• 실시간 미리보기 및 명확한 내보내기 옵션

검증된 동영상 SDK인 React Native를 사용하면 앱이 시대에 뒤처지지 않고 미래를 선도할 수 있습니다.

반누바 리액트 네이티브 비디오 에디터 SDK 살펴보기

"우리는 성능뿐 아니라 창의성을 위해 이 SDK를 만들었습니다. 우리의 목표는 React Native 개발자가 손쉽게 사용할 수 있고 사용자가 제한 없이 편집할 수 있는 툴셋을 제공하는 것이었습니다." - Elena K., 선임 제품 엔지니어, Banuba

기본 키트를 넘어 성능에 최적화된 완벽한 기능 세트를 제공하는 Banuba 비디오 에디터 SDK. 고급 동영상 편집 기능을 모든 React Native 앱에 통합할 수 있는 강력한 솔루션입니다.

이 React Native 동영상 편집기 SDK의 차별화 요소는 다음과 같습니다:

• 네이티브처럼 느껴지는 타임라인.

  바누바의 타임라인은 사용자에게 완벽한 크리에이티브 제어 기능을 제공합니다. 지연이나 불편함 없이 Android와 iOS에서 원활하게 편집할 수 있습니다.

• 강력한 비디오 및 오디오 처리.

  실시간 렌더링, 빠른 인코딩, 완벽한 오디오 동기화 등 까다로운 작업은 Banuba 비디오 편집기 SDK가 처리합니다. 따라서 사용자는 최종 결과물을 끝없이 기다리지 않고 제작에만 집중할 수 있습니다.

• 필터, 효과 및 오버레이

  바나바 리액트 네이티브 SDK는 필터와 전환부터 AR 및 미화 도구에 이르기까지 앱에 고성능 시각 효과를 제공합니다. 모든 효과가 실시간으로 렌더링되고 즉시 반응하므로 편집 프로세스가 빠르고 유연하게 유지됩니다. 또한 디자인과 철저한 문서화 덕분에 효과를 추가하고 조정하는 것도 간단합니다.

• 크로스 플랫폼 지원.

  한 번만 빌드하면 iOS와 Android 모두에서 작동합니다. 비디오 SDK React Native는 공유 통합 레이어를 사용하여 코드베이스를 깔끔하게 유지하고 모든 기기에서 사용자를 만족시킬 수 있습니다.

• 모든 React Native 앱에 쉽게 통합할 수 있습니다.

  Banuba의 SDK는 개발자를 염두에 두고 설계되었습니다. 문서, 사전 빌드된 UI, React Native 지원이 바로 제공됩니다.
• 유연한 가격.라이선스 비용은 월간 활성 사용자 수, 정확한 기능 세트, 지원되는 플랫폼 수에 따라 달라집니다. 따라서 중견 기업도 부담 없이 사용할 수 있습니다.
• 작은 크기.통합 시 Banuba Video Editor SDK는 앱 다운로드 크기에 약 30Mb만 추가됩니다.

실제로 작동하는 모습을 보고 싶으신가요?

Google Play에서 데모 앱을 사용해보고 Banuba Video Editor SDK의 실제 기능을 살펴보세요.

그렇다면 어떻게 React 네이티브 앱에 추가할 수 있을까요?

현실적으로 접근해 봅시다. 대부분의 개발자라면 10단계로 구성된 가이드를 원하지 않을 것입니다. 빠르게 작동하는 것을 원할 것입니다.

여기 짧은 버전이 있습니다:

1단계. Banuba 평가판 토큰 받기

SDK 무료 평가판을 시작하고 앱에 대한 모든 React Native 비디오 처리 혜택을 누리려면 고유한 평가판 토큰을 받는 것부터 시작하세요. 14일 무료 체험판은 무제한 SDK 기능을 제공합니다.

2단계. 반누바 리액트 네이티브 SDK 설치하기

여기에는 React Native 프로젝트에 Banuba 패키지를 추가하는 것이 포함됩니다.

2.1.종속성을 확인합니다:

프로젝트가 올바른 버전을 실행하고 있나요? 지금 모든 것이 정렬되어 있는지 확인하면 나중에 시간을 절약할 수 있습니다.

• Yarn: 3.6.1 이상(또는 이에 상응하는 npm)
• React Native: 0.74.2 이상
• Android: API 레벨 23(Android 6.0) 이상
• iOS: iOS 14.0 이상

패키지.json 파일에서React Native 버전을 확인할 수 있습니다. 필요한 경우 업데이트하세요.

2.2. 패키지를 설치합니다:

터미널에서 프로젝트의 메인 폴더로 이동한 다음 다음 명령 중 하나를 시도합니다:

npm 사용:

[code]
Bash

npminstall react-native-banuba-sdk
[/코드]

Yarn 사용:

[code]

Bash

yarnadd react-native-banuba-sdk
[/코드]

2.3. 파드 설치(iOS 특정):

npm/yarn 패키지를 설치한 후, 네이티브 iOS 종속 요소(CocoaPods)를 설치해야 합니다.

[code]

Bash

cdios
pod install
cd... # 프로젝트 루트로 돌아가기
[/code]

포드 설치에문제가 있나요 ? 파드 디인테그레이트를실행한 다음 파드 설치를 다시 실행하세요 . 또한, 포드파일에 필요한 모든 항목이 포함되어 있는지 다시 확인하세요 . 일반적으로 최신 React Native 버전에 대한 설치 스크립트는 이 작업을 처리합니다.

3단계: 네이티브 종속성 설정(프로젝트 구성)

이 단계는 종종 가장 중요하고 플랫폼에 따라 달라지는 부분입니다. SDK에는 일반적으로 적절한 링크와 구성이 필요한 네이티브 코드가 있습니다. 최신 React Native 버전(0.60 이상)은 자동 링크를 사용하여 이 과정을 간소화하지만, 여전히 일부 수동 단계가 필요할 수 있습니다.

3.1. 안드로이드 설정:

1. android/build.gradle (프로젝트 수준):

Banuba의 Maven 리포지토리를 추가해야 할 수도 있습니다.

[code]
Gradle

allprojects {
repositories {
google()
mavenCentral()
// 문서에 지정된 경우 Banuba의 Maven 리포지토리 추가
// 예를 들어:
maven { url 'https://artifactory.banuba.com/artifactory/banuba-maven-release/' }
}
[/code]

android/app/build.gradle (앱 수준):

최소 SDK 버전:최소 SDK 버전이 Banuba의 요구 사항과 일치하는지 확인합니다 (예: minSdkVersion 23 ) .

Java 8 호환성:

[code]

Gradle

android {
// ...
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
// ...
}
[/code]

패키징 옵션: 대규모 SDK에는 특정 패키징 옵션이 필요한 경우가 있습니다 .

[code]
Gradle

android {
// ...
packagingOptions {
pickFirst 'lib/arm64-v8a/libc++_shared.so'
pickFirst 'lib/armeabi-v7a/libc++_shared.so'
pickFirst 'lib/x86/libc++_shared.so'
pickFirst 'lib/x86_64/libc++_shared.so'
}
// ...
}
[/code]

권한:AndroidManifest.xml에서 카메라, 마이크 및 저장소 권한이 필요할 수 있습니다 . SDK가 런타임에 요청할 수도 있지만, 선언하는 것이 좋습니다.

2. android/app/src/main/AndroidManifest.xml:

XML

[code]
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.yourapp">

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<응용 프로그램
android:requestLegacyExternalStorage="true" >
</application>
</manifest>
[/code]

3.2. iOS 설정:

• ios/Podfile:

• 플랫폼 :ios, '14.0' (또는 그 이상)이 설정되어있는지 확인합니다 .
• Banuba는 특정 설치 후 후크 또는 플래그를 요구할 수 있으므로 해당 설명서를 확인하세요.

1. Info.plist: 카메라, 마이크 및 사진 라이브러리 액세스에 대한 개인정보 보호 설명을 추가해야 합니다.

XML

[code]
<key>NSCameraUsageDescription</key>
<string>이 앱은 동영상을 캡처하기 위해 카메라에 액세스해야 합니다.</string>
<key>NSMicrophoneUsageDescription</key>
<string>이 앱은 동영상에 대한 오디오를 녹음하기 위해 마이크에 액세스해야 합니다.</string>
<key>NSPhotoLibrary사용설명</key>
<string>이 앱은 동영상을 선택하고 저장하기 위해 사진 라이브러리에 액세스해야 합니다.</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>이 앱은 편집한 동영상을 사진 라이브러리에 저장해야 합니다.</string>
[/code]

Xcode 프로젝트 설정:

• 빌드 설정: 때때로 특정 HEADER_SEARCH_PATHS 또는 FRAMEWORK_SEARCH_PATHS가 필요합니다.
• 기능: '백그라운드 모드'(비디오 처리가 백그라운드에서 이루어지는 경우)와 같은 필수 기능이 활성화되어 있는지 확인합니다(간단한 편집기에서는 덜 일반적이지만).

4단계: 앱에 동영상 편집기 React 컴포넌트 추가하기

이 단계에서는 반누바 SDK를 React 네이티브 자바스크립트 코드에 통합합니다.

4.1. SDK 초기화: 일반적으로 앱이 시작되거나 에디터를 사용하는 컴포넌트가 마운트될 때 토큰으로 Banuba SDK를 한 번 초기화해야 합니다.

[code]
JavaScript

// App.js 또는 전용 BanubaService.js

import { Platform, Alert } from 'react-native';
// 이 가져오기 경로는 예시입니다.
import BanubaVideoEditor from 'react-native-banuba-sdk';

// 중요: 실제 Banuba 토큰으로 교체하세요!
const BANUBA_CLIENT_TOKEN = "YOUR_UNIQUE_BANUBA_TRIAL_TOKEN";
export const initializeBanubaSDK = async () => {
try {
// 이것은 Banuba의 특정 초기화 방법을 위한 자리 표시자입니다.
// 성공을 나타내는 부울을 반환할 수 있습니다.
const isInitialized = await BanubaVideoEditor.initialize(BANUBA_CLIENT_TOKEN);
if (isInitialized) {
console.log("Banuba SDK가 성공적으로 초기화되었습니다!");
return true;
} else {
console.error("Banuba SDK를 초기화하지 못했습니다.");
Alert.alert("초기화 실패", "비디오 에디터를 초기화할 수 없습니다. 토큰을 확인해 주세요.");
return false;
}
} catch (error) {
console.error("오류 발생:", error);
Alert.alert("오류", "비디오 에디터를 설정하는 동안 오류가 발생했습니다.");
return false;
}
};
// 정리를 위한 초기화 함수가 있을 수도 있습니다.
export const deinitializeBanubaSDK = async () =>. {
try {
await BanubaVideoEditor.deinitialize(); // 플레이스홀더 메서드
console.log("Banuba SDK가 초기화되었습니다.");
} catch (error) {
console.error("오류 발생:", error);
}
};
[/code]

4.2. 에디터를 실행할 컴포넌트를 생성합니다: 이 컴포넌트는 Banuba 비디오 편집기 SDK를 열고 그 결과를 처리하는 로직을 처리합니다.

[code]
JavaScript

// screens/VideoEditorScreen.js (또는 편집기를 원하는 컴포넌트)

import React, { useState, useEffect } from 'react';
import { View, Button, Text, ActivityIndicator, Alert } from 'react-native';
import { initializeBanubaSDK, deinitializeBanubaSDK } from '../services/BanubaService'; // 여기에 초기화 로직을 넣었다고 가정합니다
// 다시, 플레이스홀더를 가져옵니다.
import BanubaVideoEditor from 'react-native-banuba-sdk';
const VideoEditorScreen = () => {
const [sdkReady, setSdkReady] = useState(false);
const [editingResult, setEditingResult] = useState(null);
const [loading, setLoading] = useState(true);

useEffect(() => {
const setupSdk = async () => {
const success = await initializeBanubaSDK();
setSdkReady(success);
setLoading(false);
};
setupSdk();

return () => {
// 필요 시 컴포넌트 언마운트 시 SDK 초기화
// deinitializeBanubaSDK();
};
}, []);

const openBanubaEditor = async () => {
if (!sdkReady) {
Alert.alert("편집기가 준비되지 않았습니다", "비디오 편집기가 초기화되는 동안 기다려주세요.");
return;
}
try {
setLoading(true);
// 이것은 Banuba 비디오 편집기 UI를 열기 위한 핵심 호출입니다.
// 옵션 객체는 사용자 지정(초기 비디오, 활성화된 기능)에 매우 중요합니다.
// 사용 가능한 모든 옵션은 Banuba의 설명서를 참조하세요.
const result = await BanubaVideoEditor.openVideoEditor({
// 옵션 예시:
// entryPoint: '카메라', // '카메라' 또는 '갤러리' 또는 '편집기' (기존 동영상을 여는 경우)
// initialVideoUri: 'file:///path/to/my/video.mp4', // 기존 동영상을 편집하려면
// enableGallery: true,
// enableCamera: true,
// enableMusicEditor: true,
// enableFilterEditor: true,
// exportQuality: 'high',
// 오디오볼륨: 0.8,
// 워터마크 활성화: 거짓, // 라이선스가 허용하는 경우
// ... 더 많은 커스터마이징 옵션
});
if (result && result.exportedVideoUri) { {
console.log("동영상 편집 성공! 경로:", result.exportedVideoUri);
setEditingResult(`편집된 동영상을 ${result.exportedVideoUri}`에 저장했습니다;)
Alert.alert("성공", "동영상이 편집되어 저장되었습니다!");
// 이제 이 동영상을 업로드하고, 재생할 수 있습니다.
} else if (result && result.cancelled) { {
console.log("동영상 편집이 취소되었습니다.");
setEditingResult("사용자가 동영상 편집을 취소했습니다.");
} else {
console.warn("특정 결과 없이 동영상 편집기가 종료되었습니다.");
setEditingResult("동영상 편집기 세션이 종료되었습니다.");
}
} catch (error) {
console.error("Banuba 비디오 에디터를 열지 못했습니다:", error);
Alert.alert("오류", "동영상 편집기를 열 수 없습니다.");
} finally {
setLoading(false);
}
};

if (loading) {
return (
<보기 스타일>
<ActivityIndicator size="large" color="#0000ff" />
<Text style=>{sdkReady ? "Launching Editor..." : "Banuba SDK 초기화 중..." ?"}</Text>
</View>
);
}
return (
<View style=>
<Text style=>
Banuba 비디오 편집기 통합
</Text>
{sdkReady ? (
<버튼
title="비디오 편집기 열기"
onPress={openBanubaEditor}
disabled={loading}
/>
) (
<Text style=>
SDK가 준비되지 않았습니다. 토큰과 콘솔에서 오류를 확인하세요.
</Text>
)}

{편집결과 && (
<View style=>
<Text style=>마지막 편집 결과입니다:</Text>
<Text style=>{editingResult}</Text>
{여기에 <비디오> 컴포넌트를 추가하여 편집한 파일을 재생할 수 있습니다 */}
{/* 예시: <비디오 소스= style= /> */}
</View>
)}
</View
);
};
export default VideoEditorScreen;
[/code]

5단계: 애플리케이션 실행

이 모든 단계가 끝나면 애플리케이션을 다시 빌드하여 모든 네이티브 모듈이 제대로 연결되었는지 확인합니다.

[code]

Bash

# 캐시 지우기(모범 사례)
npm start -- --reset-cache # 또는 yarn start -- --reset-cache
cd ios && pod install && cd ... # 포드파일을 변경한 경우 포드 설치 재실행
npx react-native run-android
npx react-native run-ios
[/code]

이 단계를 따르고 Banuba의 공식 리소스를 탐색하여 비디오 편집기 SDK를 React Native 프로젝트에 쉽게 통합하세요. 그래도 잘 모르겠다면 개발자 포털을 통해 지원팀 또는 동료 개발자와 소통하세요. 또한 여기에서 동영상 편집기 SDK 예제 및 가이드를 확인할 수 있습니다.

개념적인 React 네이티브 동영상 편집기 예제: 간단한 동영상 편집기를 사용한 반누바 SDK

사용자가 재미있는 동영상을 촬영하거나 휴대폰에서 동영상을 가져와서 멋진 필터를 추가하고 원하지 않는 부분을 다듬은 다음 완성된 컷을 저장하거나 공유할 수 있는 React Native 앱을 상상해 보세요.

앱 이름: "MySimpleVid"

핵심 기능:

1. 동영상 선택/녹화: 사용자가 기존 동영상을 선택하거나 새 동영상을 녹화할 수 있습니다.
2. 기본 타임라인 편집: 동영상의 시작점과 끝점을 다듬을 수 있습니다.
3. 효과/필터: 동영상에 시각적 필터를 적용합니다.
4. 동영상 처리 및 내보내기: 편집한 동영상을 저장합니다.

기술:

• React Native

Banuba 비디오 편집기 SDK

사용자 흐름 및 Banuba SDK 참여

1단계: 편집기 시작 및 초기 비디오 선택

사용자 액션:

사용자가 React Native 앱의 메인 화면에서 '비디오 편집' 버튼을 탭합니다.

앱 동작(리액트 네이티브):

• 앱이 Banuba SDK가 초기화되었는지 확인합니다(sdkReady 상태).

• 준비되면 적절한 매개변수를 사용하여 BanubaVideoEditor.openVideoEditor()를 호출합니다.

Banuba SDK 옵션:

[code]
{
entryPoint: 'camera' | 'gallery',
enableGallery: true,
enableCamera: true }
}
[/코드]

SDK UI 응답:

• entryPoint: 'gallery'인경우 , 미디어 선택기가 열립니다.
• 엔트리포인트: '카메라'인 경우, 앱 내 카메라가 실행되어 녹화를 시작합니다.

결과:

편집기는 기기에서 미디어 선택과 통합 카메라 모듈을 통한 실시간 동영상 캡처를 모두 지원합니다.

2단계: 타임라인 및 트리밍 인터페이스

사용자 작업:

동영상을 선택하거나 녹화하면 편집기가 타임라인 보기로 전환됩니다.

Banuba 편집기 UI:

• 상단: 동영상 미리보기 플레이어.
• 아래: 드래그 가능한 시작/종료 핸들이 있는 대화형 타임라인.

사용자 상호 작용:

• 핸들을 드래그하여 다듬기 지점을 조정할 수 있습니다.
• 동영상 미리보기는 변경 사항을 반영하여 실시간으로 업데이트됩니다.

SDK 기능(내부 기능):

• 실시간 트리밍은 Banuba의 기본 비디오 엔진이 처리합니다.
• 프레임이 트림 지점을 기반으로 동적으로 다시 렌더링되어 지연 없이 원활하게 재생됩니다.

3단계: 필터 및 효과 적용

사용자 작업:

사용자가 '필터' 또는 '효과' 아이콘을 탭합니다.

Banuba 편집기 UI:

• 효과 썸네일의 가로 스크롤 또는 그리드 레이아웃이 나타납니다.
• 효과를 탭하면 미리 보기에 즉시 적용됩니다.

기능:

• 실시간 효과 렌더링.
• 분류된 필터: 예: 컬러, 예술적, AR 마스크.
• AR 필터는 컴퓨터 비전을 사용하여 얼굴을 추적하고 3D/2D 에셋을 오버레이합니다.

SDK 역할:

• 실시간으로 프레임 단위로 필터를 적용합니다.
• 트리밍된 비디오 부분과 효과를 원활하게 통합합니다.

4단계: 최종 동영상 내보내기

사용자 작업:

편집이 완료되면 사용자는 "완료" 또는 "내보내기"를 탭합니다 .

Banuba SDK UI:

• 비디오가 처리되는 동안 진행률 표시기가 나타납니다.

SDK 처리 작업:

• 인코딩: 편집 내용을 최종 동영상(예: MP4)으로 변환합니다.
• 병합 편집: 다듬기, 효과 및 필터를 영구적으로 적용합니다.
• 오디오 동기화: 동영상 콘텐츠와 사운드를 일치시킵니다.
• 최적화: 사용 가능한 경우 하드웨어 가속을 사용합니다.

결과:

• SDK가 React Native에 제어권을 반환합니다.
• 반환된 결과에는 최종 비디오 경로(예: exportedVideoUri)가 포함됩니다.

앱 로직(React Native):

• URI를 사용하여
  • 백엔드/서버에 업로드.
  • 사용자 정의 플레이어에서 표시.
  • 갤러리에 저장합니다(재액트 네이티브-fs 또는 재액트 네이티브-카메라-롤과 같은 모듈 사용).
  • 공유 화면으로 이동합니다.

통합

CLI(리액트 네이티브)

일반 React Native 앱에서 Banuba SDK를 설정하는 것은 빠르고 간단합니다:

SDK를 설치합니다:

[code]
npm install react-native-banuba-sdk
# 또는
yarn add react-native-banuba-sdk
[/코드]

2. iOS의 경우 코코아팟을 설치합니다:

[code]
cd ios
pod install
cd ..
[/code]

3. 기본 프로젝트 설정을 업데이트합니다:

Android: build.gradle에 필요한 권한 및 SDK 세부 정보를 추가합니다.

iOS: Info.plist 를 권한으로 업데이트하고 최소 플랫폼 버전을 설정합니다.

자세한 내용은 Banuba의 요구 사항 및 GitHub 리포지토리를 참조하세요.

엑스포 통합

베어 워크플로우로 Expo를 사용하시나요? Banuba SDK가 도와드립니다.

1. Expo CLI를 통해 설치합니다:

[code]
expo install react-native-banuba-sdk
[/code]

2. Banuba Expo 구성 플러그인을 app.json 또는 app.config.js에 추가하여 사용하세요:

[code]
{
"expo": {
"플러그인": [
"react-native-banuba-sdk"
],
...
}
}
[/code]

3. 필요한 권한을 추가합니다:

[code]
{
"expo": {
"android": {
"권한": [
"CAMERA",
"record_audio",
"READ_EXTERNAL_STORAGE",
"쓰기_외부_저장소"
]
},
"iOS": {
"정보 목록": {
"NSCameraUsageDescription": "이 앱은 동영상을 캡처하기 위해 카메라에 액세스해야합니다.",
"NSMicrophoneUsageDescription": "이 앱은 오디오를 녹음하려면 마이크에 액세스해야합니다.",
"NS포토라이브러리사용설명": "이 앱은 동영상을 선택하고 저장하려면 사진 라이브러리에 액세스해야합니다.",
"NSPhotoLibraryAddUsageDescription": "이 앱은 편집된 동영상을 사진 라이브러리에 저장해야 합니다."
}
}
}
}
[/code]

4. 앱을 다시 빌드합니다:

[code]
엑스포 사전 빌드
expo run:iOS
expo run:android
[/code]

구성 및 커스터마이징

간단한 구성 개체를 사용하여 에디터의 도구 레이아웃, 테마 및 기능을 완전히 사용자 지정할 수 있는 Banuba SDK입니다.

예시: 도구 모음 도구 및 테마 구성하기(타입스크립트)

[code]
import BanubaVideoEditor from 'react-native-banuba-sdk';
const editorConfig = {
toolsOrder: ['trim', 'filters', 'stickers', 'music'],
theme: {
primaryColor: '#FF6347',
secondaryColor: '#333',
backgroundColor: '#FFF',
fontFamily: 'Arial',
},
enableFilters: true,
enableMusicEditor: true,
enableAnnotations: true,
overlayImages: ['sticker1.png', 'sticker2.png'],
};

BanubaVideoEditor.openVideoEditor(editorConfig)
.then(result => {
if (result.exportedVideoUri) {
console.log('동영상 저장 위치:', result.exportedVideoUri);
}
})
.catch(console.error);
[/code]

도구 순서 변경 및 기능 활성화/비활성화하기

[code]
const config = {
toolsOrder: ['필터', '트림', '음악'], // 툴바 버튼 순서 변경
enableTextOverlay: false, // 텍스트 도구 숨기기
enableARMasks: true, // AR 마스크 활성화
};
[/code]

필터

Banuba에는 실시간 필터 미리보기와 AR 필터가 포함되어 있습니다. 표시되는 필터 세트를 사용자 지정할 수 있습니다.

[code]
const filterConfig = {
filterCategories: [
{ id: 'color', name: '컬러 필터' },
{ id: 'artistic', name: '예술적' },
{ id: 'ar_masks', name: 'AR 마스크' },
],
};
BanubaVideoEditor.openVideoEditor({
...editorConfig,
filterConfig,
});
[/code]

오버레이

사용자가 동영상에 붙일 수 있는 오버레이 이미지 또는 스티커를 추가합니다.

[code]
const overlayConfig = {
overlayImages: [
{ id: 'sticker1', uri: 'file:///path/to/sticker1.png' },
{ id: 'sticker2', uri: 'file:///path/to/sticker2.png' },
],
};

BanubaVideoEditor.openVideoEditor({
...editorConfig,
...overlayConfig,
});
[/code]

주석

자유형 그리기, 스티커, 텍스트 주석을 지원합니다.

[code]
const annotationConfig = {
enableAnnotations: true,
brushColors: ['#FF0000', '#00FF00', '#0000FF'],
stickerPacks: ['pack1', 'pack2'],
};

BanubaVideoEditor.openVideoEditor({
...editorConfig,
...annotationConfig,
});
[/code]

네이티브 인터페이스 브리지

보다 심층적인 네이티브 수준의 커스터마이징이 필요하신가요? Banuba는 두 플랫폼 모두에 네이티브 인터페이스를 노출합니다.

iOS(Objective-C)

[code]
#import <RNVideoEditor/RNVideoEditor.h>
- (void)configureBanubaEditor {
RNVideoEditorBuilder *builder = [RNVideoEditorBuilder new];
builder.theme = [RNVideoEditorTheme defaultTheme];
builder.toolsOrder = @[@"trim", @"filters", @"stickers"];
// 추가 구성은 여기
[RNVideoEditor configureWithBuilder:builder];
}
[/code]

Android(Kotlin)

[code]

RNVideoEditorModule.editorWillOpenClosure = { editorSettings ->

editorSettings.toolsOrder = listOf("필터", "트림", "음악")
editorSettings.theme.primaryColor = Color.parseColor("#FF6347")
// 여기에서 더 많은 editorSettings 사용자 지정
}
[/code]

내부 작동 방식

Banuba 비디오 편집기 SDK에서 배경 교체

Banuba의 SDK는 네이티브 자바스크립트 브리지 아키텍처를 사용합니다:

• 네이티브 레이어(iOS의 경우 Swift/Objective-C, Android의 경우 Kotlin/Java)는 비디오 처리, 효과 및 렌더링을 고속으로 처리합니다.

• 자바스크립트 레이어는 UI를 제공하고 리액트 네이티브 브릿지를 통해 이벤트를 트리거합니다.

• 이 조합은 JS 스레드를 차단하지 않고 네이티브 수준의 성능을 제공합니다.

• 코드베이스를 깔끔하게 유지하면서 강력한 처리 능력을 확보할 수 있습니다.

왜 리액트 네이티브 앱에 바누바의 비디오 SDK를 사용해야 할까요?

바누바의 리액트 네이티브 비디오 에디터 SDK는 개발을 간소화하는 동시에 프리미엄 사용자 경험을 제공하도록 제작되었습니다. 콘텐츠 제작 플랫폼, 소셜 비디오 앱 또는 편집이 필요한 모든 기능을 구축하는 경우, Banuba를 사용하면 더 빠르고 스마트하게 출시할 수 있습니다.

• 개발자를 위한 시간 절약형 통합

Banuba는 동영상 편집기 통합의 번거로움을 덜어줍니다. UI가 이미 준비되어 있고, 문서가 명확하며, React Native와 잘 작동합니다. 프로덕션 준비에 걸리는 시간(어쩌면 며칠)을 절약할 수 있습니다.

• 고성능 비디오 처리

속도와 정확성을 위해 제작된 Banuba의 비디오 SDK는 React Native 앱에 네이티브 성능을 제공합니다. 실시간 편집과 동기화된 오디오를 완벽하게 처리하여 저사양 기기에서도 하이엔드 경험을 보장합니다.

• 향상된 사용자 경험

강력한 효과, 심플한 디자인. Banuba의 React Native 동영상 편집기는 필터, 가상 배경, AR, 반응형 컨트롤 등을 결합하여 단 몇 번의 탭만으로 전문가 수준의 동영상을 제작할 수 있습니다.

최종 생각

동영상을 다루는 앱에서 React Native를 사용하는 경우, 에디터를 추가하는 것은 단순히 좋은 기능이 아닙니다. 이제 필수 요소가 되었습니다.

바누바의 비디오 에디터 SDK를 사용하면 미디어 처리 전문가가 될 필요가 없습니다. 잘 디자인되고 빠르고 다양한 기능을 갖춘 에디터를 연결하기만 하면 나머지 앱 제작에 집중할 수 있습니다.

지금 바로 비디오 편집기 SDK 무료 평가판을 시작하여 사용해 보세요.

관련 리소스

• Banuba 비디오 편집기 SDK 살펴보기
• 바누바 비디오 에디터 SDK 데모 앱 테스트하기
• GitHub에서 전체 React Native 비디오 편집기 통합 샘플 살펴보기
• 통합에 대한 비디오 가이드를 시청하세요:
  • 안드로이드 통합 비디오
  • iOS 연동 동영상

참조 목록

Adavelli, M. (2024, January 2). 2025 년 최고의 비디오 소비 통계. TechJury - 기술 인사이트, 보고서 및 분석. https://techjury.net/industry-analysis/video-consumption-statistics/#:~:text=91.8%25%20of%20all%20internet%20users%20watch%20online%20videos%20weekly.&text=In%20this%20digital%20age%2C%20everyone,to%20influencer%20videos%20to%20gaming.

Aulas, C. (2025, June 13). 최고의 React 네이티브 비디오 플레이어 라이브러리 5가지 (2025) . https://www.banuba.com/blog/best-react-native-video-player-libraries.

딥 러닝을 사용한 배경 빼기 | 감지, 제거. (nd). https://www.banuba.com/technology/background-subtraction

바누바. (2022a, June 21). Banuba 비디오 편집기 SDK를 Android 애플리케이션에 통합하는 방법 [비디오]. YouTube. https://www.youtube.com/watch?v=xSMK3gCfRJY

Banuba. (2022b, June 21). Banuba 비디오 편집기 SDK를 iOS 애플리케이션에 통합하는 방법 [비디오]. YouTube. https://www.youtube.com/watch?v=2FsEm_W01to

Banuba. (2022c, 8월 18일). 모바일 동영상 편집기 앱을 개발하는 방법 . https://www.banuba.com/blog/how-to-develop-a-mobile-video-editor-app.

바누바 커뮤니티 포털. (nd). 바누바 커뮤니티 포털. https://community.banuba.com/

Banuba 비디오 편집기-Google Play의 앱. (nd). https://play.google.com/store/apps/details?id=com.banuba.sdk.ve.demo&hl=en

Team, B. (nd-a). Android, IOS용 AI 동영상 편집기 SDK API. https://www.banuba.com/ko/video-editor-sdk

비디오 편집기 SDK - 예제 및 가이드. (2023, June 22). 바누바 커뮤니티 포털. https://community.banuba.com/t/video-editor-sdk-examples-and-guides/33

휘트니, M., & 휘트니, M. (2021, December 2). 비디오를 사용하여 전환율을 높이는 6가지 방법. WordStream. https://www.wordstream.com/blog/ws/2016/03/30/video-for-conversion-rate-optimization#:~:text=Remember%2C%20videos%20have%20been%20proven%20to%20increase%20conversion%20rates%20by%2080%.