애니메이션 GIF 정보

Google Web Designer에서는 HTML5 콘텐츠, CSS 애니메이션 및 동영상 편집 도구를 사용하여 애니메이션 GIF로 내보낼 수 있는 광고를 만들 수 있습니다.

애니메이션 GIF 만들기

애니메이션 GIF는 Google Web Designer에서 특정 문서 유형을 사용하여 만들어야 합니다.

애니메이션 GIF를 만드는 방법은 다음과 같습니다.

1. 상단 메뉴에서 파일 > 새 항목...을 선택하거나 시작 페이지에서 새 파일 만들기를 선택합니다.
2. 왼쪽 패널에서 광고 유형으로 애니메이션 GIF를 선택합니다.
3. 파일 이름을 입력합니다.
4. 파일 위치를 선택합니다.
5. 원하는 크기를 선택하거나 너비와 높이를 지정하려면 맞춤을 선택합니다.
6. 이 애니메이션 GIF를 다양한 크기의 버전으로 만들려면 여러 크기의 레이아웃 체크박스를 선택합니다.
7. 확인을 누릅니다.

동영상 문서 사용

새 문서를 만들 때 동영상 광고 유형을 선택한 다음, 게시 단계에서 동영상 문서를 애니메이션 GIF로 내보낼 수도 있습니다. 애니메이션 GIF에서는 오디오 및 일반 크기와 같은 동영상 문서의 일부 기능이 지원되지 않거나 최적화되지 않습니다.

애니메이션 GIF 작업하기

대부분의 HTML5 및 CSS 도구는 동영상 문서에서 사용할 수 있지만 일부 제한사항이 있습니다. 동영상 트랙을 포함할 수도 있으며, 동영상 트랙은 타임라인에 레이어로 표시됩니다.

타임라인

애니메이션 GIF에서는 항상 각 요소가 레이어로 표시되는 고급 모드 타임라인을 사용합니다. 이벤트는 애니메이션 GIF에서 지원되지 않으므로 이벤트 트랙이 없습니다.

타임라인을 사용하여 미디어 또는 애니메이션의 타이밍을 설정합니다. 현재 시간은 분:초:프레임 형식으로 표시됩니다. 초당 프레임 수는 프레임 속도에 따라 결정됩니다. Google Web Designer는 최대 5분 길이의 애니메이션 GIF를 지원합니다.

동영상은 동영상 트랙이라는 특수 레이어에 포함될 수 있으며, 동영상 트랙에는 하나 이상의 동영상 또는 이미지 클립이 포함되어 있을 수 있습니다. 타임라인에는 동영상 및 이미지 클립의 썸네일이 표시됩니다.

미디어 애셋 가져오기

다음 방법 중 하나를 사용하여 문서에 동영상 또는 이미지 애셋을 추가할 수 있습니다.

• 파일 > 애셋 가져오기... 메뉴 명령어를 사용합니다.
• 파일 시스템에서 Google Web Designer 스테이지로 애셋을 드래그합니다.
• 라이브러리 패널에서 스테이지로 애셋을 드래그합니다.
• 라이브러리 패널 하단의 애셋 가져오기  버튼을 사용합니다(라이브러리에만 추가).

지원되는 동영상 애셋의 최대 길이는 5분입니다.

지원되는 미디어 코덱

애니메이션 GIF에 사용되는 동영상 애셋은 다음 코덱 중 하나를 사용하여 인코딩해야 합니다.

• H.264/AVC
• VP8
• VP9

위의 코덱을 사용할 수 있는 파일 형식으로는 .mp4, .m4a, .mov, .webm 등이 있습니다. 동영상 파일이 다른 코덱을 사용하는 경우 파일을 가져오려고 하면 Google Web Designer에 오류가 표시됩니다.

문서 크기

애니메이션 GIF의 크기를 변경하는 방법은 다음과 같습니다.

1. 스테이지에서 모든 요소를 선택 해제합니다. (스테이지의 빈 영역을 클릭하면 됩니다.)
2. 속성 패널에서 크기 드롭다운을 사용하여 크기를 선택하거나 맞춤을 선택하여 너비와 높이를 지정합니다.

여러 크기의 레이아웃

여러 크기의 레이아웃을 사용하면 동일한 문서 내에서 다양한 크기에 맞춰 애니메이션 GIF를 디자인할 수 있습니다. 애니메이션 GIF에서 여러 크기의 레이아웃을 사용하는 경우 반응형 패널에서 크기를 변경해야 합니다.

여러 크기의 레이아웃에 대해 자세히 알아보세요.

프레임 속도

기본적으로 애니메이션 GIF는 5fps의 프레임 속도로 설정되지만 첫 번째로 가져온 동영상 애셋의 프레임 속도와 일치하도록 전환됩니다.

애니메이션 GIF를 게시할 때 더 낮은 해상도 버전을 내보내기 위해 낮은 프레임 속도를 선택하는 옵션이 있을 수 있습니다. 문서에서 작업하는 동안 프레임 속도를 수동으로 조정할 수도 있습니다. 프레임 속도를 변경하는 방법은 다음과 같습니다.

1. 스테이지에서 모든 요소를 선택 해제합니다. (스테이지의 빈 영역을 클릭하면 됩니다.)
2. 속성 패널에서 프레임 속도 드롭다운을 사용하여 다음 옵션 중 하나를 선택합니다.

   5fps 10fps 12fps 12.5fps 15fps 23.98fps 24fps

   25fps 29.97fps 30fps 50fps 59.94fps 60fps

프레임 속도를 변경하면 기존 애니메이션의 타이밍에 지장을 주거나 프레임 속도가 다른 동영상 클립의 재생이 끊길 수 있습니다.

동영상 편집

