Adobe Muse 사이트의 메뉴를 추가하고 구성하는 방법을 알아봅니다. 모바일 메뉴, 롤오버 상태 및 편집 메뉴 레이블을 만드는 방법을 알아봅니다.

참고:

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

탐색은 웹 사이트를 구축할 때 고려해야 할 가장 중요한 측면 중 하나입니다. 웹 사이트를 디자인할 때 사이트 탐색의 유형 및 배치를 선택하는 것이 중요합니다. 웹 사이트의 사용자 경험은 메뉴나 사이트 탐색으로 인해 향상되거나 손상될 수 있습니다.

Adobe Muse를 사용하면 메뉴 위젯을 사용하여 사이트 탐색 시스템을 신속하게 만들 수 있습니다. 페이지를 연결하는 링크를 수동으로 만들 수 있지만 메뉴 위젯을 사용하면 쉽고 유연하게 사이트에
탐색을 추가할 수 있습니다. 다른 위젯과 마찬가지로 메뉴 위젯을 페이지에 끌어서 메뉴를 추가하기만 하면 니다. 그렇게 하면 페이지 이름과 동일한 메뉴 레이블이 자동으로 채워집니다. 플랜 보기에서 페이지 이름을 변경하면 메뉴 레이블이 자동으로 업데이트됩니다. 

가로 및 세로 메뉴를 추가할 수 있습니다. 또한 Adobe Muse에서는 샌드위치 메뉴 및 메뉴 항목의 롤오버 상태를 만들 수 있습니다. Adobe Muse를 사용하여 이 모든 작업을 수행하는 방법에 대해 알아보십시오.

 

메뉴 위젯 추가

  1. 마스터 페이지를 편집할 수 있도록 [디자인] 보기에서 열고 [위젯 라이브러리]를 엽니다. 위젯 라이브러리를 열려면 [창] > [위젯 라이브러리]를 선택하면 됩니다.

  2. [위젯 라이브러리] 패널에서 [메뉴]를 클릭하여 메뉴 위젯의 목록을 확장합니다. 사이트의 디자인과 메뉴를 배치할 위치에 따라 다음 중 하나를 선택하십시오.

    • 가로 - 가로 메뉴 추가.
    • 세로 - 세로 메뉴 추가.
    Adobe Muse에서 세로 또는 가로 메뉴 위젯 선택
    세로 또는 가로 메뉴 위젯 선택
  3. 선택 도구를 사용하여 위젯을 끌어서 레이아웃의 원하는 위치에 놓습니다. 예를 들어, 머리글 섹션에 가로 메뉴 위젯을 배치할 수 있습니다.

    머리글의 갈색 리본 배경 이미지 위에 메뉴 위젯을 배치합니다.
    머리글의 갈색 리본 배경 이미지 위에 메뉴 위젯을 배치합니다.

    메뉴가 자동으로 페이지의 이름을 사이트 맵에 나타나는 동일한 순서로 표시합니다. 메뉴 레이블은 페이지에 자동으로 링크되며 동적입니다. 즉, 나중에 페이지 이름을 바꾸거나 페이지를 이동하는 경우 메뉴가 자동으로 업데이트됩니다. 링크는 예상대로 계속 작동합니다.

  4. 제어판에서 색상 피커를 클릭하고 메뉴의 색상을 설정합니다. 그런 다음 텍스트 크기 필드를 사용하여 메뉴에 있는 텍스트의 텍스트 크기를 설정합니다.

    텍스트 크기 및 색상 선택
    글꼴 색상과 크기(포인트 단위)를 설정하여 가로 방향 메뉴 위젯의 텍스트 단추를 조정합니다.

메뉴 위젯 구성 및 사용자 정의

