> ## 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.

# 드래그 앤 드롭으로 인앱 메시지 디자인하기

> OneSignal의 시각적 작성기를 사용하여 블록, 레이아웃, 캐러셀 및 개인화로 높은 전환율을 달성하는 인앱 메시지를 구축하세요.

OneSignal의 드래그 앤 드롭 에디터를 사용하면 모듈식 블록을 사용하여 코딩 없이 인앱 메시지를 구축할 수 있습니다. 마크업을 선호한다면 [HTML로 인앱 메시지 디자인하기](./design-your-in-app-message-with-html)를 참조하세요.

<Frame caption="인앱 메시지 드래그 앤 드롭 에디터">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/iam-block-create.gif?s=f3a6e2388fc6855a2fc8378fb5ce51b1" alt="드래그 앤 드롭 에디터를 사용하여 인앱 메시지 만들기" width="780" height="589" data-path="images/iam/iam-block-create.gif" />
</Frame>

## 전제 조건

* OneSignal SDK가 앱에 설치되고 초기화되어 있어야 합니다.
* 최신 에디터 기능을 위해 권장 SDK를 사용하고 있어야 합니다:
  * iOS 5.1.5+
  * Android 5.1.9+
* OneSignal에 이미지를 업로드하지 않는 경우, 이미지는 빠르고 공개적으로 접근 가능한 URL(CDN 권장)에 호스팅되어야 하며 모바일 화면에 적합한 크기여야 합니다.

<Warning>
  앱에서 최신 버전의 OneSignal SDK를 사용하고 있는지 확인하세요.
  이전 버전에서도 메시지가 표시될 수 있지만 폴백 스타일링(예: 기본 여백 또는 기본 오버레이)이 적용됩니다. **미리보기**와 **기기 테스트**를 사용하여 지원하는 최소 SDK 버전에서의 동작을 확인하세요.
</Warning>

***

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

사전 제작된 템플릿은 전환을 위해 설계된 레이아웃(권한 프롬프트 포함)으로 빠르게 시작할 수 있도록 도와줍니다. 템플릿을 선택한 후 카피, 색상 및 액션을 브랜드에 맞게 업데이트하세요.

<Note>
  **기기 테스트:** 사전 제작된 디자인은 Pixel 6+, iPhone(iOS 14+), Huawei Nova 9, Huawei P50 Foldable 및 iPad(10세대+)에서 테스트되었습니다. 이 템플릿은 세로 방향에 최적화되어 있으며 가로 모드에서는 의도한 대로 표시되지 않을 수 있습니다.
</Note>

***

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

메시지 레이아웃은 인앱 메시지가 화면에 표시되는 방식을 제어합니다.

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

<Frame caption="인앱 메시지 레이아웃 유형">
  <img src="https://mintcdn.com/onesignal/RWtLFPeffHrC81wI/images/docs/a675b8f-Type.png?fit=max&auto=format&n=RWtLFPeffHrC81wI&q=85&s=e04ab2110fcd37eb6481db3dd8c63ece" alt="Top, Center, Bottom, Full 인앱 메시지 레이아웃" width="1115" height="788" data-path="images/docs/a675b8f-Type.png" />
</Frame>

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

캐러셀을 사용하면 온보딩, 기능 투어 또는 다단계 오퍼와 같은 다중 화면 인앱 경험을 만들 수 있습니다.

1. **Full** 메시지 유형을 선택합니다.
2. **Create Carousel**을 클릭합니다.
3. 최대 10개의 카드(화면)를 추가합니다.
4. 블록의 조합으로 각 카드를 사용자 지정합니다.

<Frame caption="캐러셀 예제">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/carousel.gif?s=0ebac15f1b7b55229705970a84bda5be" alt="여러 인앱 메시지 카드가 포함된 캐러셀 예제" width="900" height="800" data-path="images/iam/carousel.gif" />
</Frame>

### 방향 지원

인앱 메시지는 세로 및 가로 모드를 모두 지원하지만, 레이아웃(특히 템플릿)은 두 모드 모두에서 잘 보이도록 조정이 필요할 수 있습니다.

<Frame caption="세로 및 가로 인앱 메시지 예제">
  <img src="https://mintcdn.com/onesignal/Z6xkXGfmy814If53/images/docs/e2b95e5-IAM-portrait-landscape.png?fit=max&auto=format&n=Z6xkXGfmy814If53&q=85&s=25028bc942075b84814ae5ee850bf458" alt="세로 및 가로 방향으로 표시된 인앱 메시지" width="1279" height="564" data-path="images/docs/e2b95e5-IAM-portrait-landscape.png" />
</Frame>

<Note> 가로 사용이 빈번한 경우(태블릿, 게임, 동영상 앱) 게시하기 전에 가로 모드에서 메시지를 테스트하세요. 넓은 레이아웃에서는 더 작은 텍스트 크기, 더 좁은 간격 또는 더 적은 수의 스택 블록이 필요할 수 있습니다.</Note>

***

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

