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