개별 효과, 슬라이딩 메뉴, 롤업 등과 같은 다양한 유형의 스크롤 효과를 추가하여 사용하는 방법에 대해 알아봅니다.

참고:

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

스크롤 효과로 아이디어 디자인

이 섹션에서는 스크롤 효과를 사용하여 대화형 기능, 고유한 사이트 탐색, 표현 동작 그래픽을 Muse 사이트에 추가하는 여러 가지 방법 중 몇 가지를 살펴보겠습니다.

시작하려면 아래 단계를 수행하십시오.

  1. 라이브 샘플 사이트를 방문하고 각 섹션을 클릭하여 각 목표에 대한 예를 확인합니다. 각 예제 페이지를 아래로 스크롤하여 스크롤 효과가 페이지 요소 표시 방법을 어떻게 제어하는지 확인합니다.
  2. 라이브 샘플 사이트 끝까지 스크롤하여 .muse 파일을 다운로드합니다.
  3. 샘플 사이트를 열고 Muse 작업 영역에서 프로젝트를 검토합니다.
  4. [레이어] 패널을 열고 [컨텐트] 섹션을 확장하여 각 예제를 만드는 데 사용된 요소를 확인합니다.

개별 효과

이 효과는 방문자가 페이지를 아래로 스크롤할 때 개별 요소 집합이 날아오고 페이지 디자인에 다시 조합되도록 합니다. 그래픽 및 텍스트 프레임은 마치 퍼즐 조각을 맞추듯이 대화형 컴파일을 작성하는 스크롤 효과를 사용하여 제어됩니다. 이 방법은 웹 페이지에 제품 세부 사항을 흥미 있게 설명할 수 있는 방법입니다.

이 예의 작업 과정에서는 [스크롤 효과] 패널의 [동작] 탭에 있는 [시작 동작] 섹션을 사용하여 요소가 통합된 디자인에 합쳐지도록 합니다. 각 요소가 해당 위치로 이동하면 [최종 동작] 설정이 0으로 설정되어 새 요소가 날아올 때 기존 요소가 이동하지 않습니다.

비슷한 개별 효과를 작성하려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 14,120픽셀로 설정되어 있습니다.
  2. [텍스트] 도구를 사용하여 텍스트 프레임을 만들고 원하는 텍스트 내용을 입력합니다.
  3. [스크롤 효과] 패널의 [동작] 탭을 열고 [동작] 확인란을 선택합니다. 이 예에서 [시작 동작] 섹션 설정은 스크롤 속도의 .25배(1/4 속도) 속도로 텍스트 프레임을 아래 위치로 이동합니다. 페이지가 텍스트 프레임의 키 위치에 도달할 때 텍스트 프레임이 디자인 보기에 있는 위치에 도달합니다. 그런 다음 [최종 동작] 설정(두 방향에 대해 값 0)은 마치 요소가 핀으로 고정된 것처럼 첫 번째 요소가 제 위치에 남아 있도록 합니다.
  4. 투명도가 설정된 PNG 파일(휴대폰 윤곽선)은 텍스트 프레임 아래에 배치됩니다. 이 요소는 [스크롤 효과] 패널의 [동작] 탭 설정을 사용하여 페이지 왼쪽에서 도착하고, 위치로 이동한 다음 그 위치에 남아 있습니다.
  5. 휴대폰 윤곽선 뒤를 닫으면 작은 흰색 요소가 비슷한 이동 패턴을 따라 페이지 왼쪽에서 날아와 제 위치에 놓입니다. 흰색 그래픽은 휴대폰 위쪽에 있는 수화기를 시뮬레이션합니다. 이 에셋(phone-earpiece.png)은 [레이어] 패널에서 휴대폰 윤곽선 위에 배열되므로 디자인에서 휴대폰 윤곽선 위에 표시됩니다. 
  6. 수화기 바로 뒤에 있는 작은 흰색 요소는 전화기의 홈 단추를 시뮬레이션한 것으로, 오른쪽에서 날아오고 수화기 동작을 흉내내며 디자인에서 휴대폰 윤곽선 위에 표시됩니다.
  7. 그런 다음 세로 방향으로 흰색에서 밝은 회색으로 그라데이션된 밝은 색의 사각형 그래픽은 [스크롤 효과] 패널의 [동작] 탭을 사용하여 위치를 이동하므로 휴대폰 윤곽선의 투명한 가운데 영역에 꼭 맞습니다. 제 위치에 있으면 전화기 화면의 모양을 제공합니다. 화면 요소(phone-screen.png)는 [레이어] 패널의 맨 아래에 놓이므로 페이지 디자인에서 다른 모든 요소의 맨 뒤에 표시되도록 정렬됩니다.
  8. 네 개 사각형 집합(파랑, 녹색, 노랑, 빨강으로 채워짐)이 다음 위치로 이동합니다. 함께 나는 분산된 효과를 만들기 위해 각각의 사각형이 [스크롤 효과] 패널의 [동작] 탭에서 다른 방향과 속도로 설정되어 있습니다. 파란색 사각형은 [시작 동작] 섹션에서 아래와 오른쪽으로 이동하고, 녹색과 노란색 사각형은 위쪽과 오른쪽으로 이동하고, 빨간색 사각형은 위쪽과 왼쪽으로 이동합니다. [최종 동작] 섹션에서 모든 사각형은 두 방향에 대해 0으로 설정되어 있으므로, 각 요소가 휴대폰 화면의 맨 위에 있는 최종 대상에 도달하면 마치 제 위치에 핀으로 고정된 것처럼 동작합니다.
  9. 다른 모든 요소가 모이면 두 번째 텍스트 필드가 위로 이동하여 첫 번째 텍스트 필드 아래에 있으며, 페이지 스크롤 속도의 .5배(절반) 비율로 이동합니다.

마지막으로, 맨 아래에 나머지 두 개 요소, 즉 페이지 색과 같은 단색으로 채워진 단색 사각형과(렌더링하여 디자인에서 숨겨짐) 그 뒤의 개체 그룹(전구 그림이 있는 노란색 사각형)이 있습니다.

단색 사각형은 뒤에 배열된 그룹을 숨깁니다.

Adobe Muse의 개별 스크롤 효과
Adobe Muse의 개별 스크롤 효과

참고:

두 요소를 모두 선택한 상태에서 선택한 모든 항목에 대해 동일한 값이 필드에 표시되는지 확인합니다. 이 예에서 사각형과 그룹 모두 [시작 동작] 섹션의 세로 방향에 대해 0으로 설정되어 있으며, [최종 동작] 섹션에서 0,0으로 설정되어 있습니다. 그룹이 스크롤 비율의 1배(같은 속도)로 왼쪽으로 이동하도록 설정되어 있지만 사각형이 0으로 설정되어 있으므로 [시작 동작] 섹션의 가로 필드에 값이 표시되지 않습니다.  

  1. [시작 동작]과 [최종 동작] 필드의 값이 모두 0으로 설정되어 있으므로 사각형이 제 위치에 고정되어 전혀 이동하지 않습니다. 페이지를 전구 그림이 있는 그룹의 키 위치로 스크롤할 때 왼쪽으로 이동되어 더 이상 그 위에 있는 사각형에 가려지지 않으므로 표시됩니다. 전구 그룹이 휴대폰의 화면 요소 위와 휴대폰 윤곽선 아래에 배치되어 있으므로 전구 그림이 지워진 것처럼 보입니다(가로 방향으로 스와이프할 때 발생하는 실제 전화 전환과 비슷함). 전구 그룹은 이전에 전화기 화면을 나타낸 그라데이션 사각형을 가립니다.

이러한 간단한 예에서 볼 수 있듯이 아주 긴 페이지 조합, [레이어] 패널에서 전략적으로 배치된 일련의 요소 및 [스크롤 효과] 패널의 [동작] 탭을 사용하여 페이지가 아래로 스크롤될 때 애니메이션에 함께 나오는 일련의 효과를 만들 수 있습니다.

슬라이딩 메뉴

