[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:03.28,0:00:03.91,Default,,0000,0000,0000,,NATALIE: 안녕하세요
Dialogue: 0,0:00:03.91,0:00:06.49,Default,,0000,0000,0000,,저는 Natalie입니다\NGoogle Web Designer 개발을
Dialogue: 0,0:00:06.49,0:00:07.96,Default,,0000,0000,0000,,맡고 있는 엔지니어입니다
Dialogue: 0,0:00:07.96,0:00:09.46,Default,,0000,0000,0000,,이번 동영상에서는
Dialogue: 0,0:00:09.46,0:00:11.42,Default,,0000,0000,0000,,고급 모드 타임라인을 사용하여\N애니메이션을
Dialogue: 0,0:00:11.42,0:00:14.47,Default,,0000,0000,0000,,만드는 방법에 대해\N알려드리겠습니다
Dialogue: 0,0:00:14.47,0:00:17.17,Default,,0000,0000,0000,,타임라인 패널은 기본적으로\N작업공간 하단에 있습니다
Dialogue: 0,0:00:17.17,0:00:19.63,Default,,0000,0000,0000,,타임라인 도구는\N두 가지가 있습니다
Dialogue: 0,0:00:19.63,0:00:22.48,Default,,0000,0000,0000,,다른 하나는\N빠른 모드 타임라인으로,
Dialogue: 0,0:00:22.48,0:00:24.58,Default,,0000,0000,0000,,대부분 파일은 기본적으로\N빠른 모드에서 열립니다
Dialogue: 0,0:00:24.58,0:00:26.89,Default,,0000,0000,0000,,오른쪽 상단 모서리에 있는\N이 버튼을 눌러서
Dialogue: 0,0:00:26.89,0:00:28.10,Default,,0000,0000,0000,,두 모드 간에 전환할 수 있습니다
Dialogue: 0,0:00:28.10,0:00:31.48,Default,,0000,0000,0000,,이 화면이 빠른 모드이고\N전환한 화면이 고급 모드입니다
Dialogue: 0,0:00:31.48,0:00:33.48,Default,,0000,0000,0000,,빠른 모드를 다룬\N별도의 가이드가 있으니
Dialogue: 0,0:00:33.48,0:00:36.01,Default,,0000,0000,0000,,여기에서는 고급 모드만\N설명하겠습니다
Dialogue: 0,0:00:36.01,0:00:38.23,Default,,0000,0000,0000,,두 모드 중 이 모드가\N더 복잡하긴 하지만
Dialogue: 0,0:00:38.23,0:00:39.85,Default,,0000,0000,0000,,더 강력한 기능이 제공됩니다
Dialogue: 0,0:00:39.85,0:00:44.02,Default,,0000,0000,0000,,연습을 위해\N짧은 애니메이션 광고를 준비했습니다
Dialogue: 0,0:00:44.02,0:00:46.30,Default,,0000,0000,0000,,광고에서는 이미지가 슬라이딩하고\N두 텍스트 상자가
Dialogue: 0,0:00:46.30,0:00:49.57,Default,,0000,0000,0000,,페이드인, 페이드아웃되며\N끝에 로고가 나타납니다
Dialogue: 0,0:00:49.57,0:00:51.82,Default,,0000,0000,0000,,이 동영상에서는\NGoogle Web Designer에서
Dialogue: 0,0:00:51.82,0:00:54.76,Default,,0000,0000,0000,,이 광고를 만드는\N방법을 살펴보겠습니다
Dialogue: 0,0:00:54.76,0:00:57.43,Default,,0000,0000,0000,,우선 슬라이딩 이미지 애니메이션부터\N처리해 보겠습니다
Dialogue: 0,0:00:57.43,0:01:01.26,Default,,0000,0000,0000,,먼저 이미지를 드래그하여\N스테이지로 가져오고
Dialogue: 0,0:01:01.26,0:01:02.76,Default,,0000,0000,0000,,애니메이션 시작 시 표시되기
Dialogue: 0,0:01:02.76,0:01:04.80,Default,,0000,0000,0000,,원하는 위치에 이미지를 놓습니다
Dialogue: 0,0:01:04.80,0:01:05.53,Default,,0000,0000,0000,,바로 여기에요
Dialogue: 0,0:01:05.53,0:01:07.49,Default,,0000,0000,0000,,그런 다음 이렇게\N슬라이딩되게 합니다
Dialogue: 0,0:01:10.97,0:01:13.64,Default,,0000,0000,0000,,화면의 타임라인에는\N작은 트랙이 있습니다
Dialogue: 0,0:01:13.64,0:01:15.16,Default,,0000,0000,0000,,바로 타임라인 레이어로서,
Dialogue: 0,0:01:15.16,0:01:18.46,Default,,0000,0000,0000,,이 UI에서 시간에 따라\N개체의 애니메이션을
Dialogue: 0,0:01:18.46,0:01:20.77,Default,,0000,0000,0000,,지정하게 됩니다
Dialogue: 0,0:01:20.77,0:01:22.48,Default,,0000,0000,0000,,애니메이션을 만드는 데\N기본적인 원칙은
Dialogue: 0,0:01:22.48,0:01:24.40,Default,,0000,0000,0000,,키프레임을 정의하는 것입니다
Dialogue: 0,0:01:24.40,0:01:27.49,Default,,0000,0000,0000,,키프레임은 요소가 특정 속성 값을\N갖는 지점이죠
Dialogue: 0,0:01:27.49,0:01:30.49,Default,,0000,0000,0000,,그런 다음 이러한 값들 사이에서\N전환이 지속하는 방법과
Dialogue: 0,0:01:30.49,0:01:32.18,Default,,0000,0000,0000,,시간을 정의하면 됩니다
Dialogue: 0,0:01:32.18,0:01:36.07,Default,,0000,0000,0000,,이 이미지 슬라이드를 만들려면\N우선 키프레임 몇 개를 만듭니다
Dialogue: 0,0:01:36.07,0:01:38.15,Default,,0000,0000,0000,,여기에서 약 1초 정도\N멈추게 하려 하므로
Dialogue: 0,0:01:38.15,0:01:39.85,Default,,0000,0000,0000,,1초 지점에\N키프레임을 놓겠습니다
Dialogue: 0,0:01:39.85,0:01:43.57,Default,,0000,0000,0000,,오른쪽 버튼을 클릭하고\N키프레임 삽입을 선택하면 됩니다
Dialogue: 0,0:01:43.57,0:01:45.40,Default,,0000,0000,0000,,0.5초 뒤에 하나 더 삽입합니다
Dialogue: 0,0:01:45.40,0:01:47.17,Default,,0000,0000,0000,,이 키프레임에서는
Dialogue: 0,0:01:47.17,0:01:48.88,Default,,0000,0000,0000,,이미지를 슬라이딩해\N이 시점에 원하는 위치에
Dialogue: 0,0:01:48.88,0:01:51.77,Default,,0000,0000,0000,,이미지가 오도록 하겠습니다
Dialogue: 0,0:01:51.77,0:01:54.35,Default,,0000,0000,0000,,그런 다음 이미지가\N1초 동안 다시 멈추고
Dialogue: 0,0:01:54.35,0:01:56.66,Default,,0000,0000,0000,,마지막으로 0.5초 후에
Dialogue: 0,0:01:56.66,0:02:00.82,Default,,0000,0000,0000,,슬라이딩해 보기에서\N완전히 벗어나도록 하겠습니다
Dialogue: 0,0:02:00.82,0:02:03.43,Default,,0000,0000,0000,,이때 플레이헤드를 드래그하면\N타임라인을 스크러빙하고
Dialogue: 0,0:02:03.43,0:02:05.86,Default,,0000,0000,0000,,애니메이션을 미리 볼 수 있습니다
Dialogue: 0,0:02:05.86,0:02:09.16,Default,,0000,0000,0000,,왼쪽 모서리의 재생 버튼을\N누르는 방법으로도
Dialogue: 0,0:02:09.16,0:02:11.53,Default,,0000,0000,0000,,스테이지에서\N미리 볼 수 있습니다
Dialogue: 0,0:02:14.15,0:02:15.56,Default,,0000,0000,0000,,됐습니다.
Dialogue: 0,0:02:15.56,0:02:16.83,Default,,0000,0000,0000,,다음으로,
Dialogue: 0,0:02:16.83,0:02:19.71,Default,,0000,0000,0000,,완성된 광고에서\N처음에 이미지가
Dialogue: 0,0:02:19.71,0:02:21.57,Default,,0000,0000,0000,,페이드인되는 것을\N보셨을 것입니다
Dialogue: 0,0:02:21.57,0:02:23.01,Default,,0000,0000,0000,,슬라이딩하기 전에 말이죠
Dialogue: 0,0:02:23.01,0:02:25.71,Default,,0000,0000,0000,,이제 이 페이드 애니메이션을\N만들어 보겠습니다
Dialogue: 0,0:02:29.40,0:02:31.87,Default,,0000,0000,0000,,마키 도구를 사용해\N모든 키프레임을 선택하고
Dialogue: 0,0:02:31.87,0:02:33.33,Default,,0000,0000,0000,,옆으로 이동시켜 왼쪽에서
Dialogue: 0,0:02:33.33,0:02:36.15,Default,,0000,0000,0000,,페이드인 효과를 낼 공간을 만들고
Dialogue: 0,0:02:36.15,0:02:37.95,Default,,0000,0000,0000,,0초에 새 키프레임을\N삽입해 보겠습니다
Dialogue: 0,0:02:37.95,0:02:43.17,Default,,0000,0000,0000,,이 키프레임에서\N요소의 불투명도를
Dialogue: 0,0:02:43.17,0:02:43.72,Default,,0000,0000,0000,,0으로 설정하겠습니다
Dialogue: 0,0:02:48.68,0:02:52.97,Default,,0000,0000,0000,,다른 모든 키프레임에서는\N100%로 설정하겠습니다
Dialogue: 0,0:03:02.02,0:03:03.31,Default,,0000,0000,0000,,이제 텍스트를 추가해 보겠습니다
Dialogue: 0,0:03:03.31,0:03:06.88,Default,,0000,0000,0000,,앞서 본 것처럼\N텍스트 상자는 두 개입니다
Dialogue: 0,0:03:06.88,0:03:11.99,Default,,0000,0000,0000,,이미지가 슬라이딩하면서\N순서대로 페이드인되죠
Dialogue: 0,0:03:11.99,0:03:14.08,Default,,0000,0000,0000,,우선 첫 번재 텍스트 상자를\N만들어 보겠습니다
Dialogue: 0,0:03:32.03,0:03:34.46,Default,,0000,0000,0000,,첫 번째 텍스트 상자가\N페이드인되고
Dialogue: 0,0:03:34.46,0:03:38.00,Default,,0000,0000,0000,,여기 이 기간만큼 표시됩니다\N그런 다음 이미지가 슬라이딩하면
Dialogue: 0,0:03:38.00,0:03:39.58,Default,,0000,0000,0000,,페이드아웃됩니다
Dialogue: 0,0:03:39.58,0:03:41.33,Default,,0000,0000,0000,,가장 먼저 할 작업은\N이 상자에서 불투명도를
Dialogue: 0,0:03:41.33,0:03:45.82,Default,,0000,0000,0000,,0%로 만드는 것입니다\N보이지 않게 시작하니까요
Dialogue: 0,0:03:45.82,0:03:50.22,Default,,0000,0000,0000,,그리고 0.5초에서\N키프레임을 만들어
Dialogue: 0,0:03:50.22,0:03:52.17,Default,,0000,0000,0000,,불투명도를 100%로 설정합니다
Dialogue: 0,0:03:52.17,0:03:54.69,Default,,0000,0000,0000,,1.5초 지점에서는\N여전히 100%이고
Dialogue: 0,0:03:54.69,0:03:58.40,Default,,0000,0000,0000,,2초에서는 다시\N0%로 설정합니다
Dialogue: 0,0:03:58.40,0:04:00.48,Default,,0000,0000,0000,,이때 키프레임을 삽입하는\N방법을 사용할 수 있습니다
Dialogue: 0,0:04:00.48,0:04:01.86,Default,,0000,0000,0000,,앞서 했던 것과 같은 방식으로요
Dialogue: 0,0:04:01.86,0:04:04.50,Default,,0000,0000,0000,,키프레임 복제 방법을\N활용할 수도 있습니다
Dialogue: 0,0:04:04.60,0:04:08.70,Default,,0000,0000,0000,,Alt 키를 누르면\N키프레임의 사본을 만들어
Dialogue: 0,0:04:08.70,0:04:09.80,Default,,0000,0000,0000,,다른 시간으로 드래그할 수 있습니다
Dialogue: 0,0:04:10.10,0:04:13.70,Default,,0000,0000,0000,,애니메이션 작업에서\N이 방법으로 시간을 아낄 수 있습니다
Dialogue: 0,0:04:14.50,0:04:18.40,Default,,0000,0000,0000,,이제 텍스트 상자가 완전히\N페이드아웃되는 마지막 키프레임을
Dialogue: 0,0:04:18.40,0:04:19.00,Default,,0000,0000,0000,,추가하겠습니다
Dialogue: 0,0:04:19.20,0:04:20.10,Default,,0000,0000,0000,,한 번 미리 보겠습니다
Dialogue: 0,0:04:23.50,0:04:24.00,Default,,0000,0000,0000,,완벽하네요
Dialogue: 0,0:04:24.10,0:04:24.60,Default,,0000,0000,0000,,좋습니다
Dialogue: 0,0:04:25.00,0:04:27.90,Default,,0000,0000,0000,,사실 두 번째 텍스트 상자는\N첫 번째 텍스트 상자와
Dialogue: 0,0:04:27.90,0:04:30.00,Default,,0000,0000,0000,,거의 동일합니다\N텍스트 내용만 다르고,
Dialogue: 0,0:04:30.00,0:04:32.50,Default,,0000,0000,0000,,첫 번째 상자의\N페이드아웃 후에 나타날 뿐이죠
Dialogue: 0,0:04:32.60,0:04:35.30,Default,,0000,0000,0000,,그래서 이 작업에서\N시간을 더 아껴 보겠습니다
Dialogue: 0,0:04:35.40,0:04:37.00,Default,,0000,0000,0000,,애니메이션을 포함하여\N이 레이어를 복제합니다
Dialogue: 0,0:04:37.00,0:04:38.20,Default,,0000,0000,0000,,오른쪽 버튼을 클릭하고
Dialogue: 0,0:04:38.40,0:04:40.00,Default,,0000,0000,0000,,레이어 복제를 선택하면 됩니다
Dialogue: 0,0:04:41.60,0:04:45.70,Default,,0000,0000,0000,,한 번 더\N마키 선택 도구를 사용하여
Dialogue: 0,0:04:45.70,0:04:48.00,Default,,0000,0000,0000,,키프레임을 모두 선택하고 \N이 애니메이션이
Dialogue: 0,0:04:48.00,0:04:49.50,Default,,0000,0000,0000,,위치해야 하는 지점으로 옮깁니다
Dialogue: 0,0:04:51.70,0:04:54.50,Default,,0000,0000,0000,,여기 첫 번째 텍스트 상자가\N페이드아웃되는 키프레임과
Dialogue: 0,0:04:54.50,0:04:56.50,Default,,0000,0000,0000,,두 번째 상자가 페이드인되는\N키프레임을 조정하여
Dialogue: 0,0:04:56.50,0:04:58.00,Default,,0000,0000,0000,,서로 겹쳐지지 않도록 합니다
Dialogue: 0,0:04:58.20,0:05:00.00,Default,,0000,0000,0000,,키프레임들이 이렇게 가까워지면
Dialogue: 0,0:05:00.00,0:05:03.00,Default,,0000,0000,0000,,확대/축소 슬라이더를 사용하여\N애니메이션을 더 확대해서
Dialogue: 0,0:05:03.00,0:05:04.80,Default,,0000,0000,0000,,볼 수 있습니다
Dialogue: 0,0:05:12.40,0:05:14.60,Default,,0000,0000,0000,,텍스트도 업데이트해 보겠습니다
Dialogue: 0,0:05:15.00,0:05:17.00,Default,,0000,0000,0000,,지금 두 개의 텍스트 상자가 있습니다\N한 상자 위에
Dialogue: 0,0:05:17.00,0:05:18.00,Default,,0000,0000,0000,,다른 상자가 놓여 있죠
Dialogue: 0,0:05:18.20,0:05:20.50,Default,,0000,0000,0000,,여기를 클릭하면\N실수로 위에 있는 상자를
Dialogue: 0,0:05:20.50,0:05:21.50,Default,,0000,0000,0000,,수정하게 될 수 있습니다
Dialogue: 0,0:05:21.70,0:05:22.50,Default,,0000,0000,0000,,그래서 위 상자를 잠금 설정하여
Dialogue: 0,0:05:22.50,0:05:24.10,Default,,0000,0000,0000,,실수로 활성화되지 않도록 하겠습니다
Dialogue: 0,0:05:24.80,0:05:27.20,Default,,0000,0000,0000,,이렇게 하면 아래 상자만\N수정할 수 있습니다
Dialogue: 0,0:05:44.00,0:05:46.00,Default,,0000,0000,0000,,이제 애니메이션이\N거의 완성되었습니다
Dialogue: 0,0:05:46.50,0:05:47.40,Default,,0000,0000,0000,,그럼 키프레임들 사이에서
Dialogue: 0,0:05:47.40,0:05:49.70,Default,,0000,0000,0000,,어떤 작업이 이루어지는지\N자세히 살펴보겠습니다
Dialogue: 0,0:05:49.90,0:05:52.90,Default,,0000,0000,0000,,화면의 키프레임 사이를 보세요\N이걸 선형이라고 하는데요
Dialogue: 0,0:05:53.10,0:05:55.50,Default,,0000,0000,0000,,CSS 이징 기능으로,
Dialogue: 0,0:05:55.60,0:05:57.90,Default,,0000,0000,0000,,각 키프레임 쌍의 중간값을
Dialogue: 0,0:05:57.90,0:05:58.80,Default,,0000,0000,0000,,계산하는 데 사용됩니다
Dialogue: 0,0:05:58.90,0:06:02.20,Default,,0000,0000,0000,,선형이란 값이 일정하게\N변하는 것을 의미합니다
Dialogue: 0,0:06:03.00,0:06:04.30,Default,,0000,0000,0000,,여기에서 다른 옵션을\N사용할 수도 있습니다
Dialogue: 0,0:06:04.50,0:06:06.50,Default,,0000,0000,0000,,오른쪽 버튼을 클릭하면
Dialogue: 0,0:06:06.50,0:06:08.60,Default,,0000,0000,0000,,CSS 사양에 지정된\N모든 표준 이징 기능을
Dialogue: 0,0:06:08.60,0:06:09.90,Default,,0000,0000,0000,,사용할 수 있습니다
Dialogue: 0,0:06:10.60,0:06:13.50,Default,,0000,0000,0000,,특히 이 전환에서는\N왼쪽 이미지 반쪽에서
Dialogue: 0,0:06:13.50,0:06:16.80,Default,,0000,0000,0000,,다음 이미지로 슬라이딩하므로
Dialogue: 0,0:06:16.90,0:06:19.00,Default,,0000,0000,0000,,다른 이징 기능을\N선택하는 것이 좋습니다
Dialogue: 0,0:06:19.00,0:06:22.20,Default,,0000,0000,0000,,예를 들어 이즈 인 아웃을\N사용하면 움직임이
Dialogue: 0,0:06:22.20,0:06:23.80,Default,,0000,0000,0000,,약간 가속된 다음\N멈추기 전에 다시
Dialogue: 0,0:06:23.80,0:06:26.20,Default,,0000,0000,0000,,감속하는데,\N실제와 더 비슷하게
Dialogue: 0,0:06:26.20,0:06:28.30,Default,,0000,0000,0000,,연출할 수 있습니다
Dialogue: 0,0:06:30.00,0:06:32.50,Default,,0000,0000,0000,,미리보기 영역을\N제한해 보겠습니다
Dialogue: 0,0:06:32.50,0:06:38.00,Default,,0000,0000,0000,,이 노란색 핸들을\N이 전환으로 드래그하면 됩니다
Dialogue: 0,0:06:38.00,0:06:41.60,Default,,0000,0000,0000,,그리고 미리보기에\N반복을 설정한 후
Dialogue: 0,0:06:41.60,0:06:43.90,Default,,0000,0000,0000,,이 부분만\N미리보기를 실행하면
Dialogue: 0,0:06:43.90,0:06:45.90,Default,,0000,0000,0000,,이 전환을 디버그할 수 있죠
Dialogue: 0,0:06:46.80,0:06:48.30,Default,,0000,0000,0000,,제대로 움직이네요
Dialogue: 0,0:06:48.40,0:06:49.70,Default,,0000,0000,0000,,하나 더 알려드릴 점이 있습니다
Dialogue: 0,0:06:49.70,0:06:51.60,Default,,0000,0000,0000,,사전 정의된 이징 기능을\N사용하는 대신
Dialogue: 0,0:06:51.60,0:06:52.90,Default,,0000,0000,0000,,나만의 이징을 만들 수 있습니다
Dialogue: 0,0:06:52.90,0:06:55.00,Default,,0000,0000,0000,,오른쪽 버튼을 클릭하고\N이징 옵션을 선택하면
Dialogue: 0,0:06:55.00,0:06:56.60,Default,,0000,0000,0000,,베지어 곡선을 맞춤설정하여
Dialogue: 0,0:06:56.60,0:07:00.90,Default,,0000,0000,0000,,원하는 곡선을 만들 수 있죠\N이를 맞춤 사전 설정으로 저장하고
Dialogue: 0,0:07:04.30,0:07:05.70,Default,,0000,0000,0000,,확인을 클릭하여 적용하면 됩니다
Dialogue: 0,0:07:09.00,0:07:10.90,Default,,0000,0000,0000,,이것으로 가이드를\N마무리하겠습니다
Dialogue: 0,0:07:11.30,0:07:12.90,Default,,0000,0000,0000,,더 알아보고 싶은 분들을 위해\N다른 애니메이션
Dialogue: 0,0:07:12.90,0:07:15.90,Default,,0000,0000,0000,,관련 주제를 자세히 설명한\N가이드도 준비되어 있습니다
Dialogue: 0,0:07:16.00,0:07:16.70,Default,,0000,0000,0000,,이상으로 동영상을 마치겠습니다
Dialogue: 0,0:07:16.80,0:07:17.50,Default,,0000,0000,0000,,시청해 주셔서 감사합니다