소용돌이 구성요소

소용돌이 구성요소를 사용하면 양방형 3D 모델이 포함된 몰입형 디스플레이 형식으로 광고 소재를 제작할 수 있습니다. 사용자의 스크롤에 따라 광고가 표시될 때 초반의 3D 애니메이션은 페이지 스크롤에 따라 보여집니다. 사용자는 3D 모델과 직접 상호작용할 수 있으며, 광고를 전체 화면으로 확장하여 더 많은 항목을 볼 수 있습니다.

프로젝트에 소용돌이 구성요소를 추가하려면 다음 단계를 따르세요.

1. 구성요소 패널을 연 다음, 그래픽 및 효과 폴더를 엽니다.
2. 소용돌이 구성요소를 스테이지로 드래그합니다.
3. 구성요소를 더블클릭하여 소용돌이 수정 대화상자를 엽니다.
4. 레이어 패널에서 3D 모델 레이어를 선택합니다.
5. 속성 패널의 URL 입력란에서 사용하려는 3D 애셋의 GLB 파일을 찾습니다. 다른 속성을 조절할 수도 있습니다(아래 참고).
6. 파일 시스템에서 스테이지나 레이어 패널(Windows 또는 Mac만 해당)로 이미지 파일을 드래그하거나 라이브러리 패널 하단에 있는 애셋 가져오기 버튼을 클릭합니다. 소용돌이 구성요소에는 이미지만 레이어로 추가할 수 있습니다.
7. 시작 및 종료 탭을 사용해 각 레이어를 애니메이션 시작 및 종료 시 표시되어야 하는 위치에 배치합니다. 레이어를 원하는 위치로 드래그하거나 레이어 속성 패널의 시작 및 종료 위치 입력란을 사용해 위치를 지정할 수 있습니다.
8. 필요한 경우 추가 구성 옵션을 설정합니다(아래 참조).
9. 구성요소가 만족스럽다면(작업 중 미리보기로 확인 가능) 저장을 클릭합니다. 그러면 평소와 같은 Google Web Designer 인터페이스로 돌아갑니다.

구성 옵션

구성요소를 구성하려면 스테이지에서 구성요소를 더블클릭하거나, 구성요소를 선택하고 속성 패널에서 설정… 을 클릭합니다.

중간 상태 추가하기

소용돌이 구성요소 애니메이션을 더 세밀하게 제어하려면 중간 상태를 추가하고 해당 시점의 레이어 속성을 변경하면 됩니다.

1. 시작 탭의 오른쪽에 마우스를 가져간 다음, 버튼을 클릭합니다. 중간 탭이 표시됩니다.
2. 기본적으로 중간 상태는 애니메이션 시작 및 종료 사이의 중간이며, 애니메이션 시간을 조정할 수 있습니다.
3. 중간 탭으로 전환하여 이 시점에서의 레이어 속성을 설정합니다.

중간 상태를 제거하려면 중간 탭의 오른쪽에 마우스를 가져간 후 X를 클릭합니다.

애니메이션 시간 변경하기

소용돌이 구성요소의 애니메이션 시간은 페이지에서 구성요소가 얼마나 많이 표시되었는지, 또는 페이지에서 얼마나 사라졌는지에 따라 결정됩니다. 기본적으로 애니메이션은 구성요소의 상단 가장자리가 페이지에 나타나기 시작할 때(0%) 시작하고, 하단 가장자리가 페이지 상단에서 사라질 때(100%) 종료됩니다. 중간 상태를 추가한 경우 애니메이션 중에 중간 상태가 나타나는 시점도 조정할 수 있습니다. 다음과 같은 두 가지 방법으로 애니메이션 시간을 조정할 수 있습니다.

• 애니메이션 시간 패널에서 시작, 중간, 종료 상자 또는 슬라이더를 원하는 비율로 드래그합니다.
• 애니메이션 시간 패널의 입력란에 시작, 중간, 종료 지점 비율을 입력합니다.

3D 모델의 배경을 투명하게 만들기

1. 3D 모델을 선택합니다.
2. 속성 패널에서 투명한 3D 모델 배경 상자를 선택합니다.

동작 큐 추가하기

1. 3D 모델을 선택합니다.
2. 속성 패널에서 아이콘 드롭다운을 클릭하고 라이브러리에서 이미지를 선택하거나 찾아보기...를 클릭하여 파일 시스템에서 이미지를 선택합니다.
3. 원하는 경우 텍스트 입력란에 아이콘과 함께 표시할 텍스트를 입력합니다.

3D 모델 위에 동작 큐가 표시되어 사용자와 상호작용하도록 안내합니다.

3D 모델 회전하기

1. 3D 모델을 선택합니다.
2. 속성 패널에서 애니메이션의 시작, 중간, 종료에 대한 요를 설정합니다.

요는 수직 축을 기준으로 한 모델의 회전입니다.

이미지 레이어 추가하기

다음과 같은 두 가지 방법으로 레이어를 추가할 수 있습니다.

