> 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="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FlpxWo0GbXxAsT5u2HvgU%2F%EB%B7%B0%ED%8F%AC%ED%8A%B8.png?alt=media&amp;token=a52f8b67-cebf-4401-8e9a-4dadf76eb686" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FUqkVL2chrb5b4T2C6jaO%2F%EC%88%98%EC%A0%95%EC%95%84%EC%9D%B4%EC%BD%98.png?alt=media&amp;token=4643169c-808f-48f6-85b3-f47f55efa5d9" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2F2UcwnFoMBHYj7wBxlj3F%2F%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%A0%84%EC%9A%A9%EB%A9%94%EC%9D%B8%EB%B0%B0%EB%84%88%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0.gif?alt=media&amp;token=c81dbff0-aa62-4399-b6a6-bd25d13752d9" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FkvF1yZLMe4dDLus8icdt%2F%EB%A9%94%EC%9D%B8%EB%B0%B0%EB%84%88%EC%84%B9%EC%85%98_%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%B6%94%EA%B0%80.png?alt=media&amp;token=c2658290-cbed-4c6e-9437-6bda0ec73e0b" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2F4uAPId3SXXt1iZdfJqWc%2F%EB%A9%94%EC%9D%B8%EB%B0%B0%EB%84%88%EC%8A%A4%ED%83%80%EC%9D%BC%ED%8E%B8%EC%A7%91.png?alt=media&amp;token=75d88188-a663-41c4-a050-f54b002950ff" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FsWUfEcgwor2fU7sj4aQK%2F%EB%AA%A8%EB%B0%94%EC%9D%BC%EB%A9%94%EB%89%B4.png?alt=media&amp;token=591f5e72-898f-40e8-9c36-ada52ed87544" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Fi2Den4oTXTBhb7wjbdjP%2F%EC%B5%9C%EB%8C%80%EA%B8%80%EC%9E%90%ED%81%AC%EA%B8%B0.png?alt=media&amp;token=a2b77f24-4ab6-477c-98ee-7ba57c94ddb1" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FtXPi630h91wvxA3AiY3t%2F%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C%EA%B8%80%EC%9E%90%EC%B5%9C%EB%8C%80%ED%81%AC%EA%B8%B0.png?alt=media&amp;token=209ad8b1-d0fe-4233-b3b7-d9203594d29f" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FHwHOxFdrPeee8NGMunZf%2F%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%83%81%ED%92%88%EC%83%81%EC%84%B8.png?alt=media&amp;token=7958455a-31af-4c8f-9c67-a6e05d273f0a" alt=""><figcaption></figcaption></figure>

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

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

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

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FbpgidEogLwMYk6u9Vobk%2F%EB%A9%94%EB%89%B4%EB%AA%A8%EC%96%91.png?alt=media&amp;token=8911d1f1-c9a2-45c9-8614-132fa7b1631b" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FOy5KkdbOzCK0rG7CnJT5%2F%EB%A9%94%EB%89%B4%EC%A2%85%EB%A5%98%EB%B3%80%EA%B2%BD.png?alt=media&amp;token=4b294dff-8a00-4dcb-86a7-7602da6fd44d" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FFrJGWatwehaG7jxXeIoz%2F%EB%AA%A8%EB%B0%94%EC%9D%BC%EB%A9%94%EB%89%B4%EC%8A%A4%ED%83%80%EC%9D%BC%ED%8E%B8%EC%A7%91.png?alt=media&amp;token=37df767b-5a0a-443d-97fb-65442132b5ed" alt=""><figcaption></figcaption></figure>

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

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FAScrIUsVJyMZQfEsFJrD%2F%EB%A8%B8%EB%A6%AC%EA%B8%80%EB%A1%9C%EA%B7%B8%EC%9D%B8.png?alt=media&amp;token=d2421ddb-0747-475a-960c-3989dea682f2" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FUtF7BzrjLQmxRiyJpx80%2F%EB%AA%A8%EB%B0%94%EC%9D%BC%EB%A9%94%EB%89%B4%EB%A1%9C%EA%B7%B8%EC%9D%B8.png?alt=media&amp;token=a6f8cd4f-8adb-41ba-b441-6cbd5ffa79dd" alt=""><figcaption></figcaption></figure>

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

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

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

### 7-1. 단 배열

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FLcyrGDcBjPfDBaqpPjPT%2F%EC%82%AC%EC%9A%A9%EC%9E%90%ED%8E%B8%EC%A7%91%EC%84%B9%EC%85%98%EB%82%98%EC%97%B4.png?alt=media&amp;token=23e99813-6609-4b65-adc7-933d6479c0c0" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2F17g6zQZoZVCyjZnYPfTF%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%84%88%EB%B9%841.png?alt=media&amp;token=c52bec6a-c033-45e1-a5b6-f033a169ad4b" alt=""><figcaption><p>이미지 요소의 너비가 30%, 사용자 편집 섹션의 좌우 여백이 200px일 때, 데스크톱과 모바일 화면</p></figcaption></figure>

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2FrRjttY6fD8UytCgmn4uN%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%84%88%EB%B9%842.png?alt=media&amp;token=c4293759-fe7b-47a0-8544-27c93f47413a" alt=""><figcaption><p>이미지 요소의 너비가 40%, 사용자 편집 섹션의 좌우 여백이 50px일 때, 데스크톱과 모바일 화면</p></figcaption></figure>

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

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

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

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

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

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

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Ffxorss43Whqkd8ipvXzX%2F%EA%B0%9C%EB%B3%84%ED%8E%B8%EC%A7%91_%EC%97%B4.png?alt=media&amp;token=bd0c8ed2-b7b8-41ff-9712-91cceda7694d" alt=""><figcaption></figcaption></figure>

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

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

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

<figure><img src="https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-Ld5OD2VFGhsB7IF4FTG%2Fuploads%2Ftqo08D8bU4Ir1UCOblcp%2F%EC%8A%A4%ED%83%80%EC%9D%BC%ED%8E%B8%EC%A7%91_%EC%97%B4.png?alt=media&amp;token=c2454b92-eb24-4a71-9ccf-4ae045333678" alt=""><figcaption></figcaption></figure>