0:00:03.285,0:00:03.910
NATALIE: 안녕하세요

0:00:03.910,0:00:06.490
저는 Natalie입니다[br]Google Web Designer 개발을

0:00:06.490,0:00:07.960
맡고 있는 엔지니어입니다

0:00:07.960,0:00:09.460
이번 동영상에서는

0:00:09.460,0:00:11.418
고급 모드 타임라인을 사용하여[br]애니메이션을

0:00:11.418,0:00:14.470
만드는 방법에 대해[br]알려드리겠습니다

0:00:14.470,0:00:17.170
타임라인 패널은 기본적으로[br]작업공간 하단에 있습니다

0:00:17.170,0:00:19.630
타임라인 도구는[br]두 가지가 있습니다

0:00:19.630,0:00:22.480
다른 하나는[br]빠른 모드 타임라인으로,

0:00:22.480,0:00:24.580
대부분 파일은 기본적으로[br]빠른 모드에서 열립니다

0:00:24.580,0:00:26.892
오른쪽 상단 모서리에 있는[br]이 버튼을 눌러서

0:00:26.892,0:00:28.100
두 모드 간에 전환할 수 있습니다

0:00:28.100,0:00:31.480
이 화면이 빠른 모드이고[br]전환한 화면이 고급 모드입니다

0:00:31.480,0:00:33.480
빠른 모드를 다룬[br]별도의 가이드가 있으니

0:00:33.480,0:00:36.010
여기에서는 고급 모드만[br]설명하겠습니다

0:00:36.010,0:00:38.230
두 모드 중 이 모드가[br]더 복잡하긴 하지만

0:00:38.230,0:00:39.850
더 강력한 기능이 제공됩니다

0:00:39.850,0:00:44.020
연습을 위해[br]짧은 애니메이션 광고를 준비했습니다

0:00:44.020,0:00:46.300
광고에서는 이미지가 슬라이딩하고[br]두 텍스트 상자가

0:00:46.300,0:00:49.570
페이드인, 페이드아웃되며[br]끝에 로고가 나타납니다

0:00:49.570,0:00:51.820
이 동영상에서는[br]Google Web Designer에서

0:00:51.820,0:00:54.760
이 광고를 만드는[br]방법을 살펴보겠습니다

0:00:54.760,0:00:57.430
우선 슬라이딩 이미지 애니메이션부터[br]처리해 보겠습니다

0:00:57.430,0:01:01.260
먼저 이미지를 드래그하여[br]스테이지로 가져오고

0:01:01.260,0:01:02.760
애니메이션 시작 시 표시되기

0:01:02.760,0:01:04.800
원하는 위치에 이미지를 놓습니다

0:01:04.800,0:01:05.530
바로 여기에요

0:01:05.530,0:01:07.488
그런 다음 이렇게[br]슬라이딩되게 합니다

0:01:10.974,0:01:13.640
화면의 타임라인에는[br]작은 트랙이 있습니다

0:01:13.640,0:01:15.160
바로 타임라인 레이어로서,

0:01:15.160,0:01:18.460
이 UI에서 시간에 따라[br]개체의 애니메이션을

0:01:18.460,0:01:20.772
지정하게 됩니다

0:01:20.772,0:01:22.480
애니메이션을 만드는 데[br]기본적인 원칙은

0:01:22.480,0:01:24.396
키프레임을 정의하는 것입니다

0:01:24.396,0:01:27.490
키프레임은 요소가 특정 속성 값을[br]갖는 지점이죠

0:01:27.490,0:01:30.490
그런 다음 이러한 값들 사이에서[br]전환이 지속하는 방법과

0:01:30.490,0:01:32.180
시간을 정의하면 됩니다

0:01:32.180,0:01:36.067
이 이미지 슬라이드를 만들려면[br]우선 키프레임 몇 개를 만듭니다

0:01:36.067,0:01:38.150
여기에서 약 1초 정도[br]멈추게 하려 하므로

0:01:38.150,0:01:39.850
1초 지점에[br]키프레임을 놓겠습니다

0:01:39.850,0:01:43.570
오른쪽 버튼을 클릭하고[br]키프레임 삽입을 선택하면 됩니다

0:01:43.570,0:01:45.400
0.5초 뒤에 하나 더 삽입합니다

0:01:45.400,0:01:47.170
이 키프레임에서는

0:01:47.170,0:01:48.880
이미지를 슬라이딩해[br]이 시점에 원하는 위치에

0:01:48.880,0:01:51.767
이미지가 오도록 하겠습니다

0:01:51.767,0:01:54.350
그런 다음 이미지가[br]1초 동안 다시 멈추고

0:01:54.350,0:01:56.660
마지막으로 0.5초 후에

0:01:56.660,0:02:00.820
슬라이딩해 보기에서[br]완전히 벗어나도록 하겠습니다

0:02:00.820,0:02:03.430
이때 플레이헤드를 드래그하면[br]타임라인을 스크러빙하고

