Adobe Muse에서 페이지 요소에 대해 동작 및 불투명도 스크롤 효과를 적용하는 방법에 대해 알아봅니다.

참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

페이지 요소에 스크롤 효과 적용하기

[스크롤 효과] 패널에는 페이지를 스크롤하는 방법을 기준으로 하여 동작, 투명도, 슬라이드 쇼 위젯 및 Adobe Edge Animate 컨텐트를 제어하는 네 개의 다른 탭이 있습니다. 스크롤 효과가 서로 함께 적용되는 경우 및 일부 요소가 핀으로 고정되어 있거나, 100% 폭으로 설정되어 있거나 [레이어] 패널을 사용하여 서로 위와 아래에 정렬되어 있는 경우 다양하고 멋진 효과를 만들 수 있습니다.

스크롤 효과 패널을 사용하여 동작 스크롤 효과 적용

스크롤 효과 패널의 인터페이스는 브라우저 채우기 및 배경 채우기를 위한 스크롤 효과 패널의 인터페이스와 비슷합니다. 다음 단계에 따라 스크롤 효과 패널의 [동작] 탭을 사용하여 페이지 요소에 스크롤 효과를 적용합니다.

  1. Muse에서 디자인 보기로 전환하고 [페이지] > [페이지 속성]을 선택합니다.
  2. 페이지를 충분히 길게 스크롤할 수 있도록 최소 높이값을 2000픽셀로 설정합니다.
  3. [확인]을 클릭하여 변경 사항을 저장하고 [페이지 속성] 대화 상자를 닫습니다.
  4. 디자인 보기에서 페이지에 사각형 또는 텍스트 프레임을 그립니다.
  5. [채우기] 메뉴의 [채우기] 탭을 사용하여 바둑판식 또는 비 바둑판식으로 배열된 배경 이미지를 추가합니다. 또는 단색이나 그라데이션 채우기 색상만 선택합니다.
  6. [창] > [스크롤 효과]를 선택하여 [스크롤 효과] 패널을 엽니다.
[스크롤 효과] 패널을 열어서 스크롤 효과 설정에 액세스합니다.
[스크롤 효과] 패널을 열어서 스크롤 효과 설정에 액세스합니다.

  1. 스크롤 효과 활성화: 스크롤 효과 패널을 보면 [동작] 탭이 표시됩니다(맨 왼쪽). 페이지 요소를 선택할 때는 [동작] 확인란을 사용합니다.

    팁: [동작] 확인란을 선택하면 T 핸들이 위쪽 가장자리를 지나서 확장되는 요소에 추가됩니다. T 핸들은 요소에 적용된 스크롤 효과가 적용된 키 위치를 나타냅니다. 방문자가 스크롤하는 동안 해당 키 위치에 도달하면 스크롤 효과가 적용되기 시작합니다.

    T 핸들은 컨트롤은 기본적으로 해당 요소 위에 나타납니다. 하지만, 핸들을 클릭하고 드래그하여 더 높이 확장하거나, 아래로 드래그하여 제어하는 요소의 위쪽 가장자리에 맞추거나, 요소 아래로 핸들을 드래그할 수 있습니다.

  2. T 핸들 위치를 조정하여 키 위치 설정: T 핸들을 드래그하여 키 위치를 설정합니다. 이렇게 하면 스크롤한 페이지가 T 핸들 상단에 도달한 전후에 발생할 움직임을 설정할 수 있습니다.

    또는, [동작] 탭이 활성화된 상태에서 [스크롤 효과] 패널의 가운데에 있는 [키 위치] 필드에 숫자 값을 입력할 수 있습니다. 위의 이미지에서 키 위치가 200픽셀로 설정되어 있습니다. 

    T자 핸들의 위치는 요소의 키 위치를 나타냅니다. 페이지를 세로로 스크롤할 때 [시작 동작] 섹션의 설정이 적용되므로 요소의 위치가 디자인 보기에 표시된 대로 해당 위치와 일치합니다.

    방문자가 페이지를 스크롤하거나 기준점 링크를 클릭하여 요소의 키 위치를 지나서 이동하면 [최종 동작] 섹션의 설정이 적용됩니다.

    [시작 동작] 섹션에는 세로와 가로 방향 화살표와 속도 옵션이 있습니다.

  3. [시작 동작]의 세로 방향 설정: 세로 단추 중 하나를 클릭하여 세로 방향(위 또는 아래)을 선택합니다. 세로 방향 화살표 옆에 있는 필드에 속도 값을 입력하여 페이지 스크롤 속도를 기준으로 하여 발생하는 이동 속도를 설정합니다. 0을 입력하면 요소가 세로로 이동하지 않습니다. 소수점을 사용하여 백분율을 입력할 수도 있습니다. 예를 들어, .5를 입력하면 요소가 페이지 스크롤 비율에 비해 절반 비율로 세로 방향으로 이동합니다.

  4. [시작 동작]의 가로 방향 설정: 요소가 키 위치에 도달하기 전에 이동하는 방향을 설정하려면 왼쪽 또는 오른쪽 화살표를 클릭하여 요소를 스크롤하는 가로 방향(왼쪽 또는 오른쪽)을 설정합니다. 가로 화살표 오른쪽에 있는 필드에서 가로 방향에 대한 속도 값을 설정합니다. 요소가 가로 방향으로 이동하지 않도록 하려면 초기 가로 속도 필드를 0으로 설정합니다,

  5. 7-8단계를 반복하여 [최종 동작] 섹션의 동작 방향 및 비율을 설정합니다.

