속성 패널 구조: 4개 탭과 컴팩트 뷰

요소를 하나 골랐는데 색, 여백, 애니메이션을 어디서 바꿔야 할지 헷갈리셨다면 편집기 오른쪽에 열리는 속성 패널을 보시면 됩니다. 이 글에서는 속성 패널을 여는 방법, 맨 위 헤더, 네 개의 탭, 항목을 한 열로 모아 보여 주는 컴팩트 뷰를 요소 종류별로 살펴봅니다. 각 탭 안의 세부 항목(여백, 타이포그래피 등)은 별도 글에서 하나씩 다룹니다.

1. 속성 패널은 어떻게 여나요

편집기에서 요소를 고르면 요소 근처에 작은 도구 막대가 나타납니다. 제목이나 텍스트는 고르는 즉시 막대가 뜨고, 컨테이너나 이미지는 요소 오른쪽 위의 점 세 개(요소 설정)를 눌러야 막대가 나타납니다. 막대의 톱니바퀴(요소 설정 열기)를 누르면 그 요소의 설정 창이 뜨고, 창 맨 아래의 전체 속성 패널 열기 (효과·반응형·HTML) → 버튼을 누르면 오른쪽에 속성 패널이 열립니다.

다른 길도 있습니다. 이미지는 점 세 개를 누른 뒤 이미지 편집 아이콘을 누르면 열리는 팝업 맨 아래의 전체 속성 패널 열기 →로 열 수 있습니다. 섹션은 섹션을 고른 뒤 오른쪽의 톱니바퀴(섹션 설정)를 누르고, 도구 줄 첫 번째 아이콘(속성 패널 열기)을 누르면 섹션 전체를 가리키는 컨테이너 패널이 열립니다.

2. 헤더와 네 개의 탭

패널은 화면 위에 겹쳐 열리므로 캔버스가 밀리지 않습니다. 그래서 오른쪽에 있는 요소는 패널에 가려질 수 있습니다.

• 상위: 한 단계 바깥 요소를 선택합니다. 텍스트에서 누르면 컨테이너, 그다음 섹션 단위 컨테이너 순으로 올라갑니다.
• 요소 이름과 태그: 지금 편집하는 요소가 무엇인지 보여 줍니다. 예를 들어 제목 <h1>, 텍스트 <p>, 버튼 <a>, 이미지 <img>입니다.
• 아이콘 버튼: 왼쪽으로 이동(패널을 반대쪽으로 옮김), 패널 고정, </> 섹션 HTML 코드 편집, 고급 설정, 타입별 컴팩트 뷰(번개 모양), 닫기 순서입니다.
• 화면 배지: 데스크탑, 태블릿, 모바일 중 지금 편집하는 화면입니다.

패널 고정을 켜지 않으면 캔버스의 다른 곳을 누를 때 패널이 닫힙니다. 고정하면 다른 요소를 골라도 패널이 열린 채로 그 요소의 내용으로 바뀝니다.

• 콘텐츠: 요소 종류에 따라 항목이 달라지는 탭입니다.
• 스타일: 레이아웃(너비·높이), 바깥 여백, 안쪽 여백, 모서리 반경 등입니다. 제목과 텍스트에는 타이포그래피가 더해집니다.
• 효과: 투명도, 그림자와 글로우, 애니메이션(입구·마우스 오버·스크롤)입니다. 확인한 모든 요소 종류에서 같았습니다.
• 반응형: 데스크탑 화면에서는 "반응형 편집 비활성" 안내가 나옵니다.

3. 요소 종류별로 달라지는 부분

콘텐츠 탭의 항목은 요소 종류마다 다릅니다.

• 제목·텍스트: AI 카피라이팅, 동적 데이터, 너비, 배경색, 위치 이동
• 버튼: 클릭 동작(URL 이동·팝업 열기), 링크 URL, 열기 방식, 버튼 정렬, 아이콘, 배경색, 호버·전환 효과
• 이미지: 크기 모드, 너비, 정렬, 이미지 교체, 동적 이미지, 필터
• 아이콘: 아이콘 변경, 색상, 크기
• 컨테이너: 칼럼 너비, 자식 간격, 크기, 내용 정렬, 배경 등. 부모 구조에 따라 첫 항목이 바뀌기도 합니다.
• 그리드: 카드 수, 카드 추가, 카드 간격, 카드 정렬

스타일 탭도 종류별로 조금씩 다릅니다. 이미지와 아이콘, 컨테이너에는 타이포그래피가 없고, 버튼에는 폰트 크기와 텍스트 색상이 있습니다.

4. 컴팩트 뷰와 고급 설정

헤더의 번개 아이콘(타입별 컴팩트 뷰)을 누르면 탭 줄이 사라지고 콘텐츠 탭과 같은 항목이 한 열로 보입니다. 같은 요소에서 비교하면 항목은 같고, 콘텐츠 탭 맨 아래의 다른 컨테이너로 이동 버튼만 빠집니다. 스타일·효과·반응형 탭이 필요하면 번개 아이콘(클래식 탭 뷰)을 다시 누릅니다.

톱니 아이콘(고급 설정)을 누르면 요소 ID, CSS 클래스, 인라인 CSS(적용 버튼), 데이터 속성이 나옵니다. 이 상태에서도 탭 줄이 가려지며, 다시 누르면 돌아옵니다.

5. 태블릿·모바일 화면에서는

상단의 디바이스 버튼으로 태블릿이나 모바일을 고르면 패널이 자동으로 반응형 탭으로 바뀌고, 배지도 바뀝니다. 패널에는 "모바일 반응형 편집 — 데스크탑 미영향"이라는 안내가 나오고, 이 화면에서 값을 바꾸면 헤더에 "+1 모바일 오버라이드"처럼 바꾼 개수가 표시됩니다. 데스크탑으로 돌아오면 콘텐츠 탭으로 돌아갑니다.

6. 이렇게 활용해 보세요

• 원하는 항목이 안 보이면 먼저 헤더의 요소 이름을 확인해 보세요. 의도한 요소가 아니라면 상위 버튼이나 캔버스에서 다시 고를 수 있습니다.
• 여러 요소를 차례로 손볼 때는 패널 고정을 켜 두면 편합니다.
• 한 가지 항목만 빠르게 바꿀 때는 컴팩트 뷰가 가볍습니다.

7. 알아 두실 점

• 컴팩트 뷰와 고급 설정 상태에서는 탭이 보이지 않습니다. 탭이 사라졌다면 두 아이콘이 켜져 있는지 확인해 보세요.

각 탭의 여백, 타이포그래피, 배경 같은 세부 항목은 별도 글에서 다룹니다.