애니메이션 GIF 문서에서는 다음과 같은 동영상 편집 기능을 사용할 수 있습니다.

• 각 동영상 클립이 재생되는 시점 및 재생 시간 설정하기
• 동영상 소스의 일부만 사용하도록 클립 자르기
• 클립 분할 및 병합하기
• 클립 복제하기
• 클립에 전환 추가하기
• 동영상 프레임에 고정하기

동영상 클립 작업에 대해 자세히 알아보세요.

동영상 모양 맞춤설정하기

포함된 동영상을 보다 세밀하게 맞춤설정하려면 동영상 트랙과 함께 다음 기능을 사용해 보세요.

• 애니메이션
• 마스크
• CSS 효과
• 모션 경로
• 3D 도구

변형

변형을 사용하면 단일 문서 내에서 각기 다른 스타일과 콘텐츠로 다양한 버전의 애니메이션 GIF를 제작할 수 있습니다. 각 변형은 별개의 GIF 파일로 내보내집니다.

변형에 대해 자세히 알아보세요.

제한사항

애니메이션 GIF에서는 다음 기능을 사용할 수 없습니다.

• 페이지
• 구성요소
• 이벤트 및 자바스크립트 라이브러리
• 빠른 모드 타임라인
• 광고 검사기
• 하이퍼링크 텍스트
• 광고 환경
• 문서를 템플릿으로 저장하기
• 브라우저에서 문서 미리보기
• 여러 애니메이션 GIF 문서를 동시에 게시하기
• Google Drive, Studio, Display & Video 360 또는 Campaign Manager 360에 게시하기

애니메이션 GIF 미리보기

스테이지 미리보기

타임라인 컨트롤을 사용하여 스테이지에서 문서를 미리 볼 수 있습니다.

미리보기 범위의 첫 번째 프레임으로 이동합니다.

이전 프레임으로 돌아갑니다.

타임라인 플레이헤드에서 시작하는 미리보기를 재생합니다.

미리보기 재생을 일시중지합니다.

다음 프레임으로 이동합니다.

미리보기 범위의 마지막 프레임으로 이동합니다.

미리보기 재생을 반복 재생으로 전환합니다.

브라우저에서 미리보기 버튼을 사용한 미리보기는 애니메이션 GIF에서 사용 중지되었습니다.

미리보기 해상도

타임라인 위에 있는 미리보기 해상도 드롭다운을 사용하여 스테이지에서 동영상의 미리보기 해상도를 조정할 수 있습니다.

기본적으로 미리보기 해상도는 1/2로 설정되어 있지만 더 원활한 렌더링을 위해 1/4 또는 1/8로 줄이거나 전체 해상도로 높일 수 있습니다.

미리보기 내보내기

내보내기가 완료되면 내보내기 상태 대화상자에 완료된 파일을 볼 수 있는 옵션이 표시됩니다. 미리보기를 클릭하면 애니메이션 GIF의 게시된 크기 및 변형을 각각 확인할 수 있는 미리보기 대화상자가 열립니다.

미리보기 대화상자에서 다음과 같은 컨트롤을 사용할 수 있습니다.

• 미리보기 모드 - 다음 모드 간에 전환합니다.
  • 단일 크기
  • 모든 크기(여러 사이즈를 게시한 경우)
  • 모든 변형(여러 변형을 게시한 경우)
• 크기 표시 - 보려는 크기를 선택합니다.
• 변형 - 변형을 선택합니다.
• 다시보기 - 오른쪽 상단 모서리에 있는 이 버튼을 눌러 개별 크기 또는 변형을 다시 보거나 전체를 다시 볼 수 있습니다.

애니메이션 GIF 게시하기

문서를 GIF 파일로 내보낼 준비가 되면 파일 > 게시 메뉴 명령어 또는 게시 버튼을 사용합니다.

현재는 로컬에서만 파일 시스템에 애니메이션 GIF를 게시할 수 있습니다. 한 번에 하나의 애니메이션 GIF 문서만 게시할 수 있습니다.

내보내기 대화상자에는 애니메이션 GIF와 관련된 옵션이 포함되어 있습니다.

크기	여러 크기의 레이아웃이 있는 문서의 경우 모든 크기를 내보낼 수도 있고, 선택한 크기만 내보낼 수도 있습니다. 각 크기는 별도의 GIF 파일로 생성됩니다.
변형	여러 변형이 있는 문서의 경우 모든 변형을 내보낼 수도 있고, 선택한 변형만 내보낼 수도 있습니다. 각 변형은 별도의 GIF 파일로 생성됩니다.
프레임 속도	전체 또는 더 낮은 프레임 속도(fps)를 선택합니다.
해상도	전체 또는 낮은 해상도를 선택합니다. 왼쪽 패널의 요약에 있는 '크기'에는 현재 해상도의 크기가 픽셀 단위로 표시됩니다.
시간 범위	전체 타임라인 또는 미리보기 범위를 선택합니다.
색상	프레임(최대 256)의 최대 색상 수와 디더링 비율을 설정합니다. 비율이 높을수록 더 많은 색상을 시뮬레이션할 수 있지만 파일 크기가 커질 수 있습니다.
루프 횟수	애니메이션 GIF가 재생되는 횟수를 설정합니다. 연속 재생하려면 무한 체크박스를 선택합니다.

여러 변형 또는 크기를 선택하면 각각 개별 GIF 파일로 내보내집니다. 게시한 파일은 내보내기 대화상자에 지정된 폴더에서 찾을 수 있습니다.

내보내기 상태 대화상자에는 미리보기 옵션도 있으며, 이 옵션을 선택하면 애니메이션 GIF의 게시된 크기 및 변형을 미리 볼 수 있는 대화상자가 열립니다.