아래 표시된 예에서 키 위치가 500픽셀로 설정되어 있습니다. 브라우저에서 스크롤을 시작하면 페이지 스크롤 비율과 같은 1배 비율로 요소가 아래 위치로 이동합니다. 페이지가 키 위치로 스크롤할 때 요소가 해당 위치에 도착합니다. 페이지가 키 위치를 지나서 스크롤하면 요소가 페이지 스크롤 속도의 2배로 오른쪽으로 이동합니다.

Adobe Muse에서 동작 설정을 적용하여 스크롤 효과 설정
동작 설정을 적용하여 스크롤 효과 설정

  1. [미리 보기]를 누르거나 브라우저의 [파일] > [페이지 미리 보기]를 선택하여 스크롤 효과를 테스트합니다. 페이지를 아래로 스크롤하고 다시 위로 스크롤하여 요소 이동을 확인합니다.
  2. 테스트를 마치면 Muse로 돌아가거나 [디자인] 단추를 클릭하여 페이지를 계속 편집합니다.

스크롤 효과 패널을 사용하여 불투명도 스크롤 효과 적용

이 섹션에서는 방문자의 스크롤 조작을 기준으로 하여 요소 표시를 변경하는 가시성에 변환을 적용하는 방법에 대해 알아보겠습니다. 이 방법은 방문자가 페이지 아래의 새 섹션으로 스크롤할 때 항목이 페이드 인 및 페이드 아웃되도록 하여 컨텐트를 표시하고 숨길 때 유용합니다. [스크롤 효과] 패널의 [불투명도] 탭을 사용하여 페이지 요소의 투명도에 영향을 주는 스크롤 효과를 적용하려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 페이지를 편집하는 동안 [페이지 속성]의 [최소 높이] 필드에 대부분의 모니터의 평균 높이보다 높은 픽셀 값(예: 2000픽셀)이 있는지 확인합니다. 또는, 페이지 컨텐트를 페이지에 추가하여 스크롤할 수 있을 만큼 긴지 확인할 수 있습니다.
  2. 디자인 보기에서 페이지에 사각형 또는 텍스트 프레임을 그립니다.
  3. [채우기] 메뉴의 [채우기] 탭(또는 [채우기] 패널)을 사용하여 바둑판식 또는 비 바둑판식으로 배열된 배경 이미지를 선택한 페이지 요소에 추가하거나 단색 또는 그라데이션 채우기 색상을 설정합니다. 또는, 페이지에 Adobe Edge Animate OAM 파일을 배치하거나 슬라이드 쇼 위젯을 추가합니다.
  4. 요소를 선택한 상태에서 [스크롤 효과] 패널의 [불투명도] 탭(왼쪽에서 두 번째 탭)을 클릭한 다음 [불투명도] 확인란을 선택합니다.