모든 것은 Background 블록(캔버스) 위에 배치됩니다. 다음을 사용하세요:

* **Background**의 **Padding**으로 콘텐츠와 메시지 가장자리 사이의 간격을 제어합니다.
* 개별 블록의 **Margin**으로 요소 간 간격을 제어합니다(헤드라인 → 이미지 → 버튼).

**일관된 레이아웃을 위한 빠른 규칙**

1. **Padding**을 사용하여 메시지 가장자리로부터의 거리를 제어합니다.
2. **Margin**을 사용하여 블록을 수직으로 분리합니다.
3. 동일한 측면에 큰 패딩과 마진을 쌓지 마세요.
4. 촘촘한/가장자리 정렬 디자인보다 중앙 정렬된 플로우 기반 레이아웃을 선호하세요.
5. 게시하기 전에 항상 여러 기기 크기에서 **미리보기**를 사용하세요.

<Frame caption="에디터에서의 패딩과 마진">
  <img src="https://mintcdn.com/onesignal/yt4lRKoquAlWvRvF/images/iam/padding-margin.png?fit=max&auto=format&n=yt4lRKoquAlWvRvF&q=85&s=f328dfed369bb0369a825818cb264802" alt="인앱 에디터의 Background 패딩 및 블록 마진 컨트롤" width="1536" height="1024" data-path="images/iam/padding-margin.png" />
</Frame>

***

## 블록 참조

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

### 텍스트 블록

헤드라인, 설명, 면책 조항 또는 개인화된 카피에 사용합니다.

**사용자 지정 가능한 항목**

* **반응형 크기 조정**: 백분율 단위의 너비/높이.
* **글꼴**: Google Fonts.
* **서식**: 굵게, 기울임꼴, 밑줄.
* **색상**: Hex 또는 RGBA(투명도 지원).
* **정렬**: 왼쪽, 가운데, 오른쪽.
* **크기**: 조정 가능한 글꼴 크기.

**고급**

* **Margins**: 블록 주위의 공간.

**팁**

* 언어 기반 세그먼트 또는 [Liquid 구문 사용](./using-liquid-syntax)으로 현지화하세요.
* [데이터 태그](./message-personalization)로 개인화하세요.

<Frame caption="텍스트 블록">
  <img src="https://mintcdn.com/onesignal/RWtLFPeffHrC81wI/images/docs/a556236-Screenshot_2022-12-10_at_5.45.53_PM.png?fit=max&auto=format&n=RWtLFPeffHrC81wI&q=85&s=cec5db0519c7ec85ddce8bcc9e4b190f" alt="에디터의 텍스트 블록 구성 옵션" width="1004" height="836" data-path="images/docs/a556236-Screenshot_2022-12-10_at_5.45.53_PM.png" />
</Frame>

### 이미지 블록

이미지를 사용하여 오퍼를 강조하거나, 기능을 보여주거나, 브랜딩을 추가합니다.

**지원되는 형식 및 제한**

* `.jpg`, `.png`, `.gif`
* 최대 파일 크기: 5MB

**팁 및 권장 사항**