• 파일 시스템에 있는 파일을 스테이지 또는 레이어 패널로 드래그합니다(Mac 또는 Windows만 해당).
• 라이브러리 패널 하단에서 애셋 가져오기 버튼을 클릭합니다.

소용돌이 구성요소의 새 레이어는 이미지여야 합니다. 3D 모델 레이어는 하나만 허용되며 이는 기본적으로 포함되어 있습니다.

레이어 이동하기

1. 이동할 레이어를 선택합니다.
2. 시작, 중간 또는 종료 탭을 선택합니다.
3. 다음 방법 중 하나를 사용하여 레이어를 배치합니다.
   • 레이어를 새 위치로 드래그합니다.
   • 속성에서 시작, 중간 또는 종료 위치 속성을 설정합니다. 현재 탭과 일치하는 속성만 수정할 수 있습니다. 다른 위치를 복사하려면 시작 위치와 맞추기, 중간 위치와 맞추기 또는 종료 위치와 맞추기 버튼을 사용합니다.

레이어의 다른 위치를 조정하려면 시작, 중간 또는 종료 탭으로 전환하세요.

이미지 대체하기

1. 스테이지에서 대체할 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 이미지 대체...를 선택합니다.
2. 라이브러리에서 이미지를 선택하거나 파일 가져오기 버튼을 클릭하여 컴퓨터에서 이미지 파일을 선택합니다.

원본 이미지가 새 이미지로 대체됩니다. 원본 이미지의 크기를 이전에 조절한 경우 새 이미지에서도 조절된 크기가 사용됩니다. 그렇지 않으면 새 이미지는 기본 크기를 사용합니다.

레이어 재정렬하기

레이어 패널에서 레이어를 목록의 새 위치로 드래그합니다.

레이어 순서는 어떤 레이어가 먼저 표시되는지를 결정합니다. 위쪽에 나열된 레이어가 아래쪽에 나열된 레이어의 앞에 표시됩니다.

이미지 레이어 삭제하기

1. ​삭제하려는 레이어를 선택합니다.
2. 레이어 패널 하단에서 삭제 버튼을 클릭합니다.

소용돌이 구성요소에는 3D 모델 레이어가 필요하므로 이는 삭제할 수 없습니다.

레이어 크기 조절하기

1. 크기를 조절하려는 레이어를 선택합니다.
2. 다음 방법 중 하나를 사용하여 레이어의 크기를 조절합니다.
   • 속성 패널에서 레이어의 너비와 높이를 설정합니다. 가로 세로 비율 제한 버튼을 클릭하면 너비와 높이의 가로 세로 비율 고정 여부를 전환할 수 있습니다.
   • 스테이지에 있는 레이어의 모서리와 가장자리에서 크기 조절 핸들 중 하나를 드래그합니다.

레이어는 애니메이션 재생 시간 처음부터 끝까지 지정된 크기로 확장/축소됩니다.

레이어 불투명도 변경하기

1. 변경하려는 레이어를 선택합니다.
2. 속성 패널에서 시작 또는 종료 불투명도를 0에서 1 사이의 값(0은 투명, 1은 불투명)으로 설정합니다.

3D 모델 레이어는 애니메이션이 끝날 때 항상 불투명합니다.

레이어 애니메이션 이징 변경하기

1. 변경하려는 레이어를 선택합니다.
2. 속성 패널의 고급 속성 아래 이징 드롭다운에서 이징 유형을 선택합니다.

맞춤 이징은 사용할 수 없습니다.

레이어 숨기기 및 표시하기

레이어 패널에서 레이어 썸네일 이미지 옆에 있는 상자를 클릭합니다(모든 레이어 숨기기 버튼).

모든 레이어 숨기기 버튼을 클릭하여 레이어를 모두 숨기거나 표시할 수 있습니다.

레이어를 숨기면 다른 레이어를 작업하기 수월해지고 숨겨진 레이어가 구성 미리보기에 표시되지 않게 할 수 있지만, 브라우저 미리보기나 게시된 광고 소재에는 아무런 영향을 미치지 않습니다.

고스트 표시 및 숨기기

1. 이미지 레이어를 선택합니다.
2. 속성 패널의 고급 속성 아래에서 고스트 표시 체크박스를 클릭합니다.

고스트는 현재 수정하고 있지 않은 위치에 있는 레이어의 반투명 버전이므로 시작, 중간, 종료 위치를 시각적으로 비교할 수 있습니다. 고스트는 참조 전용이며 미리보기 또는 게시된 파일에 표시되지 않습니다.

속성

소용돌이 구성요소 속성

속성	설명
이름	소용돌이 구성요소의 이름입니다.
스크롤 요소	뷰어가 스크롤한 범위를 나타내는 0~1의 숫자입니다. Google Web Designer 스테이지에 표시하기 위한 용도로만 사용됩니다. 기본값은 0.5입니다.

소용돌이 수정 대화상자에서 레이어를 선택하면 레이어 속성을 보고 수정할 수 있습니다.

3D 모델 레이어 속성

