Studio Two 에디터: 사이트 메뉴 디자인하기
이 도움말은 2026년 11월에 출시된 새로운 Studio Two 에디터에 관한 내용입니다. Studio 에디터와 Studio Two 에디터 중 어떤 에디터를 사용 중인지 확실하지 않다면 여기에서 자세한 정보를 확인하세요.
Studio Two 에디터에서는 속성 검사 패널을 사용해 메뉴 디자인을 세밀하게 조정할 수 있습니다. 기본, 마우스오버, 지정일 또는 현재 페이지 등 각 상태를 개별적으로 사용자 지정하고 채우기 색상, 텍스트 스타일, 음영 등의 설정을 조정할 수 있습니다.
가로 및 세로 메뉴 디자인하기
속성 검사 패널에서 가로 및 세로 메뉴의 기본, 마우스오버, 지정일 상태를 각각 디자인할 수 있습니다. 상태별로 디자인을 사용자 지정해 방문자가 더욱 편리하게 메뉴를 탐색하도록 도울 수 있습니다.
선택한 메뉴 프리셋에 따라 이용 가능한 디자인 옵션이 달라집니다. 버튼이나 구분선 등의 요소를 사용자 지정해 메뉴를 사이트의 디자인 및 테마와 조화롭게 구성할 수 있습니다.
이용 가능한 설정은 요소 추가 패널에서 선택한 메뉴에 따라 달라집니다.
가로 또는 세로 메뉴를 디자인하려면 다음 단계를 따릅니다.
캔버스에서 메뉴를 클릭합니다.
에디터 오른쪽 상단에서 검사창 열기
아이콘을 클릭합니다.디자인 탭을 클릭합니다.
디자인할 요소 선택에서 디자인할 요소를 선택합니다. 선택 가능한 요소는 메뉴 바, 메뉴 아이템, 드롭다운, 스크롤 버튼 등입니다.
기본, 마우스오버, 선택 중 원하는 상태를 선택합니다.
다음과 같은 옵션을 사용해 메뉴를 디자인합니다.
채우기: 배경, 아이콘 또는 오버레이 색상을 변경합니다.
테두리: 테두리를 추가하거나 조정합니다.
모서리: 모서리를 각지거나 둥글게 조정합니다.
음영: 음영을 추가해 입체감을 줍니다.
간격: 아이템 주변 및 아이템 사이의 간격을 조정합니다.
동작: 사이트 방향에 따라 메뉴가 표시되는 방식과 아이템 위치를 설정합니다.
위치: 위치 유형과 여백을 설정합니다.
표시: 투명도와 회전을 조정합니다.
커서: 이미지 또는 SVG를 사용해 사용자 지정 커서를 추가합니다.
앵커: 방문자가 이 구역으로 직접 연결되는 링크를 사용할 수 있도록 앵커를 추가합니다.
사용자 지정 CSS: 사용자 지정 CSS를 추가해 디자인을 세부적으로 제어합니다.
햄버거 메뉴 디자인하기
햄버거 메뉴에서는 기본 모드와 햄버거 메뉴의 두 가지 보기를 사용자 지정할 수 있습니다. 기본 모드에서는 페이지에 표시되는 닫힌 메뉴 아이콘을 설정하고, 햄버거 메뉴에서는 방문자가 메뉴를 연 후 표시되는 화면을 설정합니다.
햄버거 메뉴를 디자인하려면
캔버스에서 햄버거 메뉴를 클릭합니다.
모드 드롭다운을 클릭한 후 사용자 지정할 모드로 기본 모드 또는 햄버거 메뉴를 선택합니다.
이용 가능한 옵션을 사용해 모드를 사용자 지정합니다.
기본 모드:
디자인할 부분을 선택합니다. 드롭다운을 클릭한 후 햄버거 버튼 또는 아이콘을 선택합니다.
상태를 선택합니다. 기본 또는 마우스오버 등 원하는 상태를 선택합니다.
디자인을 사용자 지정합니다. 이용 가능한 옵션을 사용해 디자인과 레이아웃을 조정합니다.
크기: 햄버거 메뉴의 크기를 조정합니다.
채우기: 배경, 아이콘 또는 오버레이 색상을 변경합니다.
테두리: 테두리를 추가하거나 조정합니다.
모서리: 모서리를 각지거나 둥글게 조정합니다.
음영: 음영 효과를 추가합니다.
간격: 아이템 주변과 아이템 사이의 간격을 조정합니다.
동작: 메뉴가 사이트의 방향을 따르는 방식과 아이템이 배치되는 위치를 설정합니다.
위치: 위치 유형과 여백을 설정합니다.
표시: 투명도와 회전을 조정합니다.
커서: 이미지 또는 SVG를 사용해 사용자 지정 커서를 추가합니다.
사용자 지정 CSS: 사용자 지정 CSS를 추가해 디자인을 더욱 세밀하게 조정합니다.
햄버거 메뉴:
디자인할 부분을 선택합니다. 디자인 요소 선택에서 원하는 부분을 선택합니다.
햄버거 메뉴: 방문자가 햄버거 메뉴를 클릭하면 열리는 컨테이너를 사용자 지정합니다.
닫기 버튼: 방문자가 메뉴를 닫을 때 클릭하는 아이콘을 사용자 지정합니다.
아이콘: 아이콘 디자인을 사용자 지정합니다.
상태를 선택합니다. 기본, 마우스오버 또는 비활성화 등 원하는 상태를 선택합니다. 선택한 부분에 따라 이용 가능한 상태가 달라집니다.
디자인을 사용자 지정합니다. 이용 가능한 옵션을 사용해 디자인과 레이아웃을 조정합니다.
채우기: 배경, 아이콘 또는 오버레이 색상을 변경합니다.
테두리: 테두리를 추가하거나 조정합니다.
모서리: 모서리를 각지거나 둥글게 조정합니다.
음영: 음영 효과를 추가합니다.
간격: 아이템 주변과 아이템 사이의 간격을 조정합니다.
동작: 메뉴가 사이트의 방향을 따르는 방식과 아이템이 배치되는 위치를 설정합니다.
