사이트의 다양한 요소가 모바일 방문자에게 어떻게 보이는지 알아보세요.

Squarespace 사이트는 컴퓨터부터 태블릿, 스마트폰까지 모든 기기에서 방문자가 사이트를 탐색할 수 있도록 설계되어 있습니다.

이 가이드는 특정 사이트 요소가 모바일에서 어떻게 표시되는지 설명하고, 모바일 스타일을 변경하는 팁을 제공합니다.

비디오를 시청하십시오

모바일 친화적인 사이트 유지하기

모든 Squarespace 사이트는 기기 형식에 맞게 작은 브라우저에서 자동으로 조정됩니다. 이는 반응형 디자인을 통해 이루어지며, 사이트를 보는 브라우저 창의 크기에 따라 콘텐츠가 자동으로 크기 조절됩니다. 일반적으로 모바일에서는 콘텐츠가 세로로 쌓입니다. 즉, 방문자는 콘텐츠를 확대하거나 여러 방향으로 스크롤하지 않고도 아래로 스크롤만 하면 전체 콘텐츠를 확인할 수 있습니다.

버전 7.1에서는 사이트가 모바일 뷰에 자동으로 적응하지만, 플루이드 엔진 섹션이나 머리말 같은 일부 영역에는 모바일 전용 옵션이 제공됩니다.

사이트가 Squarespace 버전 7.0인 경우 사이트가 모바일 기기에서 열렸음을 감지하면 활성화되는 추가 모바일 스타일이 템플릿에 내장되어 있을 수 있습니다. 자세히 알아보려면 아래의 버전 7.0 모바일 스타일 섹션을 참조하세요.

일반적으로 태블릿은 사이트의 모바일 버전을 표시하지만, 기기의 크기 및 기타 설정에 따라 일부 기기에서는 컴퓨터 레이아웃이 표시될 수 있습니다.

모바일용 SEO

Google은 모바일에 최적화된 사이트에 더 높은 우선순위를 부여합니다. Squarespace 사이트의 독특한 모바일 스타일은 검색 엔진 최적화되어 있으며 모바일 검색에서 쉽게 발견될 수 있습니다. 자세한 내용은 Squarespace의 SEO 지원 기능을 참조하세요.

모바일 최적화 디자인 외에도, 사이트가 모바일 친화적으로 유지되도록 하기 위해 할 수 있는 일들이 있습니다. 예를 들어, 포트폴리오나 색인 페이지의 콘텐츠 양을 제한하거나, 블로그 요약을 사용하거나, 이미지 크기를 줄이거나, 한 페이지에 포함된 이미지 수를 최소화하는 것입니다. 자세한 내용은 모바일 친화적인 사이트 유지 팁을 참조하세요.

모바일에서 내 사이트 알아보기

사이트가 모바일에서 어떻게 작동하는지 가장 잘 알아보는 방법은 직접 테스트해보는 것입니다. 내장된 기기 화면 보기 기능을 사용하고 실제 모바일 기기에서도 테스트해보는 것이 좋습니다.

기기 화면 보기

기기 화면 보기 도구는 귀하의 사이트의 다양한 모바일 화면을 보여줍니다. 편집 중에 컴퓨터에서 반응형 디자인을 테스트해볼 수 있는 좋은 방법입니다. 자세한 지침은 기기 화면 보기를 방문하세요. 플루이드 엔진을 사용하는 영역에서는 기기 화면 보기를 사용하여 데스크톱 레이아웃과 독립적으로 모바일 레이아웃을 편집할 수 있습니다.

기기 사용하기

기기마다 창 크기가 다르고, 일부 모바일 기능은 실제 모바일 기기에서 기기 화면 보기와 다르게 보일 수 있으므로, 가능한 모든 기기에서 사이트를 방문해보는 것이 좋습니다.

모바일 기기에서 사이트를 방문하려면, 모바일 브라우저의 탐색 창에 사이트 URL을 입력하세요.

팁: 평가판 기간 중에 모바일 방문자처럼 사이트를 미리 보려면 사이트 전체 비밀번호를 설정하세요(소유자 로그인을 사용하는 대신).

오디오 및 비디오

오디오 파일과 비디오는 각 기기나 브라우저의 기능에 따라 열리고 재생됩니다. iOS를 포함한 일부 기기에서는 오디오 파일이 해당 기기의 미디어 플레이어에서 열립니다.

