식스샵 고객센터
식스샵 웹사이트채팅 상담하기인스타그램개선 요청하기
  • 💬고객센터 안내
  • 🤔자주 묻는 질문
  • ✨이용 요금 안내
    • 상점 개설하기
  • 🌱쇼핑몰 가장 빠른 시작 가이드
  • 🏠홈페이지 1일 완성 가이드
  • ✅식스샵 배워보기
    • 식스샵 시작하기
      • 판매 준비하기
        • 사업자 등록하기
          • 사업자 변경하기
        • PG 연동하기
          • 토스페이먼츠
            • 토스페이먼츠 심사 미비 사항 보완하기
          • KG 이니시스
          • 간편결제 사용하기
            • 카카오페이
            • 네이버페이 주문형
            • 네이버페이 결제형
          • 기타 결제 설정하기
        • 통신판매업 신고하기
        • 상점 필수 정책 고지하기
        • 도메인 연결하기
        • 배송 설정하기
        • 알림 메시지 설정하기
      • 해외 전용 상점 개설
        • 해외 PG 연동하기
      • 식스샵으로 호스팅 이전하기
    • 상점 관리하기
      • 주문
        • 송장 엑셀 등록하기
        • 현금 영수증 발급하기
        • 부분 취소하기
      • 상품
        • 개인 결제창 생성하기
        • 조합형 옵션 만들기
        • 추가 상품 판매하기
      • 할인
        • 할인 적용 순서 살펴보기
        • 특정 상품만 할인 적용하기
      • 고객
      • 게시판
      • 후기와 질문
        • 상품 후기 연동하기
      • 블로그
      • 애드온
        • 할인 행사
        • 적립금
        • 쿠폰
        • 할인 코드
        • 셀러허브 이지셀
        • 네이버페이 주문형
        • 네이버페이 결제형
        • 무통장 입금 자동 확인
        • 송장 자동 등록 / 출력 (베타 서비스)
          • 송장 재출력하기
        • 소셜 로그인
          • 카카오 로그인 연동하기
            • 카카오 디벨로퍼스 앱 연동하기
            • 카카오톡 채널 만들기
          • 네이버 로그인 연동하기
          • 페이스북 로그인 연동하기
          • 구글 로그인 연동하기
        • 본인 인증
        • 재입고 알림
        • 카카오 알림톡/문자
          • 알림톡 템플릿 추가하기
          • 문자 템플릿 수정하기
        • 카카오 채팅
        • 채널톡
        • 네이버 톡톡
        • 네이버 쇼핑
        • 네이버 웹마스터 도구
        • 네이버 프리미엄 로그 분석
        • 지그재그 상품 연동
        • 페이스북 비즈니스 인증
        • 페이스북 마케팅(FBE)
        • 구글 서치 콘솔
        • 구글 애즈
        • 구글 태그 매니저
          • 구글 태그 매니저 구글 애널리틱스 연동하기 - GA4 버전
          • 구글 태그 매니저 구글 애널리틱스 연동하기 - UA 버전(중단 예정)
          • 구글 태그 매니저 구글 애즈 연동하기
          • 페이지별 변수 확인하기
        • 카카오 픽셀
        • 다음 쇼핑하우
        • 링크프라이스
          • 링크프라이스 할인 코드 추가하기
        • 스티비
        • 빅인
        • 팝업
        • 최상단 배너
        • 고정 버튼
        • SNS 공유
        • 코드 삽입
        • 구글 애널리틱스
          • 구글 애널리틱스 전자상거래
          • 구글 애널리틱스 캠페인 URL
          • 구글 URL Builder 활용하기
        • 네이버 애널리틱스
        • 스팸 콘텐츠 방지
      • 통계
      • 상점 설정
      • 계정 설정
      • 크롬 브라우저 설정
    • 상점 디자인하기
      • 기초부터 따라 하는 디자인 편집
        • 🧑‍🎨 디자인 에디터
        • 🚧 템플릿 변경
        • 📑 메뉴 편집
        • 🖼️ 메인 배너 섹션
        • 🛒 상품 목록 섹션
        • 📸 갤러리 섹션
        • 📢 게시판 섹션
      • 에디터 기본 정보
      • 페이지와 메뉴
        • 쇼핑몰 메뉴 구성 팁
      • 스타일 편집
      • 콘텐츠 구성 요소
        • 인스타그램 프로페셔널 계정 인증하기
      • 기본 제공 페이지
      • 모바일 화면 디자인
      • 디자인 활용하기
        • 이미지 설정 가이드
        • 상품 카테고리를 메뉴로 구성하기
        • 상점 제작 중 안내 페이지 만들기
        • 특정 등급만 구매 가능한 상품 판매하기
        • 원페이지 구성하기
        • 룩북 페이지 구성하기
        • 이미지 다운로드하기
        • 외부 설문 기능(구글 폼) 활용하기
        • 외부 팝업 기능(코드앤버터) 활용하기
    • 마케팅 스쿨
  • 💌식스샵 소식
    • 업데이트 뉴스
      • 2025년 5월 2일
      • 2025년 4월 18일
      • 2025년 3월 21일
      • 2025년 3월 7일
      • 2025년 2월 21일
      • 2024년 12월 27일
      • 2024년 9월 20일
      • 2024년 8월 21일
      • 2024년 6월 14일
      • 2024년 5월 3일
      • 2024년 4월 19일
      • 2024년 3월 8일
      • 2023년 12월 22일
      • 2023년 12월 1일
      • 2023년 11월 3일
      • 2023년 10월 13일
      • 2023년 8월 4일
      • 2023년 6월 30일
      • 2023년 5월 26일
      • 2023년 5월 19일
      • 2023년 5월 12일
      • 2023년 4월 28일
      • 2023년 4월 7일
      • 2023년 3월 17일
      • 2023년 3월 10일
      • 2023년 2월 10일
      • 2023년 2월 3일
      • 2022년
        • 2022년 12월 2일
        • 2022년 10월 7일
        • 2022년 9월 8일
        • 2022년 7월 1일
        • 2022년 6월 17일
        • 2022년 5월 27일
        • 2022년 4월 29일
        • 2022년 4월 22일
        • 2022년 4월 8일
        • 2022년 3월 18일
        • 2022년 3월 11일
        • 2022년 2월 25일
        • 2022년 2월 18일
        • 2022년 2월 11일
        • 2022년 1월 28일
        • 2022년 1월 14일
        • 2022년 1월 7일
      • 2021년
        • 2021년 12월 31일
        • 2021년 12월 24일
        • 2021년 12월 17일
        • 2021년 12월 10일
        • 2021년 12월 3일
        • 2021년 11월 26일
        • 2021년 11월 19일
        • 2021년 11월 12일
        • 2021년 11월 5일
        • 2021년 10월 29일
        • 2021년 10월 22일
        • 2021년 10월 15일
        • 2021년 10월 1일
        • 2021년 9월 24일
        • 2021년 9월 17일
        • 2021년 9월 10일
        • 2021년 8월 27일
        • 2021년 8월 20일
        • 2021년 8월 13일
        • 2021년 8월 6일
        • 2021년 7월 30일
        • 2021년 7월 2일
        • 2021년 6월 18일
        • 2021년 6월 17일
        • 2021년 6월 4일
        • 2021년 4월 30일
        • 2021년 4월 23일
        • 2021년 4월 15일
        • 2021년 4월 9일
        • 2021년 3월 26일
        • 2021년 3월 19일
        • 2021년 3월 5일
        • 2021년 2월 26일
        • 2021년 2월 19일
        • 2021년 2월 10일
        • 2021년 2월 5일
        • 2021년 1월 22일
        • 2021년 1월 15일
        • 2021년 3월 12일
      • 2020년
        • 2020년 12월 31일
        • 2020년 12월 18일
        • 2020년 12월 4일
        • 2020년 11월 20일
        • 2020년 11월 12일
        • 2020년 10월 30일
        • 2020년 10월 23일
        • 2020년 10월 8일
        • 2020년 9월 25일
        • 2020년 9월 18일
        • 2020년 9월 9일
        • 2020년 9월 4일
        • 2020년 8월 28일
        • 2020년 8월 14일
        • 2020년 8월 7일
        • 2020년 7월 24일
        • 2020년 7월 17일
        • 2020년 6월 17일
        • 2020년 6월 5일
        • 2020년 5월 13일
        • 2020년 4월 22일
        • 2020년 4월 8일
        • 2020년 3월 25일
        • 2020년 3월 11일
        • 2020년 2월 26일
        • 2020년 1월 15일
        • 2020년 1월 2일
      • 2019년
        • 2019년 12월 10일
        • 2019년 11월 26일
        • 2019년 11월 12일
        • 2019년 10월 15일
        • 2019년 10월 1일
        • 2019년 8월 6일
        • 2019년 7월 23일
        • 2019년 7월 2일
        • 2019년 6월 5일
        • 2019년 5월 21일
        • 2019년 4월 23일
        • 2019년 4월 2일
        • 2019년 3월 12일
        • 2019년 2월 13일
        • 2019년 1월 23일
      • 2018년
        • 2018년 12월 28일
        • 2018년 12월 5일
        • 2018년 11월 19일
        • 2018년 11월 7일
        • 2018년 10월 29일
        • 2018년 10월 15일
        • 2018년 9월 4일
        • 2018년 8월 8일
        • 2018년 7월 16일
        • 2018년 7월 2일
        • 2018년 6월 14일
        • 2018년 5월 23일
        • 2018년 5월 8일
        • 2018년 4월 23일
        • 2018년 3월 14일
        • 2018년 2월 2일
        • 2018년 1월 11일
      • 2017년
        • 2017년 11월 29일
        • 2017년 10월 19일
        • 2017년 9월 26일
        • 2017년 8월 25일
        • 2017년 7월 26일
        • 2017년 6월 30일
        • 2017년 6월 9일
        • 2017년 5월 19일
        • 2017년 4월 17일
        • 2017년 3월 7일
        • 2017년 2월 7일
        • 2017년 1월 13일
      • 2016년
        • 2016년 12월 22일
        • 2016년 12월 1일
        • 2016년 11월 10일
        • 2016년 10월 17일
        • 2016년 9월 29일
        • 2016년 8월 25일
        • 2016년 8월 9일
        • 2016년 7월 7일
        • 2016년 6월 14일
        • 2016년 5월 19일
        • 2016년 5월 6일
        • 2016년 4월 18일
        • 2016년 4월 11일
        • 2016년 3월 25일
    • 진행 중인 이벤트
    • 💜 식스샵 프로 살펴보기
  • .
    • 페이스북 로그인 연동하기
    • 토스페이먼츠 결제 위젯 설정
    • 구글 애널리틱스(구버전)
    • 구글 애널리틱스 전자상거래
    • 카카오 싱크
    • 공지사항
    • 상점 디자인 기타
      • 로딩 속도 개선하기
    • 스타일 편집 및 개별 편집 수정
    • 갤러리_슬라이드형 만들기
    • 갤러리_라이트박스 만들기
    • 갤러리_컬렉션 버튼 만들기
    • 종료된 이벤트
      • [종료] 페이스북/인스타그램 마케팅 대행 이벤트
      • [종료] 카카오모먼트 CBT 모집
      • [종료] 링크프라이스 제휴 마케팅 서비스
      • [종료] 이니시스 맞춤형 타겟 마케팅
    • 페이스북 카탈로그(해외 쇼핑몰 전용)
      • 페이스북 다이내믹 광고 등록하기
      • 인스타그램 제품 태그하기
    • 페이스북 픽셀(해외 쇼핑몰 전용)
      • 페이스북 픽셀 타겟 만들기
    • 🚀식스샵 퀵가이드