선택한 요소에 대해 불투명도 스크롤 효과를 사용하려면 [불투명도] 확인란을 선택합니다.
선택한 요소에 대해 불투명도 스크롤 효과를 사용하려면 [불투명도] 확인란을 선택합니다.

[불투명도] 옵션을 사용하면 다른 종류의 핸들이 요소에 표시됩니다. [동작] 탭에서 키 위치를 설정할 때 사용한 T 핸들처럼 핸들을 클릭하고 드래그하여 요소 위에 표시되도록 하거나, 아래로 드래그하여 위쪽 가장자리에 맞추거나(또는 요소의 임의 부분의 위) 요소 아래로 드래그할 수 있습니다. 불투명도 핸들에는 독립적으로 드래그하여 키 위치, 페이드 위치 1 및 페이드 위치 2 값을 설정할 수 있는 세 부분이 있습니다.

  1. 핸들의 가운데 사각형 부분을 클릭하고 드래그하여 키 위치를 설정합니다. 아래 예에서 키 위치가 150픽셀로 설정되어 있습니다.
가운데 사각형 핸들을 세로로 드래그하여 키 위치를 설정합니다.
가운데 사각형 핸들을 세로로 드래그하여 키 위치를 설정합니다.

  1. 핸들의 위쪽 원형 부분을 클릭하고 드래그하여 원하는 위치에 배치합니다. 아래 예에서 페이드 위치 1이 100픽셀로 설정되어 있습니다.
불투명도 핸들의 페이드 위치 1 설정
회전 핸들 위쪽, 왼쪽을 클릭하고 드래그하여 요소의 투명도에 영향을 주는 첫 번째 위치를 설정합니다.

  1. 핸들의 아래쪽 원형 부분을 클릭하고 드래그하여 원하는 위치에 배치합니다. 아래 예에서 페이드 위치 2가 200픽셀로 설정되어 있습니다.
불투명도 핸들의 페이드 위치 2 설정
회전 핸들 위쪽, 오른쪽을 클릭하고 드래그하여 요소의 투명도에 영향을 주는 두 번째 위치를 설정합니다.

참고:

키 위치를 페이드 위치 핸들을 따라 드래그하여 같은 값으로 설정할 수 있습니다. 핸들을 드래그하지 않고 [스크롤 효과] 패널의 해당 필드에 각각 숫자 값을 입력할 수도 있습니다.

이 예에서 요소는 완전히 투명한 요소에서 시작하여 점점 불투명해지며, 페이지가 키 위치에 도달하면 완전히 불투명해집니다(키 위치에 해당하는 [불투명도] 값은 현재 100%로 설정되어 있음). 페이지가 키 위치를 지나서 스크롤하면 요소가 다시 점점 투명해지며, 페이지가 200픽셀을 지나서 스크롤하면 보기가 페이드 아웃됩니다.

스크롤 효과를 위해 불투명도 비율 설정
[스크롤 효과] 패널의 [불투명도] 탭에서 불투명도 비율을 설정합니다(0%는 완전히 투명함).

  1. [미리 보기]를 누르거나 브라우저의 [파일] > [페이지 미리 보기]를 선택하여 스크롤 효과를 테스트합니다. 페이지 아래로 스크롤하고 다시 위로 스크롤하여 페이지 스크롤에 따른 요소의 불투명도 변화를 확인합니다.
  2. 테스트를 마치면 Muse로 돌아가거나 [디자인] 단추를 클릭하여 페이지를 계속 편집합니다.

스크롤 효과 패널의 슬라이드 쇼 탭 작업

스크롤 동작의 일반적인 또 다른 용도는 슬라이드 쇼에서 이미지 표시와 스크롤을 결합하는 것입니다. 슬라이드 쇼 위젯을 페이지에 추가한 다음 [스크롤 효과] 패널의 [슬라이드 쇼] 탭을 사용하여 페이지가 특정 위치로 스크롤될 때마다 슬라이드 쇼에 자동으로 새 이미지 표시와 같은 스크롤 효과를 적용할 수 있습니다.

