Adobe Muse를 사용하여 웹 사이트의 브라우저 및 배경 채우기에 스크롤 효과를 추가하는 방법을 알아봅니다.

참고:

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

이미지 세트에 브라우저 채우기로 스크롤 효과 적용

스크롤 효과를 통해 브라우저 배경 채우기 이미지와 바둑판식 배열 또는 비 바둑판식 배열 페이지 요소의 속도를 제어할 수 있습니다. 스크롤 효과는 바둑판식 배열, 대상에 맞게 비율 조정, 채우기에 맞게 비율 조정 또는 원래 크기로 설정된 배경 이미지를 사용하는 브라우저 채우기에 적용할 수 있습니다. 브라우저 채우기는 페이지가 스크롤될 때 [브라우저 채우기] 메뉴의 [스크롤] 섹션에서 설정한 방향과 속도를 기준으로 하여 일정한 방향으로 이동합니다.

참고:

스크롤 옵션이 흐려지며, [브라우저 채우기] 메뉴를 사용하여 브라우저 채우기 배경에 이미지를 추가할 때까지 사용할 수 없습니다. 단색 또는 그라데이션 색상으로만 채워진 브라우저 채우기에는 스크롤 효과를 적용할 수 없습니다.

브라우저 채우기에 스크롤 효과를 어떻게 추가합니까?

브라우저 채우기에 대한 스크롤 동작 효과를 설정하려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [레이아웃] 탭에서 최소 높이를 2000픽셀로 설정합니다. 이렇게 하면 페이지가 스크롤할 수 있을 만큼 길게 됩니다. [확인]을 클릭하여 변경 사항을 저장하고 [페이지 속성] 대화 상자를 닫습니다.
페이지를 더 길게 하려면 [페이지 속성]에서 [최소 높이] 필드를 업데이트합니다.
페이지를 더 길게 하려면 [페이지 속성]에서 [최소 높이] 필드를 업데이트합니다.

  1. 컨트롤 패널에서 [브라우저 채우기] 링크를 클릭합니다. [채우기] 탭에서 [이미지] 섹션 옆에 있는 폴더 아이콘을 클릭하여 데스크톱에 있는 이미지 파일을 선택합니다. [맞춤] 메뉴에서 원하는 옵션을 선택하고 [스크롤] 옵션을 설정합니다.
브라우저 창에 표시된 배경 이미지를 추가합니다.
브라우저 창에 표시된 배경 이미지를 추가합니다.

  1. [스크롤] 탭을 클릭합니다. [동작] 확인란을 선택합니다.
[브라우저 채우기] 메뉴에서 스크롤 효과를 설정하려면 [동작] 확인란을 선택합니다.
[브라우저 채우기] 메뉴에서 스크롤 효과를 설정하려면 [동작] 확인란을 선택합니다.

[브라우저 채우기] 메뉴에서 [스크롤] 섹션을 검토합니다. 가운데 섹션에 있는 필드(현재 0px가 표시됨)는 동작을 제어하는 키 위치(T 핸들 위치)에 해당합니다. 기본 설정 0px는 T 핸들이 브라우저 창의 위쪽 가장자리로 설정되었음을 의미합니다.

키 위치 필드에 지정된 픽셀 수는 페이지가 해당 위치로 스크롤되는 동안 [시작 동작] 섹션에서 설정한 변경 사항이 해당 방향과 해당 속도로 이동됨을 의미합니다. 페이지 맨 위는 0에서 시작하고 픽셀 수는 페이지를 아래로 스크롤할 때 늘어납니다. 컨트롤 패널과 [변형] 패널에서 페이지 맨 위로부터의 간격이 Y 값으로 참조됩니다.

[최종 동작] 섹션에서 입력한 값은 페이지가 키 위치(T 핸들 위치)를 지나서 스크롤되면 적용됩니다.

동작 스크롤 효과가 적용된 요소(이 경우 브라우저 채우기로 설정된 바둑판식 배열 이미지)가 필드에서 0보다 큰 값을 가진 방향으로 이동됩니다. 가로 방향과 세로 방향 모두 값이 0으로 설정된 경우 요소가 기본적으로 페이지에 핀으로 고정되어 이동하지 않습니다.