메뉴 위젯을 레이아웃에 추가했으므로 요구 사항에 맞게 이 위젯을 사용자 정의할 수 있습니다. 옵션 패널을 사용하여 메뉴를 구성할 수 있습니다.  [옵션] 패널은 변경 내용을 적용하여 해당 위젯에 고유한 설정을 업데이트할 수 있는 컨텍스트 패널입니다. 이 패널을 사용하여 위젯이 작동하는 방식 및 위젯 컨텐트가 표시되는 방식을 제어합니다.

  1. 메뉴 위젯을 선택하고, 위젯 오른쪽 위 모서리에 있는 파란색 화살표를 클릭합니다. 옵션 패널이 표시됩니다.

    옵션 패널에서 메뉴 위젯 구성
    옵션 패널에서 메뉴 위젯 구성
  2. 옵션 패널을 사용하여 메뉴 위젯을 구성합니다. 다음과 같은 옵션을 구성할 수 있습니다.

    • 메뉴 유형: 사이트 탐색에 포함할 페이지를 지정합니다. 첫 번째 수준 또는 상위 페이지만 포함하려면 [위쪽 페이지]를 선택합니다. 탐색에 하위 페이지도 포함하려면 [모든 페이지]를 선택합니다. 하위 페이지는 하위 메뉴로 표시됩니다. 메뉴 위젯에 표시할 페이지를 수동으로 선택하려면 [수동]을 선택합니다.
    • 방향: 메뉴를 가로 또는 세로로 추가할지 지정합니다. 
    • 함께 편집: 모든 메뉴 항목을 함께 업데이트하려면 이 확인란을 선택합니다. 기본적으로 이 확인란은 선택되어 있습니다. 이 확인란을 선택하지 않으면 선택한 구성이 선택한 메뉴 항목에만 적용됩니다.
    • 항목 크기: 메뉴 항목을 너비 또는 크기별로 균일하게 배포해야 하는지 지정합니다.
    • 왼쪽 아이콘 표시: 기본적으로 이 확인란은 선택되어 있지 않습니다. 각 메뉴 항목의 왼쪽 모서리에 아이콘을 추가하려면 이 옵션을 선택합니다.
    • 레이블 표시: 기본적으로 이 확인란은 선택되어 있습니다. 이 확인란의 선택을 취소하면 메뉴 레이블이 더 이상 표시되지 않습니다.
    • 오른쪽 아이콘 표시: 오른쪽 아이콘을 비활성화하려면 [해제]를 선택합니다. 메뉴 항목의 오른쪽 모서리에서 아이콘을 구성하려면 설정을 선택합니다. 메뉴 항목에 대한 하위 메뉴가 있음을 나타내기 위해 화살표를 추가할 경우에 유용한 옵션이 오른쪽 아이콘입니다. 하위 메뉴만 옵션을 선택하여 하위 메뉴가 있는 메뉴 항목에 대해서만 오른쪽 아이콘을 구성할 수도 있습니다.
    • 파트 위치 지정: 각 탭의 내부 파트에 대한 시작점을 지정합니다.
    옵션 패널을 사용하여 메뉴 위젯 구성
    옵션 패널을 사용하여 메뉴 위젯 구성

메뉴 레이블 편집 및 스타일

