위젯을 사용하여 양식, 메뉴, 슬라이드 쇼, 소셜 미디어 단추 등을 웹 페이지에 추가하는 방법을 알아봅니다.

참고:

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

Adobe Muse에서 위젯을 사용하여 동적으로 생성되는 컨텐트와 대화형 사이트 기능을 추가할 수 있습니다. 위젯은 사전에 구성된 설정 변경이 가능한 개체로 메뉴, 양식, 슬라이드 쇼 등 다양한 일반적인 웹 기능을 제공합니다. Adobe Muse는 복잡한 웹 디자인을 단순하게 만들어주는 다양한 위젯을 제공합니다.

Adobe Muse의 위젯은 사이트 디자인별로 꾸밀 수 있어 나머지 웹 페이지와 완벽하게 조화를 이룰 수 있도록 만들어 줍니다. 위젯 라이브러리에는 미리 작성된 여러 가지 사이트 기능(위젯)이 포함되어 있습니다. 이러한 기능을 페이지 위로 드래그한 다음 위젯의 동작 방식을 구성하고 스타일을 지정하여 모양을 바꿀 수 있습니다.

위젯 유형

Adobe Muse에서는 다음과 같은 종류의 위젯을 제공합니다.

  • 컴포지션 위젯: 이 위젯을 사용해 웹 페이지의 영역과 상호 작용하여 다른 영역에 표시된 컨텐트를 변경할 수 있습니다. 변경 시 페이드 또는 슬라이딩 애니메이션이 발생합니다. 
  • 양식 위젯: 사이트에 양식을 추가하여 사이트 방문객들이 사용자에게 연락할 수 있습니다. 선택한 양식 위젯에 따라 다양한 양식의 필드를 사용할 수 있습니다.
  • 메뉴 위젯: 각 메뉴 항목의 상태를 포함하는 메뉴 막대를 동적으로 또는 수동으로 채울 수 있습니다. 각 페이지에서 적절한 메뉴 링크에 "활성" 상태를 자동으로 표시하여 해당 페이지가 현재 페이지임을 알려줍니다.
  • 패널 위젯: 한 번에 컨텐트 패널 하나만 표시하며, 여기에는 표시 패널을 전환하는 직관적인 탐색 링크가 포함됩니다. 슬라이딩 애니메이션 아코디언 구조 또는 익숙한 탭 구분 보기 중 선택하십시오.
  • 슬라이드 쇼 위젯: 이 위젯을 사용하여 갤러리의 이미지를 멋진 애니메이션으로 손쉽게 표시할 수 있습니다. 간단한 이미지 기반 슬라이드 쇼에 가장 적합하며, 더 복잡한 슬라이드 쇼의 경우 컴포지션 위젯이 적합합니다.
  • 소셜 위젯: 소셜 위젯은 사용자 정의 HTML을 구성하여 Adobe Muse 페이지에 포함시키는 쉬운 방법을 제공합니다. 대부분의 웹 위젯은 타사 웹 사이트의 HTML을 포함하여 사용할 수도 있는 기능을 제공합니다. 응용 프로그램 외부에서 코드를 생성하여 Adobe Muse에 포함된 HTML로 붙여넣지 않고, Adobe Muse 내에서 웹 컨텐트를 추가하고 구성하면 시간을 절약할 수 있습니다.

Adobe Muse 웹 페이지에 위젯 추가

위젯 라이브러리에서 위젯을 선택하여 Adobe Muse 웹 페이지에 추가할 수 있습니다. 위젯을 추가하려면 다음을 따르십시오.

  1. Adobe Muse에서 [창] > [위젯 라이브러리]를 선택합니다.

    위젯 라이브러리 패널이 표시됩니다.

  2. 위젯 라이브러리 패널에서 위젯을 선택하여 Adobe Muse 웹 페이지에 드래그합니다.

  3. 위젯을 더 구성하려면 버튼을 클릭하여 [옵션] 패널을 엽니다.

    자세한 내용은 위젯 구성 및 사용자 정의를 참조하십시오.

위젯 구성 및 사용자 정의

