네이티브 인앱 메시지 생성

네이티브 인앱은 커스텀 인앱이 로드하는 HTML 페이지 대신 Pushwoosh SDK가 기기에서 직접 렌더링하는 기성 레이아웃을 사용합니다. 이로 인해 로드 속도가 더 빠르고 애니메이션이 더 부드러우며, 디자인이나 개발 기술 없이도 만들 수 있습니다.

프로모션, 알림 또는 기능 발표를 신속하게 시작하고 싶고 완전히 맞춤화된 레이아웃이 필요하지 않을 때 네이티브 인앱을 사용하세요. 디자인에 대한 완전한 제어가 필요한 경우, 대신 HTML 기반 인앱을 빌드하세요.

전제 조건

네이티브 인앱 템플릿을 생성하기 전에 다음을 확인하세요:

인앱 메시지가 표시될 수 있도록 Pushwoosh SDK가 앱에 통합되어 있습니다. 자세히 알아보기
앱이 모달, 전체 화면, 스토리의 경우 iOS SDK 7.2.0 이상 또는 Android SDK 6.10.0 이상을 실행해야 합니다. 시트, 캐러셀, 배너는 iOS SDK 7.2.1 이상 또는 Android SDK 6.10.1 이상이 필요합니다. 비디오는 iOS SDK 7.2.0 이상 또는 Android SDK 6.11.0 이상이 필요합니다.

크로스 플랫폼 프레임워크

네이티브 인앱 모듈은 사용하는 스택에 따라 다르게 제공됩니다:

Flutter는 네이티브 인앱 모듈을 자동으로 번들링합니다. Pushwoosh Flutter 플러그인 외에 추가 설정이 필요하지 않습니다.
React Native, Cordova, Capacitor, Unity, Expo는 네이티브 인앱 모듈을 번들링하지 않습니다. 앱의 기본 Android/iOS 프로젝트에 직접 추가해야 합니다: Android에서는 pushwoosh-inapp-ui, iOS에서는 PushwooshInApp입니다. 네이티브 모듈을 프로젝트에 추가하는 방법은 프레임워크의 통합 가이드를 참조하세요.
웹은 지원되지 않습니다. 네이티브 인앱은 Android 및 iOS SDK를 통해 렌더링되며, 웹 SDK에는 네이티브 인앱 모듈이 없습니다.

네이티브 인앱 템플릿 생성

콘텐츠 → 인앱으로 이동합니다.
인앱 생성 옆의 화살표를 클릭하고 네이티브 인앱을 선택합니다. 네이티브 에디터가 바로 열립니다.
템플릿 이름을 입력합니다.
에디터 상단의 표시 유형에서 표시 유형을 선택합니다: 모달, 전체 화면, 스토리, 시트, 캐러셀, 배너 또는 비디오. 각 유형에 필요한 항목은 표시 유형 구성을 참조하세요.

에디터는 오른쪽에 실시간 모바일 미리보기를, 왼쪽에 콘텐츠, 구성, 액션으로 그룹화된 템플릿 필드를 표시합니다. 각 그룹에서 볼 수 있는 내용은 선택한 표시 유형에 따라 다릅니다.

표시 유형 구성

모달

중앙에 배치된 카드로, 선택적으로 어두운 배경 위에 표시됩니다.

콘텐츠에서 제목과 메시지를 추가하고 각각의 텍스트 색상을 지정하며, 선택적으로 이미지를 추가합니다. 이미지 추가를 참조하세요.
구성에서 카드 배경색을 설정합니다. 이것은 텍스트와 이미지 뒤의 카드를 채웁니다.
사용자가 버튼을 탭하지 않고 인앱을 닫을 수 있도록 ✕ 컨트롤을 원하면 닫기 버튼을 켜세요.
카드 뒤의 화면을 어둡게 하고 메시지에 집중할 수 있도록 배경 어둡게 하기를 켜세요.
액션에서 하나 이상의 버튼을 추가합니다. 버튼 구성을 참조하세요.