[시작 동작] 섹션에서 필드의 값 옆에 소문자 "x"가 있는 것을 볼 수 있습니다. 이것은 시간을 나타냅니다. 브라우저 채우기 이미지에서 시작 동작 섹션은 브라우저 파일이 한번에 위쪽 방향으로 스크롤 비율의 1배로(같은 속도로) 이동함을 나타냅니다. 방문자가 페이지를 빠르게 스크롤하는 경우 스크롤 효과는 같은 속도를 맞추기 위해 동작 속도가 빨라집니다.

가로(왼쪽과 오른쪽) 섹션에서 필드에 브라우저 채우기가 가로로 왼쪽이나 오른쪽으로 이동하지 않음을 의미하는 "0"이 표시됩니다.

[최종 동작] 섹션에 비슷한 인터페이스가 포함되어 있습니다. 브라우저 채우기 이미지에서 브라우저 채우기가 동작 비율의 1배로 위쪽으로 이동하도록 설정되어 있으므로 가로 방향으로 이동하지 않습니다.

참고:

[스크롤] 탭의 아래쪽 왼쪽 모서리에 있는 [정보] 단추(i 아이콘)를 가리켜서 브라우저 채우기에 스크롤 효과가 어떻게 적용되는지 알아 봅니다.

  1. 세로 방향(위쪽 또는 아래쪽) 또는 가로 방향(왼쪽 또는 오른쪽)을 지정하여 브라우저 채우기에 대한 이동 방향을 제어하려면 [시작 동작]에서 화살표 단추를 클릭합니다.
  2. [시작 동작] 섹션에서 숫자 값을 입력하거나 위쪽/아래쪽 화살표 단추를 클릭하여 가로 및 세로 스크롤 속도를 설정합니다. 이러한 설정에 대해서는 아래에서 자세히 설명합니다. 속도 필드가 0으로 설정된 경우 스크롤 중에(키 위치에 도달하기 전) 요소가 해당 방향으로 이동하지 않음을 의미합니다.
  3. [최종 동작] 섹션의 값을 업데이트하여 원하는 방향을 설정하고 해당 필드에 숫자 값을 입력하여 스크롤 효과가 발생하는 비율을 설정합니다.
  4. [브라우저 채우기] 메뉴를 닫으려면 페이지의 다른 곳을 클릭합니다.
  5. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 새 브라우저 창에 페이지를 로드합니다. 페이지를 스크롤하여 스크롤 효과가 발생하는 스크롤 동작 효과를 확인합니다.
  6. 테스트를 마쳤으면 브라우저를 종료하고 Muse로 돌아갑니다.

페이지 요소 배경 채우기에 스크롤 동작 적용

배경 채우기에 스크롤 효과를 어떻게 추가합니까?

바둑판식 또는 비 바둑판식으로 배열된 배경 이미지가 채우기로 적용된 페이지의 개체에 스크롤 동작을 적용할 수 있습니다. 다음 단계를 따르십시오.

  1. 디자인 보기에서 페이지를 편집하는 동안 [페이지] > [페이지 속성]을 선택합니다. 페이지를 스크롤할 수 있도록 길게 하려면 [최소 높이]를 훨씬 크게 설정합니다(예: 2000픽셀). [확인]을 클릭하여 변경 사항을 저장하고 [페이지 속성] 대화 상자를 닫습니다. 또는 페이지를 더 길게 만들려면 여러 페이지 컨텐트를 추가합니다.
  2. 디자인 보기의 제어 패널에서 [사각형] 도구를 선택합니다.
  3. 페이지에 사각형을 그립니다.
  4. 사각형을 채우려면 [채우기] 메뉴를 사용하여 바둑판식 또는 비 바둑판식으로 배열된 배경 이미지를 설정합니다.
사각형을 채울 배경 이미지를 추가하고 [채우기] 메뉴에서 원하는 표시 옵션을 설정합니다.
사각형을 채울 배경 이미지를 추가하고 [채우기] 메뉴에서 원하는 표시 옵션을 설정합니다.

  1. [채우기] 메뉴에서 [스크롤] 탭을 클릭하고 스크롤 옵션을 설정합니다.
  1. [채우기] 메뉴에서 [스크롤] 탭을 클릭합니다. [동작] 확인란을 선택하고 스크롤 옵션 설정을 시작합니다.