Adobe Muse를 사용하면 위젯을 웹 페이지에 배치한 후 옵션 패널을 통해 위젯을 구성할 수 있습니다. [옵션] 패널은 변경 내용을 적용하여 위젯에 고유한 설정을 업데이트할 수 있는 컨텍스트 패널입니다. [옵션] 패널에는 컨텐트 모양을 결정할 수 있는 설정이 포함되어 있습니다.

[채우기 및 획] 옵션을 사용하여 위젯 모양을 크게 향상시킬 수 있습니다. 위젯에 텍스트가 포함된 경우, [텍스트] 패널([창]>[텍스트] 또는 컨트롤 패널의 텍스트 옵션)을 사용하여 필요한 디자인별로 텍스트를 변경하거나 꾸밀 수 있습니다.

위젯을 구성하려면, 다음을 따르십시오.

  1. Adobe Muse에서 아무 위젯이나 웹 페이지로 드래그합니다.

    참고:

    [위젯 컨텐트 지우기](위젯을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴에서 [위젯 컨텐트 지우기] 선택) 옵션을 선택하여 위젯 내에 있는 모든 기본 컨텐트를 제거합니다.

  2. 선택한 위젯에서 버튼을 클릭하여 [옵션] 패널을 표시합니다.

  3. 필요한 경우 [옵션] 패널에서 설정을 변경하거나 업데이트합니다.

  4. 페이지의 아무 곳이나 클릭하여 [옵션] 패널을 닫습니다.

    그림에 [가로 메뉴] 위젯용 옵션 패널이 표시됩니다.

    가로 메뉴 위젯 옵션 패널
    가로 메뉴 위젯용 옵션 패널.

위젯에서 중첩된 요소를 선택

위젯 라이브러리에 있는 위젯을 페이지 위로 드래그하는 작업은 근본적으로 일련의 중첩된 컨테이너 집합을 배치하는 것과 같습니다. 이 컨테이너는 계층 구조에 따라 선택하고 편집할 수 있습니다.

위젯 작업 시, 위젯 및 해당 컨테이너를 선택하는 방법을 이해하는 것은 아주 중요합니다. Adobe Muse는 선택 표시자를 사용하여 현재 선택 사항을 보여줍니다. Adobe Muse의 왼쪽 상단 모서리에 나타나는 선택 표시자는 해당 상태별로 개체를 미리 볼 수 있는 드롭다운 메뉴와 함께 현재 선택 사항을 표시합니다.

아래의 예시에서 선택 표시자는 페이지 선택 사항(웹 페이지의 개체가 선택되지 않은 경우), 메뉴 위젯(메뉴 위젯 선택) 및 메뉴 항목(메뉴 위젯 내 컨테이너)을 표시합니다.

단추 상태
모든 페이지 요소를 선택하지 않은 상태로 둔 경우

단추 상태
메뉴 위젯을 선택한 경우

단추 상태 표준
컨테이너를 선택하고 메뉴 위젯 내 메뉴 항목을 선택한 경우

전체 위젯을 한 번 클릭했을 때는 선택 표시자에 "위젯"이라는 단어가 표시됩니다. 마우스 단추를 한 번 더 클릭하면 위젯 내의 컨테이너가 선택되고, 선택 표시자에 "컨테이너"라는 단어가 표시됩니다. 계속하여 마우스 단추를 클릭할 때마다 컨테이너 내에 중첩된 요소(텍스트 프레임 등)가 차례로 선택됩니다.

예를 들어, 텍스트 프레임을 선택한 상태에서는 선택 표시자에 "텍스트 프레임"이라는 단어가 표시됩니다. 위젯을 클릭하여 중첩 요소를 한 층위씩 "아래로 파고들 때"는 선택 표시자에 어떤 단어가 표시되는지 참조하여 현재 선택한 중첩 요소가 무엇인지 확인하는 습관을 갖는 것이 좋습니다. 메뉴 탐색 모음의 개별 단추 등과 같은 다른 컨테이너를 선택하여 해당 상태를 업데이트할 수 있습니다. 예를 들어, 페이지를 처음 로드할 때, 방문자가 단추 위에 마우스 커서를 올려 놓았을 때, 방문자가 단추를 클릭했을 때 단추의 모양이 어떻게 바뀌게 할지 제어할 수 있습니다. 방문자가 현재 보고 있는 페이지에 상응하는 단추를 시각적으로 구분되게 표시하여 방문자에게 현재 위치를 알리는 "활성" 상태를 정의할 수도 있습니다.

