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

​
전제 조건

  • OneSignal SDK가 앱에 설치되고 초기화되어 있어야 합니다.
  • 최신 에디터 기능을 위해 권장 SDK를 사용하고 있어야 합니다:
    • iOS 5.1.5+
    • Android 5.1.9+
  • OneSignal에 이미지를 업로드하지 않는 경우, 이미지는 빠르고 공개적으로 접근 가능한 URL(CDN 권장)에 호스팅되어야 하며 모바일 화면에 적합한 크기여야 합니다.
앱에서 최신 버전의 OneSignal SDK를 사용하고 있는지 확인하세요. 이전 버전에서도 메시지가 표시될 수 있지만 폴백 스타일링(예: 기본 여백 또는 기본 오버레이)이 적용됩니다. 미리보기와 기기 테스트를 사용하여 지원하는 최소 SDK 버전에서의 동작을 확인하세요.

​
사전 제작된 템플릿으로 시작하기

사전 제작된 템플릿은 전환을 위해 설계된 레이아웃(권한 프롬프트 포함)으로 빠르게 시작할 수 있도록 도와줍니다. 템플릿을 선택한 후 카피, 색상 및 액션을 브랜드에 맞게 업데이트하세요.
기기 테스트: 사전 제작된 디자인은 Pixel 6+, iPhone(iOS 14+), Huawei Nova 9, Huawei P50 Foldable 및 iPad(10세대+)에서 테스트되었습니다. 이 템플릿은 세로 방향에 최적화되어 있으며 가로 모드에서는 의도한 대로 표시되지 않을 수 있습니다.

​
메시지 레이아웃 선택하기

메시지 레이아웃은 인앱 메시지가 화면에 표시되는 방식을 제어합니다.
메시지 유형최적 용도동작 방식
Top간결한 공지 및 확인상단에서 아래로 슬라이드
Center대부분의 마케팅 및 제품 프롬프트중앙에서 확장되어 화면을 부분적으로 채움
Bottom스낵바, 동의 프롬프트하단에서 위로 슬라이드
Full온보딩 플로우, 다단계 오퍼, 캐러셀화면을 채우도록 확장(선택적 여백 포함)
Top, Center, Bottom, Full 인앱 메시지 레이아웃

​
캐러셀로 다중 화면 플로우 구축하기

캐러셀을 사용하면 온보딩, 기능 투어 또는 다단계 오퍼와 같은 다중 화면 인앱 경험을 만들 수 있습니다.
  1. Full 메시지 유형을 선택합니다.
  2. Create Carousel을 클릭합니다.
  3. 최대 10개의 카드(화면)를 추가합니다.
  4. 블록의 조합으로 각 카드를 사용자 지정합니다.
여러 인앱 메시지 카드가 포함된 캐러셀 예제

​
방향 지원

인앱 메시지는 세로 및 가로 모드를 모두 지원하지만, 레이아웃(특히 템플릿)은 두 모드 모두에서 잘 보이도록 조정이 필요할 수 있습니다.
세로 및 가로 방향으로 표시된 인앱 메시지
가로 사용이 빈번한 경우(태블릿, 게임, 동영상 앱) 게시하기 전에 가로 모드에서 메시지를 테스트하세요. 넓은 레이아웃에서는 더 작은 텍스트 크기, 더 좁은 간격 또는 더 적은 수의 스택 블록이 필요할 수 있습니다.

​
블록과 간격으로 깔끔한 레이아웃 만들기

모든 것은 Background 블록(캔버스) 위에 배치됩니다. 다음을 사용하세요:
  • Background의 Padding으로 콘텐츠와 메시지 가장자리 사이의 간격을 제어합니다.
  • 개별 블록의 Margin으로 요소 간 간격을 제어합니다(헤드라인 → 이미지 → 버튼).
일관된 레이아웃을 위한 빠른 규칙
  1. Padding을 사용하여 메시지 가장자리로부터의 거리를 제어합니다.
  2. Margin을 사용하여 블록을 수직으로 분리합니다.
  3. 동일한 측면에 큰 패딩과 마진을 쌓지 마세요.
  4. 촘촘한/가장자리 정렬 디자인보다 중앙 정렬된 플로우 기반 레이아웃을 선호하세요.
  5. 게시하기 전에 항상 여러 기기 크기에서 미리보기를 사용하세요.
인앱 에디터의 Background 패딩 및 블록 마진 컨트롤

​
블록 참조