* `16:9`, `4:3`, `3:2`와 같은 일반적인 종횡비를 사용하세요.
* 서버에 호스팅된 경로를 사용하여 링크와 이미지 URL을 동적으로 교체할 수 있습니다. [동적 URL](./links#dynamic-urls)을 참조하세요.
  * 예시: `https://example.com/images/{{ tag_key }}.png`

**사용자 지정 가능한 항목**

* **이미지 URL**: 성능을 위해 호스팅된 URL을 권장합니다.
* **클릭 액션**: 선택 사항(링크, 딥 링크, 태그, 결과, 프롬프트).

**고급**

* **클릭 시 닫기**
* **Margins**: 블록 주위의 공간.

<Frame caption="이미지 블록">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0cc2179-Screenshot_2022-12-10_at_5.46.27_PM.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=440933533b6d5985256b0ef45a5802a6" alt="에디터의 이미지 블록 구성 옵션" width="1004" height="718" data-path="images/docs/0cc2179-Screenshot_2022-12-10_at_5.46.27_PM.png" />
</Frame>

<Warning> 이미지 URL이 느리거나 차단되었거나 오류를 반환하는 경우 메시지가 깨진 미디어 또는 빈 미디어로 렌더링될 수 있습니다. 신뢰할 수 있는 CDN에 이미지를 호스팅하고 모바일 네트워크에서 빠르게 로드되는지 확인하세요.</Warning>

### 버튼 블록

탐색, 피드백 수집 또는 권한 프롬프트와 같은 기본 액션에 버튼을 사용합니다.

**사용자 지정 가능한 항목**

* 버튼 텍스트 및 글꼴 스타일링
* 배경 색상, 크기 및 모서리 반경
* 선택적 아이콘/이미지
* 클릭 액션(태그 지정, 결과, 프롬프트, 딥 링크)

**고급**

* 클릭 시 닫기
* Margins
* 테두리 및 그림자

**팁**

* 태그를 사용하여 버튼 텍스트 또는 목적지를 개인화하세요.
* 배경 불투명도를 0으로 설정하여 이미지 전용 버튼을 만들 수 있습니다.
* 미묘한 그림자(낮은 불투명도, 높은 흐림)를 사용하여 기본 CTA를 돋보이게 하세요.

<Frame caption="버튼 블록 설정">
  <img src="https://mintcdn.com/onesignal/YOTSrtBSoqdrJ37A/images/docs/49beca3-Screenshot_2022-12-10_at_5.48.17_PM.png?fit=max&auto=format&n=YOTSrtBSoqdrJ37A&q=85&s=f3bce4770825e17bae48c4f5f7d8b385" alt="에디터의 버튼 블록 구성 옵션" width="996" height="1578" data-path="images/docs/49beca3-Screenshot_2022-12-10_at_5.48.17_PM.png" />
</Frame>

### 닫기 버튼 블록

닫기 버튼은 사용자가 "X" 아이콘을 사용하여 메시지를 닫을 수 있는지 여부를 제어합니다.

**사용자 지정 가능한 항목**

* 가시성 활성화/비활성화
* 사용자 지정 아이콘(`.jpg`, `.png`, `.svg`, `.gif`)
* 권장 크기: `10x10px`
* 선택적 클릭 액션

**고급**

* Margins

<Warning>
  닫기 버튼을 비활성화하는 경우, 사용자가 메시지를 나갈 수 있는 명확한 방법이 있는지 확인하세요(예: 버튼 또는 배경의 **닫기 액션**, 또는 경험에서 사용하는 경우 닫기 타이머). 그렇지 않으면 사용자가 메시지에 갇힐 수 있습니다.
</Warning>

<Frame caption="닫기 버튼 설정">
  <img src="https://mintcdn.com/onesignal/9_Q1FZLh6C0BFLq-/images/docs/c07a30b-Screenshot_2022-12-10_at_5.49.22_PM.png?fit=max&auto=format&n=9_Q1FZLh6C0BFLq-&q=85&s=acdcebb3ae4e83df14dab2d82753f2bf" alt="에디터의 닫기 버튼 구성 옵션" width="990" height="732" data-path="images/docs/c07a30b-Screenshot_2022-12-10_at_5.49.22_PM.png" />
</Frame>

### 배경 블록

배경은 레이아웃을 담는 캔버스입니다.

**사용자 지정 가능한 항목**

* 배경 색상(RGBA 지원)
* 배경 이미지(`.jpg`, `.png`, `.gif`)
* 선택적 클릭 액션

**고급**

* Padding(기본값 `24px`)
* 클릭 시 닫기

<Frame caption="배경 블록 설정">
  <img src="https://mintcdn.com/onesignal/6tscVAtiSqz353kV/images/docs/9a441fd-Background_Controls.png?fit=max&auto=format&n=6tscVAtiSqz353kV&q=85&s=04a65877dc5e9818147ba15975cc5e92" alt="배경 블록의 색상, 이미지, 패딩 및 액션 컨트롤" width="1071" height="806" data-path="images/docs/9a441fd-Background_Controls.png" />
</Frame>

***

## 개인화 및 현지화

[데이터 태그](./add-user-data-tags)를 사용하여 텍스트, 버튼 레이블 및 URL을 포함한 인앱 메시지를 개인화할 수 있습니다.

현지화에 대해서는 [다국어 메시지](./multi-language-messaging#send-messages-in-different-languages)를 참조하세요.

<Check>
  좋은 개인화 테스트는 알려진 태그 값을 가진 소규모 내부 세그먼트에 메시지를 보내고 다음을 확인하는 것입니다:

  * 텍스트와 이미지가 예상된 대체 값으로 렌더링되는지
  * 링크가 올바르게 해석되는지
  * 버튼이 예상된 클릭 결과/태그를 실행하는지
</Check>

***

## FAQ

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

네 — SDK를 업데이트하고 아래 구성을 추가하세요.

**iOS 5.1.5+**

```xml iOS Info.plist theme={null}
<key>OneSignal_in_app_message_hide_drop_shadow</key>
<true/>
<key>OneSignal_in_app_message_hide_gray_overlay</key>
<true/>
```

**Android 5.1.9+**

```xml Android Manifest.xml theme={null}
<meta-data android:name="com.onesignal.inAppMessageHideGrayOverlay" android:value="true"/>
<meta-data android:name="com.onesignal.inAppMessageHideDropShadow" android:value="true"/>
```

***

## 다음 단계

* [인앱 클릭 액션](./iam-click-actions)에 대해 알아보고 사용자가 메시지의 요소를 클릭할 때 발생하는 동작을 사용자 지정하세요.
* 다양한 [인앱 메시지 트리거](./iam-triggers)를 시도하여 메시지가 표시되는 시점을 제어하세요.
* 더 많은 사용자 지정이 필요하신가요? [HTML로 인앱 메시지 디자인하기](./design-your-in-app-message-with-html)를 시도해 보세요.

***