1
00:00:04,730 --> 00:00:05,975
안녕하세요

2
00:00:05,975 --> 00:00:09,150
Google Web Designer의 개발자
Nivesh입니다

3
00:00:09,150 --> 00:00:11,080
이 동영상에서는
시차 구성요소를 사용하여

4
00:00:11,080 --> 00:00:12,840
시차 애니메이션을 만드는 방법을

5
00:00:12,840 --> 00:00:14,320
간략히 설명하겠습니다

6
00:00:14,320 --> 00:00:16,743
페이지를 위아래로 스크롤하면

7
00:00:16,743 --> 00:00:18,810
전경 및 배경 이미지가

8
00:00:18,810 --> 00:00:23,400
서로 다른 속도로 움직이며
깊이 착시 효과를 일으킵니다

9
00:00:23,400 --> 00:00:26,330
시차 구성요소는 광고 게시자의
사이트에 의존하여

10
00:00:26,330 --> 00:00:28,930
페이지 스크롤 이벤트를
광고로 전달합니다

11
00:00:28,930 --> 00:00:31,450
시차 구성요소는
스크롤 이벤트에 대한 응답으로

12
00:00:31,450 --> 00:00:33,629
이미지에 애니메이션을 적용합니다

13
00:00:33,629 --> 00:00:36,930
시차 애니메이션의 예를
몇 가지 더 찾아보려면

14
00:00:36,930 --> 00:00:40,276
'파일'의
'템플릿에서 새로 만들기'에 있는

15
00:00:40,276 --> 00:00:45,200
Parallax for Display & Video 360
카테고리로 이동합니다

16
00:00:48,300 --> 00:00:52,500
여기서 시차가 브라우저에서
어떻게 표시되는지 확인할 수 있습니다

17
00:00:55,559 --> 00:00:57,230
페이지를 스크롤하면

18
00:00:57,230 --> 00:01:00,899
이미지가 수직 및 수평으로
움직이는 것을 확인할 수 있습니다

19
00:01:04,800 --> 00:01:08,500
이제 직접 시차 애니메이션을 
만들어 볼까요

20
00:01:10,280 --> 00:01:13,210
'파일'의 '새로 만들기'로 이동합니다

21
00:01:15,970 --> 00:01:20,540
시차 구성요소를 사용하려면 환경이
Display & Video 360이어야 합니다

22
00:01:24,570 --> 00:01:26,510
프로젝트에 시차 구성요소를 추가하려면

23
00:01:26,510 --> 00:01:27,950
구성요소 패널을 열고

24
00:01:30,430 --> 00:01:32,970
상호작용 폴더에서 시차 구성요소를

25
00:01:32,970 --> 00:01:34,720
스테이지로 드래그합니다

26
00:01:38,700 --> 00:01:40,600
시차 구성요소를 구성하려면

27
00:01:40,600 --> 00:01:42,200
속성 패널로 이동하여

28
00:01:43,000 --> 00:01:46,380
이미지 컨트롤을 클릭하거나

29
00:01:46,380 --> 00:01:49,000
구성요소를 직접 더블클릭하면 됩니다

30
00:01:49,900 --> 00:01:53,700
먼저 시차 애니메이션에
이미지를 추가합니다

31
00:01:54,000 --> 00:01:56,329
이미지를 추가하려면

32
00:01:56,329 --> 00:01:58,510
파일 시스템의 파일을

33
00:01:58,510 --> 00:02:02,674
스테이지 또는 레이어 패널로
드래그하거나

34
00:02:04,800 --> 00:02:07,580
레이어 패널의 더하기 버튼을 클릭하고

35
00:02:07,580 --> 00:02:10,900
파일 시스템의 이미지를 추가하면 됩니다

36
00:02:15,000 --> 00:02:17,024
레이어를 재정렬하려면

37
00:02:17,024 --> 00:02:20,040
레이어 패널에서 레이어를
드래그 앤 드롭하면 됩니다