이 블록들을 사용하여 메시지를 구축합니다. 각 블록은 스타일링과 (대부분의 경우) 선택적 클릭 액션을 지원합니다.

​
텍스트 블록

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

​
이미지 블록

이미지를 사용하여 오퍼를 강조하거나, 기능을 보여주거나, 브랜딩을 추가합니다. 지원되는 형식 및 제한
  • .jpg, .png, .gif
  • 최대 파일 크기: 5MB
팁 및 권장 사항
  • 16:9, 4:3, 3:2와 같은 일반적인 종횡비를 사용하세요.
  • 서버에 호스팅된 경로를 사용하여 링크와 이미지 URL을 동적으로 교체할 수 있습니다. 동적 URL을 참조하세요.
    • 예시: https://example.com/images/{{ tag_key }}.png
사용자 지정 가능한 항목
  • 이미지 URL: 성능을 위해 호스팅된 URL을 권장합니다.
  • 클릭 액션: 선택 사항(링크, 딥 링크, 태그, 결과, 프롬프트).
고급
  • 클릭 시 닫기
  • Margins: 블록 주위의 공간.
에디터의 이미지 블록 구성 옵션
이미지 URL이 느리거나 차단되었거나 오류를 반환하는 경우 메시지가 깨진 미디어 또는 빈 미디어로 렌더링될 수 있습니다. 신뢰할 수 있는 CDN에 이미지를 호스팅하고 모바일 네트워크에서 빠르게 로드되는지 확인하세요.

​
버튼 블록

탐색, 피드백 수집 또는 권한 프롬프트와 같은 기본 액션에 버튼을 사용합니다. 사용자 지정 가능한 항목
  • 버튼 텍스트 및 글꼴 스타일링
  • 배경 색상, 크기 및 모서리 반경
  • 선택적 아이콘/이미지
  • 클릭 액션(태그 지정, 결과, 프롬프트, 딥 링크)
고급
  • 클릭 시 닫기
  • Margins
  • 테두리 및 그림자
팁
  • 태그를 사용하여 버튼 텍스트 또는 목적지를 개인화하세요.
  • 배경 불투명도를 0으로 설정하여 이미지 전용 버튼을 만들 수 있습니다.
  • 미묘한 그림자(낮은 불투명도, 높은 흐림)를 사용하여 기본 CTA를 돋보이게 하세요.
에디터의 버튼 블록 구성 옵션

​
닫기 버튼 블록

닫기 버튼은 사용자가 “X” 아이콘을 사용하여 메시지를 닫을 수 있는지 여부를 제어합니다. 사용자 지정 가능한 항목
  • 가시성 활성화/비활성화
  • 사용자 지정 아이콘(.jpg, .png, .svg, .gif)
  • 권장 크기: 10x10px
  • 선택적 클릭 액션
고급
  • Margins
닫기 버튼을 비활성화하는 경우, 사용자가 메시지를 나갈 수 있는 명확한 방법이 있는지 확인하세요(예: 버튼 또는 배경의 닫기 액션, 또는 경험에서 사용하는 경우 닫기 타이머). 그렇지 않으면 사용자가 메시지에 갇힐 수 있습니다.
에디터의 닫기 버튼 구성 옵션

​
배경 블록

배경은 레이아웃을 담는 캔버스입니다. 사용자 지정 가능한 항목
  • 배경 색상(RGBA 지원)
  • 배경 이미지(.jpg, .png, .gif)
  • 선택적 클릭 액션
고급
  • Padding(기본값 24px)
  • 클릭 시 닫기
배경 블록의 색상, 이미지, 패딩 및 액션 컨트롤

​
개인화 및 현지화

데이터 태그를 사용하여 텍스트, 버튼 레이블 및 URL을 포함한 인앱 메시지를 개인화할 수 있습니다. 현지화에 대해서는 다국어 메시지를 참조하세요.
좋은 개인화 테스트는 알려진 태그 값을 가진 소규모 내부 세그먼트에 메시지를 보내고 다음을 확인하는 것입니다:
  • 텍스트와 이미지가 예상된 대체 값으로 렌더링되는지
  • 링크가 올바르게 해석되는지
  • 버튼이 예상된 클릭 결과/태그를 실행하는지

​
FAQ

​
상단/하단 배너 인앱에서 회색 오버레이 또는 그림자를 제거할 수 있나요?

네 — SDK를 업데이트하고 아래 구성을 추가하세요. iOS 5.1.5+
iOS Info.plist
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
Android 5.1.9+
Android Manifest.xml
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>

​
다음 단계