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

# 배너 인앱 메시지로 사용자 온보딩

> 앱 UI를 차단하지 않는 상황에 맞는 상단 및 하단 배너 인앱 메시지로 사용자를 안내합니다.

배너 인앱 메시지(IAM)를 사용하면 앱 UI를 차단하지 않고 사용자를 안내할 수 있습니다. 사용자가 앱과 계속 상호작용하는 동안 화면 상단 또는 하단에 짧은 상황별 메시지를 표시합니다.

일반적으로 사용자가 특정 순간에 추가 컨텍스트가 필요할 때 배너 IAM을 사용합니다. 예를 들어 처음 화면에 도달하거나 주요 워크플로를 시작할 때입니다.

<Info>
  인앱 메시지는 트리거 조건이 충족될 때만 표시됩니다. 앱에서 트리거를 설정하여 배너가 나타나는 시점을 정확하게 제어할 수 있습니다.
</Info>

***

## 배너 IAM을 사용해야 할 때

다음과 같은 경우 온보딩에 배너 IAM을 사용합니다:

* 사용자가 화면에 도달할 때 해당 화면을 설명
* 다단계 플로우를 통해 사용자를 안내
* 사용자가 다음에 취해야 할 조치를 강조
* 온보딩을 눈에 띄지만 방해가 되지 않게 유지

구조화된 다중 화면 워크스루가 필요한 경우 카드 또는 캐러셀 IAM을 대신 사용하세요.

***

## 온보딩 플로우 예시

사용자가 처음으로 사이트나 앱을 열면 상단 배너가 환영하고 탐색을 유도합니다. 사용자가 제품을 탭하여 세부 정보를 보면 하단 배너가 다음에 무엇을 해야 하는지 안내합니다. 각 배너는 사용자가 관련 화면에 도달할 때만 나타납니다.

이 접근 방식은 사용자가 관련성이 있을 때만 안내를 보도록 보장합니다.

### 시각적 예시: 이커머스 온보딩

배너 IAM이 이커머스 앱을 통해 사용자를 안내하는 방법입니다. 이 예시에서는 **두 개의 별도 IAM**을 사용하며, 각각 **3초 자동 닫기**가 설정되어 있습니다. 첫 번째 배너가 닫히면 두 번째 배너의 트리거가 활성화되어 매끄러운 순차적 플로우를 만듭니다:

<Columns cols={2}>
  <Card title="초기 환영 배너" icon="hand-wave">
    <Frame>
      <img src="https://mintcdn.com/onesignal/yfdI7grM87DeSRfh/images/iam/iam-onboarding-welcome-banner.png?fit=max&auto=format&n=yfdI7grM87DeSRfh&q=85&s=0870317f04e17618fe31e49a525e3caa" alt="'제품을 탭하여 자세히 알아보고 쇼핑을 시작하세요!'라고 표시하는 환영 배너" width="819" height="1723" data-path="images/iam/iam-onboarding-welcome-banner.png" />
    </Frame>

    사용자가 처음 앱을 열면 하단 배너가 제품 탐색을 유도합니다.
  </Card>

  <Card title="제품 선택 배너" icon="cart-shopping">
    <Frame>
      <img src="https://mintcdn.com/onesignal/yfdI7grM87DeSRfh/images/iam/iam-onboarding-product-banner.png?fit=max&auto=format&n=yfdI7grM87DeSRfh&q=85&s=dee390192eec8bae2c8da54c4a9ec983" alt="'제품을 보고 있습니다! 모든 세부 정보를 확인하고 준비가 되면 장바구니에 추가하세요.'라고 표시하는 제품 배너" width="776" height="1485" data-path="images/iam/iam-onboarding-product-banner.png" />
    </Frame>

    사용자가 제품을 탭하면 배너가 제품 상세 보기에 대한 안내를 제공합니다.
  </Card>
</Columns>

***

## 전제 조건

시작하기 전에 다음을 확인하세요:

* 활성 OneSignal 앱
* 앱에 OneSignal SDK 설치됨
* 앱 코드에서 이벤트를 트리거하거나 메서드를 호출할 수 있음
* OneSignal SDK에 대한 [사용자 동의](./mobile-sdk-reference#privacy) 부여됨 (인앱 메시징에 필요)

***

## 배너 인앱 메시지 생성

<Steps>
  <Step title="인앱 메시지로 이동">
    OneSignal 대시보드에서 **Messages → In-App Messages**로 이동하고 **New In-App Message**를 선택합니다.
  </Step>

  <Step title="배너 유형 선택">
    **Message Type**에서 **Top** 또는 **Bottom**을 선택합니다.
  </Step>

  <Step title="콘텐츠 디자인">
    화면의 목적을 설명하는 짧은 제목, 필요한 경우 선택적 지원 텍스트, 다음 조치를 안내하는 선택적 버튼을 포함합니다.
  </Step>

  <Step title="트리거 구성">
    배너가 표시되어야 하는 시점을 정의하는 하나 이상의 \*\*[인앱 메시지 트리거](./iam-triggers)\*\*를 추가합니다. 선택적으로 메시지가 표시되는 빈도를 제어하는 조건이나 제한을 추가합니다.
  </Step>

  <Step title="표시 시간 설정">
    자동 닫기(배너가 3-10초 후 사라짐) 또는 사용자 닫기 가능(사용자가 닫기를 탭할 때까지 배너 유지) 중에서 선택합니다.
  </Step>

  <Step title="메시지 활성화">
    배너 인앱 메시지를 저장하고 활성화합니다.
  </Step>
</Steps>

<Note>
  높은 가시성 안내에는 상단 배너를 사용하고, 기본 작업에 맞는 미묘한 프롬프트에는 하단 배너를 사용합니다. 온보딩의 경우 사용자 작업 없이 플로우를 진행하기 위해 자동 닫기를 사용합니다.
</Note>

<Warning>
  긴 설명은 피하세요. 배너 IAM은 상세한 온보딩이나 튜토리얼용으로 설계되지 않았습니다.
</Warning>

***

## 앱에서 배너 트리거

사용자가 특정 화면에 도달하거나 작업을 완료할 때 인앱 메시지 트리거를 사용하여 배너 IAM을 트리거합니다. 트리거는 앱 코드에서 설정하는 키-값 쌍입니다. 트리거 조건이 IAM의 표시 규칙과 일치하면 배너가 표시됩니다.

<CodeGroup>
  ```javascript JavaScript theme={null}
  // 사용자가 대시보드를 볼 때 트리거
  OneSignal.addTrigger('dashboard_viewed', 'true');
  ```

  ```swift iOS theme={null}
  // 사용자가 대시보드를 볼 때 트리거
  OneSignal.addTrigger("dashboard_viewed", value: "true")
  ```

  ```kotlin Android theme={null}
  // 사용자가 대시보드를 볼 때 트리거
  OneSignal.addTrigger("dashboard_viewed", "true")
  ```
</CodeGroup>

<Info>
  트리거는 제거하거나 업데이트하지 않는 한 세션 동안 지속됩니다. 각 트리거가 명확하고 의도적인 온보딩 순간을 나타내는지 확인하세요.
</Info>

### 더 이상 필요하지 않을 때 트리거 제거

배너가 의도치 않게 다시 나타나는 것을 방지하려면 더 이상 필요하지 않을 때 트리거를 제거하세요:

<CodeGroup>
  ```javascript JavaScript theme={null}
  // 사용자가 온보딩을 완료한 후 트리거 제거
  OneSignal.removeTrigger('dashboard_viewed');
  ```

  ```swift iOS theme={null}
  // 사용자가 온보딩을 완료한 후 트리거 제거
  OneSignal.removeTrigger("dashboard_viewed")
  ```

  ```kotlin Android theme={null}
  // 사용자가 온보딩을 완료한 후 트리거 제거
  OneSignal.removeTrigger("dashboard_viewed")
  ```
</CodeGroup>

***

## 배너 메시지 체인 (선택 사항)

각각 고유한 트리거가 있는 **여러 IAM**을 만들어 플로우를 통해 사용자를 안내할 수 있습니다. 각 배너를 **3초 후 자동 닫기**로 설정하여 다음 배너가 나타날 수 있도록 합니다. 배너 중복을 방지하기 위해 다음 트리거를 추가하기 전에 이전 트리거를 제거합니다.

<Tip>
  매끄러운 순차적 온보딩을 위해 단계당 하나의 IAM을 만들고, 각각 3초 후 자동 닫기로 설정하고, 다음 트리거를 추가할 때 이전 트리거를 제거하여 체인합니다.
</Tip>

### 예시: 이커머스 온보딩 플로우

1. 페이지 로드 → 트리거 `iam_welcome` → 배너: "🎉 환영합니다! 제품을 탐색하세요"
2. 사용자가 제품 탭 → 트리거 `iam_product_view` → 배너: "👀 ❤️를 탭하여 즐겨찾기 저장"
3. 사용자가 장바구니에 추가 → 트리거 `iam_add_to_cart` → 배너: "✅ 좋은 선택! 언제든 장바구니 보기"
4. 사용자가 장바구니 보기 → 트리거 `iam_cart_view` → 배너: "🛒 여기서 상품을 검토하세요"
5. 사용자가 체크아웃 → 트리거 `iam_checkout` → 배너: "🎊 주문해 주셔서 감사합니다!"

<CodeGroup>
  ```javascript JavaScript theme={null}
  // 1단계에서 2단계로 이동
  OneSignal.removeTrigger('iam_welcome');
  OneSignal.addTrigger('iam_product_view', 'true');
  ```

  ```swift iOS theme={null}
  // 1단계에서 2단계로 이동
  OneSignal.removeTrigger("iam_welcome")
  OneSignal.addTrigger("iam_product_view", value: "true")
  ```

  ```kotlin Android theme={null}
  // 1단계에서 2단계로 이동
  OneSignal.removeTrigger("iam_welcome")
  OneSignal.addTrigger("iam_product_view", "true")
  ```
</CodeGroup>

이를 통해 사용자를 압도하지 않고 점진적 온보딩을 만들 수 있습니다.

***

## 설정 확인

<Check>
  배너는 트리거가 발생할 때만 나타나고 앱 UI를 차단하지 않습니다.
</Check>

배너가 나타나지 않는 경우:

* 트리거 키와 값이 정확히 일치하는지 확인 (대소문자 구분)
* IAM이 대시보드에서 활성 상태인지 확인
* 빈도 제한 확인 - IAM이 속도 제한될 수 있음
* 사용자가 타겟팅 규칙을 충족하는지 확인 (해당되는 경우)
* OneSignal 트리거 이벤트에 대한 콘솔 로그 확인
* 인앱 메시징 동의가 부여되었는지 확인 (필요한 경우)

***

## 다음 단계

* 배너 인앱 메시지를 사용하여 새 기능 발표
* 카드 또는 캐러셀 IAM으로 전체 온보딩 경험 생성
* 사용자를 세그먼트화하여 경험 수준에 따라 다른 온보딩 메시지 표시
* 다양한 배너 메시지를 [A/B 테스트](./journeys-actions#abn-tests-multivariate-testing)하여 참여도 최적화