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

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

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

<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. 저장**

***

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

👉 [에디터 시작하기](https://docs.groobee.ai/old-admin/onsite/guide/editor/getting-started)

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

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

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

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

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

📌 [CTA 버튼 사용 TIP](https://docs.groobee.ai/old-admin/onsite/guide/editor/cta-tip)