0:02:03.430,0:02:05.860
애니메이션을 미리 볼 수 있습니다

0:02:05.860,0:02:09.160
왼쪽 모서리의 재생 버튼을[br]누르는 방법으로도

0:02:09.160,0:02:11.530
스테이지에서[br]미리 볼 수 있습니다

0:02:14.152,0:02:15.555
됐습니다.

0:02:15.555,0:02:16.830
다음으로,

0:02:16.830,0:02:19.710
완성된 광고에서[br]처음에 이미지가

0:02:19.710,0:02:21.570
페이드인되는 것을[br]보셨을 것입니다

0:02:21.570,0:02:23.010
슬라이딩하기 전에 말이죠

0:02:23.010,0:02:25.710
이제 이 페이드 애니메이션을[br]만들어 보겠습니다

0:02:29.400,0:02:31.872
마키 도구를 사용해[br]모든 키프레임을 선택하고

0:02:31.872,0:02:33.330
옆으로 이동시켜 왼쪽에서

0:02:33.330,0:02:36.150
페이드인 효과를 낼 공간을 만들고

0:02:36.150,0:02:37.950
0초에 새 키프레임을[br]삽입해 보겠습니다

0:02:37.950,0:02:43.170
이 키프레임에서[br]요소의 불투명도를

0:02:43.170,0:02:43.720
0으로 설정하겠습니다

0:02:48.680,0:02:52.966
다른 모든 키프레임에서는[br]100%로 설정하겠습니다

0:03:02.020,0:03:03.310
이제 텍스트를 추가해 보겠습니다

0:03:03.310,0:03:06.880
앞서 본 것처럼[br]텍스트 상자는 두 개입니다

0:03:06.880,0:03:11.990
이미지가 슬라이딩하면서[br]순서대로 페이드인되죠

0:03:11.990,0:03:14.080
우선 첫 번재 텍스트 상자를[br]만들어 보겠습니다

0:03:32.030,0:03:34.460
첫 번째 텍스트 상자가[br]페이드인되고

0:03:34.460,0:03:38.000
여기 이 기간만큼 표시됩니다[br]그런 다음 이미지가 슬라이딩하면

0:03:38.000,0:03:39.580
페이드아웃됩니다

0:03:39.580,0:03:41.330
가장 먼저 할 작업은[br]이 상자에서 불투명도를

0:03:41.330,0:03:45.820
0%로 만드는 것입니다[br]보이지 않게 시작하니까요

0:03:45.820,0:03:50.220
그리고 0.5초에서[br]키프레임을 만들어

0:03:50.220,0:03:52.170
불투명도를 100%로 설정합니다

0:03:52.170,0:03:54.690
1.5초 지점에서는[br]여전히 100%이고

0:03:54.690,0:03:58.397
2초에서는 다시[br]0%로 설정합니다

0:03:58.397,0:04:00.480
이때 키프레임을 삽입하는[br]방법을 사용할 수 있습니다

0:04:00.480,0:04:01.860
앞서 했던 것과 같은 방식으로요

0:04:01.860,0:04:04.500
키프레임 복제 방법을[br]활용할 수도 있습니다

0:04:04.600,0:04:08.700
Alt 키를 누르면[br]키프레임의 사본을 만들어

0:04:08.700,0:04:09.800
다른 시간으로 드래그할 수 있습니다

0:04:10.100,0:04:13.700
애니메이션 작업에서[br]이 방법으로 시간을 아낄 수 있습니다

0:04:14.500,0:04:18.399
이제 텍스트 상자가 완전히[br]페이드아웃되는 마지막 키프레임을

0:04:18.399,0:04:19.000
추가하겠습니다

0:04:19.200,0:04:20.100
한 번 미리 보겠습니다

0:04:23.500,0:04:24.000
완벽하네요

0:04:24.100,0:04:24.600
좋습니다

0:04:25.000,0:04:27.900
사실 두 번째 텍스트 상자는[br]첫 번째 텍스트 상자와

0:04:27.900,0:04:30.000
거의 동일합니다[br]텍스트 내용만 다르고,

0:04:30.000,0:04:32.500
첫 번째 상자의[br]페이드아웃 후에 나타날 뿐이죠

0:04:32.600,0:04:35.300
그래서 이 작업에서[br]시간을 더 아껴 보겠습니다

0:04:35.400,0:04:37.000
애니메이션을 포함하여[br]이 레이어를 복제합니다

0:04:37.000,0:04:38.200
오른쪽 버튼을 클릭하고

0:04:38.400,0:04:40.000
레이어 복제를 선택하면 됩니다

0:04:41.600,0:04:45.700
한 번 더[br]마키 선택 도구를 사용하여

0:04:45.700,0:04:48.000
키프레임을 모두 선택하고 [br]이 애니메이션이

0:04:48.000,0:04:49.500
위치해야 하는 지점으로 옮깁니다