38
00:02:20,700 --> 00:02:24,730
레이어는 순서에 따라
앞에서부터 표시되므로

39
00:02:24,730 --> 00:02:28,440
맨 위의 레이어가
다른 레이어보다 앞에 표시됩니다

40
00:02:30,870 --> 00:02:33,030
또한 썸네일 영역을 클릭하여

41
00:02:33,030 --> 00:02:35,119
이미지를 표시하거나 숨길 수 있으며

42
00:02:36,000 --> 00:02:38,286
눈 모양 아이콘을 클릭하여

43
00:02:38,286 --> 00:02:40,500
모든 이미지를 표시하거나
숨길 수도 있습니다

44
00:02:41,400 --> 00:02:43,910
레이어를 숨기면 다른 레이어에서 
작업하기가 더 쉬워집니다

45
00:02:43,910 --> 00:02:46,060
예를 들어 모든 레이어를 숨긴 뒤

46
00:02:46,060 --> 00:02:51,500
제품, 텍스트, 큰 잎사귀만
표시해 보겠습니다

47
00:02:53,390 --> 00:02:55,350
설정 대화상자에는

48
00:02:55,350 --> 00:02:58,020
시작, 종료, 미리보기 탭이 있습니다

49
00:02:58,020 --> 00:02:59,698
시차 애니메이션을 구성하려면

50
00:02:59,698 --> 00:03:02,400
애니메이션의 시작과 끝에서

51
00:03:02,400 --> 00:03:05,560
각 레이어가 표시되어야 하는
위치를 지정합니다

52
00:03:05,560 --> 00:03:12,460
시작 위치는 웹 페이지에서 구성요소가

53
00:03:12,460 --> 00:03:15,460
처음 표시될 때의 위치이며

54
00:03:15,460 --> 00:03:18,400
종료 위치는

55
00:03:18,400 --> 00:03:23,001
구성요소가 표시 영역을
막 지나갈 때의 위치입니다

56
00:03:25,000 --> 00:03:27,100
이제 시작 위치를 구성해 보겠습니다

57
00:03:29,100 --> 00:03:32,440
큰 잎사귀는 다시 숨기고

58
00:03:32,440 --> 00:03:35,700
마우스로 제품을 가운데로 옮겨보겠습니다

59
00:03:35,700 --> 00:03:38,635
이동 시에는 화살표 키를 사용해도 되며

60
00:03:38,635 --> 00:03:40,830
Shift 키를 누른 상태로
화살표 키를 사용하면

61
00:03:40,830 --> 00:03:42,993
한 번에 10픽셀씩 이동할 수 있습니다

62
00:03:43,000 --> 00:03:47,900
또는 레이어 속성 패널에서
위치를 직접 입력할 수도 있습니다

63
00:03:50,900 --> 00:03:55,000
시작 위치의 값을
종료 위치에 빠르게 복사하려면

64
00:03:55,000 --> 00:03:59,430
여기의 위치 일치 버튼을
클릭하면 됩니다

65
00:04:04,600 --> 00:04:08,320
시작 및 종료 위치의 큰 잎사귀 위치를
다시 지정해 볼까요

66
00:04:15,960 --> 00:04:19,600
Shift 키를 누른 상태에서
마우스를 드래그하면

67
00:04:19,600 --> 00:04:21,489
움직임을 제한할 수 있습니다

68
00:04:21,489 --> 00:04:24,320
종료 위치에서 이 잎사귀를
멀리 옮겨보겠습니다

69
00:04:25,900 --> 00:04:30,800
고급 속성에서
고스트 표시 옵션을 켜면

70
00:04:31,800 --> 00:04:34,600
현재 수정하고 있지 않은 다른 탭이

71
00:04:34,600 --> 00:04:36,460
반투명 이미지로 표시됩니다

72
00:04:38,900 --> 00:04:40,400
고스트는 참조용이므로

