네이티브 인앱 메시지 생성

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

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

사전 요구 사항

개발자 지원 필요

코드 변경 없이 Control Panel에서 네이티브 인앱 템플릿을 빌드할 수 있습니다. 그러나 사용자의 앱이 이를 렌더링할 수 있을 만큼 새로운 Pushwoosh SDK 버전을 실행하는 경우에만 표시됩니다. 출시하기 전에 개발팀과 확인하세요.

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

• 인앱 메시지가 표시될 수 있도록 Pushwoosh SDK가 앱에 통합되어 있어야 합니다. 자세히 알아보기
• 모달, 풀스크린, 스토리의 경우 앱이 iOS SDK 7.2.0+ 또는 Android SDK 6.10.0+를 실행해야 합니다. 시트, 캐러셀, 배너는 iOS SDK 7.2.1+ 또는 Android SDK 6.10.1+가 필요합니다.

네이티브 인앱 템플릿 생성

1. 콘텐츠 → 인앱으로 이동합니다.
2. 인앱 생성을 클릭합니다.
3. 템플릿 이름을 입력합니다.
4. 네이티브 리치 미디어 생성을 선택합니다.
5. 표시 유형에서 모달, 풀스크린, 스토리, 시트, 캐러셀 또는 배너 중 표시 유형을 선택합니다.
6. 인앱 생성을 클릭합니다.

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

표시 유형 구성

주의

편집기 상단의 표시 유형 드롭다운을 사용하면 언제든지 유형을 전환할 수 있지만, 전환하면 아래의 모든 콘텐츠, 구성, 액션 필드가 새 유형의 기본값으로 재설정됩니다. 유형을 결정한 후에만 콘텐츠를 채우세요.

모달

선택적으로 흐리게 처리된 배경 위에 표시되는 중앙 정렬 카드입니다.

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

풀스크린

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

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

스토리

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

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

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

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

시트

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

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

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

캐러셀

사용자가 스와이프하여 여러 카드를 탐색하는 전체 화면 메시지입니다. 하단의 점은 어떤 카드가 활성 상태인지 보여줍니다. 콘텐츠 아래에서 각 카드는 별도의 카드 항목입니다.

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

주의

닫기 버튼을 끄고 모든 카드의 액션을 url로 설정하면, 사용자는 캐러셀을 닫을 수 있는 화면 상의 컨트롤이 없습니다. 탭은 항상 닫는 대신 링크를 엽니다.

배너

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

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

주의

닫기 버튼을 끄고, 액션을 url로 설정하고, 자동 닫기를 비워두면 배너는 닫을 방법 없이 화면에 계속 남아 있습니다. 탭은 항상 닫는 대신 링크를 엽니다.

텍스트 필드 구성

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

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

동적 콘텐츠 추가

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

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

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

팁

조건부 로직(예: 태그가 특정 값과 같을 때만 이 텍스트 표시)의 경우, 필드에 직접 Liquid 구문을 입력하세요.

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

참고

저장 시 Liquid 확인은 닫히지 않은 태그와 같은 구문 오류를 잡아냅니다. 그러나 메시지가 전송될 때만 실패하는 불완전한 표현식은 통과할 수 있습니다. 단순한 태그 이상을 사용하는 경우 자신에게 테스트를 보내세요.

버튼 구성

모달, 풀스크린, 각 스토리 슬라이드, 시트는 동일한 버튼 필드를 사용합니다:

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

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

주의

닫기 버튼을 끄고 버튼도 추가하지 않으면, 사용자는 인앱을 닫을 수 있는 화면 상의 컨트롤이 없습니다.

현지화 추가

기본적으로 네이티브 인앱은 하나의 언어를 가집니다. 더 추가하려면:

참고

여기서 언어 선택기는 인앱 콘텐츠를 렌더링하는 플랫폼의 기기만 계산합니다. 사용자 수준 태그를 통해 설정된 언어 값은 기기 플랫폼에 연결되어 있지 않으므로 여기에 표시되지 않습니다.

1. 상단 바의 언어 선택기 옆에 있는 **+**를 클릭합니다.
2. 추가할 언어를 선택하고 적용을 클릭합니다.

3. 상단 바의 언어 선택기를 사용하여 언어 간에 전환하고 각 언어의 텍스트 필드를 채웁니다.

참고

언어를 추가하면 Pushwoosh는 기본 언어의 콘텐츠(텍스트, 이미지, 버튼 레이블)를 복사합니다. 해당 언어로 전환하여 이러한 필드를 독립적으로 편집하세요.

템플릿 저장

오른쪽 상단의 저장을 클릭하여 변경 사항을 유지합니다.

그러면 템플릿이 콘텐츠 → 인앱에 다른 인앱 템플릿과 함께 나타납니다.

캠페인에서 사용하기

네이티브 인앱 템플릿은 다른 인앱 템플릿과 함께 템플릿 선택기에 나타납니다.

다음과 같이 사용할 수 있습니다:

• 즉시 인앱 보내기
• Customer Journey에 인앱 단계 추가하기
• 사용자가 푸시를 탭했을 때 인앱 열기

참고

시작 및 종료 날짜, 빈도 제한과 같은 전송 설정은 다른 인앱과 동일하게 작동하며 이 편집기의 일부가 아닙니다.