이미지 설정 가이드
내 상점에 최적화 된 이미지를 노출하는 방법을 배워보세요.
1. 이미지 노출 방식
식스샵의 이미지는 썸네일 노출 방식으로 PC와 모바일의 화면 크기 및 브라우저의 크기에 따라 반응형으로 최적화되어 노출되는 방식입니다. PC와 모바일 화면의 크기와 브라우저 크기가 모두 다르기 때문에 이미지의 크기보다는 이미지의 비율 설정이 중요합니다. 아래 설정을 참고하여 고객님의 상점에 최적화된 이미지로 노출해 보세요.
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
4. 비율별 이미지 제작 가이드
사용자 편집 섹션, 갤러리 섹션, 사용자 편집 섹션 등에 등록한 이미지는 비율 설정이 가능합니다. 이미지 잘림 없이 등록하기 위해서는 먼저 비율을 선택하신 후 비율에 맞춰 이미지 크기를 조정해 주셔야 합니다.
[섹션별 비율 수정 경로]
구분 | 비율 수정 경로 |
메인 배너 섹션 | [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 메인 배너 섹션] |
상품 목록 섹션 | [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 상품 목록 섹션] |
상품 슬라이드 섹션 | [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 상품 슬라이드 섹션] |
갤러리 섹션 | [갤러리 섹션 영역 클릭 > 연필 모양 아이콘 > 디자인 클릭] |
사용자 편집 섹션 | [사용자 편집 섹션 이미지 요소 클릭 > 연필 모양 아이콘 > 디자인 클릭] |
상품 상세 페이지 대표 이미지 | [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 상품 상세] |
블로그 섹션 | [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 블로그 섹션] |
게시판 섹션 | [디자인 편집 > 메뉴(좌측 하단≡) > 스타일 편집 > 게시판 섹션] |
[이미지 사이즈 가이드]
5. 메인 배너 섹션의 크기
5-1. 메인 배너 섹션의 종류가 높이 고정일 경우
메인 배너 섹션의 종류가 [높이 고정]일 때는 브라우저의 높이가 기준이 됩니다.
높이를 전체 화면으로 설정하면 브라우저의 높이를 꽉 채운 전체 화면으로 노출되고, 높이를 절반으로 설정하면 이미지가 브라우저 높이의 절반까지만 노출됩니다. 메인 배너 섹션을 높이 고정으로 설정하면 브라우저 크기에 따라 이미지의 일부가 잘리는 현상이 발생합니다.
모바일의 경우에도 모바일 화면 높이를 기준으로 이미지가 노출됩니다. 모바일은 세로로 긴 화면이기 때문에 PC 화면 기준으로 가로로 긴 이미지를 등록하셨다면 이미지의 좌우가 잘려 노출됩니다. 메인 배너 섹션의 종류가 높이 고정일 경우에는 모바일 전용 메인 배너 섹션을 등록하시는 것을 권장합니다.
5-2. 메인 배너 섹션의 종류가 비율 고정일 경우
메인 배너 섹션의 종류가 [비율 고정]일 때는 설정하신 비율에 맞춰 이미지를 제작해 주시면 됩니다. 이미지 비율을 맞추는 방법은 비율별 이미지 제작 가이드의 내용을 참고해 주세요.
PC와 모바일에서 모두 잘리지 않는 이미지를 노출하셔야 한다면 비율 고정을 선택해 주세요.
메인 배너 섹션의 종류가 [비율 고정]일 경우 제목/설명/버튼을 사용하실 수 없습니다. 이미지에 텍스트 입력이 필요하다면 이미지 자체에 텍스트를 삽입하여 작업해 주세요.
Last updated
