PC·태블릿·모바일 반응형 편집

예상 읽기 시간:1분 91 조회수

적용 대상	신규·기존 케이테마 공통
작업 위치	Elementor 반응형 모드
작업 시간	20분

반응형 편집은 화면이 작아졌을 때 글자·이미지·버튼이 읽기 좋게 보이도록 조정하는 작업입니다. PC 화면을 완성한 뒤 태블릿, 모바일 순서로 확인하면 가장 쉽습니다.

시작하기 전에

기기	먼저 볼 것
PC	콘텐츠 순서와 넓이
태블릿	두 칸 콘텐츠의 줄바꿈
모바일	제목 크기, 버튼 폭, 여백
실제 휴대폰	터치와 메뉴 열림

1. 반응형 모드 열기

Elementor 모바일 편집 안내 바로가기

Elementor 상단 도구 모음의 반응형 아이콘을 누르고 PC·태블릿·모바일을 차례로 선택합니다. 기기를 바꿨다고 해서 모든 값이 자동으로 달라지지는 않으므로, 필요한 위젯에서 기기 아이콘을 눌러 값을 따로 입력합니다.

Elementor 상단 도구 모음의 반응형 화면 전환 버튼 — 상단 도구 모음에서 PC·태블릿·모바일 보기를 차례로 선택합니다.

2. 모바일에서 먼저 고칠 항목

제목이 너무 크면 줄이 길어지고, 버튼이 너무 작으면 누르기 어렵습니다. 모바일에서는 제목 크기, 컨테이너 여백, 열 개수, 이미지 크기, 버튼 폭 순서로 확인하세요.

Elementor 캔버스에서 모바일 레이아웃을 확인하는 화면 — 모바일에서는 제목 줄바꿈, 이미지 비율, 버튼 폭과 여백을 먼저 확인합니다.

3. 숨김 기능은 신중히 사용

PC에만 필요한 장식 이미지는 모바일에서 숨길 수 있습니다. 하지만 중요한 제목·가격·버튼을 숨기면 방문자가 정보를 놓칠 수 있으므로, 숨긴 뒤 실제 휴대폰에서 다시 확인합니다.

Elementor 스타일과 반응형 옵션을 조정하는 화면 — 기기별 숨김은 콘텐츠가 중복되거나 읽기 어려울 때만 사용합니다.

4. PC와 모바일에 서로 다른 내용 표시하기

글자 크기나 여백만 다르게 하려면 반응형 설정을 사용하면 됩니다. 반면 문구·이미지·영상 자체를 다르게 보여주려면 영역을 복제하여 PC용과 모바일용을 따로 만들고, 각 영역이 보일 기기를 지정합니다. 모바일 보기로 전환한 뒤 글이나 영상을 바꾸는 것만으로는 모바일 전용 콘텐츠가 되지 않습니다.

4-1. 바꿀 영역을 복제하기

관리자에서 페이지 → 모든 페이지 → Elementor로 편집을 엽니다. 처음에는 복제한 연습용 페이지에서 진행하세요.
이미지·글·버튼을 한꺼번에 나누려면 이 요소들을 담은 바깥 컨테이너를 선택합니다. 슬라이더 하나만 나눌 때는 슬라이더 위젯만 선택해도 됩니다.
선택한 영역의 손잡이 또는 구조 목록에서 해당 항목을 마우스 오른쪽 버튼으로 누른 뒤 복제를 선택합니다.
원본과 복제본을 구분할 수 있도록 구조 목록에서 각각 PC·태블릿용, 모바일용으로 이름을 붙이면 편리합니다.

구조 목록에서 컨테이너를 오른쪽 클릭하면 나타나는 복제 메뉴 — 영역의 오른쪽 클릭 메뉴에서 복제를 선택합니다.

4-2. PC용 영역을 모바일에서 숨기기

PC용 영역을 선택하고 왼쪽 고급 → 반응형 → 가시성을 엽니다. 모바일 세로에서 숨기기를 켭니다. PC와 태블릿에서 숨기기는 꺼 둡니다. ‘숨기기’를 켜면 해당 기기에서 보이지 않는다는 뜻입니다.

PC용 영역의 모바일 세로에서 숨기기만 켠 설정 — PC·태블릿용 영역: 모바일만 숨김으로 설정합니다.

4-3. 모바일용 영역을 PC와 태블릿에서 숨기기

복제한 모바일용 영역을 선택하고 같은 설정에서 데스크탑에서 숨기기와 태블릿 세로에서 숨기기를 켭니다. 모바일 세로에서 숨기기는 꺼 둡니다.

설정 항목	PC·태블릿용 영역	모바일용 영역
데스크탑에서 숨기기	끔	켬
태블릿 세로에서 숨기기	끔	켬
모바일 세로에서 숨기기	켬	끔

위 표는 태블릿에서 PC용 내용을 보여주는 예입니다. 태블릿에서도 모바일용 내용을 보여주려면 두 영역의 ‘태블릿 세로에서 숨기기’를 반대로 설정합니다. 추가 기기 구간을 사용 중인 사이트는 그 구간도 확인하세요.

모바일용 영역의 데스크탑과 태블릿 숨기기를 켠 설정 — 모바일용 영역: 데스크탑과 태블릿은 숨김, 모바일은 표시로 설정합니다.

4-4. 모바일용 내용 바꾸기

모바일용 영역 안의 제목·문구·이미지·영상 등을 원하는 내용으로 바꿉니다. 예를 들어 PC용 슬라이더는 그대로 두고, 모바일용 복제본에만 다른 영상을 지정할 수 있습니다. 변경하기 전에 구조 목록에서 모바일용 영역이 선택되었는지 확인하세요.

4-5. 저장하고 실제 화면 확인하기

편집기 상단의 데스크탑·태블릿·모바일 보기로 차례로 전환합니다.
PC에서는 PC용 내용만, 모바일에서는 모바일용 내용만 보이도록 설정했는지 확인합니다. 편집기에서는 숨긴 영역이 흐리게 남아 보일 수 있습니다.
업데이트 또는 공개로 저장하고, 미리보기와 실제 휴대폰에서도 확인합니다. 연습용 페이지는 공개하지 않고 임시 저장한 뒤 미리보기로 확인하세요.
두 영역이 동시에 보이거나 모두 안 보이면 위 표의 숨김 설정과 상위 컨테이너의 숨김 설정을 확인합니다.

주의: 복제한 두 영역의 내용은 각각 관리해야 합니다. 공통 연락처나 버튼 주소를 바꿀 때는 두 영역 모두 확인하세요. 페이지 전체를 중복하기보다 꼭 다른 내용이 필요한 영역만 복제하는 편이 좋습니다. 숨김 기능은 보안 기능이 아니므로 비공개 정보를 넣지 마세요. 영상 등은 숨겨도 로딩 비용이 생길 수 있으므로 실제 휴대폰의 표시와 속도를 확인하세요.

완료 확인

확인 항목	완료 기준
제목	모바일에서 잘리지 않고 읽기 쉬움
버튼	손가락으로 누르기 충분한 크기
이미지	화면 밖으로 넘치지 않음
순서	모바일에서도 내용 흐름이 자연스러움

기존 테마 사용자

기존 테마의 모바일 헤더와 메뉴는 Elementor 반응형 옵션만으로 바뀌지 않을 수 있습니다. 헤더는 기존 테마 옵션을 유지하고, 콘텐츠 영역부터 작은 범위로 수정하세요.