모달 표시 유형에 대한 네이티브 인앱 편집기로, 콘텐츠, 구성, 액션 필드와 실시간 모바일 미리보기가 있음

전체 화면

텍스트와 버튼이 위에 있는 전체 화면 커버 이미지입니다. 왼쪽 패널에서 다음 필드를 채웁니다:

콘텐츠에서 커버 이미지와 함께 제목과 메시지를 추가하고 각각의 텍스트 색상을 지정합니다. 이미지 추가를 참조하세요.
구성에서 커버 색상을 설정합니다. 커버 이미지가 로드되는 동안 또는 이미지를 비워두면 자체적으로 표시됩니다.
사용자가 버튼을 탭하지 않고 인앱을 닫을 수 있도록 ✕ 컨트롤을 원하면 닫기 버튼을 켜세요.
액션에서 하나 이상의 버튼을 추가합니다. 버튼 구성을 참조하세요.

커버 이미지, 제목, 메시지, 커버 색상 필드가 있는 전체 화면 표시 유형의 네이티브 인앱 편집기

스토리

소셜 미디어 스토리와 유사하게 상단에 진행률 표시줄이 있는 전체 화면 슬라이드 시퀀스입니다. 각 슬라이드는 콘텐츠 아래에 있는 자체 스토리 항목입니다.

첫 번째 슬라이드의 이미지, 제목, 메시지(각각 고유한 텍스트 색상 포함)를 채웁니다. 이미지 추가를 참조하세요.
슬라이드가 다음으로 넘어가기 전에 화면에 머무는 시간을 초로 설정합니다. 기본값은 5입니다. 1에서 30 사이의 값을 입력하세요. 이 범위를 벗어난 값은 유효성 검사 오류와 함께 저장을 차단합니다.
선택적으로 슬라이드 내부의 추가를 클릭하여 자체 CTA 버튼을 제공합니다. 버튼 구성을 참조하세요.

이미지, 제목, 메시지, 초 필드가 있는 스토리 슬라이드와 자체 추가 링크가 있는 중첩된 버튼 항목

마지막 슬라이드 아래의 추가를 클릭하여 다른 슬라이드를 추가한 다음, 해당 슬라이드에 대해 1-3단계를 반복합니다.
구성에서 마지막 슬라이드가 끝난 후 첫 번째 슬라이드부터 스토리를 다시 시작하려면 반복을 켜세요.
모든 슬라이드가 재생되기 전에 사용자가 종료할 수 있도록 ✕ 컨트롤을 원하면 닫기 버튼을 켜세요.

완성된 스토리가 사용자에게 어떻게 보이는지에 대한 예시

시트

화면 하단 가장자리에서 위로 슬라이드되는 하단 시트입니다. 상단의 핸들을 사용하여 사용자가 아래로 드래그하여 닫을 수 있습니다.

왼쪽 패널에서 다음 필드를 채웁니다:

콘텐츠에서 제목과 메시지를 추가하고 각각의 텍스트 색상을 지정하며, 선택적으로 이미지를 추가합니다. 이미지 추가를 참조하세요.
구성에서 시트 배경색을 설정합니다. 이것은 텍스트와 이미지 뒤의 패널을 채웁니다.
사용자가 버튼을 탭하지 않고 시트를 닫을 수 있도록 ✕ 컨트롤을 원하면 닫기 버튼을 켜세요.
액션에서 하나 이상의 버튼을 추가합니다. 버튼 구성을 참조하세요.

콘텐츠, 구성, 액션 필드가 있고 실시간 모바일 미리보기가 있는 시트 표시 유형의 네이티브 인앱 편집기

캐러셀

사용자가 스와이프하여 넘기는 여러 카드가 있는 전체 화면 메시지입니다. 하단의 점은 활성 카드를 나타냅니다. 콘텐츠에서 각 카드는 별도의 카드 항목입니다.