슬라이딩 메뉴 효과는 개별 효과에서 설명한 동일한 여러 규칙을 사용합니다. 요소는 [스크롤 효과] 패널의 [동작] 탭을 사용하여 날아오는 것처럼 표시되고 사각형은 페이지 디자인에 나타낼 준비가 될 때까지 요소의 일부를 숨깁니다.

이 예에서는 전략적으로 배치된 사각형 그룹을 사용하여 복잡한 각이 있는 디자인 모양을 만듭니다.

브라우저에서 샘플 사이트를 보고 비행기가 페이지 오른쪽에서 왼쪽으로 수평으로 나는지 확인한 다음 스타일화된 메뉴 옵션과 사선 줄무늬가 있는 그라데이션 배경을 확인합니다.

비슷한 슬라이딩 효과를 작성하려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 4,665픽셀로 설정되어 있습니다.
  2. 비행기 이미지는 페이지에서 다른 모든 컨텐트 위에 놓여 있으므로 [레이어] 패널의 목록 맨 위에 표시됩니다. [스크롤 효과] 패널의 [동작] 탭에서 해당 키 위치 전후에서 왼쪽으로 이동하도록 설정되어 있습니다.
Adobe Muse 스크롤 효과의 슬라이딩 메뉴 효과
Adobe Muse 스크롤 효과의 슬라이딩 메뉴 효과

  1. 네 개의 텍스트 프레임은 탐색 메뉴를 생성하기 위해 왼쪽으로 날아와서 수직으로 쌓이도록 구성되어 있습니다. [스크롤 효과] 패널의 [동작] 탭에 있는 각 텍스트 프레임에는 [시작 동작] 섹션의 속도와 같은 속도(스크롤 비율의 1.25배)가 지정되어 있습니다. 각 텍스트 프레임에는 다른 키 위치가 있습니다. 페이지를 아래로 스크롤할 때 각 텍스트 프레임이 해당 위치에 들어가 디자인 왼쪽에 정렬됩니다. 모든 텍스트 프레임에는 [최종 동작] 섹션에 0,0 값이 있으므로 메뉴 항목이 제 위치에 있으면 그 위치에 남아 있게 됩니다.
  2. 텍스트 프레임은 직선 세로 방향의 가장자리가 아니라 대각선 방향의 측면을 표시하므로 처음에는 이미지처럼 표시되지만 단색 배경색으로 채워집니다. 이 효과를 만들려면 브라우저 채우기 색상과 같은 단색을 사용하여 채운 텍스트 프레임 위에 세 개의 사각형 그룹을 겹칩니다.
사각형을 그룹화하고 메뉴 항목 위에 정렬하여 각진 왼쪽 및 오른쪽 모서리를 만듭니다.
사각형을 그룹화하고 메뉴 항목 위에 정렬하여 각진 왼쪽 및 오른쪽 모서리를 만듭니다.

  1. 텍스트 프레임이 [레이어] 패널에서 그룹 아래에 정렬되어 있으므로 텍스트 프레임 애니메이션은 처음에 다른 사각형 그룹에 의해 숨겨집니다. 이 그룹(세 개의 사각형으로 구성)은 세로 그라데이션이 있는 큰 사각형과, 위쪽 그라데이션 색상과 같은 단색으로 채워진 다른 두 개의 작은 사각형(정사각형 및 회전된 사각형)의 조합입니다.
  1. 아래로 스크롤하여 그룹 맨 아래를 검토하는 경우 큰 그라데이션 사각형의 오른쪽 맨 아래 모서리 위에서 회전 및 정렬되고, 폭이 다양한 네 개의 사각형을 추가적으로 볼 수 있습니다.
페이지 채우기와 같은 색상으로 채워진 사각형을 회전하여 그라데이션으로 채워진 사각형 모퉁이를 잘라냅니다.
페이지 채우기와 같은 색상으로 채워진 사각형을 회전하여 그라데이션으로 채워진 사각형 모퉁이를 잘라냅니다.

그룹은 요소 집합을 결합하고 단일 항목으로 제어하는 데 유용합니다. 이 예에서 단일 엔터티로 이동하도록 다른 사각형 그룹에 동작 스크롤 효과가 적용되었습니다.

이 예에서는 네거티브 스페이스를 창의적으로 사용하는 방법을 보여줍니다. 브라우저 채우기에 단색 배경색이 적용된 경우 다른 사각형 위에 같은 색으로 채워진 사각형을 겹쳐서 여러 가지 흥미 있는 잘라내기 효과를 만들 수 있습니다. 이미지 편집 프로그램에서 그래픽을 디자인하거나 단일 이미지를 배치하지 않고, 사각형을 사용하여 Muse 작업 영역 내에서 그래픽을 구성할 수 있습니다.

페이드

이 애니메이션 일출과 일몰 예제는 두 개의 스크롤 효과인 동작과 불투명도의 조합을 사용합니다. 이 예제는 그라데이션 색상 채우기 페이지 배경을 단일 배치된 태양의 PNG 이미지로 표시합니다. PNG 이미지에는 배경 페이지 채우기 색상이 보이도록 하는 투명한 영역이 포함되어 있습니다.

브라우저에서 예제 사이트를 검토하여 태양이 100% 투명도에서 페이드되어 페이지를 이동하는 방식을 확인합니다. 완전히 불투명하지만 페이지를 아래로 계속 스크롤하면 태양이 지고 페이드 아웃될 때까지 다시 점점 투명해집니다.
비슷한 페이드 효과를 작성하려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 모니터가 표시할 수 있는 평균보다 큰 값으로 설정하면 페이지를 스크롤할 수 있습니다. 사이트 예에서 페이지의 최소 높이는 2,988픽셀로 설정되어 있습니다.
  2. 태양 이미지는 페이지 가운데에 배치되어 있습니다. [스크롤 효과] 패널의 [동작] 탭에서 키 위치는 1410픽셀로 설정되어 있습니다. [시작 동작]과 [최종 동작] 섹션에 대한 설정을 확인합니다.
페이드 효과를 위해 [시작 동작]과 [최종 동작] 설정을 지정합니다.
페이드 효과를 위해 [시작 동작]과 [최종 동작] 설정을 지정합니다.

이러한 설정으로 인해 태양이 반원 경로로 이동하고 페이지 왼쪽 아래에서 가운데로(키 위치에 도달할 때) 호를 그린 다음 다시 페이지 오른쪽 아래로 호를 그립니다.

  1. 태양을 선택한 상태에서 [불투명도] 탭을 클릭하여 해당 설정을 확인합니다. [페이드 위치 1]이 726픽셀(태양 위)로 설정되어 있습니다. [페이드 위치 2]가 1925픽셀(태양 아래)로 설정되어 있습니다. 태양이 0% 불투명도(완전히 투명)로 시작하여 페이지가 해당 키 위치로 스크롤할 때 완전히 불투명해집니다. 페이지가 태양의 키 위치를 지나서 아래로 스크롤될 때 불투명도가 100%에서 0% 불투명도로 이동하여 페이드 인과 페이드 아웃 효과를 만듭니다.
[스크롤 효과] 패널의 [불투명도] 탭에서 투명도를 조절합니다.
[스크롤 효과] 패널의 [불투명도] 탭에서 투명도를 조절합니다.

  1. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 페이지를 테스트합니다. 페이지를 스크롤하여 페이드 인하는 동안 태양이 뜨는 것처럼 보이고, 페이드 아웃하는 동안 오른쪽 아래로 이동하는 것처럼 보이는지 확인합니다.
  2. 브라우저를 닫고 Muse 작업 영역으로 돌아옵니다.

Edge Animate

이 예제는 스크롤 효과를 사용하여 Adobe Edge Animate에서 내보낸 OAM 파일을 제어하는 방법을 보여줍니다. 이 예에서 페이지는 밝은 청록색으로 시작하여 어두운 파랑으로 전환하는 세로 그라데이션으로 채워집니다.

