전환 갤러리 구성요소

AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.

전환 갤러리 구성요소를 사용하면 이미지를 연속으로 표시하고 이미지 사이의 전환에 애니메이션을 적용할 수 있습니다.

올바른 갤러리 선택하기

Google Web Designer에는 다음과 같은 네 가지 갤러리 구성요소가 있습니다.

• 360° 갤러리는 여러 면의 개체 이미지를 표시하며, 앞뒤로 스와이프하여 개체를 회전할 수 있습니다. 360° 갤러리에는 그룹 또는 탐색 요소가 표시되지 않습니다.
• 스와이프할 수 있는 갤러리는 단순하고 평면적이며, 이미지 또는 그룹을 세로 또는 가로로 스와이프할 수 있습니다.
• 회전 갤러리는 스와이프할 수 있는 갤러리와 비슷하지만 주변 이미지에 3D 느낌을 부여하여, 주변 이미지가 회전하는 디스플레이에 있는 것처럼 보입니다.
• 전환 갤러리는 이미지 간에 전환하면서 다양한 애니메이션 효과를 제공합니다.

전환 갤러리를 사용하는 방법은 다음과 같습니다.

1. 구성요소 패널에 이어 갤러리 폴더를 엽니다.

2. 전환 갤러리 구성요소를 더블클릭하거나 스테이지로 드래그합니다.

3. 구성요소를 더블클릭하거나 설정... 버튼(속성 패널에 있음)을 클릭합니다. 그러면 전환 갤러리 대화상자가 열립니다.

4. 왼쪽의 라이브러리 패널에 갤러리에 포함할 수 있는 이미지가 표시됩니다. 이미지를 추가하려면 패널 하단에서 이미지 가져오기 버튼을 클릭하거나 다른 창에서 이미지를 드래그합니다.

5. 갤러리에서 원하는 이미지를 대화상자 하단의 프레임 패널 또는 스테이지로 드래그합니다. 라이브러리에서 여러 이미지를 추가하려면 이미지를 모두 선택한 다음 마우스 오른쪽 버튼으로 클릭하고 추가를 선택합니다.

6. 전환 패널에서 전환 유형을 선택합니다.

7. 전환 시간, 이징, 기타 속성을 맞춤설정합니다(아래 설명 참조).

갤러리 이미지를 재정렬하는 방법:

1. 스테이지에서 구성요소를 더블클릭하거나 설정... (속성 패널에 있음)을 클릭하여 전환 갤러리 대화상자를 엽니다.
2. 하단의 프레임 패널에서 이미지를 새로운 위치로 드래그합니다.

갤러리 이미지를 삭제하는 방법:

1. 스테이지에서 구성요소를 더블클릭하거나 설정... (속성 패널에 있음)을 클릭하여 전환 갤러리 대화상자를 엽니다.
2. 하단의 프레임 패널에서 삭제할 이미지를 선택합니다.
3. Delete 키를 누르거나 선택 항목을 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 삭제를 선택합니다.

갤러리 이미지를 대체하는 방법:

1. 스테이지에서 구성요소를 더블클릭하거나 설정... (속성 패널에 있음)을 클릭하여 전환 갤러리 대화상자를 엽니다.
2. 프레임 패널에서 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 이미지 대체를 선택합니다.

속성

전환 갤러리 대화상자에서 이 구성요소의 속성에 액세스할 수 있습니다. 대화상자를 열려면 스테이지에서 전환 갤러리를 더블클릭하거나 설정... (속성 패널에 있음)을 클릭합니다.

전환 유형

전환 유형에 따라 다른 속성 집합을 사용할 수 있습니다.

없음

프레임 사이에 시각적 전환 효과가 없습니다.

페이드 아웃

이전 이미지가 페이드 아웃되고 새 이미지가 표시됩니다.

속성	설명
시간	프레임에서 다음 프레임으로 전환되는 애니메이션 재생 시간(초)입니다. 기본값은 1입니다.
이징	전환 애니메이션의 이징입니다. 선형(기본값) 이즈 인 이즈 아웃 이즈 인 아웃

푸시

새 이미지가 이전 이미지를 보기 밖으로 밀어내며 대체됩니다.

속성	설명
스타일	일반	분할
시간	프레임에서 다음 프레임으로 전환되는 애니메이션 재생 시간(초)입니다. 기본값은 1입니다.
이징	전환 애니메이션의 이징입니다. 선형(기본값) 이즈 인 이즈 아웃 이즈 인 아웃
방향 (스타일이 일반인 경우 사용 가능)	효과의 방향입니다. 왼쪽에서 오른쪽으로(기본값) 오른쪽에서 왼쪽으로 위에서 아래로 아래에서 위로
방향 (스타일이 분할인 경우 사용 가능)	애니메이션의 방향입니다. 가로 세로(기본값)

 

와이핑

새 이미지가 움직이는 선을 따라 이전 이미지를 점차 대체합니다.

속성	설명
스타일	일반	도어	아이리스
	방사형	스트라이프
