> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/userguide/widget/designsettings.md).

# 디자인

{% hint style="info" %}
위젯을 최대한 효과적으로 보여주기 위해 원하는 디자인으로 설정 가능해요.\

PC, 모바일 반응형 적용부터 크기, 위치 및 모서리 둥글기까지 세부적으로 설정해 보세요.
{% endhint %}

### 멀티 샵플레이어 위젯

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FvzKEyWgGTYhMarlVi0wp%2F%EB%A9%80%ED%8B%B0.png?alt=media&amp;token=7955b1c5-cece-4b6f-a33d-995066dc0c36" alt=""><figcaption></figcaption></figure>

1. **디자인 탭 > PC 레이아웃**에서 목록, 그리드, 슬라이드 중 원하는 레이아웃을 선택하세요.
 선택한 레이아웃은 오른쪽 미리보기 영역에서 바로 확인할 수 있어요.
2. 위젯 높이를 입력해 주세요.
 높이는 640px \~ 800px 범위 내에서 설정할 수 있어요.
3. 멀티 샵플레이어 위젯에 표시되는 버튼을 켜거나 끌 수 있는 옵션이에요.
 비활성화하면 해당 버튼은 위젯에 표시되지 않아요.

### 플로팅 위젯

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FMqtzClTPfIk4H4g8n1kn%2F%ED%94%8C%EB%A1%9C%ED%8C%851.png?alt=media&amp;token=824a5dbe-5266-483d-90dc-01c476e0e64b" alt=""><figcaption></figcaption></figure>

1. **크기 및 모양**에서 플로팅 위젯이 PC에서 처음 표시될 크기를 설정할 수 있어요.
버튼을 클릭하면 최소 ↔ 중간 크기로 전환되며, 사용자가 직접 크기를 변경할 수 있어요.
2. **모서리 모양**에서는 플로팅 위젯의 모서리를 둥글게 또는 각지게 선택할 수 있어요.
3. **위치**에서 위젯이 화면의 어느 방향에 표시될지 설정할 수 있어요.
좌우 여백과 하단 여백을 조절해 세부 위치를 지정할 수 있어요.
4. **버튼 표시**에서 플로팅 위젯에 노출되는 버튼을 켜거나 끌 수 있어요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FnNLKfTjF7dUaN7i8CBSN%2F%ED%94%8C%EB%A1%9C%ED%8C%852.png?alt=media&amp;token=064c9b9e-df97-497f-b1e6-3b3508370935" alt=""><figcaption></figcaption></figure>

5. 모바일에서는 플로팅 위젯이 표시되는 방향만 설정할 수 있어요.
 **PC와 모바일에서 설정한 위젯 위치는 서로 다를 수 있어요.**

### 슬라이드 위젯

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2F5VgsIWr5omZuzDjF7KPA%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C1.png?alt=media&amp;token=55ae847c-9652-486d-b8dc-d68db2b2b0c2" alt=""><figcaption></figcaption></figure>

1. **상품 배너 설정 > 위치** 에서 상품 배너가 동영상 또는 상품 이미지 영역 안에 표시할지, 영역 바깥에 표시할지 선택 가능합니다.
2. **상품 배너 설정 > 배너 레이아웃**에서 상품 배너 디자인을 기본형 또는 카드형으로 선택할 수 있어요. 카드형은 상품 배너가 3개 이상인 경우 사용을 추천해요.
3. **크기 및 모양 > 동영상 모서리 모양**에서 동영상 또는 상품 이미지의 모서리 곡률을 설정할 수 있어요. 직각부터 단계별 둥근 모서리까지 선택할 수 있어요.
4. **크기 및 모양 > 동영상 설명 색**에서 위젯에 표시되는 동영상 설명 텍스트 색상을 설정할 수 있어요.
5. **크기 및 모양 > 최대 가로 길이**에서 슬라이드 위젯의 전체 가로 길이 최대 값을 설정할 수 있어요. 768px \~ 1440px 사이로 입력할 수 있어요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FEWlVlaVCOXbiVP4WAWj3%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C2.png?alt=media&amp;token=635045e9-3706-49f1-acd9-46d7ab771dd5" alt=""><figcaption></figcaption></figure>

6. 슬라이드 위젯의 모바일 설정은 PC 설정 값을 기준으로 자동 적용돼요.
\
   단, 모바일에서의 상품 배너는 PC 설정과 관계없이 바깥쪽에 표시합니다.

### 스포트라이트 위젯&#x20;

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FupFktpaipoYiVKaQShkk%2Fimage.png?alt=media&amp;token=e5de4eeb-ca82-40fa-bf56-0e07d90dcf7b" alt=""><figcaption></figcaption></figure>