다음 절차에서는 각 메뉴 항목에서 페이지 이름을 표시하는 텍스트 레이블을 업데이트하는 방법을 지정합니다. 간단한 텍스트 링크가 있는 매우 기본적인 디자인을 사용하는 가로 메뉴 위젯을 고려해보십시오. 이 예제에서는 모든 상태에 동일한 글꼴 서식이 사용된다고 가정합니다.

  1. 편집할 메뉴 레이블을 두 번 클릭하여 선택합니다.

  2. 메뉴 항목 내의 텍스트를 편집하려면 텍스트 패널을 여십시오( > 텍스트). 선택한 레이블에 대해 텍스트 패널에서 다음과 같은 필수 옵션을 선택하여 텍스트 서식을 지정합니다.

    • 글꼴: 메뉴 레이블에 적용할 필수 글꼴을 선택합니다.
    • 글꼴 스타일: 필요한 경우 메뉴 레이블에 대해 [이탤릭체] 또는 [볼드체]를 선택합니다.
    • 크기: 메뉴 레이블에 대한 글꼴 크기를 선택합니다.
    • 색상: 색상 드롭다운 필드에서 적용할 색상의 16진수 코드를 입력합니다. 또는 드로퍼를 사용하여 원하는 색상을 선택합니다.
    메뉴 위젯에서 메뉴 레이블 편집
    메뉴 위젯에서 메뉴 레이블 편집
  3. 텍스트 패널을 사용하여 메뉴 레이블의 여백 값을 구성합니다. 메뉴 레이블에 적용할 하이퍼링크 스타일이 이미 있는 경우 abc 옆에 있는 드롭다운 필드에서 스타일을 선택합니다.

    단락 스타일을 적용하려면 텍스트 패널의 단락 스타일 드롭다운 필드에서 스타일을 선택합니다.

  4. 메뉴 레이블에 채우기을 적용하려면 메뉴 레이블을 두 번 클릭하여 선택합니다. 페이지 상단의 도구 모음에서 채우기 색상 및 획 색상을 선택합니다.

    도구 모음에서 획 두께를 편집하고 메뉴 레이블의 모퉁이 반경을 활성화할 수도 있습니다.

    메뉴 레이블에 채우기 및 획 설정 적용
    메뉴 레이블에 채우기 및 획 설정 적용

메뉴 항목에 대한 롤오버 상태 만들기

  1. 선택 도구를 사용하여 롤오버 상태를 만들려는 메뉴 레이블을 선택합니다. 상태패널을 엽니다. 단추의 기본 상태가 이미 정의되어 있는 것을 알 수 있습니다. [상태] 패널에서 [롤오버] 축소판을 클릭하여 해당 상태를 편집합니다.

  2. 메뉴 레이블을 선택한 채 채우기 색상 피커를 사용하여 [채우기 없음], 즉 투명을 선택합니다(빨간색 대각선이 있는 흰색 색상 견본 클릭).

  3. [텍스트] 도구를 클릭하고 컨트롤 패널의 색상 피커를 사용하여 [롤오버] 상태에 대한 색상으로 황백색을 선택합니다.

  4. [상태] 패널에서 [마우스 누름] 상태를 선택합니다. 텍스트 도구를 선택한 채 제어판의 색상 피커에서 색상 견본을 선택하여 마우스 누름 텍스트를 더 짙은 색상으로 설정합니다.

  5. [상태] 패널에서 [활성] 상태를 선택합니다. 컨트롤 패널에서 [채우기] 링크를 클릭하여 [채우기] 메뉴를 엽니다.

  6. 채우기 메뉴에서 색상 피커를 클릭하고 채우기 색상을 없음으로 설정합니다. [이미지] 섹션 옆에 있는 폴더 아이콘을 클릭합니다. [가져오기] 대화 상자가 열리면 top-nav-over.png라는 배경 이미지 파일을 찾습니다. [선택]을 클릭하여 파일을 선택합니다. [가져오기] 대화 상자가 자동으로 닫힙니다.

  7. [채우기] 메뉴에서 [맞춤] 옵션이 [원래 크기]로 설정되어 있는지 확인합니다. 그런 다음 [위치] 섹션에서 9개의 점 중 가운데를 클릭합니다. 그러면 배경 이미지 채우기가 채우기 색상 없이 원래 크기로 중앙에 위치하여 나타납니다. 아무 곳이나 클릭하여 [채우기] 메뉴를 닫습니다.

    단추 상태 정의
    메뉴 항목의 활성 상태를 정의합니다.

    가로 메뉴 위젯의 함께 편집 기본 옵션이 활성화되어 있으므로 메뉴 레이블에 대한 모든 변경 내용이 탐색 모음의 나머지 모든 단추에도 자동으로 적용됩니다.

  8. [파일] > [저장]을 선택하여 작업 결과물을 저장합니다. [A-마스터] 탭에 있는 [X] 아이콘을 클릭하여 [디자인] 보기에서 페이지를 닫고 [플랜] 보기로 돌아갑니다. 마스터 페이지에 추가한 컨텐트를 포함하도록 페이지 축소판이 모두 업데이트된 것을 알 수 있습니다.

    참고:

    머리글과 바닥글 영역 안내선은 사이트의 마스터 페이지에서만 편집할 수 있습니다. 페이지의 머리글이나 바닥글 크기를 편집하고 싶으면 언제든지 마스터 페이지를 두 번 클릭하여 디자인 보기에서 열고 안내선의 위치를 조정하면 됩니다.