[채우기] 메뉴의 [스크롤] 탭을 사용하여 스크롤 효과에 대한 동작을 설정합니다.
[채우기] 메뉴의 [스크롤] 탭을 사용하여 스크롤 효과에 대한 동작을 설정하고 이동 방향 및 비율을 지정합니다.

요소 위에 표시되는 T 핸들이 스크롤 동작에 대해 활성화되었는지 확인합니다. 이 핸들은 키 위치를 시각적으로 나타낸 것입니다(현재 요소 위에 100px로 설정됨). [스크롤] 탭의 가운데 섹션에 있는 아이콘은 페이지에서 T 핸들의 위치에 해당합니다. 가운데 필드에 새 값을 입력하거나 페이지에서 T 핸들을 드래그하여 스크롤 효과가 발생할 때 키 위치를 재설정할 수 있습니다. T 핸들을 드래그할 때 키 위치 위의 영역이 일시적으로 흐리게 표시됩니다.

키 위치를 시각적으로 나타내는 T 핸들을 클릭하고 드래그합니다.
T 핸들을 클릭하여 페이지에서 원하는 위치로 드래그합니다.

참고:

T 핸들은 선택한 요소와 관련하여 위쪽으로 확장하지 않아도 됩니다. 요소의 위쪽 가장자리에 맞도록 T 핸들을 클릭한 채 드래그하거나, 요소 아래로 확장하도록 T 핸들을 드래그합니다.

핸들을 드래그하거나 키 위치 필드에 숫자를 입력하여 방문자가 페이지를 스크롤할 때 발생하는 이동을 정확하게 제어할 수 있으므로 Muse는 디자인 프로세스 중에 완벽한 유연성을 제공합니다.

[채우기] 메뉴의 [스크롤] 탭 사용 방법은 [브라우저 채우기] 메뉴의 [스크롤] 탭과 같습니다.

  1. [동작 스크롤 효과]에 대해 설정된 요소가 선택된 상태에서 [채우기] 메뉴의 [스크롤] 탭을 사용하여 키 위치를 숫자로 설정하거나 페이지에서 T 핸들을 클릭한 채 드래그하여 키 위치를 설정합니다.
  2. 세로 및 가로 방향과 해당 속도율은 페이지가 [시작 동작] 섹션에서 스크롤되는 속도를 기준으로 설정합니다. 이것은 페이지가 키 위치로 스크롤되기 전에 발생하는 동작을 설정합니다.
  3. 세로 및 가로 방향과 해당 속도율은 페이지가 [최종 동작] 섹션에서 스크롤되는 속도를 기준으로 설정합니다. 이것은 페이지가 키 위치를 지나서 스크롤된 후에 발생하는 동작을 설정합니다.

참고:

[스크롤] 속성 이미지에서 사각형은 오른쪽으로 이동하도록 설정되어 있으며, 방문자가 스크롤하는 비율의 3배 속도로 위치에 이동하여 브라우저의 페이지가 키 위치를 충족할 때 디자인에서 해당 위치에 도달합니다. 방문자가 키 위치를 지나서 스크롤하면(100픽셀) 사각형이 왼쪽으로 이동하기 시작하며, 방문자가 스크롤하는 비율의 3배로 위치를 벗어납니다. 이 예에서 두 세로 필드 모두 0으로 설정되어 있기 때문에 사각형이 세로 방향으로 이동하지 않습니다.

  1. [채우기] 메뉴를 닫으려면 페이지의 다른 곳을 클릭합니다.
  2. [미리 보기]를 누르거나 브라우저의 [파일] > [페이지 미리 보기]를 선택하여 스크롤 효과를 적용한 후에 테스트합니다. 페이지를 스크롤하여 요소 이동을 확인합니다.
  3. 테스트를 마치면 Muse로 돌아가거나 [디자인] 단추를 클릭하여 페이지를 계속 편집합니다.

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

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