모바일·태블릿 화면을 보며 편집하기

데스크탑 화면에서 잘 만든 페이지가 휴대폰에서는 제목이 세 줄로 꺾이거나 버튼이 어긋나 보이는 경우가 있습니다. 퍼널체인저스 편집기에서는 화면 폭을 태블릿과 모바일로 바꿔 가며 같은 페이지를 보면서 바로 고칠 수 있습니다. 이 글에서는 기기 전환 버튼의 위치와 화면 폭, 모바일에서 값을 바꿀 때 데스크탑이 어떻게 되는지, 모바일 오버라이드 개수 표시, 숨긴 요소를 보는 토글을 살펴봅니다. 요소별 반응형 세부 속성은 별도 글에서 다룹니다.

1. 기기 전환 버튼은 어디에 있나요

편집기 상단바 가운데에 모여 있습니다. 왼쪽부터 데스크탑, 태블릿, 모바일 아이콘 세 개가 한 묶음이고, 마우스를 올리면 데스크탑, 태블릿, 모바일 이름이 나옵니다. 지금 선택된 기기는 아이콘이 보라색으로 표시됩니다. 묶음 오른쪽에는 눈에 사선이 그어진 숨김 요소 표시 토글과 반응형 버튼이 있습니다.

2. 기기마다 화면 폭이 다릅니다

태블릿을 고르면 캔버스 위에 태블릿 (768px), 모바일을 고르면 모바일 (375px) 라벨이 나타나고, 페이지가 그 폭의 기기 틀 안에 표시됩니다. 실제로 재어 보면 첫 번째 섹션의 너비가 태블릿 768px, 모바일 375px입니다. 데스크탑은 틀 없이 편집 화면 너비를 가득 채웁니다. 기기를 바꿔도 페이지 내용은 그대로이고 보이는 폭만 달라지므로, 줄바꿈이나 칼럼 배치가 어떻게 달라지는지 바로 확인할 수 있습니다.

3. 모바일에서 값을 바꾸면 데스크탑은 그대로입니다

1. 상단바에서 모바일을 고릅니다.
2. 캔버스에서 고칠 요소를 고르고, 도구 막대의 톱니바퀴를 눌러 설정 창 맨 아래 전체 속성 패널 열기 (효과·반응형·HTML) →를 누릅니다.
3. 패널이 반응형 탭으로 열리고 맨 위에 모바일 반응형 편집 — 데스크탑 미영향 안내가 나옵니다.
4. 텍스트 항목의 크기를 바꿉니다. 예를 들어 제목 크기를 46에서 30으로 줄입니다.

안내 문구대로 데스크탑에는 영향이 없습니다. 같은 제목의 글자 크기를 확인하면 모바일 화면에서는 30px, 데스크탑과 태블릿 화면에서는 46px 그대로입니다. 저장한 뒤 편집기를 새로 열어도 모바일에서만 30px로 보입니다.

4. 모바일 오버라이드 개수

값을 바꾸면 패널 맨 위, 모바일 배지 옆에 +1 모바일 오버라이드처럼 개수가 표시됩니다. 그 요소에서 모바일 전용으로 바꾼 항목의 수입니다. 크기와 행간을 모두 바꾸면 +2가 됩니다. 이 숫자는 데스크탑이나 태블릿 화면에서 같은 요소를 골라도 보이고, 태블릿에서 바꾼 값은 세지 않습니다.

패널 맨 아래의 적용 중인 모바일 재정의에는 바꾼 항목과 값이 나열됩니다. 항목 옆의 x 버튼으로 하나씩 되돌리거나, 모든 모바일 재정의 초기화로 한꺼번에 되돌릴 수 있고, 되돌리면 제목은 원래 46px로 돌아옵니다.

5. 숨김 요소 표시 토글

반응형 탭의 가시성 버튼(표시됨 (클릭 시 숨기기))을 누르면 그 기기에서만 요소가 숨겨지고 편집 화면에서도 사라집니다. 이때 상단바의 숨김 요소 표시 토글을 켜면 숨긴 요소가 흐릿하게, 빨간 점선 테두리와 함께 다시 나타납니다. 토글 아이콘에는 빨간 테두리가 생기고, 마우스를 올리면 숨김 요소 표시 중 (클릭 시 끔)이라고 나옵니다. 다시 누르면 꺼집니다.

토글은 보는 방식만 바꿀 뿐 숨김 설정 자체는 그대로입니다. 모바일에서 숨긴 버튼은 데스크탑 화면에서 평소처럼 보입니다.

6. 반응형 버튼

상단바의 반응형 버튼을 누르면 왼쪽에 반응형 설정 패널이 열립니다. 반응형 자동 수정의 문제 감지 버튼, 반응형 체크리스트가 들어 있습니다. 자세한 사용법은 별도 글에서 다룹니다.

7. 이렇게 활용해 보세요

• 페이지를 다 만든 뒤 태블릿과 모바일로 한 번씩 전환해 제목 줄바꿈과 버튼 위치를 확인해 보세요.
• 큰 제목처럼 휴대폰에서만 부담스러운 요소는 모바일에서 크기를 줄여 두면 데스크탑 디자인을 건드리지 않습니다.
• 기기별로 요소를 숨겨 둔 페이지는 숨김 요소 표시 토글로 어떤 요소가 숨겨져 있는지 점검해 보세요.

8. 알아 두실 점

• 편집기는 자동 저장되지 않으므로 상단바의 저장을 눌러 저장하세요.
• 데스크탑 화면에서 반응형 탭을 열면 반응형 편집 비활성 안내가 나옵니다. 모바일이나 태블릿으로 전환한 뒤 편집하세요.

요소별 반응형 속성과 기기별 숨기기, 자동 수정은 별도 글에서 이어서 안내합니다.