Powered by GitBook
On this page
  • 목차
  • 1. 모바일 화면 디자인하기
  • 2. 모바일 전용 배너 사용하기
  • 3. 모바일 보조 메뉴 설정하기
  • 4. 모바일 최대 글자 크기 설정하기
  • 5. 모바일 화면의 상품 설정하기
  • 5-1. 상품 상세 설정하기
  • 5-2. 상품 목록 여백 설정하기
  • 6. 모바일 메뉴 설정하기
  • 6-1. 모바일 메뉴 디자인 설정하기
  • 6-2. 모바일 메뉴 로그인, 상품 검색 설정하기
  • 7. 사용자 편집 섹션 설정하기
  • 7-1. 단 배열
  • 7-2. 이미지 요소
  • 8. 모바일에서 열 설정하기

Was this helpful?

  1. 식스샵 배워보기
  2. 상점 디자인하기

모바일 화면 디자인

식스샵은 자동으로 모바일에 최적화된 화면 디자인을 제공하지만 모바일 버전에서 보여지는 일부 구성요소의 설정을 직접 수정하실 수 있습니다.

Previous기본 제공 페이지Next디자인 활용하기

Last updated 6 months ago

Was this helpful?

목차

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

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

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

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

모바일과 데스크톱에서 서로 다른 배너를 노출해야 할 경우, 메인 배너 섹션을 활용해 주세요.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

데스크톱의 글자 크기를 모바일에서 동일하게 적용하지만 최대 글자 크기를 제한할 수 있어요.

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

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

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

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

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

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

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

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

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

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

6. 모바일 메뉴 설정하기

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7-1. 단 배열

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

7-2. 이미지 요소

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

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

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

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

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

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

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

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

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

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

[게시판 섹션]

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

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

✅
모바일 화면 디자인하기
모바일 전용 메인 배너 사용하기
모바일 보조 메뉴 설정하기
모바일 최대 글자 크기 설정하기
모바일 화면의 상품 설정하기
모바일 메뉴 설정하기
사용자 편집 섹션 수정하기
모바일에서 열 설정하기
이미지 요소의 너비가 30%, 사용자 편집 섹션의 좌우 여백이 200px일 때, 데스크톱과 모바일 화면
이미지 요소의 너비가 40%, 사용자 편집 섹션의 좌우 여백이 50px일 때, 데스크톱과 모바일 화면