비디오는 모바일에서 지원되는 모든 브라우저에서 페이지 내에서 재생됩니다. 커스텀 섬네일을 이미지 오버레이로 추가한 경우, 비디오를 재생하려면 두 번 탭하세요. 아래 섹션에서 모바일에서 비디오 배너가 어떻게 작동하는지 알아보세요.

블록

블록은 섹션, 페이지, 블로그 게시물 등 편집 가능한 영역에 콘텐츠를 추가합니다. 모바일에서 블록이 어떻게 표시되는지는 사이트 버전과 블록이 추가된 위치에 따라 달라집니다.

버전 7.1 사이트의 플루이드 엔진을 사용하는 영역에서는 데스크탑 레이아웃과 별도로 모바일 레이아웃을 구성할 수 있습니다.

버전 7.0 사이트와 버전 7.1의 클래식 에디터를 사용하는 영역에서는 Squarespace의 반응형 디자인이 모바일 기기에서 블록을 자동으로 세로로 쌓습니다. 이 작동 방식에 대해 자세히 알아보고 관련 비디오를 보려면 클래식 에디터에서 블록이 모바일에 쌓이는 방식을 방문하세요.

• 단일 열 – 전체 너비 블록은 모바일 기기에서 세로로 쌓이며, 데스크탑 레이아웃을 유지합니다.
• 여러 열 – 모바일 기기에서는 두 번째, 세 번째 및 추가 열이 첫 번째 열 아래로 이동해 가로가 아닌 세로로 쌓입니다.
• 플로팅 블록은 모바일에서 해당 텍스트 블록 위에 표시됩니다.

일부 템플릿과 버전 7.0에서는 예외적으로 여백 블록이 모바일에 표시되지만, 기본적으로는 모바일에서 자동으로 숨겨집니다.

도메인

사이트의 기본 도메인 및 사용자 지정 도메인은 컴퓨터와 모바일 모두에서 작동합니다. 별도의 모바일 URL은 필요하지 않습니다.

타사 도메인이 모바일에서 연결되지 않는 문제가 있다면, 해당 도메인을 사이트에 올바르게 연결했는지 확인하세요.

파비콘 또는 브라우저 아이콘

파비콘(또는 브라우저 아이콘)의 표시 여부는 사용 중인 모바일 브라우저에 따라 다릅니다. 일부 경우에는 파비콘이 전혀 표시되지 않을 수 있습니다.

갤러리

갤러리가 모바일에서 어떻게 표시되는지는 사이트의 버전과 갤러리 형식에 따라 달라집니다.

팁: 이미지 파일이 너무 크거나 이미지 수가 너무 많으면 모바일에서 사이트 로딩 속도가 느려질 수 있습니다. 자세한 내용은 모바일 친화적인 사이트 유지 팁을 참조하세요.

갤러리 블록

플루이드 엔진에서는 갤러리 블록이 컴퓨터와 동일한 방식으로 모바일에 표시되지만, 크기와 위치를 변경할 수 있습니다. 클래식 에디터에서는 갤러리 블록이 모바일에서 어떻게 표시되는지는 레이아웃에 따라 달라집니다.

• Grid - 2열 그리드 형태로 표시됩니다.
• 슬라이드쇼 - 슬라이드쇼로 유지
• Carousel - 캐러셀 형식으로 표시되며, 한 번에 하나의 이미지만 보여집니다.
• 스택 - 중첩된 상태 유지

대체로 이미지 캡션은 모바일에서도 컴퓨터와 동일한 방식으로 표시됩니다. 슬라이드쇼 갤러리 블록에서는 브라우저 너비가 480픽셀 미만일 경우 캡션이 표시되지 않습니다.

자세한 내용은 갤러리 블록 가이드를 참조하세요.

머리말 요소

공지사항 표시줄, 탐색 메뉴, 사이트 제목 및 로고는 모바일에서 위치가 변경될 수 있습니다.

공지사항 표시줄

공지사항 표시줄은 모바일에서 페이지 상단에 표시됩니다

다음 버전 7.0 템플릿 그룹에서는 공지사항 표시줄이 머리말 오버레이 아래, 페이지 콘텐츠 위에 표시됩니다.

• 소금물
• York

