휴대폰과 태블릿에서 사이트가 올바르게 보이게 하기
스토어가 태블릿과 휴대폰에서 어떻게 보이는지 확인하고, 작은 화면에서는 블록을 숨기거나 특정 화면 크기에서만 블록 위치를 조정할 수 있습니다.
대부분의 고객은 휴대폰으로 스토어를 방문하므로, 페이지는 모든 화면 크기에서 잘 작동해야 합니다. 한 번만 디자인하면 Payly가 태블릿과 휴대폰에 맞게 페이지를 조정합니다. 이 문서에서는 자동으로 일어나는 일과, 작은 화면에서 블록이 다르게 동작하도록 바꾸는 방법을 설명합니다.
레이아웃이 조정되는 방식
블록은 고정된 픽셀 위치가 아니라 12열 그리드의 칸 안에 배치되므로 작은 화면에서도 서로 겹치지 않습니다. 페이지는 두 지점에서 레이아웃이 전환됩니다.
- 태블릿(너비 1024픽셀 미만 화면)은 같은 그리드를 유지합니다. 태블릿용으로 옮기지 않는 한 블록은 그 자리에 그대로 있습니다.
- 휴대폰(너비 760픽셀 이하)에서는 모든 블록이 전체 너비로 각자 한 행을 차지합니다. 블록은 데스크톱에서 읽는 순서(위에서 아래로, 그다음 왼쪽에서 오른쪽으로)대로 위에서 아래로 쌓입니다.
일부 블록은 더 세밀하게 조정됩니다. 헤더 링크는 메뉴 버튼 뒤로 접히고, 그리드는 한 열로 바뀌며, 갤러리와 로고 모음은 두 열로 표시됩니다. 그 결과 별다른 설정 없이도 휴대폰에서 잘 작동하는 스토어가 됩니다.
화면 크기 전환하기
- 편집기 상단 바에서 태블릿 또는 모바일을 클릭합니다. 해당 크기에서의 모습에 맞게 페이지 너비가 좁아집니다.
- 읽기 불편한 부분이 없는지 페이지를 살펴봅니다. 평소처럼 스크롤하고 블록을 선택할 수 있습니다.
- 데스크톱을 클릭하면 전체 크기 레이아웃으로 돌아갑니다.
이 버튼은 미리보기 이상의 역할을 합니다. 어떤 레이아웃을 편집할지도 선택합니다. 태블릿 또는 모바일로 전환하면 변경 사항이 해당 크기에만 적용된다는 메시지가 표시됩니다. 그곳에서 바꾼 내용은 데스크톱 레이아웃에 영향을 주지 않습니다.
작은 화면에서 블록 숨기기
큰 사진이나 긴 장식용 블록은 휴대폰 화면을 답답하게 만들 수 있습니다. 작은 화면에서는 숨기고 데스크톱에서는 그대로 둘 수 있습니다.
- 상단 바에서 모바일(또는 태블릿)을 클릭합니다.
- 블록을 선택합니다.
- 설정 패널에서 크기와 위치를 엽니다.
- 모바일에서 숨기기(또는 태블릿에서 숨기기)를 켭니다. 블록이 해당 보기에서 사라지며, 실제 페이지에도 빈 공간이 남지 않습니다.
태블릿에서 숨긴 블록은 모바일 보기에서 스위치를 다시 끄지 않는 한 휴대폰에서도 숨겨집니다. 모든 화면에서 블록을 숨기려면 데스크톱에서 이 블록 숨기기를 사용하세요.
특정 크기에서만 블록 위치 바꾸기
- 상단 바에서 태블릿 또는 모바일을 선택합니다.
- 블록을 선택하고 크기와 위치를 엽니다.
- 시작 열, 가로 칸 수, 시작 행, 세로 칸 수를 변경하거나 전체 너비 채우기를 클릭합니다. 페이지에서 블록을 직접 끌어 옮기거나 크기를 조절할 수도 있습니다.
크기와 위치 상단의 바에는 어떤 레이아웃을 편집 중인지 표시됩니다. 블록이 더 큰 화면 크기를 따르는 동안에는 상속됨으로 표시되고, 블록에 별도의 설정이 생기면 초기화 버튼이 나타납니다. 초기화를 클릭하면 블록이 다시 더 큰 화면 크기를 따릅니다. 이 레이아웃을 모든 화면에 적용을 클릭하면 현재 레이아웃이 모든 크기에 복사됩니다.
상단 바에는 데스크톱 레이아웃과 다른 블록의 수도 표시됩니다(예: 모바일에서 블록 1개가 다릅니다). 이 숫자를 클릭하면 해당 블록들로 차례로 이동합니다.
모든 화면에서 블록을 동일하게 유지하기
크기와 위치에서 모든 화면에서 동일을 켜면 블록이 모든 곳에서 하나의 레이아웃을 갖습니다. 태블릿이나 휴대폰용으로 지정했던 설정은 삭제되며, 이후의 편집 내용은 모든 크기에 한꺼번에 적용됩니다.
참고: 블록을 다른 섹션으로 옮기면 모든 화면 크기에서 변경되므로, Payly는 데스크톱에서만 이를 허용합니다. 휴대폰에서 블록을 다른 위치에 두려면 두 섹션 모두에 블록을 추가하고, 각 크기에서 원하지 않는 쪽을 숨기세요.
결과 확인하기
미리보기를 사용해 휴대폰과 태블릿 너비에서 페이지를 둘러보고, 스토어를 알리기 전에 실제 휴대폰에서 게시된 스토어를 확인하세요. 게시 전에 사이트 미리 보기를 참고하세요.