참고:

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

Adobe Muse CC 2015.1의 개선 사항 | 2016년 2월

웹 페이지에서 상태 전환을 다른 개체에 적용하여 흥미롭고 매력적인 디자인을 만들 수 있습니다. 또한 각 개체에서 각 상태 전환에 대해 지연, 기간 및 타이밍 옵션을 설정할 수 있습니다.

상태 전환 시 모든 상태에서 경사 및 광선 변경이 지원됩니다.

개체의 여러 상태 알아보기

개체 상태는 사용자가 해당 개체와 상호 작용했을 때 그 모양을 결정합니다. 이러한 상호 작용은 마우스 오버(롤오버라고도 함), 클릭 등이 될 수 있습니다. 개체와 상호 작용하는 때를 기본 또는 일반 상태에서 다른 상태로 전환했다고 말합니다. 전환이 끝나면 Adobe Muse가 그러한 상호 작용에 부드러운 전환을 추가합니다.

Adobe Muse에서는 텍스트, 위젯 컨테이너(모든 유형의 위젯), 이미지, 하이퍼링크, 버튼 등을 포함한 다양한 유형의 개체에 상태를 적용할 수 있습니다. 상태는 그래픽 스타일, 단락 스타일, 문자 스타일 등으로 추정할 수 있습니다.

Adobe Muse에서 개체의 여러 상태란 무엇입니까?

Adobe Muse는 사용자 상호 작용을 기반으로 개체의 모양을 지정 및 변경할 수 있도록 다음과 같은 상태를 제공합니다. 

  • 표준: 표준 상태는 웹 페이지를 로드했을 때 기본 개체 모양 결정합니다. 이를 통해 상호 작용이 없을 때의 개체 상태를 정의할 수 있습니다. 개체가 표준 상태에서 다른 상태로 전환됩니다.
  • 마우스 누름: 마우스 누름 상태는 개체를 클릭하거나 릴리스되지 않았을 때 개체 모양을 결정합니다.
  • 롤오버: 롤오버 상태에서는 마우스를 개체 위로 가져가면 개체 모양을 변경할 수 있습니다. 롤오버 상태를 사용하는 것은 웹 페이지에 있는 대화형과 비대화형 개체를 구분하는 가장 쉬운 방법 중 하나입니다.
  • 활성: 활성 상태는 개체가 활성 상태이고 이미 개체를 클릭했을 때 개체 모양을 결정합니다. 예를 들어, 단추를 클릭하거나 메뉴를 선택했을 때입니다.
    개체가 활성 상태로 전환되면 개체가 사용 중이라는 것을 의미합니다. 활성 상태도 하이퍼링크를 포함한 모든 종류의 개체를 정의할 수 있습니다.

개체에 상태 지정

모든 개체는 기본적으로 4개의 상태가 지정됩니다. 하지만 Adobe Muse의 상태 패널을 사용하면 이러한 각각의 상태를 개별적으로 사용자 정의할 수 있습니다.

참고:

상태 작업을 할 때 선택 표시기를 사용하여 선택 항목을 추적하는 것이 중요합니다. Adobe Muse를 사용하면 기본적으로 개체의 표준 상태를 편집할 수 있기 때문입니다. 이는 개체 A의 활성 상태를 편집했다고 하더라도 개체 B를 선택했다가 개체 A를 다시 선택할 경우 표준 상태로 간주한다는 것의 의미합니다. 따라서 개체의 스타일을 지정하기 전에 항상 상태 패널에서 편집하려는 상태를 확실하게 선택하는 것이 중요합니다.

기본적으로 편집한 개체는 표준 상태로 저장됩니다. 하지만 Muse의 상태 패널을 사용하면 다양한 상태로 전환하고 개체 스타일을 적용하여 다른 상태로 사용자 지정할 수 있습니다. 각 상태를 별도로 편집하여 각 상호 작용 유형의 개체 동작에 초점을 맞출 수 있습니다.

개체 상태를 사용자 지정하거나 편집하려면 다음을 수행합니다.

  1. [] > [상태]를 클릭하여 [상태] 패널을 엽니다.
  2. 편집하고자 하는 상태의 개체를 선택합니다.
  3. 편집하고자 하는 [상태]를 선택하고 계속해서 개체 스타일을 지정합니다.
  4. [상태] 패널에서 [전환]을 선택하고 [페이드] 옵션을 선택합니다. 전환에 대한 [지연], [기간] 및 [속도] 옵션을 설정합니다. [전환]을 선택하면 설정에 따라 개체가 한 상태에서 다른 상태로 전환됩니다.
개체 스타일을 적용할 때 선택 표시기의 드롭다운을 사용하여 상태를 선택할 수도 있습니다.

