0:00:04.730,0:00:05.975
안녕하세요

0:00:05.975,0:00:09.150
Google Web Designer의 개발자[br]Nivesh입니다

0:00:09.150,0:00:11.080
이 동영상에서는[br]시차 구성요소를 사용하여

0:00:11.080,0:00:12.840
시차 애니메이션을 만드는 방법을

0:00:12.840,0:00:14.320
간략히 설명하겠습니다

0:00:14.320,0:00:16.743
페이지를 위아래로 스크롤하면

0:00:16.743,0:00:18.810
전경 및 배경 이미지가

0:00:18.810,0:00:23.400
서로 다른 속도로 움직이며[br]깊이 착시 효과를 일으킵니다

0:00:23.400,0:00:26.330
시차 구성요소는 광고 게시자의[br]사이트에 의존하여

0:00:26.330,0:00:28.930
페이지 스크롤 이벤트를[br]광고로 전달합니다

0:00:28.930,0:00:31.450
시차 구성요소는[br]스크롤 이벤트에 대한 응답으로

0:00:31.450,0:00:33.629
이미지에 애니메이션을 적용합니다

0:00:33.629,0:00:36.930
시차 애니메이션의 예를[br]몇 가지 더 찾아보려면

0:00:36.930,0:00:40.276
'파일'의[br]'템플릿에서 새로 만들기'에 있는

0:00:40.276,0:00:45.200
Parallax for Display & Video 360[br]카테고리로 이동합니다

0:00:48.300,0:00:52.500
여기서 시차가 브라우저에서[br]어떻게 표시되는지 확인할 수 있습니다

0:00:55.559,0:00:57.230
페이지를 스크롤하면

0:00:57.230,0:01:00.899
이미지가 수직 및 수평으로[br]움직이는 것을 확인할 수 있습니다

0:01:04.800,0:01:08.500
이제 직접 시차 애니메이션을 [br]만들어 볼까요

0:01:10.280,0:01:13.210
'파일'의 '새로 만들기'로 이동합니다

0:01:15.970,0:01:20.540
시차 구성요소를 사용하려면 환경이[br]Display & Video 360이어야 합니다

0:01:24.570,0:01:26.510
프로젝트에 시차 구성요소를 추가하려면

0:01:26.510,0:01:27.950
구성요소 패널을 열고

0:01:30.430,0:01:32.970
상호작용 폴더에서 시차 구성요소를

0:01:32.970,0:01:34.720
스테이지로 드래그합니다

0:01:38.700,0:01:40.600
시차 구성요소를 구성하려면

0:01:40.600,0:01:42.200
속성 패널로 이동하여

0:01:43.000,0:01:46.380
이미지 컨트롤을 클릭하거나

0:01:46.380,0:01:49.000
구성요소를 직접 더블클릭하면 됩니다

0:01:49.900,0:01:53.700
먼저 시차 애니메이션에[br]이미지를 추가합니다

0:01:54.000,0:01:56.329
이미지를 추가하려면

0:01:56.329,0:01:58.510
파일 시스템의 파일을

0:01:58.510,0:02:02.674
스테이지 또는 레이어 패널로[br]드래그하거나

0:02:04.800,0:02:07.580
레이어 패널의 더하기 버튼을 클릭하고

0:02:07.580,0:02:10.900
파일 시스템의 이미지를 추가하면 됩니다

0:02:15.000,0:02:17.024
레이어를 재정렬하려면

0:02:17.024,0:02:20.040
레이어 패널에서 레이어를[br]드래그 앤 드롭하면 됩니다

0:02:20.700,0:02:24.730
레이어는 순서에 따라[br]앞에서부터 표시되므로

0:02:24.730,0:02:28.440
맨 위의 레이어가[br]다른 레이어보다 앞에 표시됩니다

0:02:30.870,0:02:33.030
또한 썸네일 영역을 클릭하여

0:02:33.030,0:02:35.119
이미지를 표시하거나 숨길 수 있으며

0:02:36.000,0:02:38.286
눈 모양 아이콘을 클릭하여

0:02:38.286,0:02:40.500
모든 이미지를 표시하거나[br]숨길 수도 있습니다

0:02:41.400,0:02:43.910
레이어를 숨기면 다른 레이어에서 [br]작업하기가 더 쉬워집니다

0:02:43.910,0:02:46.060
예를 들어 모든 레이어를 숨긴 뒤

0:02:46.060,0:02:51.500
제품, 텍스트, 큰 잎사귀만[br]표시해 보겠습니다

0:02:53.390,0:02:55.350
설정 대화상자에는

0:02:55.350,0:02:58.020
시작, 종료, 미리보기 탭이 있습니다

0:02:58.020,0:02:59.698
시차 애니메이션을 구성하려면

0:02:59.698,0:03:02.400
애니메이션의 시작과 끝에서

0:03:02.400,0:03:05.560
각 레이어가 표시되어야 하는[br]위치를 지정합니다

0:03:05.560,0:03:12.460
시작 위치는 웹 페이지에서 구성요소가

0:03:12.460,0:03:15.460
처음 표시될 때의 위치이며

0:03:15.460,0:03:18.400
종료 위치는

0:03:18.400,0:03:23.001
구성요소가 표시 영역을[br]막 지나갈 때의 위치입니다

