# 그루비 제안 템플릿으로 메시지 디자인 만들기

새로운 캠페인 만들기 진행 시 그루비에서 제공하는 '그루비 제안' 템플릿을 사용하여 메시지 디자인을 만들 수 있습니다.

## **그루비 제안 템플릿**

그루비 제안은 레이아웃과 색상, 이미지 배치 등이 미리 셋팅된 형태로 제공되기 때문에 이미지 교체 또는 텍스트 변경 등의 간단한 수정만 거치고 캠페인으로 바로 사용할 수 있습니다.

### **1. 그루비 제안 선택**

▪ **메시지 설정 > 배너 유형 선택 > 그루비 제안 템플릿 선택**<br>

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/89qjk2u3j2/1683098971283/gif-2023-05-03-4-28-21.gif" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
배너 유형 선택에 따라 그루비 제안을 선택 할 수 있습니다.
{% endhint %}

### **2. 템플릿 설정**

***

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/89qjk2u3j2/1687423166559/13-a.gif" alt=""><figcaption></figcaption></figure>

* 디자인 템플릿 선택 후 수정하고자 하는 요소 선택이 용이하도록 '뷰 컴포넌트'를 선택합니다.

\
▪ **뷰 컴포넌트**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/89qjk2u3j2/1687423181409/2.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
요소를 넣기 위한 정확한 위치를 확인하기 위해 '뷰 컴포넌트'를 켜두시는 것을 권장합니다. 뷰 컴포넌트는 실제 사이트에서는 노출되지 않습니다.
{% endhint %}

### **3. 템플릿 수정**

**▪ 텍스트 요소 수정**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/89qjk2u3j2/1687423606818/11.png" alt=""><figcaption></figcaption></figure>

* 수정하고 싶은 요소를 클릭하여 해당 요소의 상세설정에서 글자 크기, 행간, 정렬 등 상세설정이 가능합니다.

{% hint style="success" %}
행간은 글자 크기 16 기준일 때 +5를 하여 21로 지정하는 것을 권장합니다.\
(폰트나 글자 크기에 따라 + 하는 수치는 달라질 수 있습니다)\
\
행간 : 쓰거나 인쇄한 글의 줄과 줄 사이 또는 행과 행 사이
{% endhint %}

**▪ CTA 버튼 수정 : 상세설정 > 텍스트ㅤ**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/89qjk2u3j2/1687423410915/9.png" alt=""><figcaption></figcaption></figure>

* CTA 버튼이 들어간 템플릿을 선택하여 버튼 수정이 필요한 경우 버튼 요소 클릭 후 상세설정 탭의 메뉴들의 기능을 통해 원하는 스타일로 변경 가능합니다.

<br>

**▪ CTA 버튼 클릭 설정 : 상세설정 > 설정 ㅤ**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/89qjk2u3j2/1687423431341/10.png" alt=""><figcaption></figcaption></figure>

* CTA 버튼의 상세 설정에서 연결하고자 하는 URL 입력 및 클릭 시 열기 형태를 지정합니다.ㅤ

### **4. 저장**

***

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

👉 [에디터 시작하기](/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)

<br>


---

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