> For the complete documentation index, see [llms.txt](https://help.qshop.ai/customer_support/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.qshop.ai/customer_support/guide/design/editor/contents/media.md).

# 미디어

## 미디어란?

미디어는 이미지, 동영상 등을 통해 사용자에게 정보를 전달하게 위해 사용이 됩니다.

이미지 블록을 활용하여 단일 이미지를 보여주거나, 갤러리, 슬라이더 블록을 활용하여 여러 이미지를 한번에 보여주는 방법 등 다양한 디자인 구성이 가능합니다.

또한 동영상 블록을 통해 사이트 내 동영상을 재생 시킬 수 있습니다.

이미지는 직접 업로드를 하거나, 큐샵 AI 기능을 활용하여 이미지를 생성 할 수 있으며, 설정 방법에 따라 다양한 디자인 구성을 할 수 있습니다.

이미지를 등록하고, 설정하는 자세한 방법은 아래 가이드를 참고 부탁드립니다.<br>

<figure><img src="/files/uaRKRDI6SqQmGJ6B11uc" alt=""><figcaption></figcaption></figure>

## 이미지 등록하기

이미지를 사용하는 섹션 및 블록의 배경, 이미지, 갤러리, 슬라이드 블록 등 다양한 요소에 AI를 통한 이미지 생성 및 직접 이미지 업로드를 하는 방법을 알아 봅니다.

{% hint style="danger" %}
아래 가이드는 이미지 블록을 예시로 안내하고 있으며, 블록 및 섹션 배경 등 요소에 따라 일부 차이가 있을 수 있습니다.
{% endhint %}

### 1. AI 활용하기

섹션 및 블록의 배경, 이미지, 갤러리, 슬라이드 블록과 같이 이미지를 사용하는 요소는 AI를 통해 이미지를 생성 할 수 있습니다.

AI를 통해 생성 된 이미지는 이미지 라이브러리를 통해 저장 되어, 여러 블록에서 동일하게 사용이 가능합니다.\
AI를 활용하여 이미지를 생성하는 방법은 아래 내용을 참고 부탁드립니다.

{% hint style="warning" %}
AI를 통해 텍스트 생성 시 아래 내용을 주의해주세요

* AI 이미지 생성 시 1회 당 5 크레딧이 사용 됩니다.
* 이미지 라이브러를 통해 삭제 된 이미지는 복구가 불가능합니다.
  {% endhint %}

<details>

<summary>AI 이미지 생성하기</summary>

1-1. AI 이미지를 생성 할 블록을 추가합니다. ([블록 추가하기](/customer_support/guide/design/editor/contents.md#id-1-1))

{% hint style="info" %}
섹션 및 블록의 배경, 이미지, 갤러리, 슬라이드 블록 등 다양한 요소에서 사용이 가능합니다.
{% endhint %}

1-2. 블록의 상세 설정을 클릭합니다. ([블록 설정하기](/customer_support/guide/design/editor/contents.md#id-4))

1-3. 상세 설정의 \[**AI 이미지**] 버튼을 클릭합니다.

{% hint style="info" %}
이미지 블록은 퀵 메뉴의 **\[AI로 생성하기]** 아이콘을 통해 생성 할 수 있습니다.
\
섹션 및 블록의 배경은 오른쪽 속성 패널의 **\[배경 > 이미지]** 항목을 통해 생성 할 수 있습니다.
{% endhint %}

<figure><img src="/files/WZdiThGPun2AcCiLFhxL" alt=""><figcaption></figcaption></figure>

1-4. 이미지로 만들고 싶은 내용을 입력한 뒤 **\[이미지 생성하기]** 버튼을 클릭합니다.

<figure><img src="/files/FoCs6ay5zOfBrcEBim0v" alt=""><figcaption></figcaption></figure>

1-5. 생성 된 이미지를 확인한 뒤 **\[이미지 적용하기]**&#xB97C; 클릭하여 적용합니다.

**\[다시 생성하기]** 버튼을 클릭하여, 이미지 재 생성이 가능하며, 재 생성 시 5크레딧이 차감 됩니다.

{% hint style="info" %}
생성 된 이미지는 이미지 보관함에 자동으로 저장 됩니다.
{% endhint %}

<figure><img src="/files/jCIArhgwuQaJBfRibC4p" alt=""><figcaption></figcaption></figure>

</details>

### 2. 이미지 업로드하기

상품 이미지, 기업 이미지 등 직접 가지고 있는 이미지를 등록하여 사용할 수 있습니다.

등록 한 이미지는 블록의 크기에 따라 자동으로 리사이징이 되기때문에 이미지 등록 후 블록의 크기를 사이트의 디자인에 알맞게 조절 해야합니다.

{% hint style="info" %}
권장 이미지 사이즈는\[사이트 이미지 최적 해상도] 가이드를 참고 해주세요.
{% endhint %}

<details>

<summary>이미지 업로드하기</summary>

2-1. 이미지를 업로드 할 블록을 추가합니다. ([블록 추가하기](/customer_support/guide/design/editor/contents.md#id-1-1))

{% hint style="info" %}
섹션 및 블록의 배경, 이미지, 갤러리, 슬라이드 블록 등 다양한 요소에서 사용이 가능합니다.
{% endhint %}

2-2. 블록의 상세 설정을 클릭합니다. ([블록 설정하기](/customer_support/guide/design/editor/contents.md#id-4))

2-3. 상세 설정의 **\[이미지 업로드]** 버튼을 클릭합니다.

{% hint style="info" %}
섹션 및 블록의 배경은 오른쪽 속성 패널의 **\[배경 > 이미지]** 항목을 통해 업로드 할 수 있습니다.
{% endhint %}

<figure><img src="/files/zWFa8kJVD7tEffTXvBwT" alt=""><figcaption></figcaption></figure>

2-4. PC에 저장 된 이미지를 선택하여 등록합니다.

2-5. 이미지 비율에 맞춰 블록 크기 조절 및 이미지 채우기 설정을 합니다. ([블록 배치하기](/customer_support/guide/design/editor/contents.md#id-2))

{% hint style="info" %}
블록 설정 방법은 아래 **\[블록 설정하기]** 가이드를 참고해주세요.
{% endhint %}

</details>

## 블록 설정하기

각 블록은 설정에 따라 다양한 방식으로 사용이 가능합니다.

아래 콘텐츠 설정 방법 및 각 블록의 상세 설정을 참고하여 원하는 형태로 블록을 설정하여 디자인을 할 수 있습니다.

#### 블록 설정 방법

1. 사용하려는 블록을 추가합니다.
2. 퀵 메뉴의 상세설정을 클릭합니다.
3. 아래 상세 설정을 참고하여, 설정을 변경합니다.

{% hint style="info" %}
블록을 더블 클릭하여 상세 설정창을 열 수 있습니다.
{% endhint %}

### 1. 이미지 블록

페이지에 이미지를 적용 할 수 있습니다. \
단일 이미지 사용에 적합하며, 여러 장의 이미지 사용은 갤러리 블록 사용을 권장 드립니다.

#### 이미지 블록\_설정 항목

<figure><img src="/files/rZsPuMyilI6S5uiVe2ey" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="이미지 설정" %}
\| <p><strong>이미지 업로드</strong>

| <br>PC에 저장 된 파일을 선택하여 업로드 합니다.</p><hr><p><strong>이미지 보관함</strong><br>기존에 업로드한 이미지를 사용하거나, 큐샵에서 제공하는 무료 이미지를 사용할 수 있습니다.</p><ul><li>새로운 이미지 업로드 가능</li><li>AI 생성 이미지 업로드 가능</li><li>라이브러리 내 이미지 선택 사용 가능</li><li>폴더 생성을 하여, 이미지 관리 가능</li><li>갤러리, 슬라이더 콘텐츠와 연동 가능</li><li>갤러리, 슬라이더 요소와 라이브러리 공유 가능</li></ul><hr><p><strong>AI 이미지</strong></p><p>AI를 통해 이미지 생성을 합니다.</p><ul><li>이미지 생성 시 5 크레딧 차감</li><li>생성 된 이미지는 이미지 보관함에 자동 저장</li></ul> |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>이미지 채우기</strong><br>프레임에 가득 차도록 이미지를 확대합니다.</p><ul><li>프레임 크기에 따라 일부 잘려 보일 수 있음</li></ul>                                                                                                                                                                                                                                                                                                                                          |
| <p><strong>불투명도</strong><br>등록 된 이미지의 투명도를 설정합니다.</p>                                                                                                                                                                                                                                                                                                                                                                                         |
| <p><strong>흐림</strong><br>이미지를 블러처리하여 흐리게 보이도록 설정을 합니다.</p>                                                                                                                                                                                                                                                                                                                                                                                   |
| <p><strong>오버레이</strong><br>이미지에 색상을 덮어씌워 표현을 합니다.</p><ul><li>%가 높을 수록 색상이 진해져 이미지를 가리게 됩니다.</li></ul>                                                                                                                                                                                                                                                                                                                                        |
| <p><strong>이미지 대체 텍스트 ( 선택 사항 )</strong><br>검색 엔진 최적화 개선을 위해, 이미지에 대한 설명을 작성합니다.</p>                                                                                                                                                                                                                                                                                                                                                          |
| <p><strong>클릭 이벤트</strong><br>클릭 시 특정 페이지 및 위치로 이동하거나, 문자발송 등 다양한 설정을 할 수 있습니다.<br>자세한 내용은 클릭이벤트 탭을 참고 부탁드립니다.</p>                                                                                                                                                                                                                                                                                                                            |
| {% endtab %}                                                                                                                                                                                                                                                                                                                                                                                                                                  |

{% tab title="클릭 이벤트" %}

| <p><strong>클릭 이벤트</strong><br>클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 할 수 있습니다.</p><p><br><strong>사용하지않음</strong></p><p>블록 클릭 시 아무런 동작을 하지않습니다.</p><hr><p><strong>사이트 링크 연결</strong></p><p>블록 클릭 시 등록한 URL로 이동을 합니다.</p><ul><li>새창으로 열기 설정 시 새로운 창에서 연결 된 링크의 사이트가 열리게 됩니다.</li></ul><hr><p><strong>내부링크연결</strong></p><p>사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.</p><ul><li>페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.</li></ul><hr><p><strong>SNS 공유하기</strong></p><p>카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택 할 수 있습니다.</p><ul><li>버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.</li></ul><hr><p><strong>현재 URL복사하기</strong></p><p>블록이 적용이 된 페이지의 URL을 복사합니다.</p><hr><p><strong>커스텀 자바스크립트</strong></p><p>CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.</p><ul><li>스크립트 입력 시 \<script> \</script> 는 제외한 자바스크립트만 입력을 합니다.</li><li><mark style="color:red;">입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.</mark></li></ul><hr><p><strong>전화 걸기</strong></p><p>버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>문자 보내기</strong></p><p>버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>이메일 보내기</strong></p><p>버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.</p><hr><p><strong>페이지 상단 이동</strong></p><p>버튼 클릭 시 페이지 상단으로 이동합니다.</p><ul><li>헤더 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>페이지 하단 이동</strong></p><p>버튼 클릭 시 페이지 하단으로 이동합니다.</p><ul><li>푸터 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>공통 페이지 이동</strong></p><p>로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.</p> |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| {% endtab %}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| {% endtabs %}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

### 2. 슬라이더 블록

이미지를 슬라이드 형태로 보여줄 수 있습니다. 확장영역을 활용하여, 페이지의 주제에 맞는 정보 또는 이벤트 정보 등을 노출하는 용도로 사용 할 수도 있으며 크기를 조정하여 특정 주제에 대한 이미지를 모아 슬라이드 시킬 수 있습니다.

슬라이더는 그 용도에 따라 이미지 / 색상 의 형태로 추가가 가능합니다.

{% hint style="warning" %}
슬라이더는 섹션 당 하나만 추가가 가능합니다.
{% endhint %}

#### **슬라이더 블록\_설정 항목**

<figure><img src="/files/oZcOtAox5lOksxKTzd7r" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="내용 설정 항목" %}

| <p><strong>+ 이미지 추가</strong> </p><ul><li>이미지 슬라이더 또는 색상 슬라이더를 선택합니다.</li><li>이미지 선택 시 PC의 폴더를 통해 이미지 선택</li></ul>                                                                                                                                                                                                                                                                                                                              |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>이미지 업로드</strong>                                                                                                                                                                                                                                                                                                                                                                                                                    |
| <br>PC에 저장 된 파일을 선택하여 업로드 합니다.</p><hr><p><strong>이미지 보관함</strong><br>기존에 업로드한 이미지를 사용하거나, 큐샵에서 제공하는 무료 이미지를 사용 할 수 있습니다.</p><ul><li>새로운 이미지 업로드 가능</li><li>AI 생성 이미지 업로드 가능</li><li>라이브러리 내 이미지 선택 사용 가능</li><li>폴더 생성을 하여, 이미지 관리 가능</li><li>갤러리, 슬라이더 콘텐츠와 연동 가능</li><li>갤러리, 슬라이더 요소와 라이브러리 공유 가능</li></ul><hr><p><strong>AI 이미지</strong></p><p>AI를 통해 이미지 생성을 합니다.</p><ul><li>이미지 생성 시 5 크레딧 차감</li><li>생성 된 이미지는 이미지 보관함에 자동 저장</li></ul> |
| <p><strong>이미지 채우기</strong><br>프레임에 가득 차도록 이미지를 확대합니다.</p><ul><li>프레임 크기에 따라 일부 잘려 보일 수 있음</li></ul>                                                                                                                                                                                                                                                                                                                                           |
| <p><strong>불투명도</strong><br>등록 된 이미지의 투명도를 설정합니다.</p>                                                                                                                                                                                                                                                                                                                                                                                          |
| <p><strong>클릭 이벤트</strong><br>클릭 시 특정 페이지 및 위치로 이동하거나, 문자발송 등 다양한 설정을 할 수 있습니다.<br>자세한 내용은 클릭이벤트 탭을 참고 부탁드립니다.</p>                                                                                                                                                                                                                                                                                                                             |
| {% endtab %}                                                                                                                                                                                                                                                                                                                                                                                                                                   |

{% tab title="클릭 이벤트" %}

| <p><strong>클릭 이벤트</strong><br>클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 할 수 있습니다.</p><p><br><strong>사용하지않음</strong></p><p>블록 클릭 시 아무런 동작을 하지않습니다.</p><hr><p><strong>사이트 링크 연결</strong></p><p>블록 클릭 시 등록한 URL로 이동을 합니다.</p><ul><li>새창으로 열기 설정 시 새로운 창에서 연결 된 링크의 사이트가 열리게 됩니다.</li></ul><hr><p><strong>내부링크연결</strong></p><p>사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.</p><ul><li>페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.</li></ul><hr><p><strong>SNS 공유하기</strong></p><p>카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택 할 수 있습니다.</p><ul><li>버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.</li></ul><hr><p><strong>현재 URL복사하기</strong></p><p>블록이 적용 된 페이지의 URL을 복사합니다.</p><hr><p><strong>커스텀 자바스크립트</strong></p><p>CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.</p><ul><li>스크립트 입력 시 \<script> \</script> 는 제외한 자바스크립트만 입력을 합니다.</li><li><mark style="color:red;">입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.</mark></li></ul><hr><p><strong>전화 걸기</strong></p><p>버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>문자 보내기</strong></p><p>버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>이메일 보내기</strong></p><p>버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.</p><hr><p><strong>페이지 상단 이동</strong></p><p>버튼 클릭 시 페이지 상단으로 이동합니다.</p><ul><li>헤더 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>페이지 하단 이동</strong></p><p>버튼 클릭 시 페이지 하단으로 이동합니다.</p><ul><li>푸터 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>공통 페이지 이동</strong></p><p>로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.</p> |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| {% endtab %}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

{% tab title="스타일 설정 항목" %}

| <p><strong>버튼 표시</strong><br><strong>좌우화살표</strong><br>슬라이더 좌우에 이전,다음 페이지로 이동을 위한 버튼을 추가합니다.</p><hr><p><strong>색상</strong><br>좌우 화살표 버튼의 색상 및 투명도를 설정합니다.</p>                                                                     |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>페이지네이션</strong><br>슬라이더 중앙 아래 특정 페이지를 선택 할 수 있는 버튼입니다.</p>                                                                                                                                                             |
| <p><strong>썸네일</strong>                                                                                                                                                                                                           |
| <br>슬라이더 아래 다음 보여질 이미지를 노출합니다.</p>                                                                                                                                                                                                |
| <p><strong>동작</strong><br><strong>애니메이션</strong>                                                                                                                                                                                  |
| <br>슬라이드를 재생 시킬 애니메이션 형식을 선택합니다.</p><hr><p><strong>자동 넘김</strong><br>슬라이드가 자동으로 넘어갑니다.</p><hr><p><strong>재생 간격</strong><br>슬라이드가 넘어가는 속도를 설정합니다.</p><hr><p><strong>마우스 올릴 시 일지 정지</strong><br>마우스를 슬라이드 위에 올리면 동작이 일시 정지 됩니다.</p> |
| {% endtab %}                                                                                                                                                                                                                      |
| {% endtabs %}                                                                                                                                                                                                                     |

### 3. 갤러리 블록

갤러리 블록은 이미지 와 이미지 설명, 텍스트를 한번에 보여줄 수 있습니다. 이미지 블록을 통해 비슷한 구성을 할 수 있으나, 여러 이미지를 추가 할 때는 갤러리 블록 사용을 권장 드립니다.

#### 갤러리 블록\_설정 항목

<figure><img src="/files/h8yyFlwkO5WN3sqZuyMt" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="내용 설정 항목" %}

| <p><strong>+ 이미지 추가</strong><br>PC에 저장 된 파일을 선택하여 업로드 합니다.</p>                                                                                                                                                                                                                                                                                                                                                                                 |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>이미지 업로드</strong>                                                                                                                                                                                                                                                                                                                                                                                                                    |
| <br>PC에 저장 된 파일을 선택하여 업로드 합니다.</p><hr><p><strong>이미지 보관함</strong><br>기존에 업로드한 이미지를 사용하거나, 큐샵에서 제공하는 무료 이미지를 사용 할 수 있습니다.</p><ul><li>새로운 이미지 업로드 가능</li><li>AI 생성 이미지 업로드 가능</li><li>라이브러리 내 이미지 선택 사용 가능</li><li>폴더 생성을 하여, 이미지 관리 가능</li><li>갤러리, 슬라이더 콘텐츠와 연동 가능</li><li>갤러리, 슬라이더 요소와 라이브러리 공유 가능</li></ul><hr><p><strong>AI 이미지</strong></p><p>AI를 통해 이미지 생성을 합니다.</p><ul><li>이미지 생성 시 5 크레딧 차감</li><li>생성 된 이미지는 이미지 보관함에 자동 저장</li></ul> |
| <p><strong>이미지 채우기</strong><br>프레임에 가득차도록 이미지를 확대합니다.</p><ul><li>프레임 크기에 따라 일부 잘려 보일 수 있음</li></ul>                                                                                                                                                                                                                                                                                                                                            |
| <p><strong>불투명도</strong><br>등록 된 이미지의 투명도를 설정합니다.</p>                                                                                                                                                                                                                                                                                                                                                                                          |
| <p><strong>텍스트</strong><br>각각의 이미지 제목과 설명을 작성합니다.</p>                                                                                                                                                                                                                                                                                                                                                                                          |
| <p><strong>클릭 이벤트</strong><br>클릭 시 특정 페이지 및 위치로 이동하거나, 문자발송 등 다양한 설정을 할 수 있습니다.                                                                                                                                                                                                                                                                                                                                                                |
| <br>자세한 내용은 클릭이벤트 탭을 참고 부탁드립니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                            |
| {% endtab %}                                                                                                                                                                                                                                                                                                                                                                                                                                   |

{% tab title="클릭이벤트" %}

| <p><strong>클릭 이벤트</strong><br>클릭 시 특정 페이지 및 위치로 이동하거나, 문자 발송 등 다양한 설정을 할 수 있습니다.</p><p><br><strong>사용하지않음</strong></p><p>블록 클릭 시 아무런 동작을 하지않습니다.</p><hr><p><strong>사이트 링크 연결</strong></p><p>블록 클릭 시 등록한 URL로 이동을 합니다.</p><ul><li>새창으로 열기 설정 시 새로운 창에서 연결 된 링크의 사이트가 열리게 됩니다.</li></ul><hr><p><strong>내부링크연결</strong></p><p>사이트 내 특정 페이지,섹션,블록의 위치를 지정하여 이동을 합니다.</p><ul><li>페이지 이동 설정을 원하실 경우 섹션과 블록은 선택하지않음 으로 지정합니다.</li></ul><hr><p><strong>SNS 공유하기</strong></p><p>카카오톡, 네이버 카페/블로그, 페이스북, 트위터, 네이버 밴드 중 공유를 원하는 SNS 선택 할 수 있습니다.</p><ul><li>버튼 클릭 시 설정한 SNS로 이동이 되어 사이트 공유를 할 수 있습니다.</li></ul><hr><p><strong>현재 URL복사하기</strong></p><p>블록이 적용 된 페이지의 URL을 복사합니다.</p><hr><p><strong>커스텀 자바스크립트</strong></p><p>CTA 등 블록에 적용을 위한 스크립트를 적용 할 수 있습니다.</p><ul><li>스크립트 입력 시 \<script> \</script> 는 제외한 자바스크립트만 입력을 합니다.</li><li><mark style="color:red;">입력한 코드의 작동 여부 및 코드로 인해 발생하는 현상에 대해서는 조치 및 안내가 어렵습니다.</mark></li></ul><hr><p><strong>전화 걸기</strong></p><p>버튼 클릭 시 입력한 전화번호로 전화걸기를 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>문자 보내기</strong></p><p>버튼 클릭 시 입력한 전화번호로 문자 발송을 합니다.</p><ul><li>전화번호 입력 시 - 을 포함하여 입력합니다. (예 : 010-1234-5678)</li><li>전화 걸기가 불가능한 경우 기능이 동작하지 않습니다.</li></ul><hr><p><strong>이메일 보내기</strong></p><p>버튼 클릭 시 입력한 메일 주소로 메일을 발송합니다.</p><hr><p><strong>페이지 상단 이동</strong></p><p>버튼 클릭 시 페이지 상단으로 이동합니다.</p><ul><li>헤더 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>페이지 하단 이동</strong></p><p>버튼 클릭 시 페이지 하단으로 이동합니다.</p><ul><li>푸터 숨김 시 기능이 동작하지 않습니다.</li></ul><hr><p><strong>공통 페이지 이동</strong></p><p>로그인 페이지 / 장바구니 페이지 중 이동 할 페이지 선택이 가능합니다.</p> |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| {% endtab %}                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |

{% tab title="스타일 설정 항목" %}

| <p><strong>리스트</strong><br><strong>간격</strong><br>이미지와 이미지 사이 간격을 설정합니다.</p><hr><p><strong>열 개수</strong><br>하나의 열에 보여지는 이미지 갯수를 설정합니다.</p> |
| ------------------------------------------------------------------------------------------------------------------------------------------ |
| <p><strong>글자</strong><br>이미지의 제목과 설명의 글자 설정을합니다.</p><ul><li>제목과 설명 개별 설정 가능</li></ul>                                                     |
| <p><strong>마우스 오버 시 효과</strong><br><strong>애니메이션 효과</strong>                                                                               |
| <br>마우스 오버 시 보여지는 효과를 설정합니다.</p><hr><p><strong>노출 우선순위</strong>                                                                            |
| <br>이미지/텍스트 중 먼저 보여질 콘텐츠를 선택합니다.                                                                                                           |

</p><ul><li>애메이션 효과 없음 설정 시 텍스트 노출 불가</li></ul> |
{% endtab %}
{% endtabs %}

### 4. 동영상 블록

유튜브(YouTube) 또는 비메오(Vimeo)에 업로드한 동영상 주소(URL)를 입력하여 페이지에 동영상을 재생 할 수 있습니다.

#### 동영상 블록\_설정 항목

<figure><img src="/files/hF2UBNNIGhYsOU3wJiHS" alt=""><figcaption></figcaption></figure>

#### 동영상 요소\_설정 항목

| 설정 항목                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <p><strong>링크</strong><br>유튜브(YouTube) 또는 비메오(Vimeo)의 영상 주소를 입력합니다.</p>                                                                                                                                                                                                                                                                                                                                                                                                                  |
| <p><strong>스타일</strong><br><strong>재생 시 동영상 채우기</strong></p><p>동영상을 프레임의 크기에 맞추거나 원본 비율을 유지합니다.</p><ul><li>채우기 사용 시 프레임 크기에 따라 일부 잘려 보일 수 있음</li></ul><hr><p><strong>자동 재생</strong></p><p>동영상이 자동으로 재생이 됩니다.</p><ul><li>음소거 상태로만 재생 가능</li></ul><hr><p><strong>반복 재생</strong><br>동영상이 반복 재생 됩니다.</p><hr><p><strong>클릭 허용</strong><br>동영상 플레이어에 대한 조작을 할 수 있습니다.</p><hr><p><strong>동영상 컨트롤 표시</strong><br>재생, 일시정지, 넘기기 등의 컨트롤 바를 표시합니다.</p><ul><li>유트브 영상만 적용 가능, 비메오 영상 적용 불가</li></ul> |