[동작] 및 [Edge Animate] 탭에서 적용된 설정 조합은 이러한 애니메이션 효과를 만듭니다.

같은 OAM 파일의 세 인스턴스가 가로로 나란히 배치되어 애니메이션 나침반 행을 만듭니다. 브라우저에서 샘플 사이트를 보면 세 나침반 모두 보기로 이동한 다음 그 위치에 남습니다. 세 나침반이 각각 다른 비율로 회전하지만, Edge Animation 파일의 구성이 아니라 [스크롤 효과] 패널의 설정으로 인해 세 나침반이 다른 속도로 회전합니다.

배치된 세 개 OAM 파일에 비슷한 효과를 만들려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 7465픽셀로 설정되어 있습니다.
  2. 페이지에서 나침반의 세 개 인스턴스를 모두 선택합니다. [스크롤 효과] 패널의 [동작] 탭에서 값이 모두 표시되었기 때문에 세 개 OAM 파일의 키 위치와 동작 설정이 동일한 것을 볼 수 있습니다.
스크롤 효과를 사용하여 OAM 파일의 애니메이션 효과를 만듭니다.
스크롤 효과를 사용하여 OAM 파일의 애니메이션 효과를 만듭니다.

브라우저에서 샘플을 미리 보면 세 개의 OAM 요소 모두 일제히 위로 이동한 다음 마치 핀으로 고정된 것처럼 행에 남아 있습니다.

  1. 나침반 바깥쪽을 클릭하여 세 나침반을 모두 선택 취소한 다음 왼쪽에서 나침반을 선택하면 됩니다. Shift 키를 누른 채 오른쪽에서 나침반을 선택하면 모두 선택됩니다. [스크롤 효과] 패널의 [Edge Animate] 탭을 열어서 설정을 검토합니다.
세 나침반을 모두 선택 취소하고 왼쪽 및 오른쪽에서 나침반을 선택합니다.
세 나침반을 모두 선택 취소하고 왼쪽 및 오른쪽에서 나침반을 선택합니다.

양쪽 나침반은 모두 타임라인 애니메이션을 반복하고 페이지를 350픽셀 아래로 스크롤할 때마다 다음 프레임으로 이동하도록 구성되었습니다.

  1. 바깥쪽 나침반 두 개를 선택 취소합니다. 가운데 나침반을 선택하고 [Edge Animate] 탭에서 다시 [프레임 전환 간격] 필드가 400픽셀로 설정되어 있는지 확인합니다. 이 설정으로 인해 가운데 애니메이션이 바깥쪽 두 나침반에 비해 느리게 이동합니다.
가운데 나침반을 선택하고 스크롤 효과 설정을 선택합니다.
가운데 나침반을 선택하고 스크롤 효과 설정을 선택합니다.

페이지 스크롤 속도를 기준으로 하여 배치된 여러 Edge Animate 애니메이션의 속도를 달리하여 흥미 있는 애니메이션 효과를 만들 수 있습니다. 예를 들면, 다른 스크롤 효과 설정이 적용된 동일한 OAM 파일을 여러 번 반복 추가하여 물고기떼, 이동하는 구름으로 채워진 하늘 또는 다른 효과를 만들 수 있습니다.

슬라이드 쇼 효과

슬라이드 쇼 위젯에서 일련의 이미지가 페이지 스크롤 방식을 기준으로 하여 표시되는 방식을 제어할 수 있습니다. 여기에 슬라이드 쇼 위젯을 페이지에 추가한 다음 [스크롤 효과] 패널의 [슬라이드 쇼] 탭을 사용하여 슬라이드 쇼 옵션을 업데이트하는 작업이 포함됩니다.

이 예에서 슬라이드 쇼는 360도 회전한 배낭 보기를 만드는 일련의 이미지로 채워집니다. 삼각대를 설치하고 회전하는 스탠드에 배치된 개체의 사진을 찍어서 비슷한 슬라이드 쇼 이미지를 얻을 수 있습니다. 이 효과는 잠재적인 고객이 제품을 구입하기 전에 모든 관점에서 항목을 볼 수 있도록 돕기 위해 대화형 제품 설명을 표시하는 데 유용합니다.

슬라이드 쇼 위젯을 사용하여 비슷한 효과를 만들려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 7,465픽셀로 설정되어 있습니다.
  2. Superpack 글자가 있는 텍스트 프레임은 스크롤 효과를 사용하도록 설정되어 있습니다. [동작] 탭에서 페이지 스크롤 비율과 같은 비율로 텍스트가 왼쪽에서 오른쪽으로 이동하도록 [시작 동작] 설정을 구성합니다. [최종 동작] 설정에서 두 방향이 0으로 설정되어 있으므로 텍스트 프레임이 페이지에 핀으로 고정된 것처럼 위치에 남아 있습니다.
     
[동작] 확인란을 선택하고 텍스트 프레임이 오른쪽으로 이동하도록 스크롤 효과를 구성합니다.
[동작] 확인란을 선택하고 텍스트 프레임이 오른쪽으로 이동하도록 스크롤 효과를 구성합니다.

  1. 위젯 라이브러리를 열고 슬라이드 쇼 위젯을 페이지 가운데 즉, 텍스트 프레임의 최종 대상의 오른쪽으로 드래그합니다.
  2. [옵션] 메뉴에서 [이미지 추가] 옵션을 사용하여 슬라이드 쇼를 이미지 파일로 채웁니다. 

슬라이드 쇼를 선택한 상태에서 슬라이드 쇼 위젯을 선택하고 제어판의 핀 인터페이스를 사용하여 슬라이드 쇼를 위치에 고정할 수 있습니다. 전체 화면 슬라이드 쇼 위젯을 추가하고 스크롤 효과로 제어하여 시험할 수도 있습니다. 

  1. 슬라이드 쇼를 선택한 상태에서 [스크롤 효과] 패널의 [슬라이드 쇼] 탭을 열고 [슬라이드 쇼] 확인란을 선택합니다.
  2. T 핸들을 드래그하거나 필드에 값을 입력하여 키 위치를 설정합니다. 이 예에서 키 위치는 1066픽셀로 설정되어 있습니다.
  3. [슬라이드 전환 간격] 라디오 단추를 선택하고 그 아래 필드를 50픽셀로 설정합니다.
페이지가 아래로 다시 50픽셀 스크롤될 때마다 다음 이미지로 넘어가도록 슬라이드 쇼를 설정합니다.
페이지가 아래로 다시 50픽셀 스크롤될 때마다 다음 이미지로 넘어가도록 슬라이드 쇼를 설정합니다.

  1. 미리 보기에서 또는 브라우저에서 페이지를 테스트합니다. 페이지를 아래로 스크롤하여 배낭이 회전하듯이 표시되는지 확인합니다. 슬라이드 쇼를 비슷하지만 약간 다른 일련의 이미지 파일로 채워서 애니메이션 GIF의 프레임과 비슷하게 위로 날아가거나 아래로 떨어지는 이미지를 만들 수도 있습니다.
  2. 스크롤 효과를 테스트한 후에 Muse의 디자인 보기로 돌아가서 페이지를 계속 편집합니다.

롤업

스크롤 효과를 사용하여 기본적으로 모양이 다른 섹션으로 나뉘는 긴 페이지를 만들 수 있습니다. 방문자가 페이지를 아래로 스크롤할 때, 롤업되고 애니메이션 텍스트 효과가 있고 그림자 효과를 사용하여 만든 테두리를 분리하는 것처럼 표시되는 페이지 섹션으로 전환됩니다.

기준점 태그를 사용하거나 메모를 추가하여 방문자가 브라우저에서 페이지를 아래로 스크롤하여 각 섹션을 보도록 도울 수 있습니다. 예제 사이트 맨 아래에서 [맨 위로 이동] 단추를 클릭하면 기준점 링크가 페이지 디자인의 맨 위로 돌아갈 때 전체 페이지 압축을 볼 수 있습니다.

