07. 위젯 다루기

🧩 위젯이란?

위젯은 화면을 구성하는 가장 작은 단위의 요소예요. 제목, 본문, 이미지, 버튼, 상품 등 실제 콘텐츠 하나하나가 위젯에 해당하며, 반드시 섹션이나 그룹 안에 배치돼요.

• 위젯은 단독으로 존재할 수 없으며, 반드시 특정 섹션이나 그룹에 속해야 해요.

• 위젯끼리 겹쳐서 배치하는 것은 기본적으로 제한돼요. (단, 시스템에서 제공하는 일부 섹션 템플릿에는 겹침 구조가 적용되어 있을 수 있어요.)

• 위젯은 같은 본문 내의 다른 섹션으로 자유롭게 이동할 수 있어요. 다만, 특정 섹션 전용으로 제공되는 위젯은 해당 섹션 안에서만 이동이 가능해요.

🔑 위젯 종류와 권한

위젯은 생성 주체에 따라 사용자 추가 가능 위젯과 기본 제공 위젯으로 나뉘어요.

유형	추가	복사	숨기기/보이기	삭제
사용자 추가 가능 위젯	✅	✅	✅	✅
기본 제공 위젯 (추가 불가)	❌	❌	일부만 ✅	❌

• 위젯의 이름은 사용자 추가 위젯과 기본 제공 위젯 모두 변경할 수 없어요.

• 기본 제공 위젯은 시스템이 페이지 구성을 위해 기본으로 제공하므로 임의로 추가, 복사, 삭제할 수 없어요. 단, 페이지 동작에 영향을 주지 않는 일부 위젯(예: 푸터의 SNS, 해외몰 이동)에 한해 숨기기/보이기 설정을 허용해요.

추가할 수 있는 위젯

운영자가 자유롭게 추가, 복사, 이동, 삭제할 수 있는 위젯으로, 현재 총 10종을 제공하고 있어요.

구분	위젯명
레이아웃	여백 / 가로선 / 그룹
기본	제목 / 본문 / 상품 / 이미지 / 동영상 / 버튼 / HTML

💡 참고 슬라이드 배너의 [슬라이드]나 팝업의 [팝업 이미지]처럼 특정 섹션 안에서만 추가할 수 있는 전용 위젯도 있어요. 이러한 위젯은 해당 섹션 밖으로 이동하거나 추가할 수 없어요.

🗂️ 그룹 이해하기

그룹은 여러 위젯을 하나로 묶어 레이아웃과 스타일을 동시에 제어할 수 있는 컨테이너예요. 기본적인 역할은 위젯과 같으며, 위젯에 적용되는 정책이 그룹에도 동일하게 적용돼요.

그룹을 생성하는 방식은 다음과 같이 두 가지로 나뉘어요.

생성 방식	설명
자동 생성	캔버스에서 위젯을 수평으로 나란히 배치하거나, 기존 그룹과 다른 방향으로 배치할 경우 시스템이 자동으로 그룹을 생성해요.
사용자 생성	왼쪽 사이드바에서 [그룹] 위젯을 선택해 직접 추가해요.

생성 방식에 따라 기본 설정값이 다르게 적용돼요.

항목	자동 생성	사용자 생성
방향	수평	수직
정렬	왼쪽	왼쪽
위치	상단	상단

• 그룹은 최대 6단계(2~7 뎁스)까지 중첩해서 사용할 수 있어요.

• 그룹 내 위젯의 순서는 자유롭게 변경 가능하며, 다른 그룹으로 이동할 수도 있어요.

• 그룹 안의 위젯을 모두 비우더라도 그룹 자체는 자동으로 사라지지 않으므로, 필요 없다면 직접 삭제해야 해요.

• 그룹을 삭제하면 그 안에 포함된 모든 하위 위젯과 하위 그룹도 함께 삭제돼요.

➕ 위젯 추가하기

사용자가 직접 추가할 수 있는 위젯에 한해 아래의 두 가지 경로로 추가할 수 있어요.

경로	방법
왼쪽 사이드바	섹션이나 그룹의 [위젯 추가] 버튼을 클릭하거나, 해당 항목에 마우스를 올렸을 때 나타나는 추가 아이콘을 통해 위젯을 추가해요.
캔버스	캔버스 상에서 위젯 추가 아이콘을 클릭해요.

• 위젯을 추가할 수 없는 위치에서는 [위젯 추가] 버튼이 비활성화돼요.

• 특정 섹션 전용 위젯은 다른 위치에 임의로 추가할 수 없어요.

💡 TIP 위젯을 드래그 앤 드롭으로 나란히 배치하면 시스템이 자동으로 그룹을 생성해요. 위젯이 같은 수평선상에 놓이거나, 기존 그룹의 나열 방향과 교차하는 방향으로 배치될 때 자동으로 그룹화가 이루어져요.

📋 위젯 복사하고 붙여넣기

사용자 추가 위젯은 자유롭게 복사하여 붙여넣을 수 있어요.

• [복사] 버튼을 클릭하거나 단축키를 사용하면 해당 위젯이 클립보드에 저장돼요.