위젯 및 위젯 컨테이너에 상태 지정

  1. 브라우저를 닫고 Adobe Muse로 돌아옵니다.

  2. 위젯을 한 번 클릭하여 전체 메뉴를 선택합니다. 음식 단추를 다시 한 번 클릭하여 음식 메뉴 항목을 선택합니다. 실수로 세 번 클릭하여 선택 표시기에 레이블이라는 단어가 나타날 경우 Esc 키를 한 번 눌러 계층의 한 수준 위로 이동하면 메뉴 항목이라는 단어가 표시됩니다.

    [옵션] 패널에서 [함께 편집] 옵션이 설정되어 있으므로 이 음식 메뉴 항목의 모양에 대한 모든 변경 내용은 가로 메뉴 위젯의 나머지 단추에 모두 적용됩니다. 이로 인해 편집이 더욱 빨라집니다. 디자인에 따라 각 단추에 서로 다른 스타일을 적용해야 하는 경우가 아니라면 [함께 편집] 옵션의 기본 설정을 사용으로 두십시오.

    메뉴 항목으로 설정된 선택 표시자
  3. 탭을 선택하거나 [창] > [상태]를 선택하여 [상태] 패널을 엽니다.

    이 패널을 사용하여 방문자의 커서 작업에 따라 단추의 그래픽이 표시되는 다양한 방식을 편집할 수 있습니다. 각 상태의 모양을 정의하는 여러 회색 상자가 있습니다.

    사이트를 미리 볼 때 표준 상태는 페이지가 처음 로드될 때 방문자의 커서가 메뉴와 상호 작용하지 않을 경우 메뉴가 보이는 방식을 나타낸다는 것을 확인했습니다. 방문자가 커서를 단추 위로 가져갈 경우 롤오버 상태에 적용된 스타일이 표시됩니다. 방문자가 단추를 누르고 있을 경우 마우스 누름에 적용된 스타일이 표시됩니다. 마지막으로 방문자가 사이트의 현재 페이지에 있을 경우(예를 들어, 정보 메뉴 항목을 클릭하고 정보 페이지를 보고 있는 경우) 단추는 활성 상태에 스타일을 지정한 방식으로 나타납니다. 이 마지막 상태는 선택 사항이지만, 방문자가 현재 보고 있는 페이지가 무엇인지 한 눈에 알 수 있으므로 경우에 따라 도움이 됩니다.

    단추 상태
  4. [상태] 패널에서 목록의 각 항목(표준, 롤오버, 마우스 누름 및 활성 상태)을 클릭합니다. 패널에서 각 상태를 클릭할 때마다 페이지의 메뉴 위젯이 업데이트되어 상태의 기본 모양이 표시됩니다.

  5. 표준 상태를 다시 클릭합니다. 홈 메뉴 항목이 선택된 상태에서 채우기 색상 칩을 사용하여 완전히 다른 색(예: 빨간색)을 선택합니다. 다른 채우기 색상을 설정할 경우 [함께 편집] 옵션이 설정되어 있으므로 모든 메뉴 항목의 [표준] 상태가 업데이트됩니다.

    단추 상태 옵션
    하나의 단추 상태에 대한 채우기 색상을 업데이트할 경우 [함께 편집] 옵션이 설정되어 있으므로 나머지도 자동으로 업데이트됩니다.

  6. [전환]을 선택하고 [페이드] 옵션을 선택합니다. 설정에 따라 개체가 한 상태에서 다른 페이드 인 또는 페이드 아웃으로 전환됩니다.

    한 상태에서 다른 상태로의 전환 옵션을 선택할 때 다음과 같은 옵션을 설정할 수 있습니다.

    지연: 한 상태에서 다른 상태로의 지연 시간입니다(초 단위).

    기간: 전환 기간입니다.

    속도: 이 옵션에서는 전환을 선형으로 설정하거나 전환을 다음 상태로 이동할 수 있습니다. 또한 서서히 시작하기, 서서히 끝내기 또는 서서히 시작하기/끝내기 옵션을 선택할 수도 있습니다. 개체 전환은 설정에 따라 서서히 시작되거나 끝납니다.

  7. [파일] > [브라우저에서 사이트 미리 보기]를 다시 선택하고 단추의 표준 상태를 사용자 정의했는지 확인합니다. 메뉴가 처음 로드될 때 현재 페이지를 설명하는 하나를 제외한 모든 단추가 이제 빨간색입니다. 각 단추 위로 커서를 가져가면 기본 회색 롤오버 색상이 표시되어 롤오버 효과를 만듭니다.

  8. 이 예의 경우 [상태] 패널에서 각 상태를 선택(또는 컨트롤 패널선택 표시기 옆에 있는 [상태] 메뉴를 사용하여 각 상태를 선택)하고 채우기 색상을 없음(빨간색 대각선이 있는 흰색 칩)으로 설정합니다. 이 설정은 보기에서 배경 메뉴 항목 단추를 효과적으로 제거하여 메뉴 단추가 투명해지고 배경 디자인이 보이게 됩니다.

이 설명서 작성 당시 가로 메뉴 위젯의 바깥쪽 컨테이너는 기본적으로 투명입니다. 하지만 원할 경우, 채우기 색상 피커를 사용하여 메뉴 항목 단추 컨테이너와 마찬가지로 채우기 색상을 설정할 수 있습니다. 나중에 사용자 자신의 상태를 만들 때 전체 위젯에 대한 채우기 색상을 테스트한 다음 단추 컨테이너에 대해 다른 채우기 색상을 설정할 수 있습니다. 또한 배경 이미지를 추가하여 단추를 디자인할 수도 있습니다.

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

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