요소를 선택하면 나오는 미니툴바(⋮)

에디터에서 요소 하나를 고치려고 할 때마다 오른쪽 패널을 열 필요는 없습니다. 요소를 선택하면 그 요소 바로 옆에 작은 툴바가 나타나서, 순서 바꾸기, 복제, 삭제, 링크 걸기 같은 자주 쓰는 작업을 그 자리에서 끝낼 수 있습니다. 이 글은 이 미니툴바가 어디에 나타나고, 어떤 버튼이 있으며, 요소 종류에 따라 무엇이 달라지는지 정리합니다. 에디터 화면 전체의 구성은 별도 글에서 다룹니다.

1. 미니툴바는 어디에 나타나나요

캔버스의 요소(카드, 이미지, 버튼 등)를 누르거나 마우스를 올리면 요소의 오른쪽 위 모서리에 점 세 개가 세로로 찍힌 작은 원 ⋮이 나타납니다. 이 원의 색은 그 요소의 선택 테두리 색을 따라갑니다. 마우스를 올리기만 했을 때는 이 원만 보이고, 원을 눌러야 툴바가 펼쳐집니다.

⋮을 누르면 어두운 알약 모양의 툴바가 요소 위쪽에 펼쳐지고, ⋮은 ×로 바뀝니다. 위쪽에 자리가 없으면 요소 아래쪽에 펼쳐집니다. ×를 다시 누르면 접히고, 요소 바깥의 빈 곳을 누르면 툴바가 사라졌습니다.

2. 공통 버튼

모든 요소에서 보이는 버튼은 다음과 같습니다. 각 버튼에 마우스를 올리면 이름이 나타납니다.

• 왼쪽으로 이동 / 오른쪽으로 이동: 같은 묶음 안에서 요소의 순서를 한 칸씩 바꿉니다. 앞이나 뒤에 다른 요소가 있을 때만 해당 방향 버튼이 보입니다. 첫 번째 요소에는 오른쪽 버튼만 보이는 식입니다.
• 요소 설정 열기(톱니바퀴): 그 요소의 설정 창을 엽니다. 뒤에서 설명합니다.
• 요소 복제: 요소를 바로 뒤에 똑같이 하나 더 만듭니다.
• 요소 삭제: 요소를 지웁니다. 확인 창 없이 바로 지워지지만, 삭제 직후 Ctrl+Z로 되돌릴 수 있었습니다.

이동, 복제, 삭제는 저장 버튼을 누르기 전까지는 편집 화면에만 반영됩니다. 저장은 상단바의 저장을 직접 눌러야 합니다.

3. 요소 종류별로 달라지는 버튼

공통 버튼 사이에 그 요소에 꼭 필요한 버튼이 추가됩니다. 직접 눌러 확인한 구성은 아래와 같습니다.

• 제목·텍스트: 레이아웃/간격, 텍스트·폰트 편집, 링크 편집. 텍스트는 ⋮ 없이 툴바가 바로 펼쳐집니다.
• 이미지: 레이아웃/간격, 이미지 편집, 링크 넣기.
• 아이콘: 아이콘 편집, 링크 넣기.
• 컨테이너(카드, 박스): 레이아웃/간격, 링크 넣기.
• 링크 형태의 버튼: 텍스트·폰트 편집, 링크 편집.
• button 태그로 된 버튼: 상태별 색상(호버·눌림·포커스), 텍스트·폰트 편집, 링크 편집.

텍스트를 누르면 툴바와 함께 텍스트 편집 창이 나타나 제목 단계(<h1> 등), 글꼴, 크기, 정렬, 굵게·기울임·밑줄·취소선, 행간, 색상, 링크를 바로 바꿀 수 있습니다. 텍스트 편집 창의 사용법은 별도 글에서 다룹니다.

4. 버튼을 누르면 열리는 작은 창

레이아웃/간격, 링크, 상태별 색상 버튼은 요소 옆에 작은 창을 엽니다. 창은 한 번에 하나만 열리며, 다른 버튼을 누르면 이전 창은 닫힙니다.

• 레이아웃 / 간격: 너비·높이, 바깥 여백(Margin), 안쪽 여백(Padding), 모서리 반경을 슬라이더나 숫자로 바꿉니다. 아래 고급 설정(정렬 · 테두리 · 그림자 · 배치)을 펼치면 더 많은 항목이 나옵니다.
• 링크 넣기(컨테이너·이미지·아이콘): 주소 입력란(https:// 또는 / 또는 #앵커), 스토어 링크(장바구니·상품 선택), 새 탭에서 열기 체크.
• 링크 편집(텍스트·버튼): URL 이동과 팝업 열기 중 하나를 고르고, URL, 열기 방식(새 탭 또는 현재 탭), rel 속성을 정합니다.
• 상태별 색상: 배경, 테두리, 텍스트, 그림자 탭이 있고, 각각 기본, 호버, 클릭, 포커스 상태의 색을 따로 정합니다.

이미지 편집과 아이콘 편집 버튼도 같은 방식으로 창을 엽니다. 이미지 편집 창에는 이미지 교체 버튼과 맞춤/위치, 필터, 모양, 링크, AI 수정 탭이 있습니다. 각 기능은 별도 글에서 자세히 다룹니다.

5. 톱니바퀴: 요소 설정 창과 전체 속성 패널

툴바의 톱니바퀴(요소 설정 열기)를 누르면 요소 옆에 컨테이너 설정처럼 요소 종류가 제목으로 붙은 설정 창이 열립니다. 아래 그림은 컨테이너의 경우로, 칼럼 너비, 자식 간격(gap), 크기, 배경 같은 항목이 있습니다. 제목 줄에는 AI 조정 버튼과 닫기(✕)가 있고, 맨 아래 전체 속성 패널 열기 (효과·반응형·HTML) 버튼을 누르면 오른쪽 속성 패널로 이어집니다. 효과, 반응형, HTML 소스 편집은 미니툴바가 아니라 이 속성 패널에서 합니다.

6. 이렇게 활용해 보세요

• 카드 세 장 중 하나를 다른 자리로 옮기고 싶을 때는 해당 카드를 선택해 좌우 이동 버튼으로 순서를 바꿔 보세요.
• 비슷한 카드를 늘리고 싶을 때는 복제한 뒤 안쪽 텍스트만 고치면 됩니다.
• 이미지나 카드 전체를 눌렀을 때 이동하게 하고 싶다면 링크 넣기를 쓸 수 있습니다.

7. 알아 두실 점

• 보이는 버튼은 요소 종류에 따라 다릅니다. 찾는 아이콘이 없으면 다른 종류의 요소를 선택한 것은 아닌지 확인해 보세요.
• 상태별 색상 버튼은 button 태그로 만들어진 버튼에서 보였고, 링크 형태로 만든 버튼에서는 보이지 않았습니다.
• 요소 설정 창의 AI 조정 버튼은 AI 기능이라 크레딧이 쓰일 수 있습니다. 실행 전 화면의 안내를 확인해 주세요.
• 변경한 내용은 상단바의 저장을 눌러야 보존됩니다.

요소를 고르는 방법과 요소 패널은 별도 글에서, 속성 패널의 각 탭은 시리즈의 다른 글에서 이어서 다룹니다.