1
00:00:03,285 --> 00:00:03,910
NATALIE: 안녕하세요

2
00:00:03,910 --> 00:00:06,490
저는 Natalie입니다
Google Web Designer 개발을

3
00:00:06,490 --> 00:00:07,960
맡고 있는 엔지니어입니다

4
00:00:07,960 --> 00:00:09,460
이번 동영상에서는

5
00:00:09,460 --> 00:00:11,418
고급 모드 타임라인을 사용하여
애니메이션을

6
00:00:11,418 --> 00:00:14,470
만드는 방법에 대해
알려드리겠습니다

7
00:00:14,470 --> 00:00:17,170
타임라인 패널은 기본적으로
작업공간 하단에 있습니다

8
00:00:17,170 --> 00:00:19,630
타임라인 도구는
두 가지가 있습니다

9
00:00:19,630 --> 00:00:22,480
다른 하나는
빠른 모드 타임라인으로,

10
00:00:22,480 --> 00:00:24,580
대부분 파일은 기본적으로
빠른 모드에서 열립니다

11
00:00:24,580 --> 00:00:26,892
오른쪽 상단 모서리에 있는
이 버튼을 눌러서

12
00:00:26,892 --> 00:00:28,100
두 모드 간에 전환할 수 있습니다

13
00:00:28,100 --> 00:00:31,480
이 화면이 빠른 모드이고
전환한 화면이 고급 모드입니다

14
00:00:31,480 --> 00:00:33,480
빠른 모드를 다룬
별도의 가이드가 있으니

15
00:00:33,480 --> 00:00:36,010
여기에서는 고급 모드만
설명하겠습니다

16
00:00:36,010 --> 00:00:38,230
두 모드 중 이 모드가
더 복잡하긴 하지만

17
00:00:38,230 --> 00:00:39,850
더 강력한 기능이 제공됩니다

18
00:00:39,850 --> 00:00:44,020
연습을 위해
짧은 애니메이션 광고를 준비했습니다

19
00:00:44,020 --> 00:00:46,300
광고에서는 이미지가 슬라이딩하고
두 텍스트 상자가

20
00:00:46,300 --> 00:00:49,570
페이드인, 페이드아웃되며
끝에 로고가 나타납니다

21
00:00:49,570 --> 00:00:51,820
이 동영상에서는
Google Web Designer에서

22
00:00:51,820 --> 00:00:54,760
이 광고를 만드는
방법을 살펴보겠습니다

23
00:00:54,760 --> 00:00:57,430
우선 슬라이딩 이미지 애니메이션부터
처리해 보겠습니다

24
00:00:57,430 --> 00:01:01,260
먼저 이미지를 드래그하여
스테이지로 가져오고

25
00:01:01,260 --> 00:01:02,760
애니메이션 시작 시 표시되기

26
00:01:02,760 --> 00:01:04,800
원하는 위치에 이미지를 놓습니다

27
00:01:04,800 --> 00:01:05,530
바로 여기에요

28
00:01:05,530 --> 00:01:07,488
그런 다음 이렇게
슬라이딩되게 합니다

29
00:01:10,974 --> 00:01:13,640
화면의 타임라인에는
작은 트랙이 있습니다

30
00:01:13,640 --> 00:01:15,160
바로 타임라인 레이어로서,

31
00:01:15,160 --> 00:01:18,460
이 UI에서 시간에 따라
개체의 애니메이션을

32
00:01:18,460 --> 00:01:20,772
지정하게 됩니다

33
00:01:20,772 --> 00:01:22,480
애니메이션을 만드는 데
기본적인 원칙은

34
00:01:22,480 --> 00:01:24,396
키프레임을 정의하는 것입니다

35
00:01:24,396 --> 00:01:27,490
키프레임은 요소가 특정 속성 값을
갖는 지점이죠

36
00:01:27,490 --> 00:01:30,490
그런 다음 이러한 값들 사이에서
전환이 지속하는 방법과

37
00:01:30,490 --> 00:01:32,180
시간을 정의하면 됩니다