시간	프레임에서 다음 프레임으로 전환되는 애니메이션 재생 시간(초)입니다. 기본값은 1입니다.
이징	전환 애니메이션의 이징입니다. 선형(기본값) 이즈 인 이즈 아웃 이즈 인 아웃
방향 (스타일이 일반, 스트라이프, 도어 또는 방사형인 경우 사용 가능)	효과의 방향입니다. 사용 가능한 옵션은 스타일에 따라 다릅니다. 일반 또는 스트라이프: 왼쪽에서 오른쪽으로(기본값) 오른쪽에서 왼쪽으로 위에서 아래로 아래에서 위로 도어: 안에서 밖으로(기본값) 마무리 방사형: 시계 방향(기본값) 시계 반대 방향
각도 (스타일이 일반인 경우 사용 가능)	와이핑 선의 각도로 -89도부터 89도 사이의 각도입니다.
방향 (스타일이 도어인 경우 사용 가능)	애니메이션의 방향입니다. 가로 세로(기본값)
원점 (스타일이 아이리스 또는 방사형인 경우 사용 가능)	갤러리 프레임의 백분율로 나타낸 아이리스 또는 스위핑 반경의 X 및 Y 원점입니다.
스트라이프 (스타일이 스트라이프인 경우 사용 가능)	각 색상의 스트라이프 수를 1~10 사이의 값으로 나타냅니다. 기본값은 2입니다.
색상 (스타일이 스트라이프인 경우 사용 가능)	각 스트라이프의 색상입니다.

 

슬라이스

새 이미지가 슬라이스 또는 막대 형식으로 순차적으로 표시됩니다.

속성	설명
시간	프레임에서 다음 프레임으로 전환되는 애니메이션 재생 시간(초)입니다. 기본값은 1입니다.
이징	전환 애니메이션의 이징입니다. 선형(기본값) 이즈 인 이즈 아웃 이즈 인 아웃
방향	효과의 방향입니다. 왼쪽에서 오른쪽으로(기본값) 오른쪽에서 왼쪽으로 위에서 아래로 아래에서 위로
슬라이스	슬라이스의 수를 1~20 사이의 값으로 나타냅니다. 기본값은 5입니다.
투명 배경 드러내기	이 체크박스를 선택하면 이전 이미지를 오버레이하지 않고 새 이미지로 전환하기 전에 투명한 배경이 표시됩니다.

블라인드

새 이미지가 마치 창문 블라인드 뒤에 있는 것처럼 표시됩니다.

속성	설명
스타일	일반	베니션
시간	프레임에서 다음 프레임으로 전환되는 애니메이션 재생 시간(초)입니다. 기본값은 1입니다.
이징	전환 애니메이션의 이징입니다. 선형(기본값) 이즈 인 이즈 아웃 이즈 인 아웃
방향 (스타일이 일반인 경우 사용 가능)	효과의 방향입니다. 왼쪽에서 오른쪽으로(기본값) 오른쪽에서 왼쪽으로 위에서 아래로 아래에서 위로
방향 (스타일이 베니션인 경우 사용 가능)	애니메이션의 방향입니다. 가로 세로(기본값)
블라인드	블라인드의 수를 1~20 사이의 값으로 나타냅니다. 기본값은 5입니다.
투명 배경 드러내기 (스타일이 일반인 경우 사용 가능)	이 체크박스를 선택하면 이전 이미지를 오버레이하지 않고 새 이미지로 전환하기 전에 투명한 배경이 표시됩니다.
시차 있음 (스타일이 베니션인 경우 사용 가능)	이 체크박스를 선택하면 블라인드가 동시에 전환되지 않고 순차적으로 전환됩니다.

회전

이전 이미지가 회전하면서 확대되고, 다시 축소되면서 회전이 종료되며 새 이미지가 나타납니다.

속성	설명
시간	프레임에서 다음 프레임으로 전환되는 애니메이션 재생 시간(초)입니다. 기본값은 1입니다.
이징	전환 애니메이션의 이징입니다. 선형(기본값) 이즈 인 이즈 아웃 이즈 인 아웃
방향	효과의 방향입니다. 시계 방향(기본값) 시계 반대 방향

지그재그

새 이미지가 지그재그로 움직이는 그리드 패턴으로 점차 표시됩니다.

속성	설명
시간	프레임에서 다음 프레임으로 전환되는 애니메이션 재생 시간(초)입니다. 기본값은 1입니다.
이징	전환 애니메이션의 이징입니다. 선형(기본값) 이즈 인 이즈 아웃 이즈 인 아웃
방향	애니메이션의 방향입니다. 가로(기본값) 세로
행	행 개수를 1~20 사이의 값으로 나타냅니다. 기본값은 5입니다.
열	열 개수를 1~20 사이의 값으로 나타냅니다. 기본값은 5입니다.

전환 갤러리 속성

