> ## Documentation Index
> Fetch the complete documentation index at: https://help.airbridge.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 하이브리드 앱에서 에어브릿지 시작하기

웹만 운영하면 앱에서 만들 수 있는 매출을 놓칩니다. 앱은 푸시 알림으로 광고비 없이 유저를 다시 부를 수 있는 채널이기도 합니다. 다만 유저가 앱 마켓을 거치는 순간 웹에서 앱으로 이어지던 여정이 끊겨, 어떤 광고가 앱 설치와 구매로 이어졌는지 확인하기 어렵습니다.

하이브리드 앱은 앱을 적은 공수로 시작하는 방법이고, 에어브릿지는 중단된 유저 여정을 다시 이어붙이는 방법입니다. 이 가이드에서는 에어브릿지로 웹과 하이브리드 앱의 광고 성과를 함께 측정하는 방법을 안내합니다.

## 하이브리드 앱 알아보기

앱은 개발 방식에 따라 네이티브 앱과 하이브리드 앱으로 나뉩니다. 네이티브 앱(Native App)은 안드로이드, iOS 등 각 운영체제에 맞춰 개발한 앱입니다. 반면 하이브리드 앱(Hybrid App)은 웹사이트를 웹뷰(WebView)로 감싸 앱의 형태로 개발한 것입니다. 나쵸코드와 카페24 같은 앱 빌더로 만든 앱이 하이브리드 앱에 해당합니다.

<Note>
  **하이브리드 앱에서 발생한 이벤트도 앱 이벤트로 수집됩니다**

  하이브리드 앱의 화면은 웹뷰로 보여주는 웹사이트 화면이지만, 하이브리드 앱에서 발생한 이벤트도 앱 이벤트로 수집됩니다. 일반 브라우저에서 발생한 이벤트는 웹 이벤트로 수집됩니다. 접속 환경에 따라 이벤트가 자동으로 구분되므로 따로 설정하지 않아도 됩니다.
</Note>