38
00:01:32,180 --> 00:01:36,067
이 이미지 슬라이드를 만들려면
우선 키프레임 몇 개를 만듭니다

39
00:01:36,067 --> 00:01:38,150
여기에서 약 1초 정도
멈추게 하려 하므로

40
00:01:38,150 --> 00:01:39,850
1초 지점에
키프레임을 놓겠습니다

41
00:01:39,850 --> 00:01:43,570
오른쪽 버튼을 클릭하고
키프레임 삽입을 선택하면 됩니다

42
00:01:43,570 --> 00:01:45,400
0.5초 뒤에 하나 더 삽입합니다

43
00:01:45,400 --> 00:01:47,170
이 키프레임에서는

44
00:01:47,170 --> 00:01:48,880
이미지를 슬라이딩해
이 시점에 원하는 위치에

45
00:01:48,880 --> 00:01:51,767
이미지가 오도록 하겠습니다

46
00:01:51,767 --> 00:01:54,350
그런 다음 이미지가
1초 동안 다시 멈추고

47
00:01:54,350 --> 00:01:56,660
마지막으로 0.5초 후에

48
00:01:56,660 --> 00:02:00,820
슬라이딩해 보기에서
완전히 벗어나도록 하겠습니다

49
00:02:00,820 --> 00:02:03,430
이때 플레이헤드를 드래그하면
타임라인을 스크러빙하고

50
00:02:03,430 --> 00:02:05,860
애니메이션을 미리 볼 수 있습니다

51
00:02:05,860 --> 00:02:09,160
왼쪽 모서리의 재생 버튼을
누르는 방법으로도

52
00:02:09,160 --> 00:02:11,530
스테이지에서
미리 볼 수 있습니다

53
00:02:14,152 --> 00:02:15,555
됐습니다.

54
00:02:15,555 --> 00:02:16,830
다음으로,

55
00:02:16,830 --> 00:02:19,710
완성된 광고에서
처음에 이미지가

56
00:02:19,710 --> 00:02:21,570
페이드인되는 것을
보셨을 것입니다

57
00:02:21,570 --> 00:02:23,010
슬라이딩하기 전에 말이죠

58
00:02:23,010 --> 00:02:25,710
이제 이 페이드 애니메이션을
만들어 보겠습니다

59
00:02:29,400 --> 00:02:31,872
마키 도구를 사용해
모든 키프레임을 선택하고

60
00:02:31,872 --> 00:02:33,330
옆으로 이동시켜 왼쪽에서

61
00:02:33,330 --> 00:02:36,150
페이드인 효과를 낼 공간을 만들고

62
00:02:36,150 --> 00:02:37,950
0초에 새 키프레임을
삽입해 보겠습니다

63
00:02:37,950 --> 00:02:43,170
이 키프레임에서
요소의 불투명도를

64
00:02:43,170 --> 00:02:43,720
0으로 설정하겠습니다

65
00:02:48,680 --> 00:02:52,966
다른 모든 키프레임에서는
100%로 설정하겠습니다

66
00:03:02,020 --> 00:03:03,310
이제 텍스트를 추가해 보겠습니다

67
00:03:03,310 --> 00:03:06,880
앞서 본 것처럼
텍스트 상자는 두 개입니다

68
00:03:06,880 --> 00:03:11,990
이미지가 슬라이딩하면서
순서대로 페이드인되죠

69
00:03:11,990 --> 00:03:14,080
우선 첫 번재 텍스트 상자를
만들어 보겠습니다

70
00:03:32,030 --> 00:03:34,460
첫 번째 텍스트 상자가
페이드인되고

71
00:03:34,460 --> 00:03:38,000
여기 이 기간만큼 표시됩니다
그런 다음 이미지가 슬라이딩하면

72
00:03:38,000 --> 00:03:39,580
페이드아웃됩니다

73
00:03:39,580 --> 00:03:41,330
가장 먼저 할 작업은
이 상자에서 불투명도를

74
00:03:41,330 --> 00:03:45,820
0%로 만드는 것입니다
보이지 않게 시작하니까요