속성	설명
이름	전환 갤러리 구성요소의 이름입니다.
이미지	갤러리에 표시되는 이미지입니다. 전환 갤러리 대화상자의 프레임 패널에서 변경합니다. 동적 데이터에 결합될 수 있습니다.
크기 조절	고정된 프레임 크기 내에서 다양한 크기의 이미지가 표시되는 방식을 결정합니다. 자세히 알아보기 이미지 크기를 조절하여 맞춤 이미지 잘라 채움 없음 이미지를 늘려 채움
시작 프레임	처음에 표시할 프레임입니다(1이 첫 프레임이 됨).
자동재생
자동재생	선택할 경우 갤러리의 프레임이 자동으로 재생됩니다. 이 옵션을 사용하면 전체 갤러리를 재생하는 데 걸리는 총 시간이 프레임 패널에 표시됩니다.
간격	각 프레임이 표시되는 시간(초)입니다. 자동재생이 선택된 경우에만 적용됩니다.
반복	갤러리에서 프레임을 재생하는 횟수이며 0은 무한 반복을 나타냅니다. 자동재생이 선택된 경우에만 적용됩니다.
상호작용
래핑	이 옵션을 선택하면 마지막 프레임에서 첫 프레임으로 이동할 수 있습니다.
동작	갤러리의 현재 프레임을 변경하는 사용자 동작입니다. 없음 클릭(기본값) 스와이프(일부 전환 유형에서만 사용 가능*) 선택한 동작 외에도 사용자는 기능을 활성화한 경우 탐색 불릿을 사용하거나 이벤트를 사용하여 설정하는 맞춤 탐색 컨트롤을 사용할 수 있습니다.
역스와이프 무시	이 옵션을 선택하면 구성요소가 애니메이션 효과의 반대 방향 스와이프 동작에 응답하지 않으므로 사용자는 이전 프레임으로 이동할 수 없습니다. 동작 속성이 스와이프로 설정되고 양방향 전환 사용 설정이 선택되지 않은 경우에만 적용됩니다.
양방향 전환 사용 설정	이 옵션을 선택하면 전환 애니메이션이 사용자의 마우스를 따릅니다. 동작 속성을 스와이프로 설정할 수 있는 경우에만 사용할 수 있습니다.
탐색
포함	선택할 경우 갤러리에 탐색 불릿이 표시됩니다.
미리보기 이미지	이 옵션을 선택하면 프레임으로 이동할 수 있도록 각 프레임의 미리보기 이미지가 갤러리에 표시됩니다.
강조표시	현재 표시된 프레임의 강조표시 색상을 설정합니다.
고급
이탈 URL	쉼표로 구분된 이탈 URL 목록으로, 각 프레임에 하나씩의 값이 있습니다. 동적 데이터에 결합될 수 있습니다.

 

* 스와이프 지원

스와이프를 지원하는 전환 유형 및 스타일은 다음과 같습니다.

• 푸시 - 일반
• 슬라이스
• 와이핑 - 일반
• 와이핑 - 스트라이프
• 블라인드 - 일반

이벤트 및 작업

전환 갤러리 구성요소에서 전송한 이벤트

다음과 같은 전환 갤러리 구성요소 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.

이벤트	설명
자동재생이 종료됨	자동재생 종료 시 전송됩니다. 의도된 루프 수에 도달하여 자연스럽게 종료되면 event.detail.completed가 true를, 그렇지 않으면 false를 전달합니다.
프레임 활성화됨	새 프레임이 활성화되기 시작할 때(아직 보이지 않더라도) 전송됩니다.
표시된 프레임	새 프레임이 표시되었을 때 전송됩니다.
프레임 탭	사용자가 프레임을 탭할 때 전송됩니다.
종료 시 회전	회전 종료 시 전송됩니다. 정상적으로 종료되면 event.detail.completed가 true를, 그렇지 않으면 false를 전달합니다.
왼쪽 끝	갤러리가 왼쪽 끝에 도달했을 때 전송됩니다.
오른쪽 끝	갤러리가 오른쪽 끝에 도달했을 때 전송됩니다.

이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 전환 갤러리 구성요소를 타겟으로 설정하세요.

전환 갤러리 구성요소에서 수행하는 작업

다른 이벤트에 대한 반응으로 다음과 같은 전환 갤러리 구성요소 작업이 트리거될 수 있습니다.

작업	구성 옵션
프레임으로 이동	프레임 번호 애니메이션
1회 회전	현재 프레임에서 시작
자동재생 시작	현재 프레임에서 시작
정지	없음
앞으로 이동	없음
뒤로 이동	없음

이벤트 대화상자에서 이러한 작업 중 하나를 선택하는 경우 전환 갤러리 구성요소를 수신자로 설정하세요.

이벤트 구성 방법 알아보기

미리보기

전환 갤러리 대화상자의 디자인모드를 사용하고 있는 경우 프레임 패널에서 재생 버튼을 클릭하면 현재 선택한 프레임부터 기본 전환이 어떻게 표시되는지 확인할 수 있습니다. 미리보기가 재생되는 동안 속성을 수정하면 변경사항이 즉시 적용됩니다.

전환 갤러리가 자동재생 및 상호작용 옵션 등 설정된 속성에 따라 어떻게 작동하는지 확인하려면 미리보기 탭으로 전환하세요.

대화상자에서 저장을 클릭한 다음 미리보기 버튼을 클릭하여 원하는 브라우저에서 문서 미리보기를 할 수도 있습니다.