[슬라이드 쇼] 탭(왼쪽에서 세 번째 탭)을 클릭하여 이 섹션에 대한 설정을 검토합니다.

스크롤 동작 인터페이스의 이 부분에 대한 일반적인 용도는 슬라이드 쇼 위젯을 페이지에 핀으로 고정하는 것입니다. 일반적으로, 슬라이드 쇼 위젯은 더 큰 슬라이드 쇼 컨테이너만 표시하고 [다음] 및 [이전] 단추와 축소판을 숨기도록 구성됩니다([옵션] 메뉴 사용).

전체 화면 슬라이드 쇼는 특히 이 효과에 적합하지만 추가하도록 선택한 슬라이드 쇼 위젯 종류는 사이트 디자인에 따라 다릅니다.

슬라이드 쇼 위젯에 스크롤 효과를 적용하려면 다음 단계를 수행하십시오.

  1. [페이지 속성] 대화 상자의 [최소 높이] 필드를 업데이트하여 페이지가 스크롤할 수 있을 만큼 긴지 확인합니다. 또는 페이지를 더 길게 만들려면 컨텐트를 추가합니다.
  2. 위젯 라이브러리에서 페이지로 슬라이드 쇼 위젯을 드래그합니다. [옵션] 메뉴를 사용하여 슬라이드 쇼 옵션을 구성합니다. 스크롤 효과를 슬라이드 쇼 위젯에 적용할 때 일반적으로 [다음], [이전] 및 [축소판] 옵션이 비활성화됩니다.
  3. [옵션] 메뉴의 [이미지] 섹션 옆에 있는 폴더를 클릭하여 슬라이드 쇼 위젯에 이미지를 추가합니다. 컴퓨터에서 추가할 이미지를 찾아서 선택하여 이미지 갤러리를 채웁니다.
  4. [제어판]에서 [핀] 인터페이스를 사용하여 슬라이드 쇼를 브라우저 창의 현재 위치에 핀으로 고정합니다. 슬라이드 쇼를 선택한 상태에서 여섯 개 핀 위치 중 하나를 클릭합니다.
슬라이드 쇼 위젯에 스크롤 효과 적용
페이지를 스크롤할 때 슬라이드 쇼 위젯이 브라우저 창의 위치에 남아 있도록 슬라이드 쇼 위젯을 특정 위치에 핀으로 고정합니다.

핀으로 고정한 슬라이드 쇼를 추가 및 구성한 경우에는 스크롤 효과를 추가할 수 있습니다.

[스크롤 효과] 패널의 [슬라이드 쇼] 탭에서 슬라이드 쇼 위젯을 선택한 상태에서 [슬라이드 쇼] 확인란을 선택합니다.

[스크롤 효과] 패널의 [슬라이드 쇼] 옵션을 사용합니다.
슬라이드 쇼 위젯을 선택하고 [스크롤 효과] 패널의 [슬라이드 쇼] 옵션을 사용합니다.

[슬라이드 쇼] 옵션을 선택하면 키 위치에 대한 핸들이 디자인 보기의 슬라이드 쇼에 바로 추가됩니다. 키 스크롤 위치 값을 업데이트하려면 핸들 왼쪽 및 오른쪽을 드래그하거나 [키 스크롤 위치] 필드에 숫자를 입력할 수 있습니다. [스크롤 효과] 패널에서 위쪽 및 아래쪽 화살표를 클릭하여 숫자 값을 늘리거나 줄일 수도 있습니다.

[스크롤 효과] 패널의 [슬라이드 쇼] 탭은 두 개 단추가 있는 인터페이스로, 각 단추는 슬라이드 쇼 이미지 재생을 제어하는 방법을 제공합니다. 슬라이드 쇼가 자동으로 재생되도록 설정하거나, 페이지 스크롤을 기준으로 하여 이미지가 넘어가도록 설정할 수 있습니다.