비슷한 롤업 효과를 만들려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 16,990픽셀로 설정되어 있습니다.
  2. [브라우저 채우기] 메뉴에서 브라우저 채우기 색상을 파랑으로 설정합니다.
[브라우저 채우기] 메뉴에서 브라우저 채우기 색상을 설정합니다.
[브라우저 채우기] 메뉴에서 브라우저 채우기 색상을 설정합니다.

  1. 전체 페이지를 선택한 상태에서 [파일] 메뉴를 사용하여 페이지 색상을 없음으로 설정하므로 파란색 브라우저 채우기 색상이 보입니다.
  2. 페이지 위에서 약 2248픽셀 아래로 스크롤합니다. [사각형] 도구를 사용하여 3000픽셀(폭) x 2000픽셀(높이) 사각형을 그립니다. [선택] 도구를 사용하여 페이지 가운데에 사각형을 배치하고 사각형 양쪽이 브라우저 창 가장자리를 지나도록 넓게 확장합니다.
  3. 사각형을 선택한 상태에서 [채우기] 메뉴를 사용하여 녹색 채우기 색상을 설정합니다. [효과] 메뉴를 사용하여 그림자 효과를 설정합니다.
사각형에 그림자 효과를 추가하여 멋진 테두리를 만듭니다.
사각형에 그림자 효과를 추가하여 멋진 테두리를 만듭니다.

  1. 녹색 사각형을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭에서 [동작] 확인란을 선택합니다. T 핸들을 클릭한 채 드래그하여 키 위치가 사각형 위쪽 가장자리에 설정되도록(예제에서 2248픽셀) 축소합니다.
  1. [시작 동작] 섹션에서 스크롤 비율의 1.5배 비율로 사각형이 아래로 이동하도록 설정합니다. 다른 모든 방향을 0으로 설정합니다.
  2. [텍스트] 도구를 사용하여 녹색 사각형 위쪽 주위에 텍스트 필드를 만듭니다. 이 예에서 텍스트 필드에 'This is the roll-up.'이 입력되어 있습니다. 하지만 텍스트 내용을 입력하고 원하는 텍스트 서식을 적용할 수 있습니다.
  3. 텍스트 프레임을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 사용합니다. T 핸들을 드래그하여 녹색 사각형 위쪽 가장자리에 맞추고 설정을 업데이트하여 페이지 스크롤을 기준으로 하여 텍스트 프레임이 표시되는 방식을 제어합니다.
T 핸들을 녹색 사각형 위쪽 가장자리에 맞춥니다.
T 핸들을 녹색 사각형 위쪽 가장자리에 맞춥니다.

  1. [시작 동작]의 아래 방향을 스크롤 비율의 1.5배로 이동하도록 설정합니다. 패널의 다른 모든 값을 0으로 설정합니다. 이렇게 하면 텍스트 필드가 녹색 사각형과 같은 방향 및 속도로 아래로 이동합니다. 페이지가 해당 키 위치를 지나서 스크롤되면 사각형과 텍스트 프레임 모두 제자리에 있습니다.
  2. [미리 보기]를 클릭하면 아래로 스크롤하여 녹색 사각형과 텍스트 필드가 위에서 아래로 그리고 보기로 스크롤되는 방식을 볼 수 있습니다. 테스트를 마치면 [디자인]을 클릭하여 페이지를 계속 편집합니다.
  3. [보기] 메뉴를 사용하여 사이트 디자인의 10%로 축소합니다. 녹색 사각형과 텍스트 필드를 선택합니다. Option/Alt 키를 누른 채 두 개 요소를 페이지에서 아래로 드래그하여 복제합니다. 복제된 사각형의 채우기 색상을 진한 파랑으로 설정하고 텍스트 도구를 사용하여 텍스트 내용을 업데이트합니다.
복제된 사각형의 배경 채우기 색상을 업데이트하고 페이지의 새 섹션에 대한 텍스트 프레임 컨텐트를 변경합니다.
복제된 사각형의 배경 채우기 색상을 업데이트하고 페이지의 새 섹션에 대한 텍스트 프레임 컨텐트를 변경합니다.

이 예에서 복제된 텍스트 프레임에 'Use it to drastically alter the appearance of your website.' 텍스트가 입력되어 있습니다. 하지만 페이지의 진한 파랑 섹션을 식별하기 위해 원하는 텍스트를 입력할 수 있습니다.

  1. [선택] 도구를 사용하여 복제된 사각형과 텍스트 프레임을 페이지 위쪽에서 약 5,448픽셀 아래에 배치합니다.
  2. 진한 파랑 사각형을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 확인합니다. 키 위치가 자동으로 사각형의 새 위치(5,448픽셀)로 업데이트되고 [시작 동작] 섹션의 아래쪽 방향이 여전히 스크롤 비율의 1.5배 비율로 이동하도록 설정되어 있습니다(다른 값은 모두 0으로 설정되어 있음). 복제된 텍스트 프레임을 보면 스크롤 효과가 복제된 요소에 대해서도 보존되는 것을 알 수 있습니다.
  3. 12-13단계를 네 번 더 반복하여 위에 텍스트 프레임이 있는 여섯 개의 큰 사각형을 만듭니다. 각 사각형에는 그림자 효과와 스크롤 효과 설정이 이미 적용되어 있습니다. 마지막 네 개 사각형은 각 섹션이 약 1,200픽셀로 구분되도록 8,648픽셀, 11,852픽셀, 15,058픽셀, 18,251픽셀의 키 위치에 배치합니다.
  4. [채우기] 메뉴를 사용하여 사각형 채우기 색상에 다른 색을 적용하도록 설정합니다. 단색과 그라데이션 색 채우기를 모두 적용하여 페이지 각 섹션을 강조하여 다른 섹션을 대비시켜 봅니다.
  5. [텍스트] 도구를 사용하여 각 섹션에 대한 텍스트 내용을 업데이트합니다. 예를 들어, 'This is the blue section.'처럼 아래에 사각형 배경색을 반영하도록 각 섹션을 변경할 수 있습니다.
  6. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 페이지를 테스트합니다. 페이지를 스크롤하여 다른 페이지 섹션이 표시되는지 확인한 후 다음 페이지 섹션으로 바꿉니다.
  7. 브라우저를 닫고 Muse 작업 영역으로 돌아옵니다.

동적 유형

동작 스크롤 효과와 Adobe Edge 웹 글꼴 조합을 사용하여 독특한 조판 디자인을 만들 수 있습니다. 웹 글꼴을 사용하면 페이지 로드 시 로드된 다양한 글꼴 범위를 사용하여 텍스트 스타일을 지정할 수 있습니다. 이미지 편집 프로그램에서 만든 텍스트 이미지를 배치하고 애니메이션하지 않고 훨씬 멋지며 Edge 웹 글꼴을 사용하여 쉽게 업데이트할 수 있는 페이지를 만들 수 있습니다. 또한 스크롤 효과는 페이지를 아래로 스크롤할 때 환상적인 애니메이션 효과를 만듭니다.

동적 텍스트로 비슷한 효과를 만들려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 4,854픽셀로 설정되어 있습니다.
  2. 페이지 채우기 색상을 없음으로 설정합니다. 다음 단계에서 긴 사각형이 페이지를 덮기 때문에 브라우저 채우기 색상은 중요하지 않습니다.
  3. [사각형] 도구를 사용하여 약 1,159픽셀(폭) x 4,854픽셀(높이)의 큰 사각형을 그립니다. [채우기] 메뉴를 사용하여 사각형을 단색 또는 그라데이션 채우기 색상으로 채웁니다. 이 예에서 밝은 자홍 그라데이션 색상에 청록색이 채우기 색상으로 적용되었습니다. [선택] 도구를 사용하여 전체 브라우저 영역을 채우도록 사각형을 가운데에 배치합니다. 사각형이 페이지 가운데에 배치되었는지 확인하기 위해 축소할 수 있습니다.