75
00:03:45,820 --> 00:03:50,220
그리고 0.5초에서
키프레임을 만들어

76
00:03:50,220 --> 00:03:52,170
불투명도를 100%로 설정합니다

77
00:03:52,170 --> 00:03:54,690
1.5초 지점에서는
여전히 100%이고

78
00:03:54,690 --> 00:03:58,397
2초에서는 다시
0%로 설정합니다

79
00:03:58,397 --> 00:04:00,480
이때 키프레임을 삽입하는
방법을 사용할 수 있습니다

80
00:04:00,480 --> 00:04:01,860
앞서 했던 것과 같은 방식으로요

81
00:04:01,860 --> 00:04:04,500
키프레임 복제 방법을
활용할 수도 있습니다

82
00:04:04,600 --> 00:04:08,700
Alt 키를 누르면
키프레임의 사본을 만들어

83
00:04:08,700 --> 00:04:09,800
다른 시간으로 드래그할 수 있습니다

84
00:04:10,100 --> 00:04:13,700
애니메이션 작업에서
이 방법으로 시간을 아낄 수 있습니다

85
00:04:14,500 --> 00:04:18,399
이제 텍스트 상자가 완전히
페이드아웃되는 마지막 키프레임을

86
00:04:18,399 --> 00:04:19,000
추가하겠습니다

87
00:04:19,200 --> 00:04:20,100
한 번 미리 보겠습니다

88
00:04:23,500 --> 00:04:24,000
완벽하네요

89
00:04:24,100 --> 00:04:24,600
좋습니다

90
00:04:25,000 --> 00:04:27,900
사실 두 번째 텍스트 상자는
첫 번째 텍스트 상자와

91
00:04:27,900 --> 00:04:30,000
거의 동일합니다
텍스트 내용만 다르고,

92
00:04:30,000 --> 00:04:32,500
첫 번째 상자의
페이드아웃 후에 나타날 뿐이죠

93
00:04:32,600 --> 00:04:35,300
그래서 이 작업에서
시간을 더 아껴 보겠습니다

94
00:04:35,400 --> 00:04:37,000
애니메이션을 포함하여
이 레이어를 복제합니다

95
00:04:37,000 --> 00:04:38,200
오른쪽 버튼을 클릭하고

96
00:04:38,400 --> 00:04:40,000
레이어 복제를 선택하면 됩니다

97
00:04:41,600 --> 00:04:45,700
한 번 더
마키 선택 도구를 사용하여

98
00:04:45,700 --> 00:04:48,000
키프레임을 모두 선택하고 
이 애니메이션이

99
00:04:48,000 --> 00:04:49,500
위치해야 하는 지점으로 옮깁니다

100
00:04:51,700 --> 00:04:54,500
여기 첫 번째 텍스트 상자가
페이드아웃되는 키프레임과

101
00:04:54,500 --> 00:04:56,500
두 번째 상자가 페이드인되는
키프레임을 조정하여

102
00:04:56,500 --> 00:04:58,000
서로 겹쳐지지 않도록 합니다

103
00:04:58,200 --> 00:05:00,000
키프레임들이 이렇게 가까워지면

104
00:05:00,000 --> 00:05:03,000
확대/축소 슬라이더를 사용하여
애니메이션을 더 확대해서

105
00:05:03,000 --> 00:05:04,800
볼 수 있습니다

106
00:05:12,400 --> 00:05:14,600
텍스트도 업데이트해 보겠습니다

107
00:05:15,000 --> 00:05:17,000
지금 두 개의 텍스트 상자가 있습니다
한 상자 위에

108
00:05:17,000 --> 00:05:18,000
다른 상자가 놓여 있죠

109
00:05:18,200 --> 00:05:20,500
여기를 클릭하면
실수로 위에 있는 상자를

110
00:05:20,500 --> 00:05:21,500
수정하게 될 수 있습니다

111
00:05:21,700 --> 00:05:22,500
그래서 위 상자를 잠금 설정하여

112
00:05:22,500 --> 00:05:24,100
실수로 활성화되지 않도록 하겠습니다

