시차 구성요소

시차 구성요소를 사용하면 이미지 레이어를 통해 깊이 착시 효과를 일으킬 수 있습니다. 뷰어가 휴대기기에서 해당 페이지를 위나 아래로 스크롤할 때 전경과 배경 이미지가 다른 속도로 움직입니다.

프로젝트에 Parallax 구성요소를 추가하는 방법:

1. 구성요소 패널을 연 다음 상호작용 폴더를 엽니다.
2. 시차 구성요소를 스테이지로 드래그합니다.
3. 구성요소를 더블클릭하여 구성요소 수정 모드로 전환합니다.
4. 파일 시스템에 있는 이미지 파일을 스테이지나 레이어 패널(Windows 또는 Mac만 해당)로 드래그하거나 레이어 패널 하단에 있는 이미지 추가 버튼을 클릭하여 레이어를 추가합니다. 이미지만 레이어로 추가할 수 있습니다.
5. 시작 및 종료 탭을 사용해 애니메이션 시작 및 종료 지점에서 표시되어야 하는 위치에 각 레이어를 배치합니다. 레이어를 원하는 위치로 드래그하거나 레이어 속성 패널의 시작 및 종료 입력란을 사용해 위치를 지정할 수 있습니다. 중간 상태는 시작 탭의 오른쪽에 마우스를 가져간 후 버튼을 클릭하여 추가할 수도 있습니다.
6. 필요한 경우 추가 구성 옵션을 설정합니다.
7. 구성요소가 만족스럽다면(작업 중 미리보기로 확인 가능) 저장을 클릭합니다. 그러면 평소와 같은 Google Web Designer 인터페이스로 돌아갑니다.

시차 구성요소

구성 옵션

구성요소를 구성하려면 스테이지에서 구성요소를 더블클릭하거나, 구성요소를 선택하고 속성 패널에서 설정… 클릭합니다.

레이어 추가

레이어를 추가하는 방법은 두 가지입니다.

• 파일 시스템(Mac 또는 Windows만 해당) 또는 라이브러리에 있는 파일을 스테이지 또는 레이어 패널로 드래그합니다.
• 레이어 패널 하단의 이미지 추가 버튼을 클릭합니다.

시차 구성요소의 레이어는 이미지여야 합니다.

레이어 이동

1. 이동할 레이어를 선택합니다.
2. 시작, 중간 또는 종료 탭을 선택합니다. 아직 추가하지 않은 경우 중간 상태를 추가할 수 있습니다.
3. 다음 방법 중 하나를 사용하여 레이어를 배치합니다.
   • 레이어를 새 위치로 드래그합니다.
   • 화살표 키를 사용하여 레이어를 한 번에 1픽셀씩 이동합니다. Shift 키를 누른 상태에서 화살표 키를 누르면 레이어를 화살표 방향으로 10픽셀씩 이동할 수 있습니다.
   • 레이어 속성 탭의 시작, 중간 또는 종료 위치 속성을 설정합니다. 현재 탭과 일치하는 속성만 수정할 수 있습니다. 다른 위치를 복사하려면 시작 위치와 맞추기, 중간 위치와 맞추기 또는 종료 위치와 맞추기 버튼을 사용합니다.

애니메이션의 다른 지점에 있는 레이어의 위치를 조정하려면 다른 탭으로 전환하세요.

이미지 대체

1. 스테이지에서 대체할 이미지를 마우스 오른쪽 버튼으로 클릭하고 팝업 메뉴에서 이미지 대체...를 선택합니다.
2. 라이브러리에서 이미지를 선택하거나 파일 가져오기 버튼을 클릭하여 컴퓨터에서 이미지 파일을 선택합니다.

원본 이미지가 새 이미지로 대체됩니다. 원본 이미지의 크기를 이전에 조절한 경우 새 이미지에서도 조절된 크기가 사용됩니다. 그렇지 않으면 새 이미지는 기본 크기를 사용합니다.

레이어 재정렬

레이어 패널에서 레이어를 목록의 새 위치로 드래그합니다.

레이어 순서는 서로 간에 어떤 레이어가 앞쪽에 표시되는지를 결정합니다. 위쪽에 나열된 레이어가 아래쪽에 나열된 레이어의 앞에 표시됩니다.

레이어 삭제

1. ​삭제하려는 레이어를 선택합니다.
2. 레이어 패널 하단의 삭제 버튼을 클릭하거나 삭제 키를 누릅니다.

레이어 크기 조절

1. 크기를 조절하려는 레이어를 선택합니다.
2. 레이어 속성 패널에서 레이어의 너비 및 높이를 픽셀 단위로 설정합니다.
   • 가로세로 비율 제한 버튼을 클릭하면 너비와 높이의 가로세로 비율 고정 여부를 전환할 수 있습니다.

레이어는 애니메이션 재생 시간 처음부터 끝까지 지정된 크기로 확장/축소됩니다.

레이어 불투명도 변경

1. 변경하려는 레이어를 선택합니다.
2. 레이어 속성 패널에서 시작 또는 종료 불투명도를 0에서 1 사이의 값(0은 투명, 1은 불투명)으로 설정합니다.

레이어 애니메이션 이징 변경

1. 변경하려는 레이어를 선택합니다.
2. 레이어 속성 패널의 이징 드롭다운에서 이징 유형을 선택합니다.

