모든 네이티브 기능. SDK 하나.

총 71개예요. 데모 앱에서 61개를 실제 휴대폰으로 실행해요.

  • 푸시 알림새 기능
  • 인앱 구매
  • 네이티브 화면 전환
  • 모달 시트새 기능
  • Face ID 로그인
  • QR 스캐너새 기능
  • 공유 창새 기능
  • Apple로 로그인새 기능
  • 실시간 위치새 기능
  • 사진 선택새 기능
  • 딥 링크새 기능
  • 앱 배지새 기능
  • 다른 앱에서 공유 받기새 기능
  • 저장된 로그인새 기능
  • 연락처새 기능
  • 건강 데이터새 기능
  • 오디오 플레이어새 기능
  • 음성 녹음새 기능
  • 날짜·시간 선택새 기능
  • 평점 요청새 기능
  • 추적 동의 요청새 기능
  • NFC 스캔새 기능

모든 기능에 문서와 라이브 데모.

타입과 문서를 제공하고 iOS와 Android에서 같은 방식으로 작동해요. 이미 쓰는 JavaScript에서 호출해요.

카메라·미디어

사진 촬영, 갤러리에서 선택, 오디오 녹음.

오디오·동영상 재생

네이티브 재생 컨트롤로 미디어를 재생하고, 오디오는 백그라운드에서도 들어요.

생체 인증 로그인

기존 인증에 Face ID·지문 로그인을 더해요.

저장된 로그인

기기에 저장한 인증 정보로 다음 접속 때도 사용자를 기억해요.

인앱 구매

두 스토어에서 디지털 상품을 팔아요. 영수증은 서버에서 검증해요.

푸시 알림

OneSignal을 통해 백엔드에서 대상별 푸시 알림을 보내요.

위치 정보

기기의 네이티브 위치 기능으로 정확하게 위치를 읽어요.

실행 중 권한 요청

네이티브 권한을 자연스럽게 요청하고 확인해요.

딥 링크

앱을 열거나 스토어를 거쳐 앱을 여는 링크.

네이티브 공유

시스템 공유 창으로 텍스트, 링크, 이미지, 파일을 공유해요.

네이티브 UI·반응

JavaScript로 배너, 로딩 표시, 네이티브 화면 요소를 다뤄요.

기기·앱 실행 상태

플랫폼, 앱 버전, 포그라운드·백그라운드 이벤트.

배포할 때마다 설치된 모든 앱이 업데이트돼요.

웹, iOS, Android 모두 최신 배포 내용을 실행해요. 앱을 업데이트하지 않는 사용자도 같아요.

예전에는 변경할 때마다 세 번 출시하고 심사를 기다렸어요. BDK에서는 한 번 배포해요.

새 아이콘이나 네이티브 기능에는 여전히 스토어용 빌드가 필요해요.

앱 심사에서 보는 것

AI가 연결하는 과정을 봐요.

사용하는 제작 도구를 골라요. 읽을 안내, 작성할 파일, 응답하는 휴대폰. 이게 연동의 전부예요.

acme-storefront
PreviewCode
Publish

환경 변수의 인증 정보로 연결된 게시물을 여는 서버 푸시 알림을 보내 줘요

server/onesignal-push 읽기
server/notifications/sendReply.ts+12

환경 변수의 인증 정보로 서버에서 딥 링크 보내기

서버 전용 푸시 알림은 환경 변수의 인증 정보를 쓰고 42번 게시물을 열어요.

Ask Lovable...
Build
acme-storefront.lovable.app
server/notifications/sendReply.ts+12
1import { sendPushNotification } from "@thebdk/native/server/onesignal";2 3const result = await sendPushNotification({4  message: "New reply on your post",5  title: "Inbox",6  subtitle: "From @jess",7  imageUrl: "https://cdn.example.com/preview.png",8  onLoadUrl: "https://app.example.com/posts/42",9  urlParams: [{ key: "ref", value: "push" }],10  data: { postId: 42, kind: "reply" },11  subscriptionIds: ["a1b2c3d4-1111-2222-3333-444455556666"]12});
전체 프롬프트
이 앱에 @thebdk/native을 연동해 줘요. 배포한 사이트가 BDK의 네이티브 앱 틀 안에서 실행될 때 카메라와 Face ID가 작동하고, 일반 웹 앱은 브라우저에서 계속 작동하게 해요.

먼저 https://docs.thebdk.com/llms-full.txt와 추가할 각 기능의 페이지를 읽어요. 문서에 나온 도우미 이름, 이벤트 이름, 옵션 키만 써요. API를 임의로 만들지 않아요.

그다음:
1. @thebdk/native 패키지를 추가해요.
2. src/lib/bdk.ts에 브라우저에서 안전하게 불러오는 공유 클라이언트 하나를 만들어요:
   import { createBdkNative } from "@thebdk/native/browser";
   export const bdk = createBdkNative();
3. 타입이 있는 네임스페이스 도우미로만 기능을 만들어요: bdk.media.*, bdk.ui.*,
   bdk.navigation.*, bdk.iap.*, bdk.auth.*, bdk.location.*, bdk.device.*, bdk.share.*,
   bdk.permissions.*.
