모바일 화면 디자인

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

목차

• 뷰포트 전환하기

• 편집 영역 확인하기

• 모바일 뷰포트 글자 최대 크기

• 모바일 메뉴 설정하기

• PC 버전에서 설정한 필터 숨기기

• 🤔 모바일 웹 화면 편집하기 FAQ

1. 뷰포트 전환하기

디자인 에디터 하단의 뷰포트 설정 버튼을 눌러 모바일 뷰포트로 전환해주세요. 단축키: Ctrl + Shift + M

뷰포트를 변경하면 화면이 이렇게 바뀝니다.

버튼 1을 누르면 데스크탑 / 버튼 2를 누르면 모바일 버전으로 디자인 에디터 화면 모드를 변경합니다.

2. 편집 영역 확인하기

모바일에서 설정을 변경할 수 있는 구성 요소의 경우 선택하면 아래 갤러리 섹션과 같이 설정을 위한 버튼을 볼 수 있으며, 버튼이 노출되지 않는 경우 별도 수정이 불가합니다.

3. 모바일 뷰포트 글자 최대 크기

제목글, 줄글, 갤러리는 모바일 뷰포트 상점 공통 스타일 설정 에서 '글자 최대 크기'를 설정할 수 있어요. 데스크탑의 글자 크기를 모바일에서 동일하게 적용하지만 최대 크기를 제한하는 설정입니다.

4. 모바일 메뉴 설정하기

모바일 뷰포트 편집 창에서 좌측 하단 메뉴 아이콘(≡) 클릭 > 스타일 편집 클릭 > 모바일 메뉴를 클릭하여 모바일 메뉴를 설정해볼 수 있습니다.

데스크탑에서 머리글의 종류를 '데스크톱에서 ≡ 메뉴 사용하기'로 선택한 상태에서는 모바일 메뉴의 설정이 데스크탑에도 적용됩니다. 데스크탑에서 머리글의 종류를 '메뉴 나열하기'로 선택한 상태에서는 모바일 메뉴를 데스크탑 버전과 별도로 설정할 수 있습니다.

5. PC 버전에서 설정한 필터 숨기기

상품 목록 혹은 게시글 등에서 필터를 설정한 경우, 전체 필터를 선택하지 않았어도 모바일 화면에서는 전체 필터가 적용되며, PC 버전에서 설정한 필터 숨기기는 모바일에 적용되지 않습니다.

🤔 모바일 웹 화면 편집하기 FAQ

Q. 모바일 머리글에도 로그인, 상품 검색 메뉴를 사용하고 싶어요.

모바일 뷰포트에서 머리글을 더블 클릭하거나 연필 모양 아이콘을 클릭하면 표시되는 개별 편집에서 머리글의 검색, 로그인 아이콘이 보이도록 설정할 수 있습니다.

데스크탑 버전과 마찬가지로 [스타일 편집 > 머리글 > 장바구니 / 로그인 / 상품 검색]에서 장바구니와 로그인 아이콘의 디자인을 설정할 수 있습니다.

Q. 모바일 머리글 배치를 변경하고 싶어요.

[모바일 뷰포트 > 스타일 편집 > 머리글 > 공통 > 배치]에서 모바일 버전의 머리글 내 요소들의 배치를 변경할 수 있습니다.

Q.모바일 보조 메뉴가 무엇인가요?

모바일에서 접속 시 특정 페이지들을 머리글 아래에 모아 강조할 수 있습니다. 상품 카테고리별 메뉴, 시즌 상품, 특별 할인 상품을 모아둔 페이지 등으로 다양하게 구성해보세요. [디자인 편집 > 모바일 뷰포트 > 메뉴와 스타일 편집] 에서 사용할 수 있습니다.

Q.모바일 보조 메뉴는 어떻게 추가하나요?

[디자인 편집 > 화면 오른쪽 하단 모니터 아이콘 클릭 > 모바일 뷰포트]로 이동해주세요. 디자인 편집 화면의 가장 왼쪽 아래의 석 삼자 모양 아이콘 또는 키보드의 Tab키를 누르면 왼쪽에서 메뉴(페이지)에 대한 설정을 할 수 있습니다. 모바일 보조 메뉴 오른쪽의 +모양 버튼으로 추가해보세요.

Q. 사용자 편집 섹션을 2단 이상으로 사용하면 모바일에서는 어떻게 보이나요?

데스크탑의 여러 단이 모바일에서는 1단으로 합쳐집니다. 이때 데스크탑에서 더 왼쪽에 있는 단일수록 모바일에서는 더 위에 위치합니다.

좌_데스트 탑 / 우_모바일 경우, 2단 이상 배치 화면입니다.

Q. 이미지 요소 너비를 줄였더니 모바일에서 이미지가 너무 작아요.

너비를 다시 100%로 변경한 뒤, 이미지가 있는 사용자 편집 섹션의 개별 편집에서 좌우 여백을 조절하고, 화면을 새로고침해보세요. 데스크탑 화면에서도 원하는 만큼 조절했지만 너비가 100%이므로 모바일에서는 최대 크기로 보입니다. 자세한 내용은 아래 안내서를 참고하세요.