첫 번째 방법은 원하는 키 위치를 설정한 다음 [자동 재생] 확인란을 선택하는 것입니다.

페이지가 키 위치를 지나 스크롤되면(또는 방문자가 기준점 태그에 대한 링크를 클릭하여 키 위치를 지나 페이지 아래로 이동하면) 슬라이드 쇼 재생이 시작됩니다. 자동 재생 기능은 페이지 스크롤이 키 위치 위로 백업되거나 방문자가 이 페이지를 나갈 때까지 설정을 반복하여 이미지를 계속 표시합니다.

위 이미지에 표시된 예에서 슬라이드 쇼는 페이지가 100픽셀로 스크롤되면(또는 해당 키 위치 설정 이하인 경우) 재생을 시작합니다. 방문자가 백업을 스크롤하는 경우 페이지가 키 위치 위로 스크롤되면(99픽셀 이하) 슬라이드 쇼 재생이 중단됩니다.

슬라이드 쇼 위젯을 제어하는 두 번째 방법은 키 위치를 설정한 다음 [슬라이드 전환 간격] 라디오 단추를 사용하는 것입니다. 이 작업 과정에서 라디오 단추 아래에 있는 필드에 픽셀 수를 설정하여 페이지가 스크롤되는 정도를 기준으로 하여 슬라이드 쇼에서 이미지가 넘어가는 빈도를 나타냅니다.

예를 들면, 슬라이드 쇼 위젯을 더 긴 페이지에 핀으로 고정할 수 있으므로 다른 페이지 컨텐트가 스크롤되는 동안 이미지가 고정된 위치에 남아 있습니다. [슬라이드 전환 간격] 옵션에 대해 숫자 값을 설정하여 페이지가 지정된 픽셀 수로 스크롤될 때마다 설정에서 다음 이미지로 전환하도록 슬라이드 쇼를 설정할 수 있습니다.

위의 이미지에서 키 위치가 200으로 설정되어 있습니다. 페이지가 맨 위에서 200픽셀을 지나서 스크롤되면 페이지가 또 다른 30픽셀을 스크롤할 때마다 시리즈에서 다음 이미지가 슬라이드 쇼에 표시됩니다.

Adobe Muse에서 슬라이드 쇼에 스크롤 효과 설정
페이지가 특정 거리(픽셀 단위)를 스크롤할 때마다 다음 이미지로 넘어가도록 슬라이드 쇼를 설정합니다.

스크롤 효과 패널의 Adobe Edge Animate 탭 작업

Adobe Edge Animate는 HTML5 기반 웹 애니메이션을 만들 수 있는 직관적인 디자인 도구입니다. Edge Animate의 인터페이스를 사용하면 반복 동작 그래픽 및 기호를 사용하여 컴포지션을 작성할 수 있습니다. Adobe Edge Animate를 사용하여 만든 애니메이션을 OAM 파일로 내보낸 다음 Muse 사이트 페이지에 배치할 수 있습니다. Edge Animate에서 만든 애니메이션은 플러그인 없이 브라우저에서 재생할 수 있습니다.

Adobe Edge Animate에서 애니메이션을 구성할 때 요소를 스테이지로 드래그하고 타임라인을 사용하여 요소의 이동을 조작합니다. 요소를 기본 타임라인에 직접 추가하는 것 외에도 고유한 내부 타임라인을 사용하여 재생하는 하위 요소로 중첩된 요소를 만들 수도 있습니다. Adobe Edge Animate 작업에 대해 자세히 알아보려면 Adobe Edge Animate 제품 페이지를 참조하십시오. 또한, Adobe TV에서 Adobe Edge Animate 비디오 자습서를 보십시오.

Adobe Edge Animate 스크롤 동작 기능을 사용하기 위해 첫 단계에 이러한 목적을 위한 컴포지션 디자인이 포함됩니다. 기본 타임라인에 배치된 애니메이션에 영향을 주기 위해 OAM 파일에 스크롤 효과를 적용할 수 있습니다. 페이지가 스크롤될 때 이동할 항목만 기본 타임라인에 있도록 애니메이션을 전략적으로 디자인하고 중첩된 기호 타임라인으로 애니메이션에 다른 모든 것을 배치하여 대화형 애니메이션을 만들 수 있습니다. 방문자가 페이지를 스크롤할 때 스크롤 효과 설정은 기본 타임라인에서 애니메이션 요소 재생만 제어합니다.