탐색 메뉴

탐색 메뉴의 표시 방식은 사이트 버전에 따라 달라집니다.

자세한 내용은 탐색 스타일 설정 가이드를 참조하세요.

사이트 제목 및 로고

사이트 제목 또는 로고의 표시 방식은 사이트의 버전에 따라 달라집니다.

이미지

모바일 기기의 좁은 화면 너비를 고려하여 일부 이미지 및 이미지 기능은 모바일에서 다르게 표시됩니다.

배너 및 섹션 배경 이미지

배너와 섹션 배경 이미지는 모바일 기기에서 항상 일정 부분 잘려서 표시됩니다. 배너 이미지와 비디오는 가로로 넓은 형태인 반면, 모바일 기기의 화면은 세로로 좁기 때문에 잘림이 발생합니다.

이미지를 업로드하기 전에 배너 이미지 형식 지정 팁과 반응형 디자인 이미지 모범 사례를 따르세요. 모바일 기기에서 사이트를 볼 때 다음 사항을 유의하세요.

• 잘림 정도는 배너의 높이와 브라우저의 너비에 따라 달라집니다.
• 배너 높이 설정은 모바일에는 항상 동일하게 적용되지 않습니다.
• 비디오 배너는 연결 속도가 느리거나 브라우저가 허용하지 않는 경우 모바일에서 로드되지 않습니다. 비디오가 로드되지 않을 때 표시될 모바일 폴백 이미지를 설정하세요.
• 사이트 전체 배너의 경우, 위치 고정 설정은 iOS를 포함한 일부 모바일 기기에서 표시되지 않습니다. 자세한 내용은 버전 7.0에서 사이트 전체 배경 이미지 추가를 참조하세요.

배너 이미지의 잘림 현상을 최소화하려면 잘림 문제 해결을 참조하세요.

이미지 캡션

사이트에서 사용하는 캡션 유형은 사이트의 버전에 따라 다릅니다.

Instagram 및 Flickr 블록

Instagram 및 Flickr와 같은 소셜 계정에서 이미지를 불러오는 블록은 두 열의 그리드 형식으로 이미지를 표시합니다.

라이트박스

일반적으로 모바일 기기에서는 라이트박스 효과를 지원하지만, 몇 가지 제한 사항이 있습니다.

• 손가락을 모아 확대/축소하는 기능은 지원되지 않습니다.
• 이미지에 커서를 올리면 나타나는 캡션이 있는 경우, 라이트박스의 오른쪽 하단에 흰 점이 표시됩니다. 그 점을 탭하면 캡션이 표시됩니다.
• 버전 7.0에서는 Wexley 갤러리 페이지에서 라이트박스가 비활성화됩니다.

페이지 요소

사이트를 모바일 친화적으로 유지하기 위해 호버(커서 올리기) 효과와 패딩(여백)은 모바일에서 변경됩니다.

호버 효과

스마트폰, 태블릿, 터치스크린 노트북 등 터치스크린 기기는 호버 기능을 지원하지 않습니다. 사이트에서 호버 효과가 적용된 요소는 탭할 때 효과가 표시될 수 있습니다. 예:

• 탭하면 드롭다운 메뉴가 표시됩니다.
• 제품 아이템과 가격은 이미지 아래에 표시됩니다.
• 이미지 캡션은 기기 종류와 브라우저 너비에 따라 항상 표시되거나, 탭 시 표시되거나, 아예 표시되지 않을 수 있습니다.
• 포트폴리오 하위 페이지의 제목과 대표 이미지는 표시되지 않을 수 있습니다. 

패딩(여백)

Squarespace 사이트에는 일반적으로 모바일 전용 패딩(여백)이 내장되어 있어 작은 브라우저와 반응형 디자인에 최적화됩니다. 즉, 컴퓨터에서 사이트에 영향을 주는 간격 및 패딩(여백) 조정이 모바일에서는 동일하게 작동하지 않을 수 있습니다.

프로모션 팝업

사이트에서 프로모션 팝업을 사용하는 경우, 모바일에서도 계속 활성화할 수 있습니다. 모든 모바일 팝업은 Google의 검색 결과 순위 규정을 준수하기 위해 기본적으로 반페이지 크기의 표준 스타일로 표시됩니다.