속성	설명
이름	3D 모델 구성요소의 이름입니다.
URL	3D 애셋의 GLB 소스 파일입니다. Khronos glTF Validator를 사용하여 GLB 파일이 유효한지 확인하세요. 오래된 소용돌이 구성요소의 경우 3D 애셋의 URL 또는 ID입니다. 링크 공유가 사용 설정되어 있고 Poly에서 호스팅되는 애셋만 지원됩니다. 애셋 파일의 크기는 2MB 이하여야 합니다. 이보다 큰 애셋은 Google Web Designer에 로드되지 않을 수 있습니다. 추가 요구사항을 확인하려면 3D 애셋 가이드를 참고하세요. URL은 https://poly.google.com/view/로 시작해야 합니다. ID는 Poly 보기 페이지 URL 끝에서 찾을 수 있습니다(예: https://poly.google.com/view/0CkCZrXqCWW). 예: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW 애셋 새로고침 - URL 입력란에서 이 버튼을 클릭하여 3D 애셋을 새로고침할 수 있습니다. 변경사항이 표시되지 않으면 애셋이 아직 처리 중인 것일 수 있으므로 잠시 후 다시 시도해야 합니다.
투명한 3D 모델 배경	(오래된 소용돌이 구성요소에만 해당합니다.) 3D 모델 구성요소의 배경을 투명하게 하려면 이 체크박스를 선택합니다.
동작 큐
아이콘	사용자가 모델과 상호작용하도록 3D 모델 위에 표시할 이미지입니다. 동작 큐는 애니메이션 제한에 도달할 때까지 사용자의 시선을 끌기 위해 조금씩 움직이다가 사용자가 모델과 상호작용하기 시작하면 사라집니다.
텍스트	동작 큐 아이콘 아래에 표시할 텍스트입니다. 동작 큐 아이콘이 지정된 경우에만 적용됩니다.
애니메이션 제한 설정	동작 큐 애니메이션이 지속되는 시간을 제한하려면 이 체크박스를 선택하고 초 단위로 설정합니다.
위치 및 크기
시작	애니메이션이 시작했을 때 소용돌이 구성요소의 왼쪽 및 상단부터 레이어까지의 거리입니다. 시작 탭을 선택하면 수정 가능합니다.
중간	애니메이션의 중간 상태에서 소용돌이 구성요소의 왼쪽 및 상단부터 레이어까지의 거리입니다. 중간 탭을 선택하면 수정할 수 있습니다.
종료	애니메이션이 끝났을 때 소용돌이 구성요소의 왼쪽 및 상단부터 레이어까지의 거리입니다. 종료 탭을 선택하면 수정 가능합니다.
크기	레이어의 너비 및 높이입니다. 애니메이션 재생 시간 처음부터 끝까지 레이어에 영향을 미칩니다.
회전
요	수직 축을 중심으로 한 모델의 시작, 중간, 종료 회전 각도입니다.
스타일
불투명도	레이어의 시작, 중간 및 종료 불투명도로 0(투명)에서 1(불투명) 사이의 숫자로 표시됩니다.
고급 속성
이징	레이어 애니메이션의 이징 유형입니다. 맞춤 이징은 사용할 수 없습니다.

이미지 레이어 속성

속성	설명
소스	이미지 파일 소스입니다. (수정 불가)
이탈 URL	사용자가 이미지를 클릭할 때의 이탈 URL입니다.
위치 및 크기
시작	애니메이션이 시작했을 때 소용돌이 구성요소의 왼쪽 및 상단부터 레이어까지의 거리입니다. 시작 탭을 선택하면 수정 가능합니다.
중간	애니메이션의 중간 상태에서 구성요소의 왼쪽 및 상단부터 레이어까지의 거리입니다. 중간 탭을 선택하면 수정할 수 있습니다.
종료	애니메이션이 끝났을 때 소용돌이 구성요소의 왼쪽 및 상단부터 레이어까지의 거리입니다. 종료 탭을 선택하면 수정 가능합니다.
크기	레이어의 너비 및 높이입니다. 애니메이션 재생 시간 처음부터 끝까지 레이어에 영향을 미칩니다.
스타일
불투명도	레이어의 시작, 중간 및 종료 불투명도로 0(투명)에서 1(불투명) 사이의 숫자로 표시됩니다.
고급 속성
이징	레이어 애니메이션의 이징 유형입니다. 맞춤 이징은 사용할 수 없습니다.
고스트 표시	사용 설정하면 레이어의 반투명 버전이 비활성 위치(현재 수정하지 않고 있는 위치)에 표시됩니다.

이벤트와 액션

이벤트

이벤트를 사용하여 광고에서 다른 액션을 트리거할 수 있습니다. 소용돌이 구성요소는 다음 이벤트를 전송합니다.

이벤트	설명
소용돌이 로드됨	구성요소에 포함된 모든 애셋이 로드되면 전송됩니다.

이벤트 대화상자에서 이 이벤트를 선택하려면 대상으로 소용돌이 구성요소를 설정합니다.

소용돌이 구성요소에 포함된 3D 모델의 이벤트와 액션도 설정할 수 있습니다.

미리보기