모바일 화면 디자인
식스샵은 자동으로 모바일에 최적화된 화면 디자인을 제공하지만 모바일 버전에서 보여지는 일부 구성요소의 설정을 직접 수정하실 수 있습니다.
목차
1. 뷰포트 전환하기
디자인 에디터 하단의 뷰포트 설정 버튼을 눌러 모바일 뷰포트로 전환해주세요. 단축키: Ctrl + Shift + M
2. 편집 영역 확인하기
모바일에서 설정을 변경할 수 있는 구성 요소의 경우 선택하면 아래 갤러리 섹션과 같이 설정을 위한 버튼을 볼 수 있으며, 버튼이 노출되지 않는 경우 별도 수정이 불가합니다.
3. 모바일 뷰포트 글자 최대 크기
제목글, 줄글, 갤러리는 모바일 뷰포트 상점 공통 스타일 설정 에서 '글자 최대 크기'를 설정할 수 있어요. 데스크탑의 글자 크기를 모바일에서 동일하게 적용하지만 최대 크기를 제한하는 설정입니다.
4. 모바일 메뉴 설정하기
모바일 뷰포트 편집 창에서 좌측 하단 메뉴 아이콘(≡) 클릭 > 스타일 편집 클릭 > 모바일 메뉴를 클릭하여 모바일 메뉴를 설정해볼 수 있습니다.
데스크탑에서 머리글의 종류를 '데스크톱에서 ≡ 메뉴 사용하기'로 선택한 상태에서는 모바일 메뉴의 설정이 데스크탑에도 적용됩니다. 데스크탑에서 머리글의 종류를 '메뉴 나열하기'로 선택한 상태에서는 모바일 메뉴를 데스크탑 버전과 별도로 설정할 수 있습니다.
5. PC 버전에서 설정한 필터 숨기기
상품 목록 혹은 게시글 등에서 필터를 설정한 경우, 전체 필터를 선택하지 않았어도 모바일 화면에서는 전체 필터가 적용되며, PC 버전에서 설정한 필터 숨기기는 모바일에 적용되지 않습니다.
🤔 모바일 웹 화면 편집하기 FAQ
Q. 모바일 머리글에도 로그인, 상품 검색 메뉴를 사용하고 싶어요.
모바일 뷰포트에서 머리글을 더블 클릭하거나 연필 모양 아이콘을 클릭하면 표시되는 개별 편집에서 머리글의 검색, 로그인 아이콘이 보이도록 설정할 수 있습니다.
데스크탑 버전과 마찬가지로 [스타일 편집 > 머리글 > 장바구니 / 로그인 / 상품 검색]에서 장바구니와 로그인 아이콘의 디자인을 설정할 수 있습니다.
Q. 모바일 머리글 배치를 변경하고 싶어요.
[모바일 뷰포트 > 스타일 편집 > 머리글 > 공통 > 배치]에서 모바일 버전의 머리글 내 요소들의 배치를 변경할 수 있습니다.
Q.모바일 보조 메뉴가 무엇인가요?
모바일에서 접속 시 특정 페이지들을 머리글 아래에 모아 강조할 수 있습니다. 상품 카테고리별 메뉴, 시즌 상품, 특별 할인 상품을 모아둔 페이지 등으로 다양하게 구성해보세요. [디자인 편집 > 모바일 뷰포트 > 메뉴와 스타일 편집] 에서 사용할 수 있습니다.
Q.모바일 보조 메뉴는 어떻게 추가하나요?
[디자인 편집 > 화면 오른쪽 하단 모니터 아이콘 클릭 > 모바일 뷰포트]로 이동해주세요. 디자인 편집 화면의 가장 왼쪽 아래의 석 삼자 모양 아이콘 또는 키보드의 Tab키를 누르면 왼쪽에서 메뉴(페이지)에 대한 설정을 할 수 있습니다. 모바일 보조 메뉴 오른쪽의 +모양 버튼으로 추가해보세요.
Q. 사용자 편집 섹션을 2단 이상으로 사용하면 모바일에서는 어떻게 보이나요?
데스크탑의 여러 단이 모바일에서는 1단으로 합쳐집니다. 이때 데스크탑에서 더 왼쪽에 있는 단일수록 모바일에서는 더 위에 위치합니다.
Q. 이미지 요소 너비를 줄였더니 모바일에서 이미지가 너무 작아요.
너비를 다시 100%로 변경한 뒤, 이미지가 있는 사용자 편집 섹션의 개별 편집에서 좌우 여백을 조절하고, 화면을 새로고침해보세요. 데스크탑 화면에서도 원하는 만큼 조절했지만 너비가 100%이므로 모바일에서는 최대 크기로 보입니다. 자세한 내용은 아래 안내서를 참고하세요.
Last updated
