메인 콘텐츠로 건너뛰기

​
개요

OneSignal의 드래그 앤 드롭 에디터를 사용하면 모듈식 블록 요소를 사용하여 코딩 없이 인앱 메시지를 구축할 수 있습니다. 마크업을 선호한다면 HTML로 인앱 메시지 디자인하기를 참조하세요.

IAM 드래그 앤 드롭 에디터

​
전제 조건

  • OneSignal SDK가 앱에 설치되고 초기화되어 있어야 합니다.
  • 최신 기능에 권장되는 SDK: iOS 5.1.5+, Android 5.1.9+. 아래의 특정 기능 최소 요구 사항을 참조하세요.
  • 이미지는 성능이 좋은 CDN에 호스팅되어야 하며(자체 호스팅하는 경우 권장) 적절한 크기로 조정되어야 합니다.

​
메시지 유형 (레이아웃)

화면에 메시지가 표시되는 방식:
메시지 유형설명
Top상단에서 아래로 슬라이드됩니다. 슬림한 공지 및 확인에 적합합니다.
Center중앙에서 확장되어 화면을 부분적으로 채웁니다. 대부분의 사용 사례에 균형이 잘 맞습니다.
Bottom하단에서 위로 슬라이드됩니다. 스낵바 및 동의 프롬프트에 적합합니다.
Full확장하여 화면을 채웁니다. 여백이 있거나 없이 사용합니다. 다중 화면 플로우를 위한 캐러셀을 추가하세요.

생성할 수 있는 인앱 유형을 보여주는 이미지.

​
캐러셀

캐러셀을 사용하면 온보딩, 기능 투어 또는 다단계 제안과 같은 다중 화면 플로우를 만들 수 있습니다. Full 메시지 유형을 선택하고 Create Carousel 버튼을 클릭하세요. 최대 10개의 카드(화면)를 추가할 수 있습니다. 각 카드에는 사용자 지정 가능한 블록의 조합이 포함될 수 있습니다.

캐러셀 예제

​
방향 지원

인앱 메시지는 세로 및 가로 모드를 모두 지원합니다.

세로 및 가로 방향을 보여주는 이미지.

​
블록 및 레이아웃 설정

모든 것은 Background 블록(캔버스) 내부에 있습니다. Background의 Padding을 외부 간격에 사용하고 개별 블록의 Margin을 요소 간 간격에 사용하세요. 일관된 레이아웃을 위한 빠른 규칙
  1. Padding을 사용하여 메시지 가장자리로부터의 거리를 제어하세요.
  2. Margin을 사용하여 블록을 분리하세요(예: 헤드라인 → 버튼).
  3. 동일한 측면에 큰 패딩과 마진을 쌓지 마세요.
  4. 절대 위치 지정보다 중앙 정렬된 플로우 기반 레이아웃을 선호하세요.
  5. 게시하기 전에 항상 다양한 기기에서 미리 보기하세요.

Background 블록 (캔버스)

​
텍스트

헤드라인, 설명 또는 개인화된 카피에 사용합니다.
  • 반응형 크기 조정: 백분율 단위의 너비/높이.
  • 글꼴: Google Fonts.
  • 서식: 굵게, 기울임꼴, 밑줄.
  • 색상: Hex 또는 RGBA(투명도 지원).
  • 정렬: 왼쪽, 가운데, 오른쪽.
  • 크기: 조정 가능한 글꼴 크기.
고급
  • Margins: 블록 주위의 공간.
팁

텍스트 블록

​
이미지

기능 또는 제안을 설명하기 위해 이미지를 추가하세요. 형식: .jpg, .png, .gif(최대 5MB). 성능을 위해 호스팅된 URL을 선호하세요.
  • 종횡비: 16:9, 4:3, 3:2 권장.
  • 클릭 액션: 선택 사항(링크, 딥 링크, 태그, 결과, 프롬프트).
고급:
  • 클릭 시 닫기
  • Margins: 블록 주위의 공간.
팁
  • 태그를 기반으로 서버의 다양한 이미지를 참조하세요. 동적 URL을 참조하세요.
    • 이미지 URL 예제: https://example.com/images/{{ tag_key }}.png

이미지 블록

​
버튼

탐색, 피드백 또는 권한 프롬프트와 같은 액션을 유도합니다.
  • 텍스트 및 글꼴: CTA 카피 및 스타일 사용자 지정.
  • 색상 및 크기: 버튼 비주얼 사용자 지정.
  • 이미지: 선택적 아이콘/이미지.
  • 모서리 반경: 둥글게 설정.
  • 클릭 액션: 태그 지정, 결과, 프롬프트 및 딥 링크를 지원합니다.
고급
  • 클릭 시 닫기
  • Margins: 블록 주위의 공간.
  • 테두리 및 그림자: 완전히 사용자 지정 가능.
팁
  • 데이터 태그로 버튼 카피 또는 링크를 개인화하세요.
  • 배경 opacity = 0으로 설정하여 이미지 전용 버튼을 만드세요.
  • 미묘한 그림자(낮은 불투명도, 높은 흐림)를 사용하여 기본 CTA를 들어 올리세요.

버튼 블록

​
닫기 버튼

닫기(X) 아이콘의 가시성 및 스타일을 제어합니다.
  • 토글: 활성화/비활성화.
  • 사용자 지정 아이콘: .jpg, .png, .svg, .gif. 권장 크기: 10x10px.
  • 클릭 액션: 선택 사항.
고급
  • Margins: 블록 주위의 공간.
팁
  • 닫기 버튼을 비활성화하는 경우 사용자가 나갈 수 있도록 닫기 액션 또는 닫기 시간을 설정해야 합니다.
  • 사용자가 모든 카드를 통해 진행하기를 원할 때 캐러셀에 유용합니다.

닫기 버튼

​
배경

레이아웃과 브랜딩의 기반을 설정합니다.
  • 이미지 지원: .jpg, .png, .gif
  • 색상: RGBA 지원
  • 클릭 액션: 선택 사항
고급
  • Padding: 콘텐츠와 메시지 가장자리 사이의 공간(기본값 24px)
  • 클릭 시 닫기

배경 에디터

​
개인화 및 현지화

데이터 태그를 사용하여 사용자별로 인앱을 개인화하세요. 현지화에 대해서는 다국어 메시지를 참조하세요.

​
FAQ

​
전체 화면 인앱을 어떻게 만들 수 있나요? 어떤 SDK 버전이 필요한가요?

여백 없이 인앱 메시지를 만들려면:
  • iOS SDK 3.9.0+
  • Android SDK 4.6.3+
이전 SDK를 사용하는 사용자는 여전히 메시지를 볼 수 있지만 기본 여백이 있습니다.

​
배너 스타일 인앱에서 회색 배경 또는 그림자를 제거할 수 있나요?

상단/하단 배너의 오버레이를 제거하려면 SDK를 업데이트하고 다음을 구성하세요: iOS 5.1.5+ 
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+ 
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>