첫 번째 카드의 이미지, 제목, 메시지(각각 고유한 텍스트 색상 포함)를 채웁니다. 이미지 추가를 참조하세요.
카드에 대한 액션을 설정합니다. 사용자가 카드를 탭했을 때 인앱을 닫으려면 닫기를 선택하고, 링크를 열려면 url을 선택합니다(버튼 구성과 동일한 옵션).
마지막 카드 아래의 추가를 클릭하여 다른 카드를 추가한 다음, 해당 카드에 대해 1-2단계를 반복합니다.
사용자가 카드를 탭하지 않고 캐러셀을 나갈 수 있도록 ✕ 컨트롤을 원하면 닫기 버튼을 켜세요.

두 개의 카드 항목과 페이지네이션 점을 보여주는 실시간 모바일 미리보기가 있는 캐러셀 표시 유형의 네이티브 인앱 편집기

배너

전체 UI를 차단해서는 안 되는 메시지를 위해 화면 상단 또는 하단 가장자리에 고정된 컴팩트한 바입니다.

콘텐츠에서 제목과 메시지를 추가하고 각각의 텍스트 색상을 지정하며, 선택적으로 작은 이미지를 추가합니다. 이미지 추가를 참조하세요.
구성에서 위치를 상단 또는 하단으로 설정하여 원하는 화면 가장자리에 배너를 고정합니다.
배너가 해당 초 후에 자동으로 닫히도록 **자동 닫기(초)**를 설정합니다. 사용자가 닫을 때까지 배너를 유지하려면 비워 둡니다.
바의 배경색을 설정합니다.
배너에 ✕ 컨트롤을 원하면 닫기 버튼을 켜세요.
액션에서 액션을 닫기 또는 url로 설정합니다. 배너에는 별도의 버튼이 없습니다. 배너의 아무 곳이나 탭하면 이 액션이 실행됩니다. 닫기 및 url 동작에 대해서는 버튼 구성을 참조하세요.

위치, 자동 닫기, 액션 필드가 있고 하단에 고정된 실시간 모바일 미리보기가 있는 배너 표시 유형의 네이티브 인앱 편집기

비디오

HLS 스트리밍 링크(.m3u8) 또는 직접 .mp4 파일을 위한 전체 화면 플레이어로, 상단에 선택적으로 제목, 메시지, 버튼이 있습니다.

콘텐츠에서 비디오 URL(필수)을 .m3u8 또는 .mp4 파일에 대한 절대 HTTPS 링크로 설정합니다. 선택적으로 재생이 시작되기 전에 표시되는 포스터 이미지와 비디오를 재생할 수 없는 경우 표시되는 대체 이미지를 추가합니다.
제목과 메시지를 추가하고 각각의 텍스트 색상을 지정합니다.
구성에서 비디오가 끝나면 다시 시작하려면 반복을 켜세요.
소리 없이 재생을 시작하려면 음소거를 켜세요.
사용자가 비디오가 끝날 때까지 기다리지 않고 인앱을 닫을 수 있도록 ✕ 컨트롤을 원하면 닫기 버튼을 켜세요.
액션에서 하나 이상의 버튼을 추가합니다. 버튼 구성을 참조하세요.

콘텐츠 및 구성 필드가 있고 실시간 모바일 미리보기가 있는 비디오 표시 유형의 네이티브 인앱 편집기

텍스트 필드 구성

텍스트 필드는 여러 줄 텍스트를 지원하지 않습니다. Enter 키를 누르면 편집기에 줄 바꿈이 표시될 수 있지만 Pushwoosh는 대신 공백을 저장합니다. 기기에서는 텍스트가 한 줄로 표시됩니다.

이모지를 추가하려면 필드 도구 모음 옆의 이모지를 클릭하세요. 이모지는 일반 텍스트와 동일한 텍스트 필드에서 지원됩니다. 실시간 미리보기를 확인하여 레이아웃에서 어떻게 보이는지 확인하세요.

동적 콘텐츠 추가

모든 텍스트 필드는 태그와 User ID를 사용한 개인화를 지원합니다.

필드 도구 모음 옆의 개인화를 클릭합니다.
태그에서 태그 또는 User ID를 선택합니다.
형식 수정자(예: CapitalizeFirst 또는 regular)를 선택합니다.
선택적으로 기본 태그 값을 입력합니다.
삽입을 클릭합니다.

