안녕하세요
Google Web Designer의 개발자 Nivesh입니다
이 동영상에서는 시차 구성요소를 사용하여
시차 애니메이션을 만드는 방법을
간략히 설명하겠습니다
페이지를 위아래로 스크롤하면
전경 및 배경 이미지가
서로 다른 속도로 움직이며 깊이 착시 효과를 일으킵니다
시차 구성요소는 광고 게시자의 사이트에 의존하여
페이지 스크롤 이벤트를 광고로 전달합니다
시차 구성요소는 스크롤 이벤트에 대한 응답으로
이미지에 애니메이션을 적용합니다
시차 애니메이션의 예를 몇 가지 더 찾아보려면
'파일'의 '템플릿에서 새로 만들기'에 있는
Parallax for Display & Video 360 카테고리로 이동합니다
여기서 시차가 브라우저에서 어떻게 표시되는지 확인할 수 있습니다
페이지를 스크롤하면
이미지가 수직 및 수평으로 움직이는 것을 확인할 수 있습니다
이제 직접 시차 애니메이션을 만들어 볼까요
'파일'의 '새로 만들기'로 이동합니다
시차 구성요소를 사용하려면 환경이 Display & Video 360이어야 합니다
프로젝트에 시차 구성요소를 추가하려면
구성요소 패널을 열고
상호작용 폴더에서 시차 구성요소를
스테이지로 드래그합니다
시차 구성요소를 구성하려면
속성 패널로 이동하여
이미지 컨트롤을 클릭하거나
구성요소를 직접 더블클릭하면 됩니다
먼저 시차 애니메이션에 이미지를 추가합니다
이미지를 추가하려면
파일 시스템의 파일을
스테이지 또는 레이어 패널로 드래그하거나
레이어 패널의 더하기 버튼을 클릭하고
파일 시스템의 이미지를 추가하면 됩니다
레이어를 재정렬하려면
레이어 패널에서 레이어를 드래그 앤 드롭하면 됩니다
레이어는 순서에 따라 앞에서부터 표시되므로
맨 위의 레이어가 다른 레이어보다 앞에 표시됩니다
또한 썸네일 영역을 클릭하여
이미지를 표시하거나 숨길 수 있으며
눈 모양 아이콘을 클릭하여
모든 이미지를 표시하거나 숨길 수도 있습니다
레이어를 숨기면 다른 레이어에서 작업하기가 더 쉬워집니다
예를 들어 모든 레이어를 숨긴 뒤
제품, 텍스트, 큰 잎사귀만 표시해 보겠습니다
설정 대화상자에는
시작, 종료, 미리보기 탭이 있습니다
시차 애니메이션을 구성하려면
애니메이션의 시작과 끝에서
각 레이어가 표시되어야 하는 위치를 지정합니다
시작 위치는 웹 페이지에서 구성요소가
처음 표시될 때의 위치이며
종료 위치는
구성요소가 표시 영역을 막 지나갈 때의 위치입니다
이제 시작 위치를 구성해 보겠습니다
큰 잎사귀는 다시 숨기고
마우스로 제품을 가운데로 옮겨보겠습니다
이동 시에는 화살표 키를 사용해도 되며
Shift 키를 누른 상태로 화살표 키를 사용하면
한 번에 10픽셀씩 이동할 수 있습니다
또는 레이어 속성 패널에서 위치를 직접 입력할 수도 있습니다
시작 위치의 값을 종료 위치에 빠르게 복사하려면
여기의 위치 일치 버튼을 클릭하면 됩니다
시작 및 종료 위치의 큰 잎사귀 위치를 다시 지정해 볼까요
Shift 키를 누른 상태에서 마우스를 드래그하면
움직임을 제한할 수 있습니다
종료 위치에서 이 잎사귀를 멀리 옮겨보겠습니다
고급 속성에서 고스트 표시 옵션을 켜면
현재 수정하고 있지 않은 다른 탭이
반투명 이미지로 표시됩니다
고스트는 참조용이므로
미리보기나 게시된 파일에는 표시되지 않습니다
이제 미리보기를 해볼까요
샘플 휴대기기에서 위아래로 스크롤하면
표시되는 레이어가 어떻게 동작하는지 확인할 수 있습니다
시작 또는 종료 탭을 클릭하면 파일을 이어서 수정할 수 있습니다
여기서는 이징 옵션을 '이즈 인 아웃'으로 변경하고
텍스트를 0.3에서 1로 페이드 인한 다음
다시 미리보기를 해보겠습니다
레이어의 너비와 높이도 설정할 수 있습니다
잎사귀의 너비를 250픽셀로 변경해 볼까요
가로세로 비율이 잠겨 있기 때문에
높이가 자동으로 업데이트됩니다
레이어는 시작 및 종료 위치에서
지정된 크기 그대로 유지됩니다
즉, 크기에는 애니메이션이 적용되지 않습니다
구성요소의 위치 지정을 완료하고
저장을 클릭하면
일반 Google Web Designer 인터페이스로 돌아오게 됩니다
빠르게 진행하기 위해 템플릿 파일로 다시 이동하겠습니다
이 파일에는 모든 애니메이션이 이미 설정되어 있습니다
이제 속성 패널로 이동하여
스크롤 요소 섹션으로 이동합니다
이 스크롤 요소 속성은
Google Web Designer 스테이지에만 표시됩니다
이 값을 업데이트하여 스크롤 요소에 따라
광고가 어떻게 표시되는지 확인할 수 있습니다
브라우저에서도 광고를 미리 볼 수 있습니다
브라우저에서 미리 보는 경우 미리보기 페이지에서는
구성요소를 위아래로 스크롤할 수 있을 정도의
콘텐츠가 포함된 웹페이지에서
광고가 어떻게 표시되는지 에뮬레이션합니다
전체 광고의 컨텍스트에서 시차 애니메이션이 어떻게 표시되는지
CTA 버튼을 사용하는 경우 또는 이탈 작업 등을 포함하여
확인할 수 있습니다
시청해 주셔서 감사합니다