1. **상품 배너 설정 > 레이아웃**에서 상품 배너 디자인을 목록형 또는 슬라이드형으로 선택할 수 있어요.
2. **크기 및 모양 > 모서리 모양**에서 동영상 또는 상품 이미지의 모서리 곡률을 설정할 수 있어요. 직각부터 단계별 둥근 모서리까지 선택할 수 있어요.
3. **크기 및 모양 > 슬라이드 버튼 위치**에서 이전/다음 버튼의 위치를 좌우 또는 하단 중에서 선택할 수 있어요.
   1. 위젯이 정상적으로 표시되려면 삽입할 영역의 최소 높이를 좌우 선택 시 640px, 하단 선택 시 704px 이상으로 확보해 주세요.
4. **크기 및 모양 > 최대 가로 길이**에서 위젯의 전체 가로 길이 최대 값을 설정할 수 있어요. 768px \~ 2184px 사이로 입력할 수 있어요.
5. 화면 너비에 꽉차게 채우기를 체크하면 최대 가로 길이 설정과 관계없이 화면 너비에 맞춰 자동으로 확장돼요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FW9o5s0ZmAxjxBVL99Bjb%2Fimage.png?alt=media&amp;token=38a92ab1-32f5-4445-939a-755a711eb004" alt=""><figcaption></figcaption></figure>

6. 슬라이드 위젯의 모바일 설정은 PC 설정 값을 기준으로 자동 적용돼요.


### 히어로 배너 위젯 (메인 상단 배너)

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2Fzc7ycegJ1LBbGJ6TZvGN%2Fimage.png?alt=media&amp;token=9deac12b-307e-4388-8fa7-96552c1d72f8" alt=""><figcaption></figcaption></figure>

1. **크기 및 모양 > PC 높이 설정**에서 배너의 세로 비율을 21:9, 16:9, 화면 전체 중에서 선택하거나, 400px\~1080px 범위 내에서 직접 입력할 수 있어요.
2. **동영상 표시 > PC 수직 포커스**에서 영상이 배너 영역보다 클 때 어느 부분을 기준으로 보여줄지 상단, 중앙, 하단 중에서 설정할 수 있어요.
3. **동영상 표시 > 영상 전환 효과**에서 여러 배너가 있을 때 다음 배너로 넘어가는 방식을 슬라이드 또는 페이드 중에서 선택할 수 있어요. 슬라이드는 좌우로 이동하며 전환돼요.
4. **버튼 표시 > PC 표시 방법**에서 재생/일시정지, 사운드 등 컨트롤 버튼의 노출 방식을 마우스 오버 또는 항상 중에서 선택할 수 있어요. 모바일에서는 버튼이 항상 표시돼요.
5. **버튼 표시 > 재생/일시정지**에서 영상을 멈추거나 다시 재생할 수 있는 버튼의 노출 여부를 켜고 끌 수 있어요.
6. **버튼 표시 > 사운드**에서 영상의 음소거/음소거 해제 버튼의 노출 여부를 켜고 끌 수 있어요.
7. **버튼 표시 > 인디케이터**에서 여러 배너 중 현재 몇 번째 배너인지 보여주는 표시의 노출 여부를 켜고 끌 수 있어요. 켤 경우 유형을 도트 또는 숫자 중에서 선택할 수 있어요.
8. **버튼 표시 > 이전/다음 버튼**에서 배너를 수동으로 넘길 수 있는 화살표 버튼의 노출 여부를 켜고 끌 수 있어요. 켤 경우 위치를 가운데 하단 또는 양쪽 좌우 중에서 선택할 수 있어요. 버튼을 켜지 않아도 스와이프나 드래그로 배너를 전환할 수 있어요.

<figure><img src="https://1296347489-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FLKEFnVmIYlmffzSBEtw1%2Fuploads%2FInP0emFhItOQLIuawBjp%2Fimage.png?alt=media&amp;token=c78649e0-b7a1-49e6-be3c-f6fabcb442c3" alt=""><figcaption></figcaption></figure>

9. **디자인 > 모바일 탭**에서는 화면 너비 1024px 이하부터 적용되는 모바일 전용 소재와 디자인 설정을 별도로 지정할 수 있어요.
10. **크기 및 모양 > 모바일 높이 설정**에서 배너의 세로 비율을 4:3, 3:4, 화면 전체 중에서 선택하거나 직접 입력할 수 있어요.&#x20;
11. **동영상 표시 > 모바일 수직 포커스**에서 영상이 배너 영역보다 클 때 어느 부분을 기준으로 보여줄지 상단, 중앙, 하단 중에서 설정할 수 있어요.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://support.charlla.io/userguide/widget/designsettings.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.