> For the complete documentation index, see [llms.txt](https://help.sixshop.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.sixshop.com/learn-sixshop/store-design/mobile-design.md).

# 모바일 화면 디자인

## **목차** 

* [모바일 화면 디자인하기](#id-1)
* [모바일 전용 메인 배너 사용하기](#id-2)
* [모바일 보조 메뉴 설정하기](#id-3)
* [모바일 최대 글자 크기 설정하기](#id-4)
* [모바일 화면의 상품 설정하기](#id-5)
* [모바일 메뉴 설정하기](#id-6)
* [사용자 편집 섹션 수정하기](#id-7)
* [모바일에서 열 설정하기](#id-8)

## 1. 모바일 화면 디자인하기

디자인 에디터 오른쪽 하단의 모니터 모양 아이콘을 클릭하면 뷰포트를 전환할 수 있어요. 단축키(Ctrl + Shift + M)를 사용해 주셔도 됩니다.

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

모바일에서 설정할 수 있는 구성 요소는 **연필 모양 아이콘(개별 편집)**&#xACFC; **팔레트 모양 아이콘(스타일 편집)**&#xC774; 노출되며, 요소 이름만 보이는 경우 별도 수정이 불가합니다.

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

## 2. 모바일 전용 배너 사용하기

{% hint style="info" %}
모바일과 데스크톱에서 서로 다른 배너를 노출해야 할 경우, **메인 배너 섹션**을 활용해 주세요.
{% endhint %}

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

#### **Step1. \[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.**

#### **Step2. 메인 배너 섹션에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭해 주세요.**

#### **Step3. '모바일 전용 메인 배너 사용하기'를 \[사용]으로 선택해 주세요.**

모바일 전용 메인 배너 사용하기를 ‘사용’으로 설정하고, **이미지, 색상, 동영상** 중 사용할 유형을 선택해 주세요. \
추가한 이미지나 색상 배너 위 문구는 이미지에 마우스를 대면 보이는 설정(톱니바퀴 아이콘)을 클릭하면 변경하거나 삭제할 수 있습니다.

#### **Step4. 하단의 +를 클릭하고 배너를 등록해 주세요.**

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

#### **Step5. 모바일 메인 배너의 스타일을 설정해 주세요.**

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

모바일 뷰포트에서 \[왼쪽 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]으로 이동하여 스타일을 설정할 수 있어요.\
※ 머리글과 합치기, 스타일, 배경 위 색상 설정은 데스크톱의 스타일을 따라갑니다.

## 3. 모바일 보조 메뉴 설정하기

{% hint style="info" %}
모바일은 가독성을 높이기 위해 **≡ 메뉴**만 지원됩니다. 메뉴를 나열해야 한다면 특정 페이지를 선택해 머리글 아래 모아 강조할 수 있는 **모바일 보조 메뉴**를 활용해 보세요.
{% endhint %}

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

#### **Step1. \[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.**

#### **Step2. 왼쪽 하단 메뉴(≡)를 눌러 모바일 보조 메뉴 옆 +를 클릭하고 노출할 보조 메뉴를 선택한 후 \[저장하기] 해주세요.**

#### **Step3.** 모바일 뷰포트에서 \[왼쪽 하단 메뉴(≡) > 스타일 편집 > 모바일 보조 메뉴]로 이동하여 스타일을 설정할 수 있어요.

※ 메인 배너 섹션의 **‘머리글과 합치기’** 기능을 사용하면 메인 배너 섹션의 **색상 스타일**을 따라갑니다. \
※ 모바일 보조 메뉴는 스크롤할 때 상단에 고정되지 않습니다.

## 4. 모바일 최대 글자 크기 설정하기

{% hint style="info" %}
데스크톱의 글자 크기를 모바일에서 동일하게 적용하지만 최대 글자 크기를 제한할 수 있어요.
{% endhint %}

PC 화면에서는 적당한 글자 크기가 모바일에서 너무 크게 보인다면, 아래 경로에서 글자의 최대 크기를 변경해 보세요.

<figure><img src="/files/31zsnNZ0IvkIK6fLhglq" alt=""><figcaption></figcaption></figure>

\[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택하고, \[왼쪽 하단 메뉴(≡) > 스타일 편집]에서 제목글, 줄글, 슬라이드 중 최대 글자 크기 제한이 필요한 요소를 클릭하여 글자 크기를 제한해 주세요.

※ 기본적으로 데스크톱 뷰에서 설정한 글자의 크기를 따라가지만, 모바일 뷰 스타일 편집에서 각 섹션의 글자 크기를 설정할 수 있습니다.

※ 데스크톱에서 글자의 크기를 다르게 설정하였으나 모바일에서 동일한 크기로 보이거나, 다르게 보이는 경우에 모바일 뷰의 최대 크기 설정이 데스크톱의 글자보다 작게 설정되어 있지 않은지 확인해 보시면 좋습니다.

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

## 5. 모바일 화면의 상품 설정하기

### 5-1. 상품 상세 설정하기

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

\[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택하고, \[왼쪽 하단 메뉴(≡) > 스타일 편집 > 상품 상세]에서 설정할 수 있어요.

\[왼쪽 하단 메뉴(≡) > 스타일 편집 > 실험실]에서 모바일 디자인의 \[**상품 상세 페이지 - 좌우 여백 제거**]에 체크하면 상품 상세의 대표 이미지, 상세 설명의 좌우 여백이 제거됩니다.

### 5-2. 상품 목록 여백 설정하기

\[왼쪽 하단 메뉴(≡) > 스타일 편집 > 실험실]에서 모바일 디자인의 **\[상품 목록 섹션 - 좌우 여백 제거]**&#xC5D0; 체크하면 상품 목록의 좌우 여백이 제거됩니다.

## 6. 모바일 메뉴 설정하기

### 6-1. 모바일 메뉴 디자인 설정하기

<figure><img src="/files/3mlwNe421SGRnE4x6vwV" alt=""><figcaption></figcaption></figure>

모바일 메뉴의 디자인은 1️⃣ **데스크톱 뷰포트**에서 2️⃣ **\[데스크톱에서 ≡ 메뉴 사용하기]**&#xC77C; 때, 설정할 수 있어요.\
데스크톱 뷰포트에서 설정하면 데스크톱과 모바일에 공통 적용됩니다.

#### **Step1.** \[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > **데스크톱**]을 선택해 주세요.

#### **Step2.** \[메뉴 나열하기]일 때, 임시적으로 \[데스크톱에서 ≡ 메뉴 사용하기]로 변경해 주세요.

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

설정을 마치고 다시 \[메뉴 나열하기]로 복구해 주시면 됩니다.

#### **Step3.** \[왼쪽 하단 메뉴(≡) > 스타일 편집 >모바일 메뉴]에서 글꼴, 색상 등의 모바일 메뉴 디자인을 변경할 수 있어요.

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

※ 모바일 뷰포트 \[왼쪽 하단 메뉴(≡) > 스타일 편집 >모바일 메뉴]에서는 모바일 메뉴의 로고, 로그인/상품 검색 사용 여부, 메뉴 글자 크기, 아이콘 크기 설정만 가능합니다.

### 6-2. 모바일 메뉴 로그인, 상품 검색 설정하기

모바일 머리글과 모바일 메뉴에 각각 로그인, 상품 검색 메뉴를 사용할 수 있어요.

#### \[머리글에 로그인, 상품 검색 사용하기]

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

#### Step.1 \[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택해 주세요.

#### Step.2 머리글의 개별 편집(연필 모양 아이콘)에서 로그인과 상품 검색의 사용 여부를 설정해 주세요.

#### \[모바일 메뉴에 로그인, 상품 검색 사용하기]

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

#### Step1. \[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택해 주세요.

#### Step2. \[왼쪽 하단 메뉴(≡) > 스타일 편집 >머리글 - 모바일 메뉴]에서 ‘로그인 사용하기’, ‘상품 검색 사용하기’에 체크 또는 체크 해제하여 각 항목의 사용 여부를 설정해 주세요.

## 7. 사용자 편집 섹션 설정하기

### 7-1. 단 배열

데스크톱에서 사용자 편집 섹션을 2단 이상으로 설정하면 모바일에서는 1단으로 합쳐지며 데스크톱의1단부터 위에서 아래로 나열됩니다.

<figure><img src="/files/1abJR7d3nxRtZyNH4WdN" alt=""><figcaption></figcaption></figure>

### 7-2. 이미지 요소

모바일 화면에서 이미지 크기가 작게 보인다면, 사용자 편집 섹션 개별 편집의 좌우 여백 설정과 이미지 요소의 너비 설정을 조절해 보시기 바랍니다.

<figure><img src="/files/fKYetNsUE6YEDxM98uZB" alt=""><figcaption><p>이미지 요소의 너비가 30%, 사용자 편집 섹션의 좌우 여백이 200px일 때, 데스크톱과 모바일 화면</p></figcaption></figure>

<figure><img src="/files/zf2cCGlSPAQhEmaPuoET" alt=""><figcaption><p>이미지 요소의 너비가 40%, 사용자 편집 섹션의 좌우 여백이 50px일 때, 데스크톱과 모바일 화면</p></figcaption></figure>

#### \[사용자 편집 섹션 좌우 여백 설정하기]

사용자 편집 섹션에 마우스를 대면 보이는 **개별 편집(연필 모양 아이콘)**&#xC744; 클릭하고 하단의 좌우 여백 설정을 변경해 주세요.

#### \[사용자 편집 섹션 이미지 요소 너비 설정하기]

사용자 섹션에 추가된 이미지 요소에 마우스를 대면 보이는 **개별 편집(연필 모양 아이콘)**&#xC744; 클릭하고 디자인 탭에서 너비 설정을 변경해 주세요.

## 8. 모바일에서 열 설정하기

상품 목록 섹션, 상품 슬라이드 섹션, 갤러리 섹션, 게시판 섹션(격자형 게시판)에서는 데스크톱과 모바일에서 각각 한 줄에 표시되는 썸네일이나 상품의 개수를 따로 설정할 수 있습니다.

#### \[갤러리 섹션, 상품 목록 섹션, 상품 슬라이드 섹션]

#### Step1. \[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.

#### Step2. 열 설정을 변경할 섹션에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭하고, 열 설정을 변경해 주세요.

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

#### \[게시판 섹션]

#### Step1. \[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.

#### Step2. 열 설정을 변경할 섹션에 마우스를 대면 보이는 스타일 편집(팔레트 모양 아이콘)을 눌러 열 설정을 변경해 주세요.

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