빠른 시작
5분 만에 웹에서 네이티브 기능을 호출할 수 있습니다.
1. SDK 설치
프로젝트에 Appify SDK를 추가합니다.
npm install @nolraunsoft/appify-sdk
CDN을 사용하는 경우 HTML <head>에 다음 스크립트 태그를 추가합니다.
<script src="https://cdn.jsdelivr.net/npm/@nolraunsoft/appify-sdk@latest/dist/appify-sdk.min.js"></script>
2. SDK 초기화
앱이 시작될 때 한 번만 초기화합니다. React라면 최상위 컴포넌트(App.tsx)의 useEffect 안에서, 일반 JS라면 페이지 로드 시점에 호출하세요.
import { appify } from '@nolraunsoft/appify-sdk';
async function initSDK() {
await appify.initialize({
debug: true, // 개발 중에는 true로 설정하면 콘솔에 브릿지 통신 로그가 출력됩니다
});
console.log('Appify SDK 초기화 완료');
}
initSDK();
initialize()는 Promise를 반환합니다. await 없이 호출하면 초기화가 끝나기 전에 다른 API를 호출했을 때 NotInitializedError가 발생할 수 있습니다.
3. 네이티브 기능 호출
가장 간단한 API인 device.getInfo()로 첫 번째 네이티브 기능을 호출해봅니다.
import { appify } from '@nolraunsoft/appify-sdk';
async function showDeviceInfo() {
const info = await appify.device.getInfo();
console.log(info);
}
showDeviceInfo();
성공하면 다음과 같은 형태의 객체가 반환됩니다.
{
"platform": "ios",
"os": "17.4",
"model": "iPhone 15 Pro",
"appVersion": "1.2.0",
"buildNumber": "42",
"bundleId": "com.example.myapp",
"deviceId": "A1B2C3D4-E5F6-7890-ABCD-EF1234567890"
}
4. 환경 분기 처리
SDK는 일반 웹 브라우저에서도 로드됩니다. 웹뷰 전용 기능을 호출하기 전에 반드시 환경을 확인하세요.
import { appify } from '@nolraunsoft/appify-sdk';
async function getDeviceInfoSafely() {
await appify.initialize();
if (!appify.isWebview) {
// 일반 브라우저에서는 네이티브 기능을 사용할 수 없습니다
// 브라우저 기본 API를 사용하거나 기능을 비활성화하세요
console.log('웹뷰 환경이 아닙니다. 네이티브 기능을 사용할 수 없습니다.');
return null;
}
try {
const info = await appify.device.getInfo();
return info;
} catch (error) {
// AppifyTimeoutError: 브릿지가 응답하지 않은 경우 (기본 타임아웃: 10초)
// AppifyBridgeError: 브릿지 연결 자체에 문제가 있는 경우
console.error('디바이스 정보를 가져오지 못했습니다.', error);
return null;
}
}
appify.isWebview는 초기화 전에도 참조할 수 있습니다. React Native WebView 내부에서 실행 중일 때 true를 반환합니다.
5. 다음 단계
기본 흐름을 확인했다면 실제 서비스에 필요한 기능을 추가해보세요.