버전 7.0 갤러리 페이지의 디자인 요소를 조정하여 사이트를 사용자 정의할 수 있습니다.

사이트 스타일 패널에서 이미지 크기를 조정하고 디자인을 변경하며 갤러리 페이지를 개인화할 수 있습니다.

이 가이드는 버전 7.0을 위한 것입니다. 버전 7.1은 갤러리 섹션을 대신 사용합니다.

템플릿별 갤러리 페이지 표시 방식

각 템플릿의 갤러리 페이지는 기본적으로 다음 중 하나의 표시 스타일을 사용합니다.

• 슬라이드쇼 – 한 번에 하나의 이미지 또는 비디오를 표시합니다. 방문자가 클릭하여 다음 슬라이드로 넘어가거나, 갤러리를 자동 재생으로 설정할 수 있습니다. 자동 재생 슬라이드쇼는 커서를 올리면 일시정지됩니다.
• 그리드 – 콘텐츠를 그리드 형태로 표시합니다. 사이트 스타일에서 종횡비, 패딩(여백), 행당 섬네일 수를 조정할 수 있습니다.
• 스택 – 각 이미지 또는 비디오 사이에 1픽셀의 패딩(여백)을 두고 콘텐츠를 하나의 열로 표시합니다.
• 캐러셀 – 콘텐츠를 수평 행으로 나열합니다. 방문자가 클릭하여 다음 슬라이드로 넘기거나 자동 재생으로 설정할 수 있습니다.

갤러리 페이지 스타일은 사용하는 템플릿에 따라 달라집니다. 대부분의 템플릿은 표준 갤러리 페이지를 사용하며, 이는 그리드 또는 슬라이드쇼 형태로 표시됩니다. 일부 템플릿은 고유한 기능, 스타일 조정 옵션, 레이아웃을 갖춘 템플릿 전용 갤러리 페이지를 제공합니다.

이 템플릿 그룹은 표준 갤러리 페이지를 사용합니다.

• Adirondack
• Aviator
• Bedford
• 소금물
• Farro
• 다섯
• Galapagos
• Native
• Pacific
• Skye
• York - 갤러리 페이지와 유사한 고유한 프로젝트 페이지도 지원합니다.

이 템플릿 그룹은 고유한 갤러리 페이지를 제공합니다. 자세한 내용은 각 템플릿 가이드를 참고하세요.

• Avenue - 슬라이드쇼
• Flatiron – 스택형
• Forte – 라이트박스 슬라이드쇼를 포함한 캐러셀
• Ishimoto - 캐러셀
• Momentum - 슬라이드쇼, 그리드 표시 옵션 포함
• Montauk - 스택
• Supply – 스택형
• Tremont – 스택형, 조적형 또는 수평형 그리드 레이아웃
• Wells - 슬라이드쇼 또는 그리드
• Wexley – 라이트박스 슬라이드쇼가 있는 그리드

색인에서의 갤러리 페이지

다음 템플릿 그룹에서는 색인에 갤러리 페이지를 추가할 수 있습니다. 일부 갤러리는 색인에서 열렸을 때 특별한 포맷이 적용됩니다. 자세한 내용은 각 템플릿 가이드를 참고하세요.

• Avenue – 색인에서 열리면 스택 형태로 표시됨
• Brine – 갤러리 색인 섹션이 그리드 또는 슬라이드쇼로 표시됨
• Flatiron – 색인에서 열리면 탐색 요소가 표시됨
• Forte
• Momentum
• Montauk – 색인에서 열리면 탐색 요소가 표시되고 배너는 표시되지 않음
• Pacific – 갤러리 색인 섹션이 그리드 또는 슬라이드쇼로 표시됨
• 공급
• Tremont – 색인 랜딩 페이지 슬라이드쇼가 하단에 표시됨
• York

표준 갤러리 페이지 스타일 설정

표준 갤러리 페이지를 사용하는 템플릿의 경우, 이 섹션의 단계를 따르세요. 고유한 갤러리 페이지를 사용하는 템플릿의 경우, 해당 템플릿 가이드를 참조하세요.

레이아웃 선택

표준 갤러리 페이지는 두 가지 레이아웃을 지원합니다. 레이아웃 스타일을 설정하려면 다음 단계를 따르세요.

1. 갤러리 페이지를 엽니다.
2. 웹사이트 패널로 돌아가 디자인을 클릭한 다음 사이트 스타일을 클릭합니다.
3. 아래로 스크롤하여 갤러리 스타일로 이동하세요.
4. 갤러리 디자인 조정을 사용해 슬라이드쇼 또는 그리드 중에서 선택하세요.

