# 메시지 유형별 디자인 권장 사이즈

## **PC 메시지 디자인** <a href="#pc" id="pc"></a>

### **팝업**

* **권장 사이즈 : 430 \* 290px**
* 팝업 메시지 유형은 반투명 배경 위에 캠페인(메시지)을 강조하여 노출합니다.

{% hint style="success" %}
권장 사이즈는 430 \* 290px 이지만 가로 500px, 세로 500px 이하로 자유롭게 설정할 수 있습니다.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627465797790/image.png" alt=""><figcaption></figcaption></figure>

### **풀 스크린**

* **권장 사이즈 : 1280 \* 800px**
* 페이지 전체를 사용하여 캠페인(메시지)을 노출하는 메시지 유형입니다.

{% hint style="success" %}
풀 스크린 메시지 같은 경우 \[GroobeeWrap] 권장 사이즈 1280 \* 800px 이지만, \
사이트 특성에 맞춰 자유롭게 설정할 수 있습니다.
{% endhint %}

* \[GroobeeWrap] 이란? 고객에게 전달할 주요 메시지가 들어갈 내용을 구성할 수 있는 가상의 스케치북 입니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627465813020/image.png" alt=""><figcaption></figcaption></figure>

### **슬라이드 인**

* **권장 사이즈 : 250 \* 350px**
* 페이지 상,하,좌,우 중 원하는 위치에 캠페인(메시지)을 노출합니다.

{% hint style="success" %}
권장 사이즈는 250 \* 350px 이지만 가로 500px, 세로 500px 이하로 자유롭게 설정할 수 있습니다.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627465879394/image.png" alt=""><figcaption></figcaption></figure>

### **플로팅 바**

* **권장 사이즈 : 1280 \* 100px**
* 긴 띠배너 형태로 상단 또는 하단에 캠페인(메시지)을 노출합니다.

{% hint style="success" %}
플로팅 바 \[GroobeeWrap] 권장 사이즈는 1280 \* 100px 이지만, 사이트 특성에 맞춰 자유롭게 설정할 수 있습니다.
{% endhint %}

\[GroobeeWrap] 이란? 고객에게 전달할 주요 메시지가 들어갈 내용을 구성할 수 있는 가상의 스케치북 입니다.

[**👉 여러 디바이스 화면 해상도에 맞게 '플로팅 바'를 적용하고 싶다면?**](/old-admin/onsite/guide/editor/resolution.md)

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627465950853/image.png" alt=""><figcaption></figcaption></figure>

### **티저**

* **권장 사이즈 : 250 \* 100px**
* 티저 메시지는 메인 메시지 노출 전에 사이트에 방문한 고객에게 먼저 보여주어 클릭을 유도할 수 있습니다.

{% hint style="info" %}
권장 사이즈는 250 \* 100px 이지만 가로 320px 이하로 자유롭게 설정할 수 있습니다.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627518604583/image.png" alt=""><figcaption></figcaption></figure>

***

## **Mobile 메시지 디자인**

* 모바일의 경우 통 이미지 삽입 시, 아래 안내되는 권장 사이즈의 2배율 이미지를 삽입하면 선명하게 노출됩니다.

### **팝업**

* **권장 사이즈 : 320 \* 320px**
* 반투명 배경 위에 캠페인(메시지)을 강조하여 노출합니다.

{% hint style="success" %}
권장 사이즈는 320 \* 320px 이지만 권장 사이즈 이하로 자유롭게 설정할 수 있습니다.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627538608381/image.png" alt=""><figcaption></figcaption></figure>

### **풀 스크린**

* **권장 사이즈 : 320 \* 480px**
* 페이지 전체를 사용하여 캠페인(메시지)을 노출합니다.

{% hint style="success" %}
풀 스크린 메시지 같은 경우 \[GroobeeWrap] 권장 사이즈 320 \* 480px 이지만, \
사이트 특성에 맞춰 자유롭게 설정할 수 있습니다.
{% endhint %}

* \[GroobeeWrap] 이란? 고객에게 전달할 주요 메시지가 들어갈 내용을 구성할 수 있는 가상의 스케치북 입니다.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627538636060/image.png" alt=""><figcaption></figcaption></figure>

<br>

### **플로팅 바**

* **권장 사이즈 : 320 \* 65px**
* 긴 배너 형태로 상단 또는 하단에 캠페인(메시지)을 노출합니다.

{% hint style="info" %}
플로팅 바 \[GroobeeWrap] 권장 사이즈 320 \* 65px 이지만, 사이트 특성에 자유롭게 설정할 수 있습니다.
{% endhint %}

* \[GroobeeWrap] 이란? 고객에게 전달할 주요 메시지가 들어갈 내용을 구성할 수 있는 가상의 스케치북 입니다.

[**👉 여러 디바이스 화면 해상도에 맞게 '플로팅 바'를 적용하고 싶다면?**](/old-admin/onsite/guide/editor/resolution.md)

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627518358665/image.png" alt=""><figcaption></figcaption></figure>

<br>

### **티저**

* **권장 사이즈 : 250 \* 100px**
* 티저 메시지는 메인 메시지 노출 전에 사이트에 방문한 고객에게 먼저 보여주어 클릭을 유도할 수 있습니다.

{% hint style="success" %}
권장 사이즈는 250 \* 100px 이지만 가로 320px 이하로 자유롭게 설정할 수 있습니다.
{% endhint %}

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/qlfpon2yv6/1627524921984/image.png" alt=""><figcaption></figcaption></figure>

***

## **💌 메시지 디자인 가이드**

👉 [에디터 시작하기](/old-admin/onsite/guide/editor/getting-started.md)

👉 [그루비 제안 템플릿으로 메시지 디자인 만들기](/old-admin/onsite/guide/editor/template.md)

👉 [통 이미지로 메시지 디자인 만들기 - 슬라이드인](/old-admin/onsite/guide/editor/slide-in.md)

👉 [통 이미지로 메시지 디자인 만들기 - 플로팅 바](/old-admin/onsite/guide/editor/floating-bar.md)

👉 [배경없는 PNG 이미지로 메시지 디자인 만들기](/old-admin/onsite/guide/editor/png.md)

👉 [CTA 버튼을 삽입한 메시지 디자인 작성](/old-admin/onsite/guide/editor/cta.md)

📌 [CTA 버튼 사용 TIP](/old-admin/onsite/guide/editor/cta-tip.md)


---

# 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.groobee.ai/old-admin/onsite/guide/editor/size.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.