모바일 메뉴 만들기

Adobe Muse에서는 샌드위치 메뉴 또는 모바일 메뉴를 만들 수도 있습니다. 이러한 종류의 메뉴를 만든 경우 기본 메뉴 위에 마우스를 올려 놓으면 드롭다운 하위 메뉴가 나타납니다. 이 유형의 메뉴를 만들려면 컴포지션 위젯을 사용하여 하위 메뉴 만들기를 선택합니다.

메뉴에서 페이지 제외

플랜 보기에서 사이트의 새로운 최상위 페이지를 만들 때마다 Adobe Muse는 페이지를 메뉴에 자동으로 추가합니다. 그러나 방문자가 액세스하기 전에 페이지를 테스트하거나 특정 페이지를 숨기려는 경우가 있을 수 있습니다. 이러한 경우 Adobe Muse를 사용하면 탐색에서 특정 페이지를 제외하여 해당 페이지가 메뉴 위젯에 메뉴 항목으로 표시되지 않도록 할 수 있습니다.

메뉴 위젯에서 페이지를 제외하려면 다음 절차를 수행하십시오.

  1. 사이트의 사이트맵을 이미 만들었다고 가정하고 Adobe Muse의 플랜 보기로 이동합니다. 이 절차에서는 집, 포트폴리오, 내 이야기, 연락처 및 제품 페이지가 포함된 사이트맵이 있는 것으로 가정합니다.

    플랜 보기에서 사이트맵 보기
    플랜 보기에서 사이트맵 보기

    [마스터] 페이지로 이동하여 메뉴 위젯을 끌면 모든 페이지가 메뉴의 일부로 포함된 것을 볼 수 있습니다.

  2. 특정 페이지를 제외하려면 플랜 보기에서 제외할 페이지를 마우스 오른쪽 단추로 클릭합니다. 메뉴 옵션 > 메뉴에서 페이지 제외를 클릭합니다.

    예를 들어, 제품 페이지를 제외하려면 [제품]을 마우스 오른쪽 단추로 클릭합니다. 그런 다음 [메뉴 옵션] > [메뉴에서 페이지 제외]를 선택합니다.

    메뉴 위젯에서 특정 페이지 제외
    메뉴 위젯에서 특정 페이지 제외

    이제 메뉴를 보기 위해 [마스터] 페이지로 돌아가면 메뉴 위젯에서 제품이 제거된 것을 볼 수 있습니다.

    참고:

    전체 메뉴를 삭제하려면 메뉴 위젯을 추가한 페이지로 이동합니다. 위젯을 선택하고 삭제를 누릅니다.

    링크 없이 메뉴 항목을 표시하려는 시나리오의 경우 플랜 보기에서 특정 페이지를 마우스 오른쪽 단추로 클릭합니다. 메뉴 옵션 > 하이퍼링크 없이 페이지 포함을 선택합니다.

    이 옵션은 웹 사이트를 만드는 동안 다양한 슬라이드 쇼에 적합합니다. 예를 들어, 롤오버 제품 페이지에서 사이트 방문자가 주요 제품 레이블이 아닌 제품 범주만을 클릭하도록 하려면 이 옵션을 사용할 수 있습니다.

메뉴 위젯 작업

메뉴 위젯 작업
Brian Wood가 진행하는 이 비디오에서는 페이지에 메뉴 위젯을 삽입하는 방법을 배울 수 있습니다.
Adobe Press - Peachpit

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

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