팁: 이 설정은 사이트 내 모든 갤러리 페이지에 적용되는 레이아웃입니다. 서로 다른 레이아웃의 갤러리를 만들고 싶다면, 갤러리 블록을 사용하세요.

슬라이드쇼 레이아웃 스타일 설정

슬라이드쇼 레이아웃은 한 번에 하나의 이미지 또는 비디오를 표시합니다. 아래 예시처럼 화살표나 섬네일과 같은 탐색 요소를 포함할 수 있으며, 자동 재생으로 설정할 수도 있습니다.

갤러리 디자인이 슬라이드쇼로 설정되었을 때, 갤러리 스타일 섹션에 다음과 같은 조정 항목이 표시됩니다.

탐색 요소 스타일 지정 또는 숨기기:

• 갤러리 탐색 – 탐색 방식(섬네일, 점, 숫자, 원형, 심플)을 선택합니다. 없음을 선택하면 탐색 표시를 숨길 수 있습니다.
• 갤러리 화살표 스타일 – 슬라이드를 넘길 때 사용하는 화살표 스타일을 지정합니다(둥근 모서리, 직사각형, 원형, 배경 없음).
• 갤러리 화살표 표시 – 체크 해제 시 갤러리에서 화살표를 숨깁니다.
• 갤러리 섬네일 크기 – 섬네일 이미지 탐색의 높이를 설정합니다.
• 갤러리 화살표 배경
• 갤러리 화살표 색상
• 갤러리 원형 색상

이미지의 모양을 선택하세요.

• 갤러리 종횡비 – 종횡비(가로:세로)를 설정합니다. 갤러리 자동 자르기와 함께 사용하세요.
• 갤러리 자동 자르기 – 갤러리 종횡비 설정값에 맞게 이미지를 자동으로 자릅니다.

캡션 표시 방식 설정:

• 갤러리 정보 오버레이 – 이미지 제목 및 캡션 표시 방식을 선택합니다(항상 표시, 커서 오버 시 표시, 숨기기).
• 갤러리 정보 배경 – 이미지 제목 및 캡션에 적용되는 배경 색상입니다.

슬라이드쇼 내 이미지 전환 방식 선택

• 갤러리 전환 효과 – 페이드, 스크롤 중 선택합니다.
• 갤러리 자동 재생 – 사용자 조작 없이 갤러리 이미지를 자동으로 순환합니다. 커서를 올리면 슬라이드쇼의 자동 재생이 일시 중지됩니다.
• 갤러리 반복 – 마지막 슬라이드 후 첫 번째 슬라이드로 자동 순환되도록 설정합니다.
• 갤러리 자동 재생 속도(초)

그리드 레이아웃 스타일 설정

갤러리 디자인이 그리드로 설정되었을 때, 갤러리 스타일 섹션에 다음과 같은 조정 항목이 표시됩니다.

이미지의 모양과 크기를 선택하세요.

• 종횡비 – 이미지의 종횡비(가로:세로)를 설정합니다. 종횡비를 자동으로 설정하면 페이지에 가장 잘 맞도록 이미지가 재배열됩니다. 이미지가 업로드된 순서와 다른 순서로 표시될 수 있습니다.
• 그리드 간격 – 그리드 내 개별 이미지 사이의 패딩(여백)을 조정합니다.
• 최소 열 너비 – 그리드에서 열의 너비를 설정합니다.

라이트박스 스타일 설정:

• 라이트박스 스타일 – 어두운 테마 또는 밝은 테마 중 선택 가능합니다.

캡션 스타일 설정

이미지 제목과 설명에 사용할 글꼴을 스타일링하려면 이미지 캡션 스타일 설정을 참고하세요.

캡션의 표시 방식은 사용하는 템플릿에 따라 달라집니다. 표준 갤러리 페이지를 사용하는 템플릿의 경우:

• 슬라이드쇼 – 갤러리 정보 오버레이 설정에 따라 텍스트를 숨기거나, 이미지 위에 커서를 올릴 때 표시하거나, 항상 표시하도록 설정할 수 있습니다.
• 그리드 - 라이트박스 보기에서 이미지 위에 커서를 올리면 텍스트가 표시됩니다.
• 비디오에는 텍스트가 절대 표시되지 않습니다.

템플릿 그룹의 고유한 갤러리 페이지에서는 이미지 제목과 설명이 다음과 같이 표시됩니다.

