> For the complete documentation index, see [llms.txt](https://docs.dfinery.ai/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dfinery.ai/user-guide/action/on-site-campaign/in-app-message/layout-device-guide.md).

# 인앱 메시지 사이즈 가이드

디파이너리 인앱 메시지는 메시지 타입에 따라 비율과 사이즈가 고정되어 있습니다.\
이미지 제작 시 권장 사이즈부터 노출되는 사이즈까지 이미지 최적화 사이즈를 알려드립니다. 🙂

## **인앱 메시지 레이아웃** <a href="#in-app-message" id="in-app-message"></a>

#### **레이아웃 유형** <a href="#layout" id="layout"></a>

{% hint style="info" %}
디파이너리에서는 모달과 바텀시트 두 가지 레이아웃을 제공합니다.\
특히, **바텀시트 레이아웃은 모바일 환경에서만** 사용할 수 있습니다.
{% endhint %}

<table><thead><tr><th width="203">레이아웃</th><th width="305">지원 타입</th><th>비고</th></tr></thead><tbody><tr><td>모달</td><td><ul><li>이미지</li><li>멀티 이미지</li><li>이미지 + 텍스트</li><li>텍스트</li></ul></td><td></td></tr><tr><td>바텀시트</td><td><ul><li>이미지</li><li>멀티 이미지</li><li>텍스트</li></ul></td><td>이미지+텍스트 미지원</td></tr></tbody></table>

## **모달 이미지** <a href="#image" id="image"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2FSZ1eNAKmdgWNi17napoX%2Fimage.png?alt=media&amp;token=fa866f2e-295f-459e-b4cb-3149e43bd965" alt=""><figcaption></figcaption></figure>

### **이미지 업로드 정책** <a href="#image-upload-policy" id="image-upload-policy"></a>

{% hint style="info" %}
이미지 규격은 최소 사이즈이며, 고화질 유지를 위해 **2배 이상 높은 사이즈의 이미지**를 활용해 주세요.
{% endhint %}

<table><thead><tr><th width="164">타입</th><th>모바일</th><th>PC</th></tr></thead><tbody><tr><td>정방형<br>(1:1 비율)</td><td><ul><li>최소 720x720 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td><ul><li>최소 800x800 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td></tr><tr><td>가로형<br>(2:1 비율)</td><td><ul><li>최소 720x360 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td><ul><li>최소 1120x560 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td></tr><tr><td>세로형<br>(3:4 비율)</td><td><ul><li>최소 720x960 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td><ul><li>최소 720x960 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td></tr><tr><td>자유형<br>(비율 제한 없음)</td><td><ul><li>최소 720x720 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td><ul><li>최소 800x800 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td></tr></tbody></table>

### **모바일** <a href="#mobile" id="mobile"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2FlfEwtZhd5YwyuKKj5wRB%2Fimage.png?alt=media&amp;token=dcd6b946-20dc-48fb-b958-239c053552bf" alt=""><figcaption></figcaption></figure>

* 모바일 인앱 메시지는 디바이스 너비와 높이의 85%를 넘지 않습니다.
  * 실제 메시지가 디바이스보다 긴 경우에는 이미지가 리사이징 됩니다.
* 비율 제한 없는 경우 이미지 비율을 보장하여 노출합니다.

### **PC** <a href="#pc" id="pc"></a>

* PC 인앱 메시지는 브라우저 너비와 높이의 70%를 넘지 않습니다.
  * 모달 디스플레이 크기 조절 시 화면 너비를 초과한 경우에도 동일하게 70%로 리사이징 됩니다.

### **노출 이미지 사이즈 조정** <a href="#image-size-adjustment" id="image-size-adjustment"></a>

#### **모바일 / 모달 디스플레이 사이즈** <a href="#mobile-modal-size" id="mobile-modal-size"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2FIDEt2fX3CWJsG1HNh7QQ%2Fimage.png?alt=media&amp;token=ca7c43d7-b3e1-48a2-a0df-4bd24f20dc61" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**원본 이미지 사이즈를 비율로 조절**하여 기기에 노출되는 메시지 크기를 조절할 수 있습니다.
{% endhint %}

* 크게 : 디바이스 너비의 85%
* 중간 : 디바이스 너비의 70%
* 작게 : 디바이스 너비의 50%

#### **PC / 모달 디스플레이 크기** <a href="#pc-modal-size" id="pc-modal-size"></a>

{% hint style="info" %}
원본 이미지 사이즈의 **너비값을 입력하여** 기기에 노출되는 메시지 크기를 조절할 수 있습니다.
{% endhint %}

* 입력값 : 200 \~ 1000px까지 입력 가능
  * 최대값 입력 후 화면 너비를 초과한 경우 70%로 리사이징 됩니다.

## **모달 이미지 + 텍스트** <a href="#modal-image-text" id="modal-image-text"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2FS51DzIM0LyWYZmYHhlxA%2Fimage.png?alt=media&amp;token=fbfd4809-701b-4273-a05d-97e00076ace2" alt=""><figcaption></figcaption></figure>

### **이미지 업로드 정책** <a href="#image-upload-policy" id="image-upload-policy"></a>

{% hint style="info" %}
이미지 규격은 최소 사이즈이며, 고화질 유지를 위해 **2배 이상 높은 사이즈의 이미지**를 활용해 주세요.
{% endhint %}

<table><thead><tr><th width="140" align="center">타입</th><th align="center">모바일</th><th align="center">PC</th></tr></thead><tbody><tr><td align="center">정방형<br>(1:1 비율)</td><td align="center"><ul><li>최소 720x720 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td align="center"><ul><li>최소 800x800 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td></tr><tr><td align="center">가로형<br>(2:1 비율)</td><td align="center"><ul><li>최소 720x360 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td align="center"><ul><li>최소 1120x560 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td></tr><tr><td align="center">세로형</td><td align="center"><ul><li>최소 720x960 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td align="center"><ul><li>최소 720x960 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td></tr></tbody></table>

### **모바일** <a href="#mobile-image-text" id="mobile-image-text"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2FV4IxYGHLkJOqjTpT9LeL%2Fimage.png?alt=media&amp;token=678ac892-ec27-45f8-a179-d361dc4b9df0" alt=""><figcaption></figcaption></figure>

* 텍스트가 길어졌을 때 인앱 메시지는 디바이스 높이의 85%를 넘지 않습니다.
  * 텍스트 영역은 최소 100px은 보장됩니다.

### **PC** <a href="#pc-image-text" id="pc-image-text"></a>

* PC 인앱 메시지는 브라우저 너비와 높이의 70%를 넘지 않습니다.
  * 위 정책은 모든 비율에 동일하게 적용됩니다.

## **모달 텍스트** <a href="#modal" id="modal"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2F3VRGZfoeFroKYnRT5zI3%2Fimage.png?alt=media&amp;token=4327a73f-880c-40b7-9c29-09c5c66a3892" alt=""><figcaption></figcaption></figure>

### **모바일** <a href="#mobile-full" id="mobile-full"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2Fetv31Lo4X7VDbLcScOrX%2Fimage.png?alt=media&amp;token=eeb63ea8-afd2-45e6-a1f0-50a4e2cdb46e" alt=""><figcaption></figcaption></figure>

* 모바일 인앱 메시지는 디바이스 너비와 높이의 85%를 넘지 않습니다.
* 텍스트 영역은 최소 100px이 보장됩니다.
* 텍스트가 길어진 경우 최대 320px까지 노출됩니다.

### **PC** <a href="#pc-full" id="pc-full"></a>

* PC 인앱 메시지는 브라우저 너비와 높이의 60%를 넘지 않습니다.

### **노출 이미지 사이즈 조정** <a href="#banner-image-size" id="banner-image-size"></a>

### **모바일 / 모달 디스플레이 사이즈** <a href="#mobile-banner-size" id="mobile-banner-size"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2F1oNvXyYOKYK1BAiNB8UG%2Fimage.png?alt=media&amp;token=f3dca769-a7fd-4bf2-8a0c-f5b783975c12" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
텍스트 타입의 경우에도 **비율에 따라 노출되는 메시지 크기를 조절**할 수 있습니다.
{% endhint %}

* 크게 : 디바이스 너비의 85%
* 중간 : 디바이스 너비의 70%
* 작게 : 디바이스 너비의 50%

### **PC / 모달 디스플레이 크기** <a href="#pc-banner-size" id="pc-banner-size"></a>

{% hint style="info" %}
원본 이미지 사이즈의 **너비값을 입력하여** 기기에 노출되는 메시지 크기를 조절할 수 있습니다.
{% endhint %}

* 입력값 : 200 \~ 800px까지 입력 가능
  * 최대값 입력 후 화면 너비를 초과한 경우 60%로 리사이징 됩니다.

## **바텀시트 이미지** <a href="#bottomsheet-image" id="bottomsheet-image"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2Fdd53LOWSmWfssHIcET3m%2Fimage.png?alt=media&amp;token=133c1afe-8c87-46c2-86f0-77e7e639481c" alt=""><figcaption></figcaption></figure>

### **이미지 업로드 정책** <a href="#bottomsheet-upload-policy" id="bottomsheet-upload-policy"></a>

{% hint style="info" %}
이미지 규격은 최소 사이즈이며, 고화질 유지를 위해 **2배 이상 높은 사이즈의 이미지**를 활용해 주세요.
{% endhint %}

<table><thead><tr><th width="163">타입</th><th width="342">모바일</th><th>PC</th></tr></thead><tbody><tr><td>정방형<br>(1:1 비율)</td><td><ul><li>최소 720x720 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td>미지원</td></tr><tr><td>가로형<br>(3:2 비율)</td><td><ul><li>최소 720x480 이상</li><li>1MB 이하 / png, jpg, jpeg 허용</li></ul></td><td>미지원</td></tr></tbody></table>

### **모바일** <a href="#mobile-bottomsheet" id="mobile-bottomsheet"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2FFdUSuly0Fx462WMOMb01%2Fimage.png?alt=media&amp;token=57e270db-3afd-42be-8e11-2c14e88673c9" alt=""><figcaption></figcaption></figure>

* 최대 너비 : 기기의 너비에 맞춰 이미지로 채워집니다.
* 최대 높이 : 이미지 비율에 따라 결정됩니다.

## **바텀시트 텍스트** <a href="#bottomsheet-text" id="bottomsheet-text"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2FgsvZtHjAF54la3a5Fa1z%2Fimage.png?alt=media&amp;token=a69bd9ac-6b84-429c-aa25-488e1f6c90ca" alt=""><figcaption></figcaption></figure>

### **모바일** <a href="#mobile-slide" id="mobile-slide"></a>

<figure><img src="https://851339439-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fw80cM0G3UdX6uGwQB5zz%2Fuploads%2FWIbwdDFPdAUhbTITN0i5%2Fimage.png?alt=media&amp;token=39f9b34d-e4d2-4260-85c5-92692ac348ab" alt=""><figcaption></figcaption></figure>

* 최대 너비 : 기기의 너비에 맞춰 메시지가 채워집니다.
* 최대 높이
  * 텍스트 영역은 최대 320px까지 노출됩니다.
  * 메시지의 최대 높이는 버튼 옵션에 따라 결정됩니다.
* 최소 높이
  * 텍스트 영역은 최소 100px이 보장됩니다.

## **Figma** <a href="#figma" id="figma"></a>

{% embed url="<https://www.figma.com/design/32v5xgqBl56hMjc0F05LEv/DFINERY-CRM---%EC%9D%B8%EC%95%B1-%EB%A9%94%EC%8B%9C%EC%A7%80-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B0%80%EC%9D%B4%EB%93%9C?node-id=0-1&t=qI6SVamZKG7vDrdx-1>" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.dfinery.ai/user-guide/action/on-site-campaign/in-app-message/layout-device-guide.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.