# 통 이미지로 메시지 디자인 만들기-플로팅 바

## **플로팅바: 통이미지**

플로팅 바 사용 시 가로 길이가 짧은 이미지를 사용해야 하는 경우 배경색을 설정하여 다양한 해상도에 대응할 수 있습니다.

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

### **1. GroobeeWrap 준비**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/nxf5sz2tvw/1687415889400/11-a.gif" alt=""><figcaption></figcaption></figure>

* '빈 템플릿'을 사용하여 이미지를 넣을 수 있도.록 기본 이미지를 삭제합니다.

**뷰 컴포넌트**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/nxf5sz2tvw/1687415929107/3.png" alt=""><figcaption></figcaption></figure>

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

### **2. 이미지 불러오기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/nxf5sz2tvw/1687416001974/1.png" alt=""><figcaption></figcaption></figure>

* 상세설정 > 배경 이미지 > Layer > \[이미지 업로드] 버튼을 클릭 하여 '더블 클릭 or 파일 드래그 앤 드롭'하여 이미지 파일을 추가합니다.

\
**더블 클릭으로 이미지 불러오는 방법**

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

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

\
**파일을 드래그 앤 드롭 하여 이미지 불러오는 방법**

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

### **3. 불러온 이미지 조정**

**▪ 배경 이미지 조정**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/e63v6g03de/1687416642530/4.png" alt=""><figcaption></figcaption></figure>

* 불러온 이미지의 가로 사이즈가 화면보다 작기 때문에 노출 하고자 하는 메시지의 내용을 가운데로 정렬합니다.

{% hint style="success" %}
<권장 설정 값>\
▪ 반복 : no-repeat\
▪ 위치 : center-center\
▪ 사이즈 : contain
{% endhint %}

**▪ 배경색 설정**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/e63v6g03de/1687416774862/5.png" alt=""><figcaption></figcaption></figure>

* 발생한 여백에 이미지 배경색과 동일한 색상을 설정하면 하나의 플로팅 바처럼 사용할 수 있습니다.

**▪ 가로 사이즈 지정**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/e63v6g03de/1687416856290/6.png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
<권장 설정 값>  가로크기 : 1,980 px

* 처음부터 가로크기를 1,980 px로 지정하면 에디터 화면이 잘리게 되어 크기 조정은 가장 마지막에 진행해 주세요.
  {% endhint %}

### **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)


---

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