113
00:05:24,800 --> 00:05:27,200
이렇게 하면 아래 상자만
수정할 수 있습니다

114
00:05:44,000 --> 00:05:46,000
이제 애니메이션이
거의 완성되었습니다

115
00:05:46,500 --> 00:05:47,400
그럼 키프레임들 사이에서

116
00:05:47,400 --> 00:05:49,700
어떤 작업이 이루어지는지
자세히 살펴보겠습니다

117
00:05:49,900 --> 00:05:52,900
화면의 키프레임 사이를 보세요
이걸 선형이라고 하는데요

118
00:05:53,100 --> 00:05:55,500
CSS 이징 기능으로,

119
00:05:55,600 --> 00:05:57,900
각 키프레임 쌍의 중간값을

120
00:05:57,900 --> 00:05:58,800
계산하는 데 사용됩니다

121
00:05:58,900 --> 00:06:02,200
선형이란 값이 일정하게
변하는 것을 의미합니다

122
00:06:03,000 --> 00:06:04,300
여기에서 다른 옵션을
사용할 수도 있습니다

123
00:06:04,500 --> 00:06:06,500
오른쪽 버튼을 클릭하면

124
00:06:06,500 --> 00:06:08,600
CSS 사양에 지정된
모든 표준 이징 기능을

125
00:06:08,600 --> 00:06:09,900
사용할 수 있습니다

126
00:06:10,600 --> 00:06:13,500
특히 이 전환에서는
왼쪽 이미지 반쪽에서

127
00:06:13,500 --> 00:06:16,800
다음 이미지로 슬라이딩하므로

128
00:06:16,900 --> 00:06:19,000
다른 이징 기능을
선택하는 것이 좋습니다

129
00:06:19,000 --> 00:06:22,200
예를 들어 이즈 인 아웃을
사용하면 움직임이

130
00:06:22,200 --> 00:06:23,800
약간 가속된 다음
멈추기 전에 다시

131
00:06:23,800 --> 00:06:26,200
감속하는데,
실제와 더 비슷하게

132
00:06:26,200 --> 00:06:28,300
연출할 수 있습니다

133
00:06:30,000 --> 00:06:32,500
미리보기 영역을
제한해 보겠습니다

134
00:06:32,500 --> 00:06:38,000
이 노란색 핸들을
이 전환으로 드래그하면 됩니다

135
00:06:38,000 --> 00:06:41,600
그리고 미리보기에
반복을 설정한 후

136
00:06:41,600 --> 00:06:43,900
이 부분만
미리보기를 실행하면

137
00:06:43,900 --> 00:06:45,900
이 전환을 디버그할 수 있죠

138
00:06:46,800 --> 00:06:48,300
제대로 움직이네요

139
00:06:48,400 --> 00:06:49,700
하나 더 알려드릴 점이 있습니다

140
00:06:49,700 --> 00:06:51,600
사전 정의된 이징 기능을
사용하는 대신

141
00:06:51,600 --> 00:06:52,900
나만의 이징을 만들 수 있습니다

142
00:06:52,900 --> 00:06:55,000
오른쪽 버튼을 클릭하고
이징 옵션을 선택하면

143
00:06:55,000 --> 00:06:56,600
베지어 곡선을 맞춤설정하여

144
00:06:56,600 --> 00:07:00,900
원하는 곡선을 만들 수 있죠
이를 맞춤 사전 설정으로 저장하고

145
00:07:04,300 --> 00:07:05,700
확인을 클릭하여 적용하면 됩니다

146
00:07:09,000 --> 00:07:10,900
이것으로 가이드를
마무리하겠습니다

147
00:07:11,300 --> 00:07:12,900
더 알아보고 싶은 분들을 위해
다른 애니메이션

148
00:07:12,900 --> 00:07:15,900
관련 주제를 자세히 설명한
가이드도 준비되어 있습니다

149
00:07:16,000 --> 00:07:16,700
이상으로 동영상을 마치겠습니다

150
00:07:16,800 --> 00:07:17,500
시청해 주셔서 감사합니다