AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.
올바른 갤러리 선택하기
Google Web Designer에는 다음과 같은 네 가지 갤러리 구성요소가 있습니다.
- 360° 갤러리는 여러 면의 개체 이미지를 표시하며, 앞뒤로 스와이프하여 개체를 회전할 수 있습니다. 360° 갤러리에는 그룹 또는 탐색 요소가 표시되지 않습니다.
- 스와이프할 수 있는 갤러리는 단순하고 평면적이며, 이미지 또는 그룹을 세로 또는 가로로 스와이프할 수 있습니다.
- 회전 갤러리는 스와이프할 수 있는 갤러리와 비슷하지만 주변 이미지에 3D 느낌을 부여하여, 주변 이미지가 회전하는 디스플레이에 있는 것처럼 보입니다.
- 전환 갤러리는 이미지 간에 전환하면서 다양한 애니메이션 효과를 제공합니다.
스와이프할 수 있는 갤러리를 사용하는 방법:
-
구성요소 패널에 이어 갤러리 폴더를 엽니다.
-
'스와이프할 수 있는 갤러리
' 구성요소를 스테이지로 드래그합니다.
-
'속성' 패널의 '스와이프할 수 있는 갤러리' 속성 섹션에서 구성요소의 이름을 지정합니다.
-
이미지 모음이나 그룹 모음을 추가합니다. 그룹을 사용하면 이미지 이외의 요소를 표시하거나 단일 프레임에 여러 요소를 표시할 수 있습니다.
- 이미지를 추가하려면 다음 방법 중 하나를 사용합니다.
-
속성 패널의 스와이프할 수 있는 갤러리 속성 섹션에서 이미지의 URL을 쉼표로 구분하여 이미지 입력란에 추가합니다.
-
속성 패널의 스와이프할 수 있는 갤러리 속성 섹션에서 갤러리 이미지 선택
버튼을 클릭합니다. 파일 선택 버튼을 클릭하여 이미지 파일을 찾거나 파일을 바로 대화상자로 드래그합니다.
-
-
그룹을 갤러리에 추가하는 방법:
- 속성 패널의 스와이프할 수 있는 갤러리 속성 섹션에서 그룹 이름 목록을 쉼표로 구분하여 그룹 입력란에 추가합니다.
- 이미지를 추가하려면 다음 방법 중 하나를 사용합니다.
-
원하는 경우 구성요소 속성을 조정합니다(아래 설명 참조).
스와이프할 수 있는 갤러리에서 그룹 사용하기
스와이프할 수 있는 갤러리는 이미지 또는 그룹 모음을 포함할 수 있습니다. 그룹을 사용하면 이미지가 아닌 애셋(동영상 등)이나 갤러리의 단일 프레임에 있는 여러 애셋(텍스트 자막이 포함된 이미지 등)을 사용할 수 있습니다.
동영상이나 다른 양방향 애셋을 사용하는 경우 '속성' 패널에서 '스와이프 사용 중지'를 선택합니다. 그래야 사용자가 동영상 컨트롤과 상호작용할 수 있습니다. 갤러리 탐색 구성요소를 사용하여 사용자가 갤러리 프레임 간에 이동하도록 할 수 있습니다.
이미지와 그룹을 조합하여 표시하는 갤러리를 생성하려면 사용하려는 이미지를 먼저 그룹으로 변환하세요.
그룹을 사용하여 갤러리에 여러 동적 요소를 표시할 수도 있습니다.
갤러리에서 이미지를 재정렬하거나 삭제하는 방법:
- 속성 패널의 스와이프할 수 있는 갤러리 속성 섹션에서 갤러리 이미지 선택
- 이미지를 새 위치로 드래그하여 재정렬하거나 마우스를 이미지 위로 가져간 후 '삭제
' 버튼을 클릭하여 갤러리에서 이미지를 삭제합니다.
- 확인을 클릭합니다.
속성
| 속성 | 설명 |
|---|---|
| 이름 | 스와이프할 수 있는 갤러리의 이름을 설정합니다. |
| 이미지 | 갤러리에서 사용할 이미지를 선택할 수 있습니다. 동적 데이터에 결합될 수 있습니다. |
| 그룹 | 갤러리에 사용할 쉼표로 구분된 그룹 목록입니다. 동적 데이터에 결합될 수 있습니다. |
| 전환 | 이미지 사이의 전환 시간(밀리초)입니다. |
| 시작 프레임 | 처음에 표시할 이미지의 수입니다. |
| 프레임 표시 | 한 번에 갤러리에서 표시되는 프레임의 수입니다. |
| 프레임 스와이프 | 각 스와이프 시 이동하는 프레임의 수입니다. |
| 자동재생 | 선택하는 경우 갤러리의 이미지가 자동으로 재생됩니다. |
| 내비게이션 포함 | 선택하는 경우 갤러리를 이동하기 위한 내비게이션 아이콘이 포함됩니다. |
| 썸네일 이미지 사용 | '내비게이션 포함'과 함께 선택하는 경우 아이콘이 아닌 내비게이션을 위한 썸네일 이미지가 표시됩니다. |
| 강조표시 색상 | 내비게이션 이미지의 강조표시 색상을 설정합니다. |
| 크기 조절 | 고정된 프레임 크기 내에서 다양한 크기의 이미지가 표시되는 방식을 결정합니다.
|
| 방향 | 이미지가 갤러리에서 수평이나 수직으로 이동할지를 결정합니다. |
고급 속성
고급 속성을 표시하려면 구성요소 속성 창에서 '고급 속성'의 확장 아이콘 을 클릭하세요.
| 고급 속성 | 설명 |
|---|---|
| 프레임 오프셋 | 이미지 사이의 거리입니다. |
| 프레임 너비 | 갤러리 내 이미지 프레임의 너비(픽셀)입니다. |
| 프레임 높이 | 갤러리 내 이미지 프레임의 높이(픽셀)입니다. |
| 자동재생 시간 | 갤러리가 처음부터 마지막 프레임까지 재생되는 시간(초)입니다. 별도의 자동재생 단계 간격을 선택하지 않으면 이 시간은 각 이미지 간에 균등하게 분할됩니다. |
| 자동재생 단계 간격 | 자동재생이 사용 설정된 경우 각 이미지가 표시되는 시간(밀리초)입니다. 총 자동재생 시간에 도달할 때까지 이미지가 이 시간으로 재생되며 필요한 경우 이미지가 여러 회에 걸쳐 순환게재됩니다. |
| 이탈 URL | 쉼표로 구분된 URL 목록으로 갤러리의 각 프레임에 해당합니다. 동적 데이터에 결합될 수 있습니다. |
| 스와이프 사용 중지 | 체크박스를 통해 갤러리의 스와이프 내비게이션을 사용 중지할 수 있습니다. 이렇게 하면 사용자가 실수로 프레임을 변경하는 상호작용을 방지하고 프레임의 요소와 상호작용할 수 있습니다. 체크박스가 선택되어 있으면 '탐색 포함' 속성 또는 갤러리 탐색 구성요소를 사용하여 프레임을 변경할 수 있습니다. |
| 프레임을 벗어나면 미디어 일시중지 | 이 속성을 선택하면 프레임이 변경되는 경우 현재 프레임에서 재생 중인 오디오나 동영상이 일시중지되어 배경에서 원하지 않는 콘텐츠가 재생되지 않습니다. |
| 프레임에 들어오면 미디어 재개 | 이 속성을 선택하면 프레임이 활성화될 때마다 향후 프레임에서 일시중지된 오디오 나 동영상이 시작됩니다. |
이벤트 및 작업
스와이프할 수 있는 갤러리 구성요소에서 전송하는 이벤트다음과 같은 스와이프할 수 있는 갤러리 구성요소 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.
| 이벤트 | 설명 |
|---|---|
| 첫 번째 상호작용 | 사용자가 갤러리와 처음으로 상호작용할 때 전송됩니다. |
| 모든 프레임을 확인함 | 갤러리의 모든 프레임이 1회 이상 표시되었을 때 전송됩니다. |
| 이미지 로드됨 | 갤러리의 모든 프레임이 로드되었을 때 전송됩니다. |
| 자동재생이 종료됨 | 자동재생 종료 시 전송됩니다. |
| 표시된 프레임 | 새로운 각 프레임이 완전히 표시되었을 때 전송됩니다. |
| 프레임 활성화됨 | 프레임 변경이 시작될 때 전송됩니다. |
| 프레임이 자동재생됨 | 자동재생이 진행되는 동안 프레임이 자동으로 표시될 때 전송됩니다. |
| 프레임 탭 | 프레임을 클릭했을 때 전송됩니다. |
| 왼쪽 끝 | 스와이프 후 갤러리가 왼쪽 끝에 도달했을 때 전송됩니다. |
| 오른쪽 끝 | 스와이프 후 갤러리가 오른쪽 끝에 도달했을 때 전송됩니다. |
| 프레임 위로 마우스 커서 이동 | 마우스 커서가 프레임 위에 놓일 때 전송됩니다. |
| 프레임 밖으로 마우스 커서 이동 | 마우스 커서가 프레임을 벗어날 때 전송됩니다. |
| 추적 시작 | 마우스 커서 또는 터치 드래그가 시작되면 전송됩니다. |
| 추적 | 구성요소가 마우스 커서 또는 터치 드래그와 연결된 X 및 Y 위치 데이터를 등록합니다. |
| 추적 종료 | 마우스 커서 또는 터치 드래그가 종료되면 전송됩니다. |
이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 스와이프할 수 있는 갤러리 구성요소를 타겟으로 설정하세요.
다른 이벤트에 대한 반응으로 다음과 같은 스와이프할 수 있는 갤러리 구성요소 작업이 트리거될 수 있습니다.
| 작업 | 구성 옵션 |
|---|---|
| 프레임으로 이동 |
|
| 1회 회전 |
|
| 회전 중지 | 없음 |
| 앞으로 이동 | 없음 |
| 뒤로 이동 | 없음 |
이벤트 대화상자에서 이러한 작업 중 하나를 선택하는 경우 스와이프할 수 있는 갤러리 구성요소를 수신자로 설정하세요.
이벤트 구성 방법 알아보기
미리보기
스테이지의 스와이프할 수 있는 갤러리에는 구성요소가 어떻게 표시될지 알 수 있게 해주는 시작 프레임만 표시됩니다. 완전히 렌더링된 구성요소가 작동하는 모습을 보려면 오른쪽 상단의 '미리보기' 버튼을 클릭하여 원하는 브라우저에서 문서를 미리 보세요.