이름 태그 칩, 개인화 및 이모지 컨트롤, 그리고 태그, 형식 수정자, 기본 태그 값 패널이 있는 메시지 필드

삽입된 태그는 필드에 칩으로 표시됩니다. 삽입을 클릭하기 전에 태그, 수정자, 기본값을 변경할 수 있습니다. 개인화는 동적 콘텐츠와 동일한 태그, 수정자, 기본값을 사용합니다.

저장을 클릭하면 Pushwoosh는 모든 텍스트 필드의 동적 콘텐츠와 Liquid를 확인합니다. 필드가 구문 분석되지 않으면(예: 닫히지 않은 {% if %} 태그), 저장이 차단되고 동적 콘텐츠에 오류가 포함되어 있습니다 토스트 메시지에 깨진 필드와 언어 이름이 표시됩니다. 거기서 수정하고 다시 저장을 클릭하세요.

버튼 구성

모달, 전체 화면, 각 스토리 슬라이드, 시트, 비디오는 동일한 버튼 필드를 사용합니다:

버튼 텍스트와 그 색상.
배경, 테두리 색상, 테두리 반경.
액션: 사용자가 버튼을 탭했을 때 발생하는 작업을 선택합니다:
- 닫기: 인앱을 닫습니다.
- url: 나타나는 필드에 입력한 링크를 엽니다. 웹 주소(예: https://example.com) 또는 앱으로 연결되는 딥 링크(예: myapp://product/123)를 사용하세요.

버튼 텍스트, 색상, 배경, 테두리 색상, 테두리 반경, 액션 필드를 보여주는 버튼 항목이 있는 액션 패널

추가를 클릭하여 다른 버튼을 추가하거나, 버튼의 **×**를 클릭하여 제거합니다.

이미지 추가

모든 이미지 필드(이미지, 커버 이미지, 각 카드 또는 슬라이드의 이미지)는 동일하게 작동합니다. 호스팅된 이미지 URL을 필드에 직접 붙여넣거나, 그 옆의 미디어 스토리지에서 선택을 클릭하여 미디어 스토어를 열고 이미 업로드한 이미지를 선택합니다. 미디어 스토어에서 이미지를 선택하면 현재 필드에 있는 URL이 대체됩니다.

바코드 추가

미디어 스토리지에서 선택 옆의 바코드 빌드를 클릭하여 스캔 가능한 Code 128, EAN-13, EAN-8, UPC-A 또는 QR 코드를 생성하고 결과 URL을 필드에 쓰는 드로어를 엽니다:

콘텐츠 섹션의 이미지 필드, 미디어 스토리지에서 선택 옆에 바코드 빌드 아이콘이 강조 표시됨

코드. 인코딩할 값: SAVE20과 같은 고정 코드 또는 {Coupon|String|}이나 {LoyaltyCardNumber|String|}과 같은 기기 태그로, 각 수신자가 자신의 코드를 볼 수 있도록 합니다. 기기 태그는 인앱이 나타나기 직전에 수신자의 실제 값으로 기기에서 채워집니다. 기본값은 {Coupon|String|}입니다.

심볼로지. 바코드 형식을 선택합니다: Code 128, EAN-13, EAN-8, UPC-A는 휴대용 스캐너로 읽는 표준 소매 바코드이며, QR은 모든 휴대폰 카메라로 스캔할 수 있는 사각형 코드입니다.
오류 수정. 심볼로지를 QR로 설정한 후에만 나타납니다. 실제 QR 코드는 긁히거나, 흐릿해지거나, 로고에 의해 부분적으로 가려질 수 있으며, 오류 수정은 그러한 손상에도 불구하고 스캔이 가능하도록 코드에 포함된 추가 정보입니다. 견딜 수 있는 손상 정도를 선택하세요: L, M, Q, H 순으로 가장 약한 것부터 가장 강한 것까지입니다. 높은 수준은 더 많은 손상을 견디지만 더 빽빽하고 복잡해 보이는 코드를 생성합니다. 기본값은 M입니다.