축소하고 긴 페이지 가운데에 사각형을 배치합니다.
축소하고 긴 페이지 가운데에 사각형을 배치합니다.

  1. 사각형을 가운데에 배치한 후에 [보기] 메뉴에서 확대 비율을 다시 100%로 설정합니다.
  2. 페이지 왼쪽에서 [텍스트] 도구를 사용하여 일련의 텍스트 프레임을 만듭니다. 이 예에서는 총 5개의 텍스트 프레임이 있습니다. 각 텍스트 프레임의 컨텐트가 아래에 나열되어 있지만 각 텍스트 프레임에 원하는 텍스트를 자유롭게 입력합니다.
    • Five Frames
    • Scrolling
    • At Different Speeds Will
    • Create
    • Dynamic Tension

선택 단계로, 일부 텍스트 프레임을 복제한 다음 조금 다른 스타일을 적용할 수 있습니다. 이 예에서는 Create라는 단어가 포함된 텍스트 프레임을 복제한 다음 두 반복 단어를 서로의 맨 위에 겹쳐 놓아 흐린 파란색 그림자 효과를 만듭니다.

  1. [텍스트] 도구를 사용하여 각 텍스트 프레임을 선택합니다. [텍스트] 패널(또는 제어판의 텍스트 서식 옵션)을 사용하여 다른 웹 글꼴, 글꼴 크기, 색상 및 다른 서체 설정을 적용하여 각 텍스트 프레임을 강조합니다.
  2. 텍스트 프레임을 모두 선택합니다. 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 엽니다. 같은 숫자 값을 입력하여 선택한 모든 텍스트 프레임에 대한 키 위치를 한번에 설정합니다. 이 예에서 키 위치는 1372픽셀로 설정되어 있습니다. 또한, [시작 동작]과 [최종 동작] 섹션에 대한 가로 방향을 오른쪽으로 설정합니다. [시작 동작]과 [최종 동작] 섹션에 대한 세로 방향을 모두 0으로 설정하여 텍스트 프레임이 세로 방향으로 이동하지 않도록 합니다.
  3. 텍스트 프레임 바깥쪽을 클릭한 다음 각 텍스트 프레임을 개별적으로 클릭합니다. 각 텍스트 프레임에 대해 조금씩 다른 값을 입력합니다. 아래 목록에서 첫 번째 값은 [시작 동작] 속도이고, 두 번째 값은 가로(오른쪽) 방향에 대한 [최종 동작] 속도입니다.
    • Five Frames: .9x, .1x
    • Scrolling: .12x, .5x
    • At Different Speeds Will: .7x, .17x
    • Create: 1.1x, .005x
    • Dynamic Tension.: 1x, .01x

참고:

텍스트 프레임을 복제하여 그림자 효과를 만든 경우 두 개 이상의 반복된 텍스트 프레임을 그룹화한 다음 단일 그룹으로 제어하여 스크롤 효과를 적용할 수 있습니다.

  1. [텍스트] 도구를 사용하여 텍스트 필드를 만들고 페이지 오른쪽에 숫자 5를 입력합니다. 즉, 텍스트 프레임을 복제한 다음 다른 색상과 텍스트 서식을 적용하여 경사진 모서리와 그림자가 있는 효과를 제공할 수 있습니다. 디자인 목적을 위해 텍스트 프레임을 복제하여 만든 경우 해당 텍스트 프레임을 함께 그룹화하여 이 그룹에 스크롤 효과를 적용할 수 있습니다.
  2. 숫자 5가 있는 텍스트 필드를 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭에서 [동작] 확인란을 선택합니다. 키 위치를 숫자로 설정하거나 T 핸들을 드래그하여 설정합니다(이 예에서는 1425픽셀). [시작 동작] 섹션에서 스크롤 비율의 1배로 요소가 왼쪽으로 이동하도록 설정합니다. [최종 동작] 섹션에서 스크롤 비율의 .01배로 요소가 왼쪽으로 이동하도록 설정합니다.
  3. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 페이지를 테스트합니다. 페이지를 스크롤하여 숫자 5가 있는 텍스트 프레임을 오른쪽에서 이동할 때 5개 텍스트 프레임이 왼쪽에서 페이지로 이동하는지 확인합니다. 위아래로 스크롤하여 텍스트 프레임이 애니메이션하는지 확인합니다.
  4. 브라우저를 닫고 Muse 작업 영역으로 돌아옵니다.
     

스택 메뉴

스크롤 효과를 사용하여 흥미 있는 대화형 사이트 탐색을 만들 수 있습니다. 여러 단추가 페이지의 표시 영역으로 날아온 다음 메뉴 모음을 만들 수 있게 정렬됩니다. 이 예에서 네 개의 롤오버 단추는 페이지를 스크롤할 때 페이지 아래쪽에서 위쪽으로 이동하고 세로 메뉴 모음을 표시할 위치에 잠깁니다.

네 개 단추가 정렬되면 배경 컨텐트(전구 그림, 색이 지정된 배경 영역, 텍스트 프레임 및 대각선 방향의 모서리 줄무늬 형식)가 페이지 양쪽에서 날아와서 사이트 섹션을 만듭니다.

이 예에서 단추가 연결되어 있지 않지만 하이퍼링크 드롭다운 메뉴를 사용하여 링크를 추가하면 방문자가 이 링크를 클릭하여 새 페이지를 로드하거나 기준점 태그를 사용하여 현재 페이지의 다른 위치로 이동할 수 있습니다.

비슷한 스택 메뉴를 작성하려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 7465픽셀로 설정되어 있습니다.
  2. 페이지 채우기 색상을 없음으로 설정하고 브라우저 채우기를 단색 채우기로 설정합니다. 예에서 브라우저 채우기는 옅은 황갈색으로 설정되어 있습니다.
  3. [텍스트] 도구를 사용하여 새 텍스트 프레임을 만듭니다. 단어 Home을 입력합니다. 제어판에서 서식 옵션을 사용하여 배경색을 텍스트 프레임에 추가합니다. 서식 옵션을 업데이트하여 텍스트 스타일을 지정합니다. 단추 양쪽에 있는 핸들을 사용하여 폭과 높이를 약 300픽셀 x 115픽셀로 확장합니다.
제어판의 옵션을 사용하여 텍스트 프레임에 스타일을 지정합니다.
제어판의 옵션을 사용하여 텍스트 프레임에 스타일을 지정합니다.

  1. [상태] 패널을 엽니다. [롤오버] 상태를 선택하고 다른 채우기 색상(또는 스타일 지정)을 추가하여 롤오버 단추를 만듭니다.
[롤오버] 상태를 선택하고 단추에 스타일을 지정하여 표준 상태와 다른 모양을 표시합니다.
[롤오버] 상태를 선택하고 단추에 스타일을 지정하여 표준 상태와 다른 모양을 표시합니다.

  1. 롤오버 상태를 업데이트한 후에 [표준] 상태를 다시 선택합니다.
  2. [스크롤 효과] 패널의 [동작] 탭을 엽니다. 단추를 선택한 상태에서 [동작] 확인란을 선택합니다. T 핸들을 드래그하거나 숫자 값을 입력하여 키 위치를 설정합니다. 스크롤 비율의 .75 비율로 이동하도록 [시작 동작] 섹션을 설정합니다. 다른 모든 필드는 0으로 설정된 상태로 둡니다.
[동작] 탭에서 스크롤 효과를 사용한 다음 이동 방향과 비율을 설정합니다.
[동작] 탭에서 스크롤 효과를 사용한 다음 이동 방향과 비율을 설정합니다.

  1. Option/Alt 키를 누른 채 홈 단추를 페이지 아래로 드래그합니다. 그러면 단추의 복제본이 만들어집니다. 복제본이 원본 홈 단추에 맞춰 세로로 정렬되었는지 확인합니다. 두 요소가 정렬되고 복제본이 선택된 상태이면 진한 파란색 스마트 안내선이 가운데에 일시적으로 표시됩니다.