스타일 패널을 사용해 모바일 디자인을 사용자 지정하거나, 표시 및 타이밍 패널에서 모바일 팝업을 비활성화하세요.

스토어 페이지 및 커머스

고객은 모바일 기기에서도 컴퓨터와 거의 동일한 방식으로 사이트에서 쇼핑할 수 있습니다. 사이트의 다른 영역과 마찬가지로, Squarespace 스토어는 작은 화면에서도 친화적으로 탐색할 수 있도록 자동으로 조정됩니다. 제품은 세로로 쌓여 표시됩니다. 개별 제품 상세 페이지에서는 제품 이미지가 설명, 가격, 장바구니에 추가 버튼 위에 표시됩니다.

기타 팝업 스타일은 사이트의 버전에 따라 달라집니다.

텍스트와 글꼴

글꼴은 일반적으로 모바일에서도 동일한 스타일을 유지하지만, 제목과 같은 큰 글꼴은 브라우저 너비에 맞게 축소될 수 있습니다. 모바일에서 텍스트가 겹쳐 보인다면 글꼴의 줄 간격을 조정하세요.

사이트의 본문이나 바닥글에 추가된 전화번호는 Safari 모바일 브라우저에서 링크로 표시됩니다.

일부 버전 7.0 템플릿은 확장 가능한 글꼴을 사용하므로, 제목, 표제 요소 및 기타 주요 텍스트의 최대 및 최소 크기를 수동으로 설정할 수 있습니다.

7.0 버전 모바일 스타일

비디오를 시청하십시오

다음 기능들은 버전 7.0 사이트에만 적용됩니다.

• 커버 페이지 – 커버 페이지는 레이아웃에 따라 모바일에 맞게 자동 조정됩니다.
• 페이지 전용 머리말 및 바닥글 – 페이지 머리말 또는 바닥글을 지원하는 템플릿에서는 해당 콘텐츠가 모바일에서도 표시됩니다.
• 패럴렉스(시차) 스크롤링 – 패럴렉스(시차) 스크롤링은 특정 템플릿에서 사용할 수 있는 특수 효과로, 배경 이미지가 전경 콘텐츠보다 천천히 움직이는 것처럼 보입니다. 이 효과는 Brine 템플릿 그룹에서 모바일에서도 지원됩니다.
• 사이드바 – 사이드바는 모바일에서 페이지 하단에 표시됩니다. Ishimoto 템플릿에서는 사이드바가 모바일 기기에서 표시되지 않습니다.
• 사이트 전체 배경 이미지 – 사이트 전체 배경 이미지는 모바일에서도 지원됩니다. 배경 이미지가 보이도록 하려면 콘텐츠 영역을 투명하게 설정해야 할 수 있습니다.

템플릿 특정 스타일

특정 템플릿의 모바일 옵션에 대해 알아보려면 템플릿 가이드를 참조하세요.

모바일 전용 옵션이 포함된 모든 템플릿 목록은 고급 모바일 스타일 페이지를 참조하세요.

모바일 스타일 비활성화

대부분의 Squarespace 템플릿은 모바일 기기에 최적화된 고유한 디자인을 제공하여 방문자가 어떤 기기에서도 사이트를 쉽게 탐색할 수 있도록 돕습니다. 일부 템플릿에서는 원할 경우 이 기능을 비활성화할 수 있지만, 모바일 스타일을 활성화 상태로 유지하는 것을 권장합니다.

다음 사항에 유의하세요.

• 모바일 스타일을 비활성화하면 사이트가 모바일 기기에서도 컴퓨터와 동일한 방식으로 표시됩니다. 사이트 콘텐츠가 하나의 세로 열로 쌓이는 대신, 블록과 기타 콘텐츠가 컴퓨터 브라우저에서 보이는 레이아웃 그대로 나타납니다.
• 모바일 스타일을 비활성화하면 SEO에 영향을 줄 수 있습니다. 2015년 4월, Google은 모바일 기기 검색에서 사이트 순위를 정할 때 ‘모바일 친화성’을 고려하기 시작했습니다. Squarespace 사이트는 모바일 스타일이 활성화된 경우에만 Google의 요구사항을 충족합니다.
• 모바일 스타일을 비활성화하면 모바일 탐색 메뉴도 비활성화됩니다.
• 커버 페이지의 모바일 스타일은 비활성화할 수 없습니다.

