페이지 이해하기

Google Web Designer에서는 페이지를 사용하여 하나의 HTML 문서에 여러 장면을 표시하며 각 장면은 별도의 페이지로 표시됩니다. 페이지는 보통 광고를 위해 단일 화면 보기를 표시하는 광고에 사용됩니다. 예를 들면 다음과 같습니다.

• 단순한 배너 광고에서는 하나의 페이지만 사용합니다.
• 단순한 확장형 광고에서는 배너에 한 페이지를 사용하고 확장 보기에 다른 페이지를 사용합니다.
• 더 복잡한 광고에는 기본 페이지에 여러 버튼을 포함하여 시청자가 동영상 페이지나 쿠폰 페이지 등 다른 페이지의 여러 환경으로 이동하게 할 수 있습니다.

페이지는 광고에만 국한되지 않습니다. 새 파일을 만들 때 페이지가 있는 HTML을 선택하여 HTML 웹페이지에서 페이지를 사용할 수 있습니다.

문서의 페이지 모음을 페이지 데크라고 합니다.

페이지 메뉴

문서 작업공간의 왼쪽 하단에 있는 페이지 표시기를 클릭하여 페이지 데크에서 모든 페이지를 볼 수 있습니다. 팝업 메뉴에서 페이지를 추가, 복제 및 삭제할 수 있으며, 기본 페이지(시청자에게 처음 표시되는 페이지)를 지정할 수도 있습니다.

새 페이지 추가

1. 문서 작업공간의 하단에 있는 페이지 표시기를 클릭합니다.
2. 광고에 여러 페이지 크기가 사용되는 경우 만들려는 크기와 동일한 크기의 페이지를 선택합니다.
3. 팝업 메뉴에서 페이지 추가 버튼을 클릭합니다.

페이지 이름 변경

두 가지 방법으로 페이지 이름을 변경할 수 있습니다.

• 페이지 메뉴에서 바로 페이지 이름 변경:
  1. 문서 작업공간의 하단에 있는 페이지 표시기를 클릭합니다.
  2. 이름을 변경하려는 페이지를 더블클릭합니다.
  3. 새 이름을 입력합니다.
  4. Enter 키를 누릅니다.
• 페이지의 속성에서 페이지 이름 변경:
  1. 문서 작업공간의 하단에 있는 페이지 표시기를 클릭합니다.
  2. 이름을 변경하려는 페이지를 선택합니다.
  3. 속성 패널에서 이름 필드에 새 이름을 입력합니다.

페이지 복제

1. 문서 작업공간의 하단에 있는 페이지 표시기를 클릭합니다.
2. 복제할 페이지를 선택합니다.
3. 페이지 팝업 메뉴에서 페이지 복제 버튼을 클릭합니다. 그러면 요소, 구성요소, 애니메이션을 포함하여 현재 페이지의 사본이 생성됩니다.
4. 속성 패널에서 이름 필드에 새 페이지의 이름을 지정합니다.

페이지 삭제

1. 문서 작업공간의 하단에 있는 페이지 표시기를 클릭합니다.
2. 삭제할 페이지를 선택합니다.
3. 페이지 팝업 메뉴에서 페이지 삭제 버튼을 클릭합니다.

페이지를 기본 페이지로 설정

1. 문서 작업공간의 하단에 있는 페이지 표시기를 클릭합니다.
2. 페이지 팝업 메뉴에서 기본 페이지로 설정할 페이지를 마우스 오른쪽 버튼으로 클릭합니다.
3. 팝업 메뉴에서 기본으로 설정하기를 선택합니다. 기본 페이지에는 별표가 표시됩니다.

페이지 속성

현재 페이지의 속성을 보려면 속성 패널이 열려 있고 선택된 요소가 없는지 확인합니다. 스테이지 바깥쪽의 회색 영역을 클릭하면 모든 요소를 쉽게 선택 해제할 수 있습니다.

페이지 및 확장형 광고

확장형 광고의 확장 상태로 디자인된 페이지를 생성할 때는 페이지의 속성 패널에서 확장됨 옵션이 선택되어 있어야 합니다. 이 옵션은 새 파일의 광고 유형을 확장형으로 선택한 경우 생성되는 확장 페이지에 자동으로 설정됩니다.

