Wix 하모니 에디터: 메뉴 추가 및 관리
페이지 메뉴
- 메뉴 추가하기
- 메뉴 항목 추가 및 관리하기
- 메뉴에 드롭다운 추가하기
- 메뉴 레이아웃 변경하기
- 세로 및 가로 메뉴 디자인하기
- 모바일에서 메뉴 사용하기
- FAQ
메뉴를 사용하면 방문자가 사이트를 쉽게 둘러보고 제공하는 내용을 확인할 수 있습니다. 가장 중요한 페이지와 링크를 선택해 보세요. 메뉴의 디자인과 동작 방식은 직접 설정할 수 있으므로, 방문자가 어떤 기기를 사용하든 자연스러운 탐색 경험을 제공할 수 있습니다.
메뉴 추가하기
메뉴를 사용하면 방문자가 사이트 내 페이지를 쉽게 이동할 수 있습니다. 요소 추가 패널의 메뉴 카테고리에서 가로형, 세로형, 햄버거 옵션을 선택하면 사이트 페이지와 연결된
사이트 메뉴가 추가됩니다. 즉, 새 페이지가 자동으로 이 메뉴에 표시됩니다.
또한 특정 영역에 사용할
사용자 지정 메뉴를 따로 추가하고, 가로형, 세로형, 햄버거 메뉴 중 하나로 표시되도록 설정할 수 있습니다. 예를 들어 사이트 푸터나 별도의 탐색이 필요한 특정 페이지에 사용할 사용자 지정 메뉴를 만들 수 있습니다.
메뉴를 추가하려면:
- 에디터로 이동합니다.
- 에디터 왼쪽 상단에서 + 추가를 클릭합니다.
- 메뉴 카테고리를 선택합니다.
도움말: 카테고리 오른쪽의 화살표 아이콘
을 클릭해 목록을 둘러보세요. - 추가하려는 메뉴 유형에 따라 아래 단계를 따릅니다:
사이트 메뉴
을 클릭해 이름을 바꾸거나 제거합니다. 사용자 지정 메뉴
알고 계셨나요?
머리글에 메뉴 바를 추가하면
모바일에서 자동으로 햄버거 메뉴로 전환됩니다. 이렇게 하면 작은 화면에서도 사이트 탐색이 깔끔하게 유지됩니다.
메뉴 항목 추가 및 관리하기
메뉴를 추가한 후에는 표시할 항목을 선택합니다. 일반 사이트 페이지, 앱 및 CMS 페이지 모음, 또는 컬렉션 안의 특정 페이지를 선택할 수 있습니다. 드롭다운 컨테이너와 링크도 추가해 클라이언트의 필요에 맞게 세부적으로 구성할 수 있습니다.
기존 메뉴와 표시 항목은 언제든지 조정할 수 있습니다. 관련 없는 항목은 제거하고, 새 항목을 추가하고, 순서를 바꿔 콘텐츠를 최신 상태로 유지하세요.
메뉴를 관리하려면:
- 에디터로 이동합니다.
- 메뉴를 클릭합니다.
- 메뉴 관리를 클릭합니다.
- 다음 작업을 선택합니다:
메뉴 항목 더 추가하기
메뉴 항목의 링크 변경하기
메뉴 항목 이름 바꾸기
메뉴에서 항목 제거하기
메뉴 아이템 순서 바꾸기
을 길게 누른 다음 원하는 위치로 드래그합니다.
메뉴에 드롭다운 추가하기
드롭다운을 사용해 관련 페이지를 하나의 메뉴 항목 아래로 묶으면 내비게이션을 더 쉽게 확인할 수 있습니다. 페이지나 링크 중 하나를 상위 항목으로 선택한 다음, 그 아래에 다른 페이지를 중첩해 드롭다운을 만들 수 있습니다.
드롭다운을 추가하고 설정하려면:
- 에디터로 이동합니다.
- 메뉴를 클릭합니다.
- 메뉴 관리를 클릭합니다.
- 어떤 메뉴 항목을 드롭다운 제목으로 사용할지 정합니다.
- 첫 번째 메뉴 항목을 드롭다운으로 이동합니다:
- 관련 메뉴 항목을 드롭다운 제목 아래로 드래그합니다.
- 드래그한 항목에 마우스를 올리고 더 보기 아이콘
을 클릭합니다. - "Page Name" 아래로 이동을 선택합니다.
- 드롭다운으로 이동할 다른 모든 항목에 대해 5단계를 반복합니다.
대신 마우스로 드래그합니다:
페이지를 드롭다운 항목으로 더 빠르게 바꾸고 싶다면, 페이지를 위아래로 드래그한 다음 다른 페이지 아래로 살짝 오른쪽에 놓아 보세요. 아래 GIF에서 표시되는 방식을 확인할 수 있습니다.
메뉴 레이아웃 변경하기
메뉴 레이아웃이 깔끔하면 방문자가 다음에 어디로 이동할지 빠르게 파악할 수 있습니다. 모든 항목을 한 줄이나 한 칼럼에 표시하고, 가로 메뉴의 공간이 부족할 때의 동작까지 더 세밀하게 설정하려면 메뉴 바를 선택합니다. 깔끔하고 미니멀한 레이아웃이나 공간이 제한된 경우에는 탐색 메뉴를 열 수 있는 콤팩트한 아이콘이 있는 햄버거 메뉴를 선택하면 좋습니다.
메뉴 레이아웃을 변경하려면:
- 에디터로 이동합니다.
- 메뉴를 클릭합니다.
- 액션바에서 형식 변경을 클릭합니다.
- 메뉴 아래에서 관련 옵션을 선택합니다:
- 메뉴 바: 메뉴 항목이 탐색 막대에 표시됩니다. 회전 방향 아래에서 가로 또는 세로를 선택합니다.
도움말: 가로 메뉴의 경우, 방문자 화면에 항목이 모두 들어가지 않을 때의 아이템 동작도 설정할 수 있습니다. 메뉴가 자동으로 늘어나게 하려면 (텍스트에 맞춤)를 선택하고, 추가 항목을 스크롤해서 보려면 버튼을 추가해 (스크롤에 맞춤)을 선택합니다. - 햄버거: 방문자가 아이콘을 클릭해 메뉴를 열 수 있습니다. 깔끔하고 미니멀한 레이아웃에 잘 어울리는 옵션입니다.
- 메뉴 바: 메뉴 항목이 탐색 막대에 표시됩니다. 회전 방향 아래에서 가로 또는 세로를 선택합니다.
세로 및 가로 메뉴 디자인하기
색상과 테두리부터 텍스트, 모서리, 레이아웃까지 세부 요소를 사용자 지정해 메뉴를 돋보이게 만들 수 있습니다. 가로 메뉴든 세로 메뉴든 메뉴 바와 항목의 모양을 조정하고, 드롭다운을 디자인하고, 간격을 세밀하게 조정해 방문자에게 딱 맞는 느낌을 완성할 수 있습니다.
햄버거 메뉴를 디자인하시나요?
자세히 알아보려면
햄버거 메뉴 관련 도움말을 읽어보세요. 버튼부터 컨테이너까지 모든 요소를 디자인할 수 있습니다.
세로 또는 가로 메뉴를 디자인하려면:
- 에디터로 이동합니다.
- 메뉴를 클릭합니다.
- 액션바에서 모든 디자인 옵션 아이콘
을 클릭합니다. - 메뉴 바의 부분 선택에서 관련 메뉴 부분을 선택합니다.
메뉴 바 및 메뉴 항목
: 브랜드 색상 또는 사용자 지정 색상 중 하나를 선택해 메뉴 색상을 변경합니다.
: 색상, 두께, 스타일을 선택해 메뉴 테두리가 눈에 띄게 설정합니다. 개별 테두리 편집 아이콘 
을 클릭해 테두리의 각 면을 따로 디자인합니다.
: 글꼴, 색상, 포맷팅, 정렬, 문자 간격 등을 변경해 메뉴 항목을 디자인합니다.
: Radius 아래의 슬라이더를 드래그해 메뉴 모서리를 더 각지거나 둥글게 조정합니다. 개별 모서리 편집 아이콘 
: 안쪽 및 바깥쪽 음영을 적용해 위치, 흐림 정도, 색상 등을 설정하고 메뉴에 흥미로운 3D 효과를 더합니다.
: 콘텐츠에 여유를 주기 위해 여백을 추가하고 아이템 간 간격을 조정합니다.
: 사이트 방향을 이 메뉴에 적용할지 여부를 정합니다. 세로 메뉴의 경우 메뉴 항목의 너비와 드롭다운을 펼친 상태로 표시할지 닫힌 상태로 표시할지도 선택할 수 있습니다.드롭다운 및 드롭다운 아이템
모바일에서 메뉴 사용하기
모바일에서 머리글 메뉴를 조정하려면:
- 에디터로 이동합니다.
- 페이지 오른쪽 상단에서 모바일 아이콘
을 클릭합니다. - 햄버거 메뉴 아이콘을 클릭합니다.
- 기본 모드 드롭다운을 클릭하고 햄버거 메뉴를 선택합니다.
- 다음 작업을 선택하세요:
- 컨테이너 안 요소 위치를 조정합니다: 요소를 드래그해 햄버거 메뉴 컨테이너 안에서 원하는 위치로 이동합니다.
- 컨테이너에 요소를 추가합니다: **요소 추가** 패널을 사용해 햄버거 메뉴 컨테이너에 요소를 더 추가합니다. 이 요소는 모바일 전용이므로 데스크톱에는 표시되지 않습니다.
- 요소를 머리글로 다시 이동합니다: 요소를 마우스 오른쪽 버튼으로 클릭한 다음 머리글로 이동을 선택합니다.
FAQ
아래 질문을 클릭해 자세한 내용을 확인하세요.
메뉴 바 크기를 조정할 수 있나요?
머리글에 메뉴를 여러 개 추가할 수 있나요?
메뉴에서 페이지를 제거하면 사이트에서도 삭제되나요?
메뉴에 사이트의 모든 페이지를 표시해야 하나요?
마우스오버할 때 메뉴 아이템에 표시되는 밑줄은 어떻게 변경하나요?