[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:04.73,0:00:05.98,Default,,0000,0000,0000,,안녕하세요
Dialogue: 0,0:00:05.98,0:00:09.15,Default,,0000,0000,0000,,Google Web Designer의 개발자\NNivesh입니다
Dialogue: 0,0:00:09.15,0:00:11.08,Default,,0000,0000,0000,,이 동영상에서는\N시차 구성요소를 사용하여
Dialogue: 0,0:00:11.08,0:00:12.84,Default,,0000,0000,0000,,시차 애니메이션을 만드는 방법을
Dialogue: 0,0:00:12.84,0:00:14.32,Default,,0000,0000,0000,,간략히 설명하겠습니다
Dialogue: 0,0:00:14.32,0:00:16.74,Default,,0000,0000,0000,,페이지를 위아래로 스크롤하면
Dialogue: 0,0:00:16.74,0:00:18.81,Default,,0000,0000,0000,,전경 및 배경 이미지가
Dialogue: 0,0:00:18.81,0:00:23.40,Default,,0000,0000,0000,,서로 다른 속도로 움직이며\N깊이 착시 효과를 일으킵니다
Dialogue: 0,0:00:23.40,0:00:26.33,Default,,0000,0000,0000,,시차 구성요소는 광고 게시자의\N사이트에 의존하여
Dialogue: 0,0:00:26.33,0:00:28.93,Default,,0000,0000,0000,,페이지 스크롤 이벤트를\N광고로 전달합니다
Dialogue: 0,0:00:28.93,0:00:31.45,Default,,0000,0000,0000,,시차 구성요소는\N스크롤 이벤트에 대한 응답으로
Dialogue: 0,0:00:31.45,0:00:33.63,Default,,0000,0000,0000,,이미지에 애니메이션을 적용합니다
Dialogue: 0,0:00:33.63,0:00:36.93,Default,,0000,0000,0000,,시차 애니메이션의 예를\N몇 가지 더 찾아보려면
Dialogue: 0,0:00:36.93,0:00:40.28,Default,,0000,0000,0000,,'파일'의\N'템플릿에서 새로 만들기'에 있는
Dialogue: 0,0:00:40.28,0:00:45.20,Default,,0000,0000,0000,,Parallax for Display & Video 360\N카테고리로 이동합니다
Dialogue: 0,0:00:48.30,0:00:52.50,Default,,0000,0000,0000,,여기서 시차가 브라우저에서\N어떻게 표시되는지 확인할 수 있습니다
Dialogue: 0,0:00:55.56,0:00:57.23,Default,,0000,0000,0000,,페이지를 스크롤하면
Dialogue: 0,0:00:57.23,0:01:00.90,Default,,0000,0000,0000,,이미지가 수직 및 수평으로\N움직이는 것을 확인할 수 있습니다
Dialogue: 0,0:01:04.80,0:01:08.50,Default,,0000,0000,0000,,이제 직접 시차 애니메이션을 \N만들어 볼까요
Dialogue: 0,0:01:10.28,0:01:13.21,Default,,0000,0000,0000,,'파일'의 '새로 만들기'로 이동합니다
Dialogue: 0,0:01:15.97,0:01:20.54,Default,,0000,0000,0000,,시차 구성요소를 사용하려면 환경이\NDisplay & Video 360이어야 합니다
Dialogue: 0,0:01:24.57,0:01:26.51,Default,,0000,0000,0000,,프로젝트에 시차 구성요소를 추가하려면
Dialogue: 0,0:01:26.51,0:01:27.95,Default,,0000,0000,0000,,구성요소 패널을 열고
Dialogue: 0,0:01:30.43,0:01:32.97,Default,,0000,0000,0000,,상호작용 폴더에서 시차 구성요소를
Dialogue: 0,0:01:32.97,0:01:34.72,Default,,0000,0000,0000,,스테이지로 드래그합니다
Dialogue: 0,0:01:38.70,0:01:40.60,Default,,0000,0000,0000,,시차 구성요소를 구성하려면
Dialogue: 0,0:01:40.60,0:01:42.20,Default,,0000,0000,0000,,속성 패널로 이동하여
Dialogue: 0,0:01:43.00,0:01:46.38,Default,,0000,0000,0000,,이미지 컨트롤을 클릭하거나
Dialogue: 0,0:01:46.38,0:01:49.00,Default,,0000,0000,0000,,구성요소를 직접 더블클릭하면 됩니다
Dialogue: 0,0:01:49.90,0:01:53.70,Default,,0000,0000,0000,,먼저 시차 애니메이션에\N이미지를 추가합니다
Dialogue: 0,0:01:54.00,0:01:56.33,Default,,0000,0000,0000,,이미지를 추가하려면
Dialogue: 0,0:01:56.33,0:01:58.51,Default,,0000,0000,0000,,파일 시스템의 파일을
Dialogue: 0,0:01:58.51,0:02:02.67,Default,,0000,0000,0000,,스테이지 또는 레이어 패널로\N드래그하거나
Dialogue: 0,0:02:04.80,0:02:07.58,Default,,0000,0000,0000,,레이어 패널의 더하기 버튼을 클릭하고
Dialogue: 0,0:02:07.58,0:02:10.90,Default,,0000,0000,0000,,파일 시스템의 이미지를 추가하면 됩니다
Dialogue: 0,0:02:15.00,0:02:17.02,Default,,0000,0000,0000,,레이어를 재정렬하려면
Dialogue: 0,0:02:17.02,0:02:20.04,Default,,0000,0000,0000,,레이어 패널에서 레이어를\N드래그 앤 드롭하면 됩니다
Dialogue: 0,0:02:20.70,0:02:24.73,Default,,0000,0000,0000,,레이어는 순서에 따라\N앞에서부터 표시되므로
Dialogue: 0,0:02:24.73,0:02:28.44,Default,,0000,0000,0000,,맨 위의 레이어가\N다른 레이어보다 앞에 표시됩니다
Dialogue: 0,0:02:30.87,0:02:33.03,Default,,0000,0000,0000,,또한 썸네일 영역을 클릭하여
Dialogue: 0,0:02:33.03,0:02:35.12,Default,,0000,0000,0000,,이미지를 표시하거나 숨길 수 있으며
Dialogue: 0,0:02:36.00,0:02:38.29,Default,,0000,0000,0000,,눈 모양 아이콘을 클릭하여
Dialogue: 0,0:02:38.29,0:02:40.50,Default,,0000,0000,0000,,모든 이미지를 표시하거나\N숨길 수도 있습니다
Dialogue: 0,0:02:41.40,0:02:43.91,Default,,0000,0000,0000,,레이어를 숨기면 다른 레이어에서 \N작업하기가 더 쉬워집니다
Dialogue: 0,0:02:43.91,0:02:46.06,Default,,0000,0000,0000,,예를 들어 모든 레이어를 숨긴 뒤
Dialogue: 0,0:02:46.06,0:02:51.50,Default,,0000,0000,0000,,제품, 텍스트, 큰 잎사귀만\N표시해 보겠습니다
Dialogue: 0,0:02:53.39,0:02:55.35,Default,,0000,0000,0000,,설정 대화상자에는
Dialogue: 0,0:02:55.35,0:02:58.02,Default,,0000,0000,0000,,시작, 종료, 미리보기 탭이 있습니다
Dialogue: 0,0:02:58.02,0:02:59.70,Default,,0000,0000,0000,,시차 애니메이션을 구성하려면
Dialogue: 0,0:02:59.70,0:03:02.40,Default,,0000,0000,0000,,애니메이션의 시작과 끝에서
Dialogue: 0,0:03:02.40,0:03:05.56,Default,,0000,0000,0000,,각 레이어가 표시되어야 하는\N위치를 지정합니다
Dialogue: 0,0:03:05.56,0:03:12.46,Default,,0000,0000,0000,,시작 위치는 웹 페이지에서 구성요소가
Dialogue: 0,0:03:12.46,0:03:15.46,Default,,0000,0000,0000,,처음 표시될 때의 위치이며
Dialogue: 0,0:03:15.46,0:03:18.40,Default,,0000,0000,0000,,종료 위치는
Dialogue: 0,0:03:18.40,0:03:23.00,Default,,0000,0000,0000,,구성요소가 표시 영역을\N막 지나갈 때의 위치입니다
Dialogue: 0,0:03:25.00,0:03:27.10,Default,,0000,0000,0000,,이제 시작 위치를 구성해 보겠습니다
Dialogue: 0,0:03:29.10,0:03:32.44,Default,,0000,0000,0000,,큰 잎사귀는 다시 숨기고
Dialogue: 0,0:03:32.44,0:03:35.70,Default,,0000,0000,0000,,마우스로 제품을 가운데로 옮겨보겠습니다
Dialogue: 0,0:03:35.70,0:03:38.64,Default,,0000,0000,0000,,이동 시에는 화살표 키를 사용해도 되며
Dialogue: 0,0:03:38.64,0:03:40.83,Default,,0000,0000,0000,,Shift 키를 누른 상태로\N화살표 키를 사용하면
Dialogue: 0,0:03:40.83,0:03:42.99,Default,,0000,0000,0000,,한 번에 10픽셀씩 이동할 수 있습니다
Dialogue: 0,0:03:43.00,0:03:47.90,Default,,0000,0000,0000,,또는 레이어 속성 패널에서\N위치를 직접 입력할 수도 있습니다
Dialogue: 0,0:03:50.90,0:03:55.00,Default,,0000,0000,0000,,시작 위치의 값을\N종료 위치에 빠르게 복사하려면
Dialogue: 0,0:03:55.00,0:03:59.43,Default,,0000,0000,0000,,여기의 위치 일치 버튼을\N클릭하면 됩니다
Dialogue: 0,0:04:04.60,0:04:08.32,Default,,0000,0000,0000,,시작 및 종료 위치의 큰 잎사귀 위치를\N다시 지정해 볼까요
Dialogue: 0,0:04:15.96,0:04:19.60,Default,,0000,0000,0000,,Shift 키를 누른 상태에서\N마우스를 드래그하면
Dialogue: 0,0:04:19.60,0:04:21.49,Default,,0000,0000,0000,,움직임을 제한할 수 있습니다
Dialogue: 0,0:04:21.49,0:04:24.32,Default,,0000,0000,0000,,종료 위치에서 이 잎사귀를\N멀리 옮겨보겠습니다
Dialogue: 0,0:04:25.90,0:04:30.80,Default,,0000,0000,0000,,고급 속성에서\N고스트 표시 옵션을 켜면
Dialogue: 0,0:04:31.80,0:04:34.60,Default,,0000,0000,0000,,현재 수정하고 있지 않은 다른 탭이
Dialogue: 0,0:04:34.60,0:04:36.46,Default,,0000,0000,0000,,반투명 이미지로 표시됩니다
Dialogue: 0,0:04:38.90,0:04:40.40,Default,,0000,0000,0000,,고스트는 참조용이므로
Dialogue: 0,0:04:40.40,0:04:43.91,Default,,0000,0000,0000,,미리보기나 게시된 파일에는\N표시되지 않습니다
Dialogue: 0,0:04:43.91,0:04:46.35,Default,,0000,0000,0000,,이제 미리보기를 해볼까요
Dialogue: 0,0:04:53.75,0:04:56.01,Default,,0000,0000,0000,,샘플 휴대기기에서 위아래로 스크롤하면
Dialogue: 0,0:04:56.01,0:04:58.99,Default,,0000,0000,0000,,표시되는 레이어가 어떻게 동작하는지\N확인할 수 있습니다
Dialogue: 0,0:04:59.00,0:05:03.29,Default,,0000,0000,0000,,시작 또는 종료 탭을 클릭하면\N파일을 이어서 수정할 수 있습니다
Dialogue: 0,0:05:03.29,0:05:08.69,Default,,0000,0000,0000,,여기서는 이징 옵션을\N'이즈 인 아웃'으로 변경하고
Dialogue: 0,0:05:08.69,0:05:13.70,Default,,0000,0000,0000,,텍스트를 0.3에서 1로\N페이드 인한 다음
Dialogue: 0,0:05:13.70,0:05:16.40,Default,,0000,0000,0000,,다시 미리보기를 해보겠습니다
Dialogue: 0,0:05:22.90,0:05:25.26,Default,,0000,0000,0000,,레이어의 너비와 높이도\N설정할 수 있습니다
Dialogue: 0,0:05:25.26,0:05:29.60,Default,,0000,0000,0000,,잎사귀의 너비를\N250픽셀로 변경해 볼까요
Dialogue: 0,0:05:30.00,0:05:32.33,Default,,0000,0000,0000,,가로세로 비율이 잠겨 있기 때문에
Dialogue: 0,0:05:32.33,0:05:35.50,Default,,0000,0000,0000,,높이가 자동으로 업데이트됩니다
Dialogue: 0,0:05:36.90,0:05:38.48,Default,,0000,0000,0000,,레이어는 시작 및 종료 위치에서
Dialogue: 0,0:05:38.48,0:05:41.82,Default,,0000,0000,0000,,지정된 크기 그대로 유지됩니다
Dialogue: 0,0:05:41.82,0:05:44.40,Default,,0000,0000,0000,,즉, 크기에는 애니메이션이\N적용되지 않습니다
Dialogue: 0,0:05:45.00,0:05:46.97,Default,,0000,0000,0000,,구성요소의 위치 지정을 완료하고
Dialogue: 0,0:05:46.97,0:05:48.35,Default,,0000,0000,0000,,저장을 클릭하면
Dialogue: 0,0:05:48.35,0:05:50.73,Default,,0000,0000,0000,,일반 Google Web Designer \N인터페이스로 돌아오게 됩니다
Dialogue: 0,0:05:50.73,0:05:55.10,Default,,0000,0000,0000,,빠르게 진행하기 위해 템플릿 파일로 \N다시 이동하겠습니다
Dialogue: 0,0:05:55.11,0:05:57.12,Default,,0000,0000,0000,,이 파일에는 모든 애니메이션이\N이미 설정되어 있습니다
Dialogue: 0,0:05:57.12,0:06:00.20,Default,,0000,0000,0000,,이제 속성 패널로 이동하여
Dialogue: 0,0:06:00.21,0:06:02.12,Default,,0000,0000,0000,,스크롤 요소 섹션으로 이동합니다
Dialogue: 0,0:06:03.10,0:06:04.44,Default,,0000,0000,0000,,이 스크롤 요소 속성은
Dialogue: 0,0:06:04.44,0:06:08.05,Default,,0000,0000,0000,,Google Web Designer\N스테이지에만 표시됩니다
Dialogue: 0,0:06:08.05,0:06:10.73,Default,,0000,0000,0000,,이 값을 업데이트하여\N스크롤 요소에 따라
Dialogue: 0,0:06:10.73,0:06:13.56,Default,,0000,0000,0000,,광고가 어떻게 표시되는지\N확인할 수 있습니다
Dialogue: 0,0:06:14.50,0:06:17.80,Default,,0000,0000,0000,,브라우저에서도 광고를 \N미리 볼 수 있습니다
Dialogue: 0,0:06:18.73,0:06:21.37,Default,,0000,0000,0000,,브라우저에서 미리 보는 경우\N미리보기 페이지에서는
Dialogue: 0,0:06:21.37,0:06:23.100,Default,,0000,0000,0000,,구성요소를 위아래로\N스크롤할 수 있을 정도의
Dialogue: 0,0:06:23.100,0:06:25.72,Default,,0000,0000,0000,,콘텐츠가 포함된 웹페이지에서
Dialogue: 0,0:06:25.72,0:06:28.47,Default,,0000,0000,0000,,광고가 어떻게 표시되는지\N에뮬레이션합니다
Dialogue: 0,0:06:31.31,0:06:34.26,Default,,0000,0000,0000,,전체 광고의 컨텍스트에서 \N시차 애니메이션이 어떻게 표시되는지
Dialogue: 0,0:06:34.26,0:06:37.16,Default,,0000,0000,0000,,CTA 버튼을 사용하는 경우 또는\N이탈 작업 등을 포함하여
Dialogue: 0,0:06:37.16,0:06:39.19,Default,,0000,0000,0000,,확인할 수 있습니다
Dialogue: 0,0:06:39.19,0:06:41.60,Default,,0000,0000,0000,,시청해 주셔서 감사합니다