CSS와 Elementor는 “반응형”을 서로 다른 방식으로 표현합니다. CSS는 미디어 쿼리와 유동 함수를 사용하고, Elementor는 중단점마다 값을 저장합니다. 하나가 다른 하나로 어떻게 변환되는지 알면 많은 혼란을 피할 수 있습니다.
반응형 값이 생성되는 방식
미디어 쿼리를 분석하는 대신, 변환기는 각 중단점 너비에서 페이지를 다시 측정하여 브라우저가 실제로 계산한 값을 기록합니다. 데스크톱, 태블릿, 모바일 값이 간격, 레이아웃 방향, 그리드 열, 최소 높이, 정렬, 타이포그래피에 대해 따로 기록됩니다.
핵심은 미디어 쿼리가 Elementor의 중단점과 일치할 필요가 없다는 것입니다. 각 너비에서 레이아웃이 실제로 어떻게 보이는지가 그대로 저장됩니다.
유동 타이포그래피: clamp()와 vw
font-size: clamp(46px, 7vw, 96px) 같은 선언은 Elementor에 직접 대응하는 값이 없습니다. 대신 중단점마다 하나씩 세 개의 샘플 값을 얻게 되며, 이는 대부분의 디자인에서 곡선에 충분히 가깝게 근사합니다. 제목이 완벽하게 부드럽게 조정되어야 한다면 가져오기 후 Elementor에서 사용자 정의 유동 값을 설정하세요.
백분율과 auto 값
이것은 미묘한 부분입니다. 계산된 스타일을 읽을 때 브라우저는 작성한 상대 값이 아니라 해석된 픽셀 값을 돌려줍니다. width:100%는 예를 들어 760px로 읽히고, margin:0 auto는 구체적인 좌우 여백으로 읽히며, 1fr 그리드 트랙은 픽셀 너비로 읽힙니다.
그 픽셀 값을 Elementor에 그대로 입력하면 변환이 실행된 특정 너비에서 레이아웃이 고정되어 버립니다. 그래서 상대적 의도는 복사되지 않고 재구성됩니다. 이미지는 컨테이너에 대한 백분율로 표현되고(전체 너비 이미지는 아예 고정 너비를 갖지 않음), 자동 중앙 정렬 블록은 Boxed 컨테이너가 되며, 동일한 그리드 트랙은 fr 단위가 됩니다. 유동적이어야 하는 요소에 의심스러운 고정 픽셀 너비가 보인다면, 바로 보고해야 할 종류의 버그입니다.
뷰포트 단위
100vh 히어로 섹션은 동일한 방식으로 픽셀로 해석되고 중단점마다 샘플링됩니다. 보통 비슷하지만, 진정한 전체 높이 히어로를 원한다면 나중에 Elementor에서 해당 컨테이너의 최소 높이 = 100vh로 설정하세요. 클릭 한 번이면 해결됩니다.
가져오기 후 항상 확인해야 할 사항
- 모바일 쌓임. 여러 열 그리드와 플렉스 행이 접혀야 합니다. 태블릿과 모바일 열 개수를 확인하세요.
- 히어로 높이, 특히 디자인에
vh가 사용된 경우. - 긴 제목은 모바일 중단점에서 확인하세요. 유동 타이포그래피가 근사값이므로 줄 바꿈이 어색할 수 있습니다.
- 스티키 및 고정 요소. 위치 지정 동작은 Elementor의 모션 효과 / 위치 지정 컨트롤로 다시 적용하는 것이 가장 좋습니다.
기기별 값을 갖는 정확한 속성 목록
중단점마다 다시 측정되어 저장되는 항목은 패딩, 마진, 너비, 최소 높이, 정렬, 그리드 열, 그리드 간격, 플렉스 방향, 플렉스 줄 바꿈, 플렉스 가로 정렬, 플렉스 세로 정렬, 플렉스 간격, 글꼴 크기, 줄 높이, 자간까지 총 15가지입니다.
이 목록은 두 번 읽을 가치가 있습니다. 목록에 없는 것도 그만큼 많은 정보를 주기 때문입니다. 색상, 테두리, 모서리 반경, 그림자는 데스크톱 렌더링에서 한 번만 캡처됩니다. 모바일 중단점에서 배경색이 바뀌는 디자인이라면 그 변경 사항은 전달되지 않습니다. 이는 레이아웃 결과라기보다 디자인 결정 사항이며 Elementor에서 설정해야 합니다. 실제로는 드물지만, 발생하면 경계가 아니라 버그처럼 보이므로 알아두는 것이 좋습니다.
차이가 있는 값만 기록됩니다
이 부분이 변환된 페이지를 계속 다루기 쉽게 유지하는 이유입니다. 중단점 값은 데스크톱 값과 실제로 다를 때만 저장됩니다. 컨테이너가 모든 너비에서 40px 패딩을 가진다면, 태블릿과 모바일 패딩 필드는 비어 있는 채로 유지되고 상속됩니다. 직접 페이지를 만들었을 때와 정확히 같습니다.
대안은 기술적으로는 정확하지만 실제로는 끔찍할 것입니다. 모든 위젯의 모든 반응형 필드에 값이 채워져 있어 어떤 차이가 의도된 것인지 한눈에 알 수 없게 됩니다. 대신 변환된 위젯을 열었을 때 모바일 필드에 값이 있다면, 그 값은 해당 너비에서 디자인이 실제로 다르기 때문에 존재하는 것입니다. 반응형 패널은 읽기 쉽게 유지되며, 위젯이 60개인 페이지에서는 이 점이 매우 중요합니다.
측정이 실제로 이루어지는 방식
페이지는 숨겨진 프레임에 로드됩니다. 각 중단점마다 프레임이 정확한 너비로 조정되고 나서 — 중요한 부분은 여기입니다 — 변환은 브라우저가 레이아웃을 끝낼 때까지 기다린 후 값을 읽습니다. 두 번의 애니메이션 프레임을 기다리고 80ms 타임아웃을 안전장치로 둔 다음에야 매핑된 모든 요소를 순회하며 해당 너비에서 계산된 값을 기록합니다.
그 대기 없이는 리플로우 도중에 레이아웃을 읽게 되어 두 상태 사이 어딘가의 값을 얻게 됩니다. 이는 한 중단점에서는 페이지가 미묘하게 잘못되고 다른 중단점에서는 정상인 종류의 버그를 만듭니다. 대기 시간 때문에 긴 페이지를 변환할 때 중단점마다 몇 초가 걸리며 즉시 완료되지 않습니다. 각 너비에서 페이지를 실제로 렌더링하고 있는 것입니다.
실질적인 결과는 이렇습니다. 실제 브라우저에서 767px일 때 페이지 모습이 그대로 모바일 값이 됩니다. 추측을 더하는 해석 계층이 없습니다. 변환 후 모바일 레이아웃이 잘못되었다면, 원본을 767px에서 열어보면 그곳에서도 잘못되어 있을 것입니다.
예상치 못한 문제를 피하는 작업 흐름
변환하고 붙여넣은 다음, 다른 것을 건드리기 전에 즉시 Elementor의 세 가지 기기 보기를 순서대로 확인하세요. 중단점 수준에서 레이아웃을 먼저 수정하는 것이 개별 위젯을 다시 스타일링한 후 나중에 발견하는 것보다 훨씬 빠릅니다.
그리고 변환 전에, 변환 후가 아니라 원본을 각 너비에서 확인하세요. 브라우저 창 크기를 조절하는 2분이면 처음부터 잘못된 레이아웃을 잡아낼 수 있습니다. 깨진 모바일 레이아웃을 충실하게 변환하면 깨진 모바일 레이아웃이 나올 뿐이며, 원본이 문제였다는 것을 알아차리기보다 도구를 탓하기 훨씬 쉽습니다.