모바일 스타일을 비활성화하려면 다음 단계를 따르세요.

1. 디자인 패널을 열고 템플릿 설정을 클릭하세요.
2. 모바일 스타일 비활성화를 선택하세요.
3. 저장을 클릭하세요.

이 옵션은 사용하는 템플릿이 모바일 스타일 비활성화를 지원하지 않는 경우 표시되지 않습니다. 다음 템플릿 그룹에서는 모바일 스타일을 비활성화할 수 없습니다.

• 소금물
• Farro
• Galapagos
• Skye
• 공급
• Tremont
• York

FAQ

Squarespace는 모바일 스타일과 컴퓨터 스타일을 언제 표시할지 어떻게 결정하나요?

Squarespace는 사용자가 모바일 기기에서 사이트를 방문하면 자동으로 모바일 운영 체제를 감지하고 모바일 스타일을 표시하라는 신호를 보냅니다. 즉, 사이트가 버전 7.0에 있고 모바일 스타일을 비활성화하지 않은 이상, 브라우저 너비나 기기 방향과 상관없이 모바일 버전이 표시됩니다.

사이트를 모바일에서 편집할 수 있나요?

iOS 또는 Android용 Squarespace 앱을 사용해 모바일에서도 사이트를 편집할 수 있습니다.

모바일 브라우저를 통해 로그인하여 모바일 기기에서 Squarespace 사이트의 일부 기능을 관리할 수도 있지만, 일부 기능은 컴퓨터에서만 사용할 수 있습니다.

모바일 스타일과 반응형 디자인의 차이는 무엇인가요?

버전 7.0의 모바일 스타일과 반응형 디자인은 개념은 다르지만 서로 연관되어 있습니다.

• 모바일 스타일은 버전 7.0 템플릿에만 적용되는 고유한 기능입니다. 이 스타일은 모바일 전용 탐색, 콘텐츠 배경 로딩에 적용되는 제한, 모바일에서 불편할 수 있는 디자인 요소 등에만 영향을 줍니다. 모바일 스타일을 비활성화하면 이러한 요소들이 꺼지고 컴퓨터와 유사한 형태로 사이트가 표시됩니다.
• 반응형 디자인은 사이트와 콘텐츠 요소들이 방문자의 브라우저 창 크기에 맞게 크기를 조정하는 기능을 의미합니다. 모바일 스타일이 비활성화되더라도 모든 Squarespace 사이트에는 반응형 디자인이 여전히 적용됩니다. 즉, 전체 사이트는 여전히 소형 기기에 맞게 크기가 조정되지만, 모바일 스타일이 비활성화되면 콘텐츠가 더 쉽게 탐색될 수 있도록 재배열되지 않습니다. 버전 7.1에서는 모바일 스타일을 비활성화할 수 없으며, 콘텐츠는 항상 재배열되고 크기가 조정됩니다. 자세한 내용은 반응형 디자인을 참조하세요.

사용자 정의 CSS를 추가하여 사이트의 모바일 레이아웃을 변경할 수 있나요?

예, 하지만 사용자 지정 코드 수정은 지원 범위를 벗어납니다. 이는 설정이나 문제 해결에 대해 더 이상 도움을 드릴 수 없음을 의미합니다. 또한, 이 솔루션은 코드 기반이기 때문에 기능이나 Squarespace와의 완전한 호환성을 보장할 수 없습니다. 여기에는 반응형 디자인이 모바일 기기에서 어떻게 표시되는지, 특히 모든 템플릿에서 작동하는지 여부가 포함됩니다. 사용자 지정 코드는 향후 플랫폼 업데이트 시 표시 문제를 일으킬 수 있습니다. 더 이상 도움을 드릴 수는 없지만, 올바른 방향을 제시할 수 있는 자료는 많습니다.

• 사용자 정의 코드를 추가하는 모범 사례를 배워 보세요.
• 서드파티(타사) 사용자 지정에 대한 일반 가이드를 읽어보십시오.
• 고객 및 개발자 커뮤니티인 Squarespace Forum을 방문하세요.
• Squarespace Expert를 고용하여 내 사이트에 사용자 지정 코드를 구축하는 데 도움을 받으세요. Squarespace Marketplace를 통해 제공되는 전문가 서비스에 대해 자세히 알아보세요.