0:03:25.000,0:03:27.100
이제 시작 위치를 구성해 보겠습니다

0:03:29.100,0:03:32.440
큰 잎사귀는 다시 숨기고

0:03:32.440,0:03:35.700
마우스로 제품을 가운데로 옮겨보겠습니다

0:03:35.700,0:03:38.635
이동 시에는 화살표 키를 사용해도 되며

0:03:38.635,0:03:40.830
Shift 키를 누른 상태로[br]화살표 키를 사용하면

0:03:40.830,0:03:42.993
한 번에 10픽셀씩 이동할 수 있습니다

0:03:43.000,0:03:47.900
또는 레이어 속성 패널에서[br]위치를 직접 입력할 수도 있습니다

0:03:50.900,0:03:55.000
시작 위치의 값을[br]종료 위치에 빠르게 복사하려면

0:03:55.000,0:03:59.430
여기의 위치 일치 버튼을[br]클릭하면 됩니다

0:04:04.600,0:04:08.320
시작 및 종료 위치의 큰 잎사귀 위치를[br]다시 지정해 볼까요

0:04:15.960,0:04:19.600
Shift 키를 누른 상태에서[br]마우스를 드래그하면

0:04:19.600,0:04:21.489
움직임을 제한할 수 있습니다

0:04:21.489,0:04:24.320
종료 위치에서 이 잎사귀를[br]멀리 옮겨보겠습니다

0:04:25.900,0:04:30.800
고급 속성에서[br]고스트 표시 옵션을 켜면

0:04:31.800,0:04:34.600
현재 수정하고 있지 않은 다른 탭이

0:04:34.600,0:04:36.460
반투명 이미지로 표시됩니다

0:04:38.900,0:04:40.400
고스트는 참조용이므로

0:04:40.400,0:04:43.908
미리보기나 게시된 파일에는[br]표시되지 않습니다

0:04:43.908,0:04:46.350
이제 미리보기를 해볼까요

0:04:53.750,0:04:56.007
샘플 휴대기기에서 위아래로 스크롤하면

0:04:56.007,0:04:58.990
표시되는 레이어가 어떻게 동작하는지[br]확인할 수 있습니다

0:04:59.000,0:05:03.290
시작 또는 종료 탭을 클릭하면[br]파일을 이어서 수정할 수 있습니다

0:05:03.290,0:05:08.690
여기서는 이징 옵션을[br]'이즈 인 아웃'으로 변경하고

0:05:08.690,0:05:13.700
텍스트를 0.3에서 1로[br]페이드 인한 다음

0:05:13.700,0:05:16.400
다시 미리보기를 해보겠습니다

0:05:22.900,0:05:25.259
레이어의 너비와 높이도[br]설정할 수 있습니다

0:05:25.259,0:05:29.600
잎사귀의 너비를[br]250픽셀로 변경해 볼까요

0:05:30.000,0:05:32.333
가로세로 비율이 잠겨 있기 때문에

0:05:32.333,0:05:35.500
높이가 자동으로 업데이트됩니다

0:05:36.900,0:05:38.480
레이어는 시작 및 종료 위치에서

0:05:38.480,0:05:41.820
지정된 크기 그대로 유지됩니다

0:05:41.820,0:05:44.400
즉, 크기에는 애니메이션이[br]적용되지 않습니다

0:05:45.000,0:05:46.971
구성요소의 위치 지정을 완료하고

0:05:46.971,0:05:48.350
저장을 클릭하면

0:05:48.350,0:05:50.730
일반 Google Web Designer [br]인터페이스로 돌아오게 됩니다

0:05:50.730,0:05:55.100
빠르게 진행하기 위해 템플릿 파일로 [br]다시 이동하겠습니다

0:05:55.110,0:05:57.120
이 파일에는 모든 애니메이션이[br]이미 설정되어 있습니다

0:05:57.120,0:06:00.200
이제 속성 패널로 이동하여

0:06:00.210,0:06:02.120
스크롤 요소 섹션으로 이동합니다

0:06:03.100,0:06:04.435
이 스크롤 요소 속성은

0:06:04.435,0:06:08.050
Google Web Designer[br]스테이지에만 표시됩니다

0:06:08.050,0:06:10.730
이 값을 업데이트하여[br]스크롤 요소에 따라

0:06:10.730,0:06:13.560
광고가 어떻게 표시되는지[br]확인할 수 있습니다

0:06:14.500,0:06:17.800
브라우저에서도 광고를 [br]미리 볼 수 있습니다

0:06:18.730,0:06:21.370
브라우저에서 미리 보는 경우[br]미리보기 페이지에서는

0:06:21.370,0:06:23.999
구성요소를 위아래로[br]스크롤할 수 있을 정도의

0:06:23.999,0:06:25.724
콘텐츠가 포함된 웹페이지에서

0:06:25.724,0:06:28.470
광고가 어떻게 표시되는지[br]에뮬레이션합니다

0:06:31.310,0:06:34.258
전체 광고의 컨텍스트에서 [br]시차 애니메이션이 어떻게 표시되는지

0:06:34.258,0:06:37.160
CTA 버튼을 사용하는 경우 또는[br]이탈 작업 등을 포함하여

0:06:37.160,0:06:39.191
확인할 수 있습니다

0:06:39.191,0:06:41.600
시청해 주셔서 감사합니다