기본적으로 확장형 광고는 오른쪽 아래로 확장됩니다. 광고가 다른 방향으로 확장되기를 원하는 경우 기본 페이지를 기준으로 확장 페이지의 위치를 변경할 수 있습니다.

광고를 중앙에 배치하기

광고는 여러 기기와 브라우저 크기에서 작동할 수 있어야 하므로, Google Web Designer는 광고가 표시되는 모든 표시 영역에서 광고 콘텐츠를 중앙에 배치할 수 있도록 해 줍니다. 이를 통해 다양한 크기로 광고를 디자인하고, 클릭 유도 문구 및 기타 콘텐츠를 광고 중앙에 배치하고, 다양한 크기의 표시 영역에서 작동하는 배경 이미지를 사용할 수 있습니다. 광고를 중앙에 배치하려면 페이지의 속성 패널에서 중앙 상자를 선택하세요.

다른 방향의 대체 페이지

방향별로 개별 페이지를 사용하여 세로 및 가로 방향 광고를 모두 디자인할 수 있습니다. 각 페이지의 대체 페이지 속성에서 다른 방향으로 만든 페이지 ID(페이지 이름 아님)를 지정하면 광고에서 표시 영역의 방향을 감지하고 일치하는 방향으로 페이지를 표시합니다.

여러 화면 크기에 맞춰 제작하는 방법을 자세히 알아보세요.

페이지 및 이벤트

이벤트를 사용하여 사용자가 페이지 간에 이동하는 방식을 제어할 수 있습니다. 예를 들어 탭 영역 구성요소를 사용하여 타겟 페이지에 '페이지로 이동' 작업을 전송하거나, 가로 및 세로 모드 간의 방향 변경을 사용하여 적절하게 형식이 지정된 페이지로 전환할 수 있습니다.

페이지 데크 작업

페이지 데크에서는 다음과 같은 구성 옵션으로 아래 작업을 할 수 있습니다.

작업	구성 옵션
선택한 페이지로 이동	페이지 ID - 전환할 타겟 페이지입니다. (AMP HTML 광고의 유일한 구성 옵션입니다.) 전환 - 타겟 페이지를 표시하는 모션 효과입니다. 길이 - 전환되는 시간(밀리초)입니다. 전환을 '없음'으로 설정하는 경우에는 적용되지 않습니다. 이징 - 전환의 이징 유형입니다. 방향 - 타겟 페이지가 표시되는 방향입니다. 일부 전환 유형에만 적용됩니다.

페이지 이벤트

페이지에서 전송한 이벤트에 대한 응답으로 실행되는 다른 작업을 설정할 수도 있습니다. 페이지에서는 다음 이벤트를 전송합니다.

이벤트	설명
페이지 활성화됨	페이지가 표시되면 전송됩니다.
페이지 비활성화됨	페이지가 숨겨지면 전송됩니다.
페이지 로드됨	페이지의 모든 구성요소가 로드되면 전송됩니다.
페이지 표시 준비 완료	페이지가 콘텐츠 캐싱을 완료하여 표시될 준비가 되었지만 애니메이션이 아직 시작되지 않은 경우 전송됩니다.
흔들기	휴대기기에서 흔들기를 감지하면 전송됩니다.
기울이기	휴대기기에서 기울이기를 감지하면 전송됩니다.
회전하여 세로 표시	휴대기기가 가로에서 세로 방향으로 회전하면 전송됩니다.
회전하여 가로 표시	휴대기기가 세로에서 가로 방향으로 회전하면 전송됩니다.
연결됨 (지원 중단됨)	대신 활성화된 페이지를 사용합니다.
분리됨 (지원 중단됨)	대신 비활성화된 페이지를 사용합니다.

AMP HTML 광고의 페이지 데크 이벤트

AMP HTML 광고의 경우 페이지 데크에서 다음 이벤트를 전송합니다.

이벤트	설명
페이지 변경	페이지가 변경되면 전송됩니다.