• 복사된 위젯은 기존의 설정과 데이터를 그대로 유지하면서도 원본과는 완전히 분리된 개별 위젯으로 관리돼요. 이때 하위 위젯이 있다면 함께 복사돼요.

• 붙여넣는 위치는 다음 기준에 따라 결정돼요.

상태	붙여넣기 위치
선택된 섹션이 있는 경우	해당 섹션의 맨 아래에 추가돼요.
선택된 위젯이 있는 경우	해당 위젯 바로 아래에 추가돼요.
선택된 섹션·위젯이 없는 경우	붙여넣기가 동작하지 않아요.

👁️ 위젯 숨기기와 보이기

사용자 추가 위젯 및 일부 기본 제공 위젯(해외몰 이동, SNS)은 숨기기 또는 보이기 상태를 설정할 수 있어요.

• 왼쪽 사이드바의 위젯명 옆에 있는 눈 아이콘이나, 캔버스에서 위젯을 클릭할 때 나타나는 눈 아이콘을 눌러 상태를 변경해요.

• 숨김 처리된 위젯은 캔버스 화면에서는 사라지지만, 왼쪽 사이드바의 트리에는 그대로 남아 있어요. 대신 눈 아이콘에 사선이 그어지고 위젯 이름이 회색으로 흐리게 표시돼요.

⚠️ 숨기기/보이기는 뷰포트와 관계없이 공통으로 적용돼요.

PC에서만, 혹은 모바일에서만 특정 위젯을 숨기는 개별 설정은 지원하지 않으므로, 위젯을 숨기면 두 환경 모두에서 일괄적으로 숨김 처리돼요.

숨겼던 섹션을 다시 보이게 하더라도, 그 안에 속한 하위 위젯들의 개별 숨김 상태는 기존대로 유지돼요.

섹션 숨기기 전 위젯 상태	섹션을 다시 보이게 한 후
숨김 상태였던 위젯	숨김 상태를 그대로 유지해요.
보임 상태였던 위젯	섹션과 함께 다시 화면에 노출돼요.

✏️ 위젯 편집하기

위젯의 상세 속성은 오른쪽 사이드바에서 편집할 수 있으며, 다음 두 가지 방법으로 접근할 수 있어요.

• 왼쪽 사이드바에서 편집할 위젯 항목을 클릭해요.

• 캔버스에서 편집할 위젯 영역을 직접 클릭해요.

위젯의 이름은 임의로 변경할 수 없어요. 위젯 종류마다 제공되는 설정 항목이 다르며, 자주 사용하는 주요 위젯의 설정 항목은 다음과 같아요.

위젯	주요 설정
제목 / 본문	원하는 텍스트 내용을 입력해요.
이미지	이미지를 업로드하고, 클릭 시 이동할 링크를 연결해요.
버튼	버튼에 들어갈 문구를 입력하고 링크를 연결해요.
상품	고객에게 보여줄 상품을 선택하고 진열해요.
동영상	재생할 동영상 링크를 연결해요.
가로선	스타일이나 두께 등 가로선의 형태를 설정해요.
HTML	HTML 편집기에서 직접 코드를 작성해 원하는 기능을 구현해요.
여백	별도의 설정 없이 요소와 요소 사이의 간격을 띄우는 용도로 사용해요.

💡 TIP 캔버스에서 원하는 위젯을 직접 클릭하는 것이 가장 빠르고 직관적인 편집 방법이에요. 사이드바 트리에서 복잡한 구조를 일일이 펼치지 않아도 해당 위젯의 설정이 즉시 활성화돼요.

💡 자주 묻는 질문

본문에 있는 위젯을 헤더로 옮기고 싶어요.

위젯은 자신이 속한 고정 영역(헤더 / 팝업 / 본문 / 푸터) 안에서만 이동할 수 있어요. 따라서 본문의 위젯을 헤더나 푸터로 옮기는 것은 불가능하지만, 본문 내의 다른 섹션으로 옮기는 것은 가능해요.

위젯 이름을 바꾸고 싶어요.

위젯 이름은 사용자 추가 위젯과 기본 제공 위젯 모두 임의로 변경할 수 없어요. 대신 위젯의 실제 내용이나 디자인 요소는 오른쪽 사이드바에서 자유롭게 편집할 수 있어요.

위젯을 가로로 나란히 놨더니 그룹이 생겼어요.

위젯을 같은 수평선상에 나란히 배치하면 시스템이 이를 자동으로 인식해 그룹으로 묶어서 관리해요. 이는 정상적인 동작이며, 그룹 단위로 정렬이나 간격, 너비를 한 번에 조정할 수 있어 더욱 편리하게 레이아웃을 구성할 수 있어요.

모바일에서만 위젯을 숨기고 싶어요.

특정 뷰포트(PC 또는 모바일)에서만 위젯을 숨기는 기능은 현재 지원하지 않아요. 위젯의 숨기기 및 보이기 설정은 데스크톱과 모바일 환경 모두에 동일하게 적용돼요.