템플릿 그룹	참고
Avenue	갤러리 페이지가 색인에 포함된 경우에만 텍스트가 표시됩니다.
Flatiron	텍스트가 절대 표시되지 않습니다.
Forte	텍스트는 항상 표시됩니다.
Ishimoto	텍스트는 숨기거나 항상 표시되도록 설정할 수 있습니다.
Momentum	"i" 아이콘을 클릭하면 항상 텍스트가 표시됩니다.
Montauk	텍스트는 항상 표시됩니다.
공급	커서를 올려 + 아이콘을 클릭하면 이미지에 텍스트 오버레이가 표시됩니다. 비디오에는 텍스트가 표시되지 않습니다.
Tremont	캡션 표시: 커서를 올렸을 때 또는 항상 중에서 선택할 수 있습니다. 커서를 원형 아이콘(오른쪽 하단)에 올리면 캡션이 표시됩니다. 스택 레이아웃에서는 이미지 아래에 캡션 표시 옵션을 사용할 수 있습니다. 캡션 표시: 항상을 선택하면 이 옵션이 활성화됩니다.
Wells	텍스트는 항상 표시됩니다.
Wexley	이미지 제목은 커서를 올릴 때 표시됩니다. 섬네일 호버 활성화 조정을 사용하여 제목 표시 여부를 설정할 수 있습니다. 이미지 제목은 라이트박스나 모바일에서 절대 표시되지 않습니다. 이미지 설명도 절대 표시되지 않습니다.
York	York 템플릿은 표준 갤러리 페이지를 사용합니다. 프로젝트 페이지에서는 이미지 방향에 따라 텍스트가 이미지 옆 또는 아래에 표시됩니다.

특수 링크 추가하기

일부 갤러리 페이지는 이미지 간 링크 연결 기능을 지원합니다.

• 딥링크 URL은 각 이미지에 지정되는 맞춤형 URL로, 방문자를 갤러리 페이지 내 특정 이미지로 직접 안내할 수 있습니다.
• 클릭스루 URL은 이미지를 외부 페이지, 내부 페이지 또는 파일로 연결되는 링크로 전환합니다.

팁: 클릭스루 URL을 설정하면 라이트박스 기능이 비활성화됩니다. Adirondack은 슬라이드쇼 보기에서만 딥링크 URL과 클릭스루 URL을 지원합니다.

키보드 탐색

대부분의 템플릿은 키보드 화살표 키를 사용해 이미지 간 탐색을 지원합니다. 키보드 탐색이 작동하기 전, 페이지를 한 번 클릭해야 할 수도 있습니다.

표준 갤러리 페이지는 슬라이드쇼 레이아웃일 때만 키보드 탐색을 지원하며, 그리드 레이아웃에서 라이트박스로 이미지를 열 경우에는 지원되지 않습니다.

고유한 갤러리 페이지는 모두 키보드 탐색을 지원합니다(슬라이드쇼, 캐러셀, 라이트박스 보기 포함).

갤러리 자동 재생

일부 템플릿에서는 이미지가 자동으로 전환되어 사용자가 직접 클릭하지 않아도 다음 이미지로 넘어갈 수 있습니다.

템플릿에 자동 재생 기능이 있다면 사이트 스타일에서 해당 옵션을 찾을 수 있습니다. 예를 들어, 표준 갤러리 페이지를 사용하는 템플릿에서는 갤러리 자동 재생 조정 옵션을 확인하세요.

참고: 갤러리에 비디오가 포함되어 있는 경우, 자동 스크롤로 인해 전체 재생이 되지 않을 수 있습니다. 비디오가 중단되지 않도록 하려면 대표 이미지를 업로드해 이미지 오버레이를 활성화하세요.

모바일 디스플레이

모든 Squarespace 템플릿은 반응형 디자인이 내장되어 있어 어떤 장치에서도 갤러리 페이지가 아름답게 표시됩니다. 모바일 기기에서 갤러리 페이지 미리 보기를 하려면 기기 화면 보기를 사용하세요.

자세한 내용은 모바일 기기에서 내 사이트는 어떻게 표시되나요?를 참고하세요.

더 많은 스타일 옵션

템플릿의 갤러리 페이지에서 제공되는 것과 다른 스타일을 만들고 싶다면 다음과 같은 대안을 사용할 수 있습니다.

• 더 유연한 디자인을 위해 레이아웃 페이지에 갤러리 블록을 사용하세요. 설정 방법은 이 단계를 따르세요.
• 특정 갤러리 콘텐츠를 필터링할 수 있도록 요약 블록을 레이아웃 페이지에 사용하세요.
• 갤러리 페이지 디자인이 다른 새 템플릿으로 전환하세요.

갤러리 블록을 활용해 갤러리 페이지와 레이아웃 페이지를 조합하여 서로 다른 표시 스타일의 갤러리를 여러 개 만들 수 있습니다.