# 이미지 설정 가이드

* [이미지 노출 방식](#id-1)
* [최적화 이미지 설정 가이드](#id-2)
* [파트별 이미지 권장 사이즈](#id-3)
* [비율별 이미지 제작 가이드](#id-4)
* [메인 배너 섹션의 크기](#id-5)
  * [메인 배너 섹션의 종류가 높이 고정일 경우](#id-5-1)
  * [메인 배너 섹션의 종류가 비율 고정일 경우](#id-5-2)

## 1. 이미지 노출 방식

식스샵의 이미지는 썸네일 노출 방식으로 PC와 모바일의 화면 크기 및 브라우저의 크기에 따라 반응형으로 최적화되어 노출되는 방식입니다. \
\
PC와 모바일 화면의 크기와 브라우저 크기가 모두 다르기 때문에 이미지의 크기보다는 이미지의 비율 설정이 중요합니다. 아래 설정을 참고하여 고객님의 상점에 최적화된 이미지로 노출해 보세요. 

![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M_-P2ZQxe4pMN_pjQVD%2F-M_-PNmquUSffIuTrA9v%2Fimage_1530162367098.gif?alt=media\&token=9d3792a2-37df-46e5-9e8b-605af445d185)

## 2. 최적화 이미지 설정 가이드  

| **종류**     | **설정**               |
| ---------- | -------------------- |
| **해상도**    | 72dpi                |
| **이미지 저장** | save for web (웹용 저장) |
| **저장 방식**  | sRGB                 |
| **파일 형식**  | JPG 또는 PNG           |
| **용량**     | 5MB 이하               |
| **세로 크기**  | 9,000px 이하           |

## 3. 파트별 이미지 권장 사이즈  

* **섹션별 이미지 권장 사이즈** 

  * 메인 배너 섹션 : 가로 기준 2,000px - 3,000px
  * 사용자 편집 섹션 : 가로 기준 1,500px - 3,000px 
  * 갤러리 섹션 : 가로 기준 1,500px - 3,000px 
  * 모바일 전용 메인 배너 섹션 : 가로 기준 840 - 1,440px  

* **상품 상세 페이지 이미지 권장 사이즈** 

  * 상품 상세 페이지에서 상품 상세 이미지 : 가로 기준 900px - 2,000px 
  * 상품 상세 페이지에서 대표 상품 이미지 : 가로 기준 2,000px - 3,000px

* **블로그/게시판 이미지 권장 사이즈** 

  * 블로그/게시판 썸네일 : 가로 기준 2,000px - 3,000px
  * 블로그/게시판 상세 설명에 등록하는 이미지 : 가로 기준 900px - 2,000px 

* **기타 이미지 권장 사이즈** 
  * 로고 : 가로 기준 100 - 500px
  * 애드온 팝업 : 가로 기준 100 - 500px 
  * 애드온 최상단 배너(PC 버전) : 가로 1,080 \* 세로 80px 
  * 애드온 최상단 배너(모바일 버전) : 가로 500 \* 세로 80px\ <br>

## 4. 비율별 이미지 제작 가이드 &#x20;

![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M_-LdpoZoPU0rWBTV6F%2F-M_-LrGdcVpxW_QkBV22%2Fimage.png?alt=media\&token=37d4dc41-7546-4185-8454-7e616ea3c8e6)

사용자 편집 섹션, 갤러리 섹션, 사용자 편집 섹션 등에 등록한 이미지는 비율 설정이 가능합니다. \
이미지 잘림 없이 등록하기 위해서는 먼저 비율을 선택하신 후 비율에 맞춰 이미지 크기를 조정해 주셔야 합니다. \ <br>

#### **\[섹션별 비율 수정 경로]**

| **구분**                                                           | **비율 수정 경로**                                                                                                                    |
| ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| **메인 배너 섹션**                                                     | <p>\[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션]</p><p>단, 메인 배너 섹션의 종류가 '높이 고정'이라면 <a href="#id-5-1">높이 고정 안내서</a>를 참고해 주세요.  </p> |
| **상품 목록 섹션**                                                     | \[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 상품 목록 섹션]                                                                                      |
| **상품 슬라이드 섹션**                                                   | \[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 상품 슬라이드 섹션]                                                                                    |
| **갤러리 섹션**                                                       | \[갤러리 섹션 영역 클릭 > 연필 모양 아이콘 > 디자인 클릭]                                                                                            |
| **사용자 편집 섹션**                                                    | \[사용자 편집 섹션 이미지 요소 클릭 > 연필 모양 아이콘 > 디자인 클릭]                                                                                     |
| <p><strong>상품 상세 페이지</strong> </p><p><strong>대표 이미지</strong></p> | \[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 상품 상세]                                                                                         |
| **블로그 섹션**                                                       | \[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 블로그 섹션]                                                                                        |
| **게시판 섹션**                                                       | \[디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 게시판 섹션]                                                                                        |

#### &#x20;**\[이미지 사이즈 가이드]**

![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M_-LdpoZoPU0rWBTV6F%2F-M_-LtKuq5CiTVrJOMkx%2Fimage.png?alt=media\&token=12ca626e-e308-461a-9359-1870af207763)

## 5. 메인 배너 섹션의 크기&#x20;

### 5-1. 메인 배너 섹션의 종류가 높이 고정일 경우

메인 배너 섹션의 종류가 \[높이 고정]일 때는 브라우저의 높이가 기준이 됩니다.&#x20;

![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M_-LdpoZoPU0rWBTV6F%2F-M_-LuudWIvKdetC_p-l%2Fimage.png?alt=media\&token=ab2005d0-e0b1-4dd4-8818-6118b54d8d1c)

높이를 전체 화면으로 설정하면 브라우저의 높이를 꽉 채운 전체 화면으로 노출되고, 높이를 절반으로 설정하면 이미지가 브라우저 높이의 절반까지만 노출됩니다. \
\
메인 배너 섹션을 높이 고정으로 설정하면 브라우저 크기에 따라 이미지의 일부가 잘리는 현상이 발생합니다.

![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M_-LdpoZoPU0rWBTV6F%2F-M_-Lx-pDk1wdKOcTh00%2Fimage.png?alt=media\&token=8b7687cf-037e-4d38-8331-3100c3d06c11)

모바일의 경우에도 모바일 화면 높이를 기준으로 이미지가 노출됩니다. 모바일은 세로로 긴 화면이기 때문에 PC 화면 기준으로 가로로 긴 이미지를 등록하셨다면 이미지의 좌우가 잘려 노출됩니다. \
\
메인 배너 섹션의 종류가 높이 고정일 경우에는 [모바일 전용 메인 배너 섹션](https://help.sixshop.com/learn-sixshop/sections-and-elements#id-4-4)을 등록하시는 것을 권장합니다.&#x20;

### 5-2. 메인 배너 섹션의 종류가 비율 고정일 경우

메인 배너 섹션의 종류가 \[비율 고정]일 때는 설정하신 비율에 맞춰 이미지를 제작해 주시면 됩니다. \
이미지 비율을 맞추는 방법은 [비율별 이미지 제작 가이드](#id-4)의 내용을 참고해 주세요.&#x20;

![](https://4055358229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ld5OD2VFGhsB7IF4FTG%2F-M_-LdpoZoPU0rWBTV6F%2F-M_-LyskBBnaBCFq037n%2Fimage.png?alt=media\&token=e9c09df6-fb97-49f2-af6d-c2e606ff8854)

PC와 모바일에서 모두 잘리지 않는 이미지를 노출하셔야 한다면 비율 고정을 선택해 주세요.&#x20;

{% hint style="success" %}
메인 배너 섹션의 종류가 \[비율 고정]일 경우 제목/설명/버튼을 사용하실 수 없습니다. \
이미지에 텍스트 입력이 필요하다면 이미지 자체에 텍스트를 삽입하여 작업해 주세요. &#x20;
{% endhint %}