0:04:51.700,0:04:54.500
여기 첫 번째 텍스트 상자가[br]페이드아웃되는 키프레임과

0:04:54.500,0:04:56.500
두 번째 상자가 페이드인되는[br]키프레임을 조정하여

0:04:56.500,0:04:58.000
서로 겹쳐지지 않도록 합니다

0:04:58.200,0:05:00.000
키프레임들이 이렇게 가까워지면

0:05:00.000,0:05:03.000
확대/축소 슬라이더를 사용하여[br]애니메이션을 더 확대해서

0:05:03.000,0:05:04.800
볼 수 있습니다

0:05:12.400,0:05:14.600
텍스트도 업데이트해 보겠습니다

0:05:15.000,0:05:17.000
지금 두 개의 텍스트 상자가 있습니다[br]한 상자 위에

0:05:17.000,0:05:18.000
다른 상자가 놓여 있죠

0:05:18.200,0:05:20.500
여기를 클릭하면[br]실수로 위에 있는 상자를

0:05:20.500,0:05:21.500
수정하게 될 수 있습니다

0:05:21.700,0:05:22.500
그래서 위 상자를 잠금 설정하여

0:05:22.500,0:05:24.100
실수로 활성화되지 않도록 하겠습니다

0:05:24.800,0:05:27.200
이렇게 하면 아래 상자만[br]수정할 수 있습니다

0:05:44.000,0:05:46.000
이제 애니메이션이[br]거의 완성되었습니다

0:05:46.500,0:05:47.400
그럼 키프레임들 사이에서

0:05:47.400,0:05:49.700
어떤 작업이 이루어지는지[br]자세히 살펴보겠습니다

0:05:49.900,0:05:52.900
화면의 키프레임 사이를 보세요[br]이걸 선형이라고 하는데요

0:05:53.100,0:05:55.500
CSS 이징 기능으로,

0:05:55.600,0:05:57.900
각 키프레임 쌍의 중간값을

0:05:57.900,0:05:58.800
계산하는 데 사용됩니다

0:05:58.900,0:06:02.200
선형이란 값이 일정하게[br]변하는 것을 의미합니다

0:06:03.000,0:06:04.300
여기에서 다른 옵션을[br]사용할 수도 있습니다

0:06:04.500,0:06:06.500
오른쪽 버튼을 클릭하면

0:06:06.500,0:06:08.600
CSS 사양에 지정된[br]모든 표준 이징 기능을

0:06:08.600,0:06:09.900
사용할 수 있습니다

0:06:10.600,0:06:13.500
특히 이 전환에서는[br]왼쪽 이미지 반쪽에서

0:06:13.500,0:06:16.800
다음 이미지로 슬라이딩하므로

0:06:16.900,0:06:19.000
다른 이징 기능을[br]선택하는 것이 좋습니다

0:06:19.000,0:06:22.200
예를 들어 이즈 인 아웃을[br]사용하면 움직임이

0:06:22.200,0:06:23.800
약간 가속된 다음[br]멈추기 전에 다시

0:06:23.800,0:06:26.200
감속하는데,[br]실제와 더 비슷하게

0:06:26.200,0:06:28.300
연출할 수 있습니다

0:06:30.000,0:06:32.500
미리보기 영역을[br]제한해 보겠습니다

0:06:32.500,0:06:38.000
이 노란색 핸들을[br]이 전환으로 드래그하면 됩니다

0:06:38.000,0:06:41.600
그리고 미리보기에[br]반복을 설정한 후

0:06:41.600,0:06:43.900
이 부분만[br]미리보기를 실행하면

0:06:43.900,0:06:45.900
이 전환을 디버그할 수 있죠

0:06:46.800,0:06:48.300
제대로 움직이네요

0:06:48.400,0:06:49.700
하나 더 알려드릴 점이 있습니다

0:06:49.700,0:06:51.600
사전 정의된 이징 기능을[br]사용하는 대신

0:06:51.600,0:06:52.900
나만의 이징을 만들 수 있습니다

0:06:52.900,0:06:55.000
오른쪽 버튼을 클릭하고[br]이징 옵션을 선택하면

0:06:55.000,0:06:56.600
베지어 곡선을 맞춤설정하여

0:06:56.600,0:07:00.900
원하는 곡선을 만들 수 있죠[br]이를 맞춤 사전 설정으로 저장하고

0:07:04.300,0:07:05.700
확인을 클릭하여 적용하면 됩니다

0:07:09.000,0:07:10.900
이것으로 가이드를[br]마무리하겠습니다

0:07:11.300,0:07:12.900
더 알아보고 싶은 분들을 위해[br]다른 애니메이션

0:07:12.900,0:07:15.900
관련 주제를 자세히 설명한[br]가이드도 준비되어 있습니다

0:07:16.000,0:07:16.700
이상으로 동영상을 마치겠습니다

0:07:16.800,0:07:17.500
시청해 주셔서 감사합니다