4. 사용자 반응이 필요한 기능은 호출 전에 bdk.on(event, cb)로 구독해요. 결과는 반환된 프로미스가 아니라 이벤트로 와요.
5. 브라우저에서는 호출이 실행되지 않고 triggered: false로 완료돼요. !result.triggered에 따라 분기하고 실제 웹 대체 기능을 유지해 Lovable 미리보기와 웹 빌드가 모두 작동하게 해요. 이를 건너뜀이나 not_native로 설명하지 않고, 웹 UI에서 네이티브 이벤트를 기다리지 않아요.
6. @thebdk/native/server/*에서 가져온 기능은 백엔드 전용이에요. 인증 정보는 환경 변수에서 읽어요. 키나 서버용 코드를 클라이언트에 넣지 않아요.

iOS·Android 앱을 만들거나 사이트를 앱으로 패키징하거나 빌드에 서명하거나 스토어에 제출하거나 미리보기에서 네이티브 동작을 검증했다고 말하지 않아요.

마지막에 변경한 파일, 추가한 웹 대체 기능과 함께 이렇게 안내해요: 앱을 URL에 배포하고 thebdk.com에 URL을 연결해 BDK가 iOS·Android 빌드를 패키징하고 서명하게 해요. 그다음 BDK로 패키징한 앱에서 네이티브 기능을 테스트해요.

BDK로 패키징한 앱에서 실행 중

카메라와 Face ID를 추가해요. 웹 미리보기는 대체 기능으로 계속 작동해요.

  • 공유 클라이언트 하나. npm install @thebdk/native를 한 번 불러오고 나머지는 그대로 둬요.
  • 결과는 이벤트로 와요. 프롬프트는 호출 전에 bdk.on(…)로 이벤트를 구독하도록 에이전트에 안내해요.
  • 브라우저에서도 작동해요. 앱 밖에서는 네이티브 호출이 실행되지 않아 웹사이트가 계속 작동해요.

코드가 없나요? 설치할 게 없어요. BDK Native에 앱 URL을 연결하면 같은 빌드가 나와요.

내 앱 만들기

기계가 읽는 안내: llms.txt. 에이전트가 가져오는 파일이에요. 에이전트 사용법 →

세 단계. 새 기술은 필요 없어요.

  1. 1

    SDK 설치는 선택이에요

    코드가 있나요? 타입이 모두 갖춰진 의존성 하나, npm install @thebdk/native를 써요. 코드가 없다면 설치할 게 없어요. 3단계만 진행하면 돼요.

  2. 2

    필요한 곳에서 네이티브 기능 호출

    기존 JavaScript로 카메라, 생체 인증, 구매, 푸시 알림을 호출해요. 빌드 하나로 브라우저 탭에서도 App Store 설치 앱에서도 작동해요.

  3. 3

    URL을 연결해요. 스토어용 빌드를 받아요.

    BDK Native에 내 URL을 붙여 넣어요. BDK가 두 앱을 빌드하고 서명해요. 이후에는 배포할 때마다 모든 휴대폰의 앱이 업데이트돼요.

app.ts
import { createBdkNative } from "@thebdk/native/browser";

const bdk = createBdkNative();
await bdk.ready();

// Results arrive on events — subscribe, then call.
bdk.on("photoCaptured", (photo) => upload(photo.fileUrl));
await bdk.media.capturePhoto();

// Native UI, one line.
await bdk.ui.showBanner({
  title: "Saved",
  description: "Photo uploaded."
});

연동 방식은 이게 전부예요. 전체 설명은 문서에서 읽고, 모든 기능은 라이브 데모에서 직접 실행해 봐요.

자세한 답변.

웹사이트를 포장한 앱이라며 Apple이 거절하지 않나요?

Apple은 웹사이트만 담은 앱을 거절해요. 푸시 알림, Face ID, 구매, 공유가 내 앱에 앱다운 기능을 더해요. 누구도 승인을 보장할 수 없어요. 라이브 데모는 BDK로 패키징한 앱이니 직접 판단해 봐요.

즉시 업데이트하면 스토어 규정에 어긋나지 않나요?

아니요. 앱이 현재 운영 중인 사이트를 보여줘요. 웹사이트 배포는 웹 기반 앱의 정상적인 작동 방식이에요. 코드를 몰래 넣는 방식이 아니에요. 아이콘, 권한, 런타임 업그레이드 등 네이티브 부분이 바뀌면 스토어 심사가 필요해요. 그때 BDK가 제출할 새 서명 빌드를 드려요.

BDK는 정확히 무엇인가요?

스토어로 배포하는 실제 앱 안에서 운영 중인 웹 앱을 전체 화면으로 보여주는 iOS·Android 네이티브 런타임이에요. 타입이 있는 JavaScript SDK인 @thebdk/native가 내 코드와 기기의 카메라, 생체 인증, 구매, 푸시 알림을 연결해요. BDK가 스토어에 올릴 앱을 패키징하고 서명해요. 단계별 안내를 따라 내 개발자 계정에서 직접 제출해요. 웹 앱은 직접 호스팅하는 일반 웹 앱으로 유지돼요.

웹 앱을 바꿔야 하나요?

아니요. 그대로 작동해요. 네이티브 기능이 필요한 곳에만 @thebdk/native를 추가해요. 나머지는 그대로이고 같은 빌드로 일반 웹사이트도 계속 운영해요.

PWA나 Capacitor와 어떻게 다른가요?

PWA는 App Store에 등록하거나 인앱 구매로 판매할 수 없어요. Capacitor는 네이티브 프로젝트를 넘겨줘요. 빌드, 서명, 재빌드는 계속 직접 해야 해요. BDK는 런타임을 관리해요. 패키징, 서명, 플랫폼 변화 대응은 BDK가 맡아요.

위의 모든 기능을 내 앱에.

내 앱 만들기 문서 읽기