# 인앱 메시지 이미지 템플릿

## 인앱 메시지 레이아웃

현재 핵클은 모달, 배너, 바텀시트 레이아웃을 지원하고 있습니다.

![](/files/3aCPxeQMTK5OnOWqkTUl)

아래는 레이아웃별 추천 비율 및 사이즈입니다.

* 파일 형식 : PNG, JPG, JPEG
* 파일 용량 : 최대 3MB

레이아웃별로 권장하는 이미지의 비율이 다르기 때문에 이미지 업로드시 비율과 사이즈를 확인 부탁드립니다. (모바일에서 가로 화면 방향을 선택한 경우 가로 화면용 이미지를 별도 업로드가 필요합니다.)

<table><thead><tr><th width="134.73828125">레이아웃</th><th>레이아웃 상세</th><th>권장 사이즈</th></tr></thead><tbody><tr><td>모달</td><td>이미지</td><td>* 세로: 2:3 / 1200px:1800px</td></tr><tr><td>모달</td><td>이미지 + 버튼형</td><td>* 세로 : 2:3 / 1200px:1800px</td></tr><tr><td>모달</td><td>이미지 +텍스트+ 버튼형</td><td>* 세로 : 29:10 / 1450px:500px</td></tr><tr><td>배너</td><td>이미지 + 텍스트</td><td>* 비율 : 1:1</td></tr><tr><td>배너</td><td>이미지</td><td>* 비율 : 24:7</td></tr><tr><td>바텀시트</td><td>이미지</td><td>* 세로: 3:2 / 1800px:1200px</td></tr><tr><td>바텀시트</td><td>이미지 + 버튼형</td><td>* 세로: 3:2 / 1800px:1200px</td></tr></tbody></table>

각 레이아웃 별로 전달하는 효과에 따라 적절한 캠페인을 구성해보세요!

1. 모달 : 주로 사용자가 놓치면 안 될 중요한 정보나 프로모션일 경우 사용해요.
2. 배너 : 사용자가 위치한 페이지에서 간단한 피드백 및 정보를 줄 때 사용해요.
3. 바텀시트 : 서비스 진입 시 프로모션 및 공지사항을 바로 노출시킬 때 주로 사용해요.

## 공지사항 샘플 소스

인앱 메시지 캠페인에 활용할 수 있는 샘플을 제공합니다. 원하는 이미지를 바로 다운받거나, Figma에서 직접 편집하여 사용해보세요!

### 이미지+버튼형

![팝업 예시](/files/JHOegtinSyUAGLvIEvIF)

![1200x1800](/files/WWfiDYLYGLg0Re2CkXRr)

![1450x500](/files/m05Zsrpbndrqaw3LysGt)

![1800x1200](/files/KCT1Ash4YfGqQHgS1BHW)

### 이미지+텍스트+버튼형

![팝업 예시](/files/lP2UKPLXX8o2nAZGYEvm)

![1200x1800](/files/cGeqtJ2xuqnsaBgU8yWz)

![1450x500](/files/rKHmXSxYaTbQ7jEZIwo1)

![1800x1200](/files/d09FqSHy3rovCcoOKdKl)

## 사용자 설문조사 샘플 소스

### 이미지+버튼형

![팝업 예시](/files/OJKMVXcBLVrIFyFHvjVh)

![1200x1800](/files/35xvoAjH1WryTKqouHAU)

![1450x500](/files/W4Yl7BgBvCiseB2GkDuA)

![1800x1200](/files/sr2gPhwZG9W8rBw8JLkz)

### 이미지+텍스트 + 버튼형

![팝업 예시](/files/IYTUQf2cLD8ZpPXTbSpV)

![1200x1800](/files/wP9xSA8icFwv3jyTaS6g)

![1450x500](/files/gRPUPKnl82Lgh4oGHoWm)

![1800x1200](/files/NB5okjTXxcsRTN31aobe)

## 프로모션 샘플 소스

### 이미지+버튼형

![팝업 예시](/files/aPMsivjN4x9nG9svqTQA)

![1200x1800](/files/wGarnyF2HYwMP3Ieo7LT)

![1450x500](/files/QWMNRobyatTgNh7ISjaH)

![1800x1200](/files/tDp7XNetUepyFH5BgNWI)

### 이미지+텍스트+버튼형

![팝업 예시](/files/vjJIBN4WeBuV9E1piQuX)

![1200x1800](/files/hS8YOAvPW0fCyJglexgh)

![1450x500](/files/VgzKTOQ91VP2oXF6GGBC)

![1800x1200](/files/Y7S9dP0Tbz91aXZtrrcz)

## Figma

### 인앱 메시지 예시 이미지

{% embed url="<https://www.figma.com/embed?embed_host=share&url=https://www.figma.com/file/mo79jPwvJbqzNkdgKKS9AT/In-app-message?type=design&node-id=0%3A1&mode=design&t=2bBdpcGHa4OX6RYx-1>" %}

### 커머스용 인앱 메시지 샘플

{% embed url="<https://embed.figma.com/design/mo79jPwvJbqzNkdgKKS9AT/In-app-message?embed-host=share&node-id=3997-313>" %}

### 인앱 메시지 규격

{% embed url="<https://embed.figma.com/design/mo79jPwvJbqzNkdgKKS9AT/In-app-message?embed-host=share&node-id=1951-337>" %}


---

# Agent Instructions: 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:

```
GET https://docs.hackle.io/crm-marketing/in-app-message-guide/create-campaign/in-app-message-template.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.