73
00:04:40,400 --> 00:04:43,908
미리보기나 게시된 파일에는
표시되지 않습니다

74
00:04:43,908 --> 00:04:46,350
이제 미리보기를 해볼까요

75
00:04:53,750 --> 00:04:56,007
샘플 휴대기기에서 위아래로 스크롤하면

76
00:04:56,007 --> 00:04:58,990
표시되는 레이어가 어떻게 동작하는지
확인할 수 있습니다

77
00:04:59,000 --> 00:05:03,290
시작 또는 종료 탭을 클릭하면
파일을 이어서 수정할 수 있습니다

78
00:05:03,290 --> 00:05:08,690
여기서는 이징 옵션을
'이즈 인 아웃'으로 변경하고

79
00:05:08,690 --> 00:05:13,700
텍스트를 0.3에서 1로
페이드 인한 다음

80
00:05:13,700 --> 00:05:16,400
다시 미리보기를 해보겠습니다

81
00:05:22,900 --> 00:05:25,259
레이어의 너비와 높이도
설정할 수 있습니다

82
00:05:25,259 --> 00:05:29,600
잎사귀의 너비를
250픽셀로 변경해 볼까요

83
00:05:30,000 --> 00:05:32,333
가로세로 비율이 잠겨 있기 때문에

84
00:05:32,333 --> 00:05:35,500
높이가 자동으로 업데이트됩니다

85
00:05:36,900 --> 00:05:38,480
레이어는 시작 및 종료 위치에서

86
00:05:38,480 --> 00:05:41,820
지정된 크기 그대로 유지됩니다

87
00:05:41,820 --> 00:05:44,400
즉, 크기에는 애니메이션이
적용되지 않습니다

88
00:05:45,000 --> 00:05:46,971
구성요소의 위치 지정을 완료하고

89
00:05:46,971 --> 00:05:48,350
저장을 클릭하면

90
00:05:48,350 --> 00:05:50,730
일반 Google Web Designer 
인터페이스로 돌아오게 됩니다

91
00:05:50,730 --> 00:05:55,100
빠르게 진행하기 위해 템플릿 파일로 
다시 이동하겠습니다

92
00:05:55,110 --> 00:05:57,120
이 파일에는 모든 애니메이션이
이미 설정되어 있습니다

93
00:05:57,120 --> 00:06:00,200
이제 속성 패널로 이동하여

94
00:06:00,210 --> 00:06:02,120
스크롤 요소 섹션으로 이동합니다

95
00:06:03,100 --> 00:06:04,435
이 스크롤 요소 속성은

96
00:06:04,435 --> 00:06:08,050
Google Web Designer
스테이지에만 표시됩니다

97
00:06:08,050 --> 00:06:10,730
이 값을 업데이트하여
스크롤 요소에 따라

98
00:06:10,730 --> 00:06:13,560
광고가 어떻게 표시되는지
확인할 수 있습니다

99
00:06:14,500 --> 00:06:17,800
브라우저에서도 광고를 
미리 볼 수 있습니다

100
00:06:18,730 --> 00:06:21,370
브라우저에서 미리 보는 경우
미리보기 페이지에서는

101
00:06:21,370 --> 00:06:23,999
구성요소를 위아래로
스크롤할 수 있을 정도의

102
00:06:23,999 --> 00:06:25,724
콘텐츠가 포함된 웹페이지에서

103
00:06:25,724 --> 00:06:28,470
광고가 어떻게 표시되는지
에뮬레이션합니다

104
00:06:31,310 --> 00:06:34,258
전체 광고의 컨텍스트에서 
시차 애니메이션이 어떻게 표시되는지

105
00:06:34,258 --> 00:06:37,160
CTA 버튼을 사용하는 경우 또는
이탈 작업 등을 포함하여

106
00:06:37,160 --> 00:06:39,191
확인할 수 있습니다

107
00:06:39,191 --> 00:06:41,600
시청해 주셔서 감사합니다