위젯에 중첩된 컨테이너 수가 많으면 편집할 항목을 선택하기 위해 마우스 단추를 여러 번 클릭해야 할 수도 있습니다. 선택 표시자를 참조하고 [상태] 패널에 제공되는 옵션을 확인하면 변경할 중첩 요소를 올바르게 선택했는지 쉽게 알 수 있습니다.

위젯 업데이트를 마친 후에는 페이지에서 임의의 다른 위치를 클릭하여 위젯을 선택 취소하거나 Esc 키를 반복하여 누르면서 위젯의 계층 구조를 한 수준씩 위로 거슬러 올라갈 수 있습니다.

옵션 패널을 사용해 위젯 구성

위젯 라이브러리에 있는 위젯을 페이지 위로 드래그한 다음 해당 위젯을 선택하면 위젯의 오른쪽 위 가장자리에 파란색 화살표 아이콘이 나타납니다. 이 파란색 화살표 아이콘을 클릭하면 [옵션] 메뉴가 열립니다.

각 위젯마다 사용할 수 있는 옵션이 서로 다르므로 [옵션] 메뉴 인터페이스에서 설정할 수 있는 옵션도 제각각입니다. 이러한 설정은 위젯의 동작(슬라이드 쇼를 자동으로 재생할지, 방문자가 축소판을 클릭해야만 해당 이미지의 좀 더 큰 버전을 볼 수 있도록 할지 선택하는 등)을 제어하는 옵션과 위젯의 모양(각각의 새 이미지를 표시할 때 이미지 전환에 사용되는 애니메이션 유형을 지정하는 등)을 제어하는 옵션으로 크게 구분됩니다.

웹 사이트를 디자인할 때 이러한 설정을 여러 가지로 테스트해 보면서 고객과 협력하여 해당 프로젝트에 가장 적합한 옵션을 선택할 수 있습니다. 사이트를 온라인으로 이미 게시했다 하더라도 언제든지 Adobe Muse 파일을 다시 열고 위젯을 선택한 다음 파란색 화살표 아이콘을 클릭하여 [옵션] 메뉴를 열기만 하면 위젯의 설정을 새로 변경할 수 있다는 사실을 잊지 마십시오. 그런 다음 사이트를 다시 게시하면 변경 내용이 라이브 웹 사이트에 반영됩니다.

메뉴 위젯을 사용하면 사이트의 페이지 이름을 동적으로 표시하고 해당 페이지에 대한 링크를 자동으로 생성할 수 있습니다. 이렇게 하면 [플랜] 보기의 사이트맵을 기반으로 각 페이지에 사이트 탐색 기능을 매우 쉽게 추가할 수 있으며, 링크가 끊어질까 염려할 필요가 전혀 없습니다. 메뉴 위젯에 특정 페이지가 동적으로 표시되지 않게 하고 싶으면 [플랜] 보기에서 페이지의 축소판을 마우스 오른쪽 단추로 클릭하고 [탐색에 페이지 포함] 옵션을 선택 취소하여 해당 페이지를 비활성화하면 됩니다. 이 옵션은 기본적으로 활성화되어 있습니다(활성화된 옵션 옆에는 확인 표시가 있습니다).

또는 Muse를 통해 메뉴 항목으로 자동으로 생성하는 대신 단추의 이름을 직접 지정하고 특정 페이지에 대한 링크를 추가하고 싶으면 메뉴 위젯을 수동으로 설정할 수도 있습니다. [옵션] 메뉴의 [메뉴 유형] 섹션에서 [수동] 옵션을 선택하면 됩니다.

메뉴 유형 옵션 패널
페이지 이름과 링크를 동적으로 생성하는 대신 수동으로 사용자 정의 메뉴를 만들려면 [메뉴 유형] 설정의 [수동] 옵션을 선택합니다.

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

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