하이브리드 앱의 개발을 앱 빌더에 요청하면 웹과 앱의 개발 주체가 나뉩니다. 웹은 사내에서, 앱은 앱 빌더에서 개발합니다. 앱 개발은 [앱 개발 요청하기](#앱-개발-요청하기)를 참고하세요.

## 사전 준비하기

먼저 아래 작업을 완료하세요. 이 단계에서 정한 사항을 이후 웹 개발과 앱 빌더 연동에 활용합니다.

### 에어브릿지에 앱 등록하기

1. 에어브릿지 계정을 생성하세요.
2. 앱을 등록하세요. 자세한 방법은 [새로운 앱 등록하기](/ko/guides/register-a-new-app)를 참고하세요.
3. \[설정]>\[에어브릿지 앱 설정]>\[앱 정보]로 이동해 \[서비스]를 전부 등록하세요.
4. 웹 개발자 등 함께 작업할 사용자를 에어브릿지에 초대하세요. 자세한 방법은 [조직에서 사용자 관리하기](/ko/guides/organization-level-user-management)를 참고하세요.

### 광고 채널 연동 확인하기

1. 운영 중인 광고 채널이 에어브릿지 대시보드 \[연동]>\[광고 채널 연동] 목록에 있는지 확인하세요.
2. 목록에 없는 광고 채널은 [광고 채널 연동 신청서](https://partner.airbridge.io/ko/supports/integrations)로 연동을 신청하세요.

### 이벤트 택소노미 설계하기

이벤트 택소노미는 수집할 이벤트와 프로퍼티를 정의한 구조입니다. 회원가입, 구매 완료 같은 유저 행동 중 무엇을 이벤트로 수집할지, 각 이벤트에서 어떤 정보를 프로퍼티로 함께 수집할지 정합니다. 아래 가이드를 참고해 광고 성과 확인에 필요한 이벤트 택소노미를 설계하세요.

* [에어브릿지 이벤트](/ko/guides/airbridge-event)
* [이벤트 택소노미](/ko/guides/airbridge-event-taxonomy)

아래는 서비스 분야별 권장하는 이벤트 택소노미 가이드입니다.

* [권장하는 에어브릿지 이벤트 - 게임](/ko/guides/recommended-gaming-airbridge-events)
* [권장하는 에어브릿지 이벤트 - 구독](/ko/guides/recommended-subscription-airbridge-events)
* [권장하는 에어브릿지 이벤트 - 금융](/ko/guides/recommended-finance-airbridge-events)
* [권장하는 에어브릿지 이벤트 - 커머스](/ko/guides/recommended-ecommerce-airbridge-events)

## 웹 개발하기

웹사이트에는 아래 웹 개발 작업이 필요합니다. 웹 개발자에게 아래 내용을 전달해 작업을 요청하세요.

### 웹 SDK 설치하기

에어브릿지 웹 SDK를 설치하세요. 설치에 필요한 앱 이름과 웹 SDK 토큰은 에어브릿지 대시보드 \[설정]>\[토큰 관리]에서 확인하세요. 설치 방법은 [Web SDK 설치하기](/ko/developers/web-sdk#web-sdk-설치하기)를 참고하세요.

### 이벤트 전송하기

웹사이트에서 발생한 이벤트를 광고 성과로 측정하려면 [사전 준비하기](#사전-준비하기) 단계에서 설계한 이벤트 택소노미에 따라 이벤트를 전송하세요. 자세한 방법은 [웹 이벤트 전송하기](/ko/developers/web-sdk#웹-이벤트-전송하기)를 참고하세요.

<Danger>
  **주의하세요**

  간편 로그인이나 간편 결제 서비스를 지원하는 경우, 앱의 로그인 완료 또는 결제 완료 페이지가 로드된 후에 이벤트를 전송하세요. 유저가 서비스 간 이동하는 중에 전송된 이벤트는 정상적으로 수집되지 않을 수 있습니다.
</Danger>

### 유저 ID 전송하기

웹과 앱에 흩어져 있는 유저 여정을 통합하려면 이벤트를 전송할 때 유저 ID를 포함하세요. 자세한 방법은 [유저 ID 설정하기](/ko/developers/web-sdk#유저-id-설정하기)를 참고하세요.

### 웹투앱 설정하기

웹사이트를 방문한 유저를 앱으로 보내려면 웹사이트와 앱 양쪽에 웹투앱 설정을 완료하세요. 웹사이트 설정은 아래를, 앱 설정은 앱 빌더별 연동 가이드를 참고하세요. 웹투앱 캠페인의 전체 흐름은 [웹투앱 캠페인 측정하기](/ko/guides/web-to-app-tracking)를 참고하세요.

##### CTA 버튼 만들기

웹사이트의 버튼에 에어브릿지 웹 SDK의 `openDeeplink` 함수를 적용하세요. `openDeeplink` 설정 방법과 입력 항목은 [웹투앱 설정](/ko/developers/web-sdk#%EC%9B%B9%ED%88%AC%EC%95%B1-%EC%84%A4%EC%A0%95)을 참고하세요.

<Danger>
  **주의하세요**

  `openDeeplink`의 딥링킹 경로에 넣는 URL 스킴 딥링크는 앱 빌더마다 규칙이 다릅니다. 앱 빌더 연동 가이드에서 확인하세요.
</Danger>

##### 스마트 배너 만들기

웹사이트에 앱 설치나 전환을 유도하는 스마트 배너를 노출할 수 있습니다. 자세한 내용은 [스마트 배너 만들기](/ko/developers/web-sdk#스마트-배너-만들기)를 참고하세요.

##### 웹투앱 어트리뷰션 기여 기간 설정하기

유저를 웹사이트로 보낸 광고 채널에 앱에서 발생한 성과를 기여하려면 프로텍티드 어트리뷰션 윈도우(Protected Attribution Window, PAW)를 설정하세요. PAW를 설정하지 않으면 웹사이트에 성과가 기여될 수 있습니다. 자세한 내용은 아래 가이드를 참고하세요.

* [웹투앱 캠페인 측정하기](/ko/guides/web-to-app-tracking#q-paw%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%84%A4%EC%A0%95%ED%95%B4%EC%95%BC-%ED%95%98%EB%82%98%EC%9A%94)
* [웹투앱 어트리뷰션의 기여 기간 설정하기](/ko/developers/web-sdk#%EC%9B%B9-%ED%88%AC-%EC%95%B1-%EC%96%B4%ED%8A%B8%EB%A6%AC%EB%B7%B0%EC%85%98%EC%9D%98-%EA%B8%B0%EC%97%AC-%EA%B8%B0%EA%B0%84-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0)

## 앱 개발 요청하기

앱 개발 작업은 앱 빌더가 담당합니다. 앱 빌더별 연동 가이드에 따라 에어브릿지와 앱 빌더 대시보드 연동을 완료하세요.

* [나쵸코드](/ko/guides/nachocode)

## 테스트하기

웹 개발과 앱 빌더 연동을 마쳤다면 아래를 테스트하세요.

* SDK 연동 테스트: [마케터를 위한 에어브릿지 SDK 테스트](/ko/guides/sdk-testing)를 참고하세요.
* 앱 이벤트 수집 확인: 앱에서 발생한 이벤트가 \[앱 이벤트 실시간 로그]에 기록되는지 확인하세요. 자세한 내용은 [실시간 로그로 이벤트 확인하기](/ko/guides/tracking-events-with-real-time-logs)를 참고하세요.
* 웹 이벤트 수집 확인: 웹에서 발생한 이벤트가 \[웹 이벤트 실시간 로그]에 기록되는지 확인하세요. 자세한 내용은 [실시간 로그로 이벤트 확인하기](/ko/guides/tracking-events-with-real-time-logs)를 참고하세요.
* 웹투앱 딥링킹 확인: 웹사이트의 버튼이나 배너를 클릭했을 때 앱으로 딥링킹되는지 확인하세요. 자세한 방법은 [마케터를 위한 에어브릿지 딥링킹 테스트](/ko/guides/deep-linking-test)를 참고하세요.

## 광고 성과 측정 시작하기

모든 테스트가 완료됐다면 아래 순서로 광고 성과 측정을 시작하세요.

1. 광고 채널을 연동하세요. 자세한 방법은 [에어브릿지와 연동하기](/ko/guides/integrating-ad-channels)를 참고하세요.
2. 트래킹 링크를 생성해 광고에 사용하세요. 자세한 방법은 [에어브릿지에서 트래킹 링크 생성하기](/ko/guides/creating-tracking-links-on-the-dashboard)를 참고하세요.
3. 리포트에서 광고 성과를 조회하세요. 자세한 내용은 [에어브릿지 리포트 알아보기](/ko/guides/airbridge-report-overview)를 참고하세요.

<link rel="alternate" hrefLang="en" href="https://help.airbridge.io/en/guides/hybrid-app" />

<link rel="alternate" hrefLang="ko" href="https://help.airbridge.io/ko/guides/hybrid-app" />