Adobe Muse 사이트에 추가할 애니메이션 만들기에 대한 자세한 내용은 Adobe Edge Animate 컨텐트 추가를 참조하십시오.

[스크롤 효과] 패널에서 [슬라이드 쇼] 탭을 사용하려면 다음 단계를 수행하십시오.

  1. Adobe Edge Animate에서 OAM 파일을 내보낸 다음 사이트 폴더에 저장합니다.
  2. Muse를 실행하고 페이지를 두 번 클릭하여 디자인 보기에서 엽니다. [페이지 속성] 대화 상자에서 최소 높이 설정을 업데이트하거나 페이지 컨텐트를 추가하여 더 긴 페이지를 만들어서 스크롤하기에 페이지 길이가 충분한지 확인합니다.
  3. [파일] > [배치]를 선택하고 사이트 폴더에서 OAM 파일을 찾아서 선택합니다.
  4. [스크롤 효과] 패널을 엽니다. [Adobe Edge Animate] 탭(왼쪽에서 네 번째 탭)을 클릭하여 이 섹션에 대한 설정을 검토합니다.
  5. OAM 파일을 선택한 상태에서 [Edge Animate] 확인란을 선택합니다.
Adobe Muse에서 애니메이션에 스크롤 효과 설정
페이지가 특정 위치로 스크롤될 때 재생을 시작하도록 Edge Animate 애니메이션을 설정하거나 페이지가 특정 거리(픽셀 단위)를 스크롤할 때마다 프레임을 전환하도록 설정합니다.

위의 이미지에서 키 위치가 50픽셀로 설정되어 있습니다. T 핸들을 드래그하거나 키 위치 필드에 다른 값을 입력하여 키 위치를 조정할 수 있습니다.

키 위치를 설정한 후에 다음 두 가지 옵션을 사용하여 애니메이션 재생을 제어할 수 있습니다.

  • 자동 재생: 이 옵션을 선택한 경우에는 기본 타임라인의 프레임 수에 관계없이 브라우저가 키 위치로 스크롤되면 바로 기본 타임라인의 애니메이션이 재생을 시작합니다. 페이지가 키 위치 위로 스크롤될 때까지 애니메이션이 계속 재생됩니다.
  • 프레임 전환 간격: 이 옵션을 선택한 경우에는 페이지가 특정 픽셀 수를 지나서 스크롤될 때마다 기본 타임라인 애니메이션이 1 프레임씩 넘어갑니다. 예를 들어, 3000픽셀 이상인 페이지를 만들고 숫자 10을 입력하면 기본 타임라인 애니메이션은 페이지가 스크롤되는 10픽셀마다 1 프레임 비율로 재생됩니다. 방문자가 페이지를 빠르게 아래로 스크롤하면 애니메이션 비율이 늘어납니다.

참고:

컴포지션의 기본 타임라인에서 중첩되었거나 연결된 모든 Adobe Edge Animate 컴포지션은 스크롤 동작 효과 설정이 적용되지 않습니다. 따라서 페이지를 스크롤하기 위한 방문자의 상호 작용에 관계없이 일관되게 이동하는 반복되는 중첩된 요소나 고정 배경을 갖도록 선택할 수 있습니다.

  1. [스크롤 효과] 패널의 [Edge Animate] 탭에서 설정을 선택한 후에 [파일] > [브라우저에서 페이지 미리 보기]를 선택하거나 [미리 보기] 단추를 클릭합니다. 위아래로 스크롤하며 페이지를 테스트하여 기본 타임라인에 추가된 Edge Animate 애니메이션 컨텐트 재생을 확인합니다.
  2. 변경해야 하는 경우에는 Muse로 돌아가거나 [디자인] 단추를 클릭하고 [스크롤 효과] 패널에서 설정을 업데이트합니다.

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책