모바일 화면 디자인_241004
식스샵은 자동으로 모바일에 최적화된 화면 디자인을 제공하지만 모바일 버전에서 보여지는 일부 구성요소의 설정을 직접 수정하실 수 있습니다.
Last updated
Was this helpful?
식스샵은 자동으로 모바일에 최적화된 화면 디자인을 제공하지만 모바일 버전에서 보여지는 일부 구성요소의 설정을 직접 수정하실 수 있습니다.
Last updated
Was this helpful?
모바일 화면 디자인하기
모바일 전용 메인 배너 사용하기
모바일 보조 메뉴 설정하기
모바일 최대 글자 크기 설정하기
모바일 상품 상세 설정하기
모바일 메뉴 설정하기
디자인 에디터 오른쪽 하단의 모니터 모양 아이콘을 클릭하면 뷰포트를 전환할 수 있어요. 단축키(Ctrl + Shift + M)를 사용해 주셔도 됩니다.
모바일에서 설정할 수 있는 구성 요소는 연필 모양 아이콘(개별 편집)과 팔레트 모양 아이콘(스타일 편집)이 노출되며, 요소 이름만 보이는 경우 별도 수정이 불가합니다.
모바일과 데스크톱에서 서로 다른 배너를 노출해야 할 경우, 메인 배너 섹션을 활용해 주세요.
Step1. [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.
Step2. 메인 배너 섹션에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭해 주세요.
모바일 전용 메인 배너 사용하기를 ‘사용’으로 설정하고, 이미지, 색상, 동영상 중 사용할 유형을 선택해 주세요. 추가한 이미지나 색상 배너 위 문구는 이미지에 마우스를 대면 보이는 설정(톱니바퀴 아이콘)을 클릭하면 변경하거나 삭제할 수 있습니다.
Step4. 하단의 +를 클릭하고 배너를 등록해 주세요.
모바일 뷰포트에서 [왼쪽 하단 메뉴(≡) > 스타일 편집 > 메인 배너 섹션]으로 이동하여 스타일을 설정할 수 있어요. ※ 머리글과 합치기, 스타일, 배경 위 색상 설정은 데스크톱의 스타일을 따라갑니다.
모바일은 가독성을 높이기 위해 ≡ 메뉴만 지원됩니다. 메뉴를 나열해야 한다면 특정 페이지를 선택해 머리글 아래 모아 강조할 수 있는 모바일 보조 메뉴를 활용해 보세요.
Step1. [식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 눌러 모바일 뷰포트로 변경해 주세요.
※ 메인 배너 섹션의 ‘머리글과 합치기’ 기능을 사용하면 메인 배너 섹션의 색상 스타일을 따라갑니다. ※ 모바일 보조 메뉴는 스크롤할 때 상단에 고정되지 않습니다.
데스크톱의 글자 크기를 모바일에서 동일하게 적용하지만 최대 글자 크기를 제한할 수 있어요.
PC 화면에서는 적당한 글자 크기가 모바일에서 너무 크게 보인다면, 아래 경로에서 글자의 최대 크기를 변경해 보세요.
[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택하고, [왼쪽 하단 메뉴(≡) > 스타일 편집]에서 제목글, 줄글, 슬라이드 중 최대 글자 크기 제한이 필요한 요소를 클릭하여 글자 크기를 제한해 주세요.
※ 기본적으로 데스크톱 뷰에서 설정한 글자의 크기를 따라가지만, 모바일 뷰 스타일 편집에서 각 섹션의 글자 크기를 설정할 수 있습니다.
※ 데스크톱에서 글자의 크기를 다르게 설정하였으나 모바일에서 동일한 크기로 보이거나, 다르게 보이는 경우에 모바일 뷰의 최대 크기 설정이 데스크톱의 글자보다 작게 설정되어 있지 않은지 확인해 보시면 좋습니다.
[식스샵 > 디자인 편집 > 오른쪽 하단 뷰포트(모니터 모양 아이콘) > 모바일]을 선택하고, [왼쪽 하단 메뉴(≡) > 스타일 편집 > 상품 상세]에서 설정할 수 있어요.
[왼쪽 하단 메뉴(≡) > 스타일 편집 > 실험실]에서 모바일 디자인의 [상품 상세 페이지 - 좌우 여백 제거]에 체크하면 상품 상세의 대표 이미지, 상세 설명의 좌우 여백이 제거됩니다.
[왼쪽 하단 메뉴(≡) > 스타일 편집 > 실험실]에서 모바일 디자인의 [상품 목록 섹션 - 좌우 여백 제거]에 체크하면 상품 목록의 좌우 여백이 제거됩니다.
모바일 메뉴의 디자인은 1️⃣ 데스크톱 뷰포트에서 2️⃣ [데스크톱에서 ≡ 메뉴 사용하기]일 때, 설정할 수 있어요. 데스크톱 뷰포트에서 설정하면 데스크톱과 모바일에 공통 적용됩니다.
설정을 마치고 다시 [메뉴 나열하기]로 복구해 주시면 됩니다.
※ 모바일 뷰포트 [왼쪽 하단 메뉴(≡) > 스타일 편집 >모바일 메뉴]에서는 모바일 메뉴의 로고, 로그인/상품 검색 사용 여부, 메뉴 글자 크기, 아이콘 크기 설정만 가능합니다.
모바일 머리글과 모바일 메뉴에 각각 로그인, 상품 검색 메뉴를 사용할 수 있어요.
데스크톱에서 사용자 편집 섹션을 2단 이상으로 설정하면 모바일에서는 1단으로 합쳐지며 1단부터 위에서 아래로 나열됩니다.
모바일 화면에서 이미지 크기가 작게 보인다면, 사용자 편집 섹션 개별 편집의 좌우 여백 설정과 이미지 요소의 너비 설정을 조절해 보시기 바랍니다.
사용자 편집 섹션에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭하고 하단의 좌우 여백 설정을 변경해 주세요.
사용자 섹션에 추가된 이미지 요소에 마우스를 대면 보이는 개별 편집(연필 모양 아이콘)을 클릭하고 디자인 탭에서 너비 설정을 변경해 주세요.