Option/Alt 키를 누른 채 단추 복제본을 드래그하여 세로로 정렬합니다.
Option/Alt 키를 누른 채 단추 복제본을 드래그하여 세로로 정렬합니다.

  1. 원래 단추에서 약 460픽셀 아래에 위치하도록 복제본 단추를 페이지 아래로 이동합니다.
  2. 7-8단계를 반복하여 단추를 두 번 이상 복제하여 페이지에 일정한 간격으로 총 4개 단추를 만듭니다. 'Products, Photos, Contact Us' 레이블을 사용하는 텍스트 내용을 업데이트하려면 [텍스트] 도구로 위에서 두 번째, 세 번째, 네 번째 단추를 편집합니다.
텍스트 프레임의 텍스트를 편집하여 각 단추 레이블을 고유하게 만듭니다.
텍스트 프레임의 텍스트를 편집하여 각 단추 레이블을 고유하게 만듭니다.

첫 번째 홈 단추를 복제할 때 텍스트 프레임의 스타일과 해당 내용뿐만 아니라 스크롤 효과 설정이 복사됩니다. 복제된 단추 중 하나를 선택하고 [스크롤 효과] 패널을 보면 [동작] 탭의 설정이 홈 단추에 적용된 설정과 일치하며, 각 단추의 키 위치가 이전 단추에서 460픽셀 아래(페이지에서 각 단추 사이의 간격과 동일한 간격)에 있는 것을 알 수 있습니다.

  1. 높이와 간격을 추가하여 4개 단추가 최종 위치에 정렬되면 4개 단추의 총 높이를 계산합니다. 예에서 단추는 각각 116픽셀 높이이며, 각 단추 사이의 간격은 4픽셀입니다. 즉, 세로 메뉴 모음의 총 높이(모아 놓았을 때)는 476픽셀입니다. [사각형] 도구를 사용하여 원하는 페이지 섹션의 폭 및 메뉴 모음과 같은 높이의 사각형을 그립니다. 이 예에서 사각형 폭과 높이는 931 x 476픽셀입니다.
  2. 예에서 디자인을 복제하려면 사각형의 채우기 색상을 단추의 표준 상태보다 밝은 음영의 연분홍으로 설정할 수 있습니다. 제어판에서 모퉁이 반경 값을 입력하여 둥근 모퉁이를 만들 수도 있습니다. 이 예에서 네 모퉁이 모두 10픽셀로 설정되어 있습니다.
사각형을 선택하고 둥근 모퉁이에 대한 모퉁이 반경을 설정합니다.
사각형을 선택하고 둥근 모퉁이에 대한 모퉁이 반경을 설정합니다.

  1. [선택] 도구를 사용하여 사각형 위쪽 가장자리가 페이지 위쪽에서 약 5094픽셀 거리가 되도록 사각형을 맞춥니다. 또한 사각형 왼쪽이 단추 왼쪽에 세로로 맞춰졌는지 확인합니다. 예에서 사각형과 단추가 모두 페이지 왼쪽에서 14픽셀 위치에 있습니다. 요소를 선택하고 [변형] 패널을 열 때 이러한 설정을 볼 수 있습니다. X 값은 왼쪽으로부터의 거리(14픽셀)이고 Y 값은 페이지 위쪽으로부터의 거리(5094픽셀)입니다.
  2. 사각형을 선택한 상태에서 [스크롤 효과] 패널을 열고 [동작] 탭에서 [동작] 확인란을 선택합니다. 키 위치를 4979로 설정합니다.
  3. 스크롤 속도의 1배 비율로 오른쪽으로 이동하도록 [시작 동작]을 설정합니다. 동작 탭의 다른 모든 필드는 0으로 설정된 상태로 둡니다.
왼쪽에서 날아와 오른쪽으로 이동하도록 하여 사각형이 페이지로 이동하도록 스크롤 효과를 적용합니다.
왼쪽에서 날아와 오른쪽으로 이동하도록 하여 사각형이 페이지로 이동하도록 스크롤 효과를 적용합니다.

  1. 사각형이 4개 단추 뒤에 배열되었는지 확인하려면 사각형을 선택한 상태에서 [개체] > [맨 뒤로 보내기]를 선택합니다.
  2. [파일] > [배치]를 선택하고 이미지 파일을 찾아서 선택한 다음 페이지를 한 번 클릭하여 배치합니다. 이 예에서는 전구 이미지를 표시할 수 있게 투명도가 있는 PNG가 배치되었습니다. 전구는 메뉴 단추가 포함되는 영역으로부터 오른쪽 위에 위치한 큰 사각형 위에 배치됩니다. 이 예에서 이미지는 왼쪽에서 501픽셀 위치에 배치되고(X 위치) 페이지 위쪽에서 5245픽셀 위치에 배치됩니다(Y 위치).
  3. 배치된 이미지가 4개 단추 뒤에 배열되었는지 확인하려면 이미지를 선택한 상태에서 [개체] > [맨 뒤로 보내기]를 선택합니다. 목표는 배치된 이미지를 큰 사각형 위와 4개 단추 뒤에 표시하는 것입니다.
  4. 배치된 이미지를 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 열고 [동작] 확인란을 선택합니다. 키 위치를 원하는 값으로 설정합니다. 예에서 4979픽셀로 설정되어 있습니다.
  5. [시작 동작] 섹션에서 스크롤 비율의 .75배 비율로 이동하도록 오른쪽 값을 설정합니다. 다른 방향 값 모두를 0으로 설정합니다.
사각형과 같은 속도로 오른쪽으로 이동하도록 [시작 동작]을 설정합니다.
사각형과 같은 속도로 오른쪽으로 이동하도록 [시작 동작]을 설정합니다.

  1. [텍스트] 도구를 사용하여 텍스트 프레임을 만듭니다. 예제 파일에서 텍스트 프레임에 'Stack linked text frames with high contrast roll-overs to create unusual menus.'가 입력되어 있습니다. 하지만 원하는 텍스트 내용을 입력할 수 있습니다. 제어판의 서식 옵션을 사용하여 텍스트에 원하는 스타일을 지정합니다. 이 예에서는 텍스트 프레임에 배경 채우기 색상이 적용되지 않았습니다.
  2. [선택] 도구를 사용하여 텍스트 프레임을 배치된 이미지 오른쪽에 배치합니다. 이 예에서 텍스트 프레임은 X 값이 357픽셀(왼쪽에서)로 설정되어 있고 Y 값이 5136픽셀(위쪽에서)로 설정되어 있습니다. 실제 위치는 텍스트 내용과 텍스트 프레임에 적용한 서식 옵션에 따라 다릅니다.
  3. 텍스트 프레임을 선택한 상태에서 [개체] > [뒤로 보내기] 옵션을 사용하여 텍스트 프레임을 배열하거나 [레이어] 패널에서 이동하면 텍스트 프레임이 4개 단추 뒤와 큰 사각형 위에 표시됩니다.
  4. [스크롤 효과] 패널에서 [동작] 확인란을 선택합니다. T 핸들을 드래그하거나 값을 입력하여 키 위치를 설정합니다. 예에서 키 위치는 배치된 이미지(전구 그림)에 사용된 것과 같은 키 위치 값인 4979픽셀로 설정되어 있습니다.
  5. [시작 동작] 섹션에서 스크롤 비율의 절반(.5) 비율로 왼쪽 방향으로 이동하도록 텍스트 프레임을 설정합니다. 다른 모든 필드는 0으로 설정합니다.
텍스트 프레임은 느린 비율로 왼쪽(사각형과 배치된 이미지의 반대 방향)으로 이동하도록 설정되어 있습니다.
텍스트 프레임은 느린 속도로 왼쪽으로 이동하도록 설정되어 있습니다.