맞춤 이징은 사용할 수 없습니다.

중간 상태 추가

시차 구성요소 애니메이션을 보다 더욱 세밀하게 제어하려는 경우 중간 상태를 추가하고 레이어 속성을 변경할 수 있습니다.

1. 시작 탭의 오른쪽에 마우스를 가져간 다음 버튼을 클릭합니다. 중간 탭이 표시됩니다.
2. 기본적으로 중간 상태는 애니메이션 시작 및 종료 지점 사이의 중간 지점에 설정됩니다. 애니메이션 시간을 조정할 수 있습니다.
3. 이 지점에서 중간 탭으로 전환하여 레이어 속성을 설정합니다.

중간 상태를 제거하려면 중간 탭의 오른쪽에 마우스를 가져간 후 X를 클릭합니다.

애니메이션 시간 변경

시차 구성요소의 애니메이션 시간은 페이지에서 구성요소가 얼마나 많이 표시되었는지, 또는 페이지에서 얼마나 사라졌는지에 따라 결정됩니다. 기본적으로 애니메이션은 구성요소의 상단 가장자리가 페이지에 나타나기 시작할 때(0%) 시작하고, 하단 가장자리가 페이지 상단에서 사라질 때(100%) 종료됩니다. 중간 상태를 추가한 경우 애니메이션 중에 중간 상태가 나타나는 시점도 조정할 수 있습니다. 다음과 같은 두 가지 방법으로 애니메이션 시간을 조정할 수 있습니다.

• 애니메이션 시간 패널에서 시작, 중간, 종료 상자 또는 슬라이더를 원하는 비율로 드래그합니다.
• 애니메이션 시간 패널의 입력란에 시작, 중간, 종료 지점 비율을 입력합니다.

레이어 숨기기 및 표시

레이어 패널에서 레이어 썸네일 이미지 옆에 있는 상자를 클릭합니다(모든 레이어 숨기기 버튼).

모든 레이어 숨기기 버튼을 클릭하여 레이어를 모두 숨기거나 표시할 수 있습니다.

레이어를 숨기면 다른 레이어와 관련하여 작업하기가 수월하며 숨겨진 레이어가 구성 미리보기에 표시되지 않게 할 수 있지만 브라우저 미리보기나 게시된 광고 소재에는 아무런 영향을 미치지 않습니다.

고스트 표시 및 숨기기

1. 레이어를 선택합니다.
2. 레이어 속성 패널의 고급 속성 아래에서 고스트 표시 토글을 클릭합니다.

고스트는 현재 수정하고 있지 않은 모든 위치에 있는 레이어의 반투명 버전이므로 시작, 중간 및 종료 위치를 시각적으로 비교할 수 있습니다. 고스트는 참조 전용이며 미리보기 또는 게시된 파일에 표시되지 않습니다.

속성

구성요소 속성

구성요소 속성은 속성 패널에서 볼 수 있습니다. (구성요소 수정 모드를 종료해야 함)

속성	설명
이름	시차 구성요소의 이름입니다.
스크롤 요소	뷰어가 스크롤한 범위를 나타내는 0~1의 숫자입니다. Google Web Designer 스테이지에 표시하기 위한 용도로만 사용됩니다. 기본값은 '0.5'입니다.

레이어 속성

구성요소 수정 모드에서는 레이어 속성을 보거나 수정할 수 있습니다.

속성	설명
이름	레이어의 이름입니다. (수정 불가)
시작	구성요소가 처음 시야에 들어올 때(즉, 구성요소의 상단 가장자리가 표시 영역의 하단 가장자리에 위치할 때) 구성요소의 왼쪽 및 상단부터 레이어까지의 거리이며, 픽셀 단위 또는 백분율로 측정됩니다. 시작 탭을 선택하면 수정 가능합니다.
중간	애니메이션의 중간 상태에서 구성요소의 왼쪽 및 상단부터 레이어까지의 거리이며, 픽셀 단위 또는 백분율로 측정됩니다. 중간 탭을 선택하면 수정 가능합니다.
종료	구성요소가 시야에서 벗어나기 직전(즉, 구성요소의 하단 가장자리가 표시 영역의 상단 가장자리에 위치할 때)에 구성요소의 왼쪽 및 상단부터 레이어까지의 거리이며, 픽셀 단위 또는 백분율로 측정됩니다. 종료 탭을 선택하면 수정 가능합니다.
크기	레이어의 너비 및 높이입니다. 애니메이션 재생 시간 처음부터 끝까지 레이어에 영향을 미칩니다.
불투명도	레이어의 시작 및 종료 불투명도로, 0(투명)에서 1(불투명) 사이의 숫자로 표시됩니다.
이징	레이어 애니메이션의 이징 유형입니다. 맞춤 이징은 사용할 수 없습니다.
고스트 표시	사용 설정하면 레이어의 반투명 버전이 비활성 위치(현재 수정하고 있지 않는 위치)에 표시됩니다.

이벤트

이벤트를 사용하여 광고에 다른 작업을 실행할 수 있습니다. 시차 구성요소는 다음 이벤트를 전송합니다.

이벤트	설명
시차 로드됨	구성요소를 표시할 준비가 되면 전송됩니다.

미리보기

구성 중 사용 시