기본 스택 메뉴 섹션이 이제 완료되었습니다. 하지만 추가할 수 있는 디자인 요소가 한 개 더 있습니다. 여기에는 회전한 사각형을 사용하여 사선 줄무늬 효과를 추가한 [슬라이딩] 메뉴 예제와 같은 방식으로 큰 사각형의 오른쪽 아래 모퉁이 위에 회전한 사각형을 여러 개 추가하는 작업이 포함됩니다.

  1. [사각형] 도구를 사용하여 다양한 폭의 사각형을 여러 개 그립니다. 사각형을 브라우저 채우기에 적용된 배경색과 같은 색상으로 채웁니다. 이런 방식으로, 큰 사각형이 오른쪽으로 이동하여 그 뒤에 배치될 때까지 사각형이 표시되지 않습니다. 이러한 사각형 대각선 집합을 그룹화하여 단일 요소로 작업할 수 있습니다.
큰 사각형의 오른쪽 아래 모퉁이를 지나는 사선 줄무늬가 만들어지도록 일련의 사각형을 회전합니다.
큰 사각형의 오른쪽 아래 모퉁이를 지나는 사선 줄무늬가 만들어지도록 일련의 사각형을 회전합니다.

  1. 필요한 경우 [레이어] 패널을 사용하거나 [개체] > [맨 뒤로 보내기]를 선택하여 큰 사각형이 맨 뒤 즉, 페이지에서 다른 모든 요소의 뒤에 표시되도록 배열합니다.
  2. [미리 보기]를 클릭하여 브라우저에서 페이지를 미리 보고 아래로 스크롤하여 스택 메뉴가 제 위치로 이동하는지 확인하여 진행 상황을 정기적으로 테스트합니다. 테스트를 마치면 Muse로 돌아갑니다. 

동작 배경

동작 배경 효과를 만들기 위해 긴 페이지를 덮는 바둑판식 배열의 배경 이미지로 채워진 일련의 큰 사각형을 만들 수 있습니다. 이 예에서는 [스크롤 효과] 패널의 [동작] 탭이 아닌 [채우기] 메뉴의 [스크롤] 탭을 사용하여 동작 설정을 적용합니다.

비슷한 동작 배경 효과를 작성하려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 6254픽셀로 설정되어 있습니다.

참고:

이 예에서는 페이지가 사각형으로 덮여 있으므로 브라우저 채우기 색상을 설정했는지 여부가 문제되지 않습니다. 페이지 채우기 색상을 없음으로 설정합니다.

  1. 페이지 맨 위에서 [사각형] 도구를 사용하여 큰 사각형을 그립니다. 이 예에서 사각형 폭과 높이는 1159 x 1312픽셀입니다. [선택] 도구를 사용하여 페이지 가운데에 사각형을 배치하고 사각형 양쪽이 브라우저 창 가장자리를 지나도록 넓게 확장합니다.
  2. 사각형을 선택한 상태에서 [채우기] 메뉴를 사용하여 배경 이미지를 설정합니다. [맞춤] 메뉴를 [바둑판식 배열]로 설정하여 이미지를 바둑판식으로 배열합니다.
바둑판식으로 배열된 이미지를 사각형 채우기로 설정합니다.
바둑판식으로 배열된 이미지를 사각형 채우기로 설정합니다.

  1. [효과] 메뉴를 사용하여 그림자 효과를 설정하여 사각형 주변에 멋진 테두리를 만들 수 있습니다.
  2. 채워진 사각형을 선택한 상태에서 [채우기] 메뉴의 [스크롤] 탭을 엽니다. [동작] 확인란을 선택한 다음 T 핸들을 클릭한 채 드래그하거나 필드에 숫자를 입력하여 키 위치를 설정합니다. 예에서 키 위치가 512픽셀로 설정되어 있습니다. 하지만 핸들을 축소하여 사각형 위쪽 모서리에 맞출 수 있습니다.
  3. [시작 동작] 섹션에서 아래쪽과 왼쪽으로 이동하도록 방향을 설정하고, 두 속도 모두 스크롤 속도의 .2배 비율로 이동하도록 설정합니다. [최종 동작] 섹션에서 같은 설정을 반복합니다.
[채우기] 메뉴의 [스크롤] 탭에서 [동작] 옵션을 설정합니다.
[채우기] 메뉴의 [스크롤] 탭에서 [동작] 옵션을 설정합니다.

  1. 2-6단계를 반복하여 채워진 다른 사각형을 만듭니다. 새 사각형을 첫 번째 사각형 바로 아래에 배치하여 브라우저 채우기 영역에 보이지 않도록 하고 두 사각형 사이에 공간이 없도록 합니다. 새 사각형을 바둑판식으로 배열된 다른 이미지 배경 채우기로 채웁니다.
  2. 7단계를 반복하여 두 번째 사각형 바로 아래에 배치된 사각형의 1/3 크기의 사각형을 만듭니다. [채우기] 메뉴를 사용하여 바둑판식으로 배열된 다른 배경 이미지를 설정합니다. 사각형을 모두 표시하고 페이지에 세로로 정렬하려면 [보기] 메뉴를 사용하여 축소하는 것이 유용합니다.
축소하고 [선택] 도구를 사용하여 3개의 큰 사각형을 세로 방향으로 배치합니다.
축소하고 [선택] 도구를 사용하여 3개의 큰 사각형을 세로 방향으로 배치합니다.

참고:

예에서 세 번째 사각형이 처음 두 개 사각형보다 깁니다. 핸들을 드래그하여 세 번째 복제한 사각형의 높이를 확장하거나 네 번째 사각형을 만들어 맨 아래 남은 페이지 영역을 채울 수 있습니다.  

  1. 두 번째 사각형을 선택한 상태에서 [채우기] 메뉴의 [스크롤] 탭을 엽니다. 스크롤 비율의 .3배 비율로 사각형이 오른쪽으로 이동하도록 [시작 동작] 섹션을 업데이트합니다. [최종 동작] 섹션에서 같은 설정을 적용하여 스크롤 비율의 .3배 비율로 사각형을 오른쪽으로 이동합니다. 세로 방향 필드 모두 0으로 설정된 상태로 둡니다.
두 번째 사각형이 오른쪽으로 이동하도록 [시작 동작]과 [최종 동작] 설정을 지정합니다.
두 번째 사각형이 오른쪽으로 이동하도록 [시작 동작]과 [최종 동작] 설정을 지정합니다.

  1. 세 번째 사각형을 선택하고 [채우기] 메뉴의 [스크롤] 탭에서 설정을 업데이트합니다. 스크롤 비율의 .25배 비율로 위쪽으로 이동하고 스크롤 비율의 .6배 비율로 왼쪽으로 이동하도록 [시작 동작] 섹션을 설정합니다. [최종 동작] 섹션에서 세 번째 사각형에 대해 같은 설정을 적용합니다.
  2. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 페이지를 테스트합니다. 페이지 맨 아래로 스크롤할 때까지 페이지를 스크롤하여 바둑판식으로 배열된 각 사각형이 대각선 방향으로 이동하는지 확인합니다. 위로 스크롤할 때 사각형도 계속 이동합니다.
  3. 브라우저를 닫고 Muse 작업 영역으로 돌아옵니다.

마스크

이 예에서 막대 그래프가 제 위치로 애니메이션됩니다. 분홍색 화살표 그래픽이 위쪽으로 확장되고 그래프의 막대 위와 뒤로 물결 모양을 이룹니다. 그래프에서 막대가 차트 아래쪽에서 길게 늘어나는 것처럼 보이지만 실제로는 큰 흰색 사각형 뒤에서 나타나는 동작 스크롤 효과가 적용된 단색 사각형입니다(페이지 배경색과 같은 흰색으로 채워짐).

이 예에서는 스크롤 효과와 함께 여러 기술을 사용합니다. 요소는 [레이어] 패널을 사용하여 서로의 앞과 뒤에 배열됩니다. 흰색 사각형이 그래프 요소 맨 위에 그려집니다. 흰색 사각형이 막대 그래프를 덮고 있을 때 막대와 화살표가 마스크 처리된 것처럼 보기에서 숨겨집니다. 흰색 사각형과 차트 표는 동작 스크롤 효과에서 0 설정을 사용하므로 페이지를 스크롤할 때 제 위치에 남아 있습니다. 아래에 배열된 막대와 분홍색 화살표 그래픽에는 막대 그래프를 모았을 때 위쪽과 보기로 이동되는 동작 스크롤 효과가 적용되었습니다.

비슷한 마스크 효과를 작성하려면 다음 단계를 수행하십시오.

  1. 디자인 보기에서 [페이지] > [페이지 속성]을 선택합니다. [최소 높이] 필드를 훨씬 큰 값으로 설정합니다. 사이트 예에서 페이지의 최소 높이는 6076픽셀로 설정되어 있습니다.
  2. 페이지와 브라우저 채우기를 모두 흰색(또는 원하는 색으로 설정하지만, 같은 색을 사용하여 마스크 사각형을 나중에 채움)으로 설정합니다.
  3. [사각형] 도구를 사용하여 페이지에 큰 사각형을 그립니다. 예에서 사각형 폭과 높이는 804 x 489픽셀입니다.
  4. 사각형 채우기 색상을 없음으로 설정합니다. 획 색상을 원하는 색으로 설정합니다. [획] 메뉴에서 사각형 왼쪽과 아래쪽 획 두께를 20으로 설정하고, 위쪽과 오른쪽 획 두께를 0으로 설정하여 획을 숨깁니다. 이렇게 하면 막대 그래프 차트의 기능이 만들어집니다.
     
[획] 메뉴를 사용하여 사각형 왼쪽과 아래쪽에 획을 설정합니다.
[획] 메뉴를 사용하여 사각형 왼쪽과 아래쪽에 획을 설정합니다.

  1. 사각형을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 엽니다. 키 위치를 설정하고 네 필드에 모두 0을 입력합니다. 이 설정의 경우, 사각형이 키 위치에 도달할 때까지 앞뒤로 이동하지 않으므로 요소가 제 위치에 그대로 남아 있게 됩니다.
모든 필드에 0을 입력하여 사각형을 페이지에 "핀으로 고정"시킵니다.
모든 필드에 0을 입력하여 사각형을 페이지에 "핀으로 고정"시킵니다.

  1. [사각형] 도구를 사용하여 큰 사각형 두 개를 그립니다. 첫 번째 사각형을 그려서 차트 왼쪽에 맞춥니다. 이 예에서 사각형 폭과 높이는 657 x 1810픽셀입니다.
  2. 두 번째 사각형을 차트 아래에 그려서 맨 아래 가장자리에 맞춥니다. 이 예에서 사각형 폭과 높이는 1002 x 1541픽셀입니다.
  3. 두 사각형의 채우기 색상을 흰색(또는 브라우저 채우기 색상과 같은 색상)으로 설정하고 획을 0으로 설정합니다. [선택] 도구를 사용하여 사각형을 차트의 양쪽에 맞춥니다.
큰 사각형 두 개를 그래프 차트 왼쪽과 아래쪽에 배치합니다.
큰 사각형 두 개를 그래프 차트 왼쪽과 아래쪽에 배치합니다.

  1. 사각형을 선택한 상태에서 마우스 오른쪽 단추를 클릭하고 [개체] > [그룹]을 선택하여 두 마스크 사각형을 함께 그룹화합니다.
  2. 사각형 그룹을 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 엽니다. 키 위치를 설정하고(예에서 1516픽셀) 네 필드에 모두 0을 입력합니다. 이 설정은 흰색 사각형 그룹이 키 위치에 도달하기 전이나 후에 이동하지 않음을 의미합니다. 이 그룹은 차트의 바깥쪽 표처럼 위치에 남아 있습니다.
  3. [레이어] 패널을 사용하여 그룹을 일시적으로 숨기고 잠급니다.
  4. 아래로 스크롤하여 그룹 아래에 간격을 두고 [사각형] 도구를 사용하여 폭이 모두 같은 사각형을 5개 그립니다. 예에서 막대 폭은 모두 74픽셀이며, 높이는 다양합니다. 예제에서 왼쪽에서 오른쪽으로 이동하는 5개 사각형의 높이는 141, 188, 292, 444, 583입니다. 사각형 모두 그래프 차트의 왼쪽과 아래쪽 가장자리를 정의하는 획과 동일한 녹색으로 채워집니다.
페이지를 따라 5개 사각형을 분산시킵니다.
페이지를 따라 5개 사각형을 분산시킵니다.

  1. 사각형 위치(왼쪽에서 오른쪽)는 해당 X와 Y값으로 아래에 나열되었습니다.
    • X: 200 Y: 2622
    • X: 330 Y: 2797 
    • X: 460 Y: 3081 
    • X: 590 Y: 3304 
    • X: 721 Y: 3499
  2. 그런 다음 왼쪽에 있는 사각형부터 시작하여 오른쪽 방향으로 사각형을 각각 선택합니다. 각 사각형을 선택하고 [스크롤 효과] 패널의 [동작] 탭에 있는 [동작] 확인란을 선택하고 다음 키 위치를 설정합니다.
    • 2099
    • 2321
    • 2709
    • 3084
    • 3441
  3. 사각형을 모두 선택한 상태에서 [스크롤 효과] 패널의 설정을 업데이트하면 [시작 동작] 섹션이 스크롤 속도의 1배 비율로 위로 이동합니다. 다른 모든 필드는 0으로 설정합니다.
     
[스크롤 효과] 패널에서 5개 사각형에 대한 동작 값을 한 번에 설정합니다.
[스크롤 효과] 패널에서 5개 사각형에 대한 동작 값을 한 번에 설정합니다.

  1. 페이지에 투명한 PNG를 배치합니다. 예에서 PNG 파일은 위쪽으로 지그재그 방향으로 이동하는 분홍색 화살표 그래픽입니다. 이 예에 사용된 PNG 폭과 높이는 695 x 443픽셀입니다. 페이지에 배치한 후에 X: 78 위치와 Y: 3427 위치로 이동합니다.
  2. [레이어] 패널에서 PNG 파일을 첫 번째와 세 번째 막대 사각형 아래와 두 번째, 네 번째, 다섯 번째 막대 위에 오도록 배열합니다.
PNG 화살표 이미지가 그래프에서 막대 사이에 배치되어 표시되도록 [레이어] 패널을 사용하여 PNG 화살표 이미지를 배열합니다.
PNG 화살표 이미지가 그래프에서 막대 사이에 배치되어 표시되도록 [레이어] 패널을 사용하여 PNG 화살표 이미지를 배열합니다.

  1. 화살표 이미지를 선택한 상태에서 [스크롤 효과] 패널의 [동작] 탭을 열고 [동작] 확인란을 선택합니다. 키 위치를 설정합니다(예제에서 3238픽셀). [시작 동작] 섹션에서 방향을 위쪽과 오른쪽으로 설정하고 두 [시작 동작] 필드에 스크롤 비율의 .25배를 입력합니다. [최종 동작] 섹션의 두 필드를 0으로 설정합니다.
[스크롤 효과] 패널에서 동작에 대한 설정을 업데이트합니다.
[스크롤 효과] 패널에서 동작에 대한 설정을 업데이트합니다.

  1. [레이어] 패널에서 이전에 숨기고 잠근 두 개의 흰색 사각형 그룹을 표시하고 잠금을 해제합니다. 그룹을 다른 요소 위로 이동하여 페이지의 다른 컨텐트 위에 표시되도록 합니다. 그룹이 맨 위에 있으므로 차트의 프레임 내에서 위로 이동할 때 막대와 화살표 그래픽만 표시하는 마스크 역할을 합니다.
  2. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 페이지를 테스트합니다. 막대를 마스크하는 두 개의 흰색 사각형이 차트 내에 있을 때까지 막대 그래프 요소를 숨기므로, 페이지를 스크롤하여 막대 그래프 차트가 제 위치로 이동하는지 확인합니다.
  3. 브라우저를 닫고 Muse 작업 영역으로 돌아옵니다.

스크롤 효과를 사용한 사이트 디자인의 예

스크롤 효과 기능이 어떻게 작동하는지 확인하려면 Demential Lab 웹 사이트를 참조하십시오.

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

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