랜딩 페이지 전체를 넣고 변환 버튼을 누르고 싶은 마음이 들기 쉽습니다. 긴 페이지에서는 섹션 단위로 작업하는 것이 전반적으로 더 빠르고 훨씬 검증하기 쉽습니다.
슬라이스가 유리한 이유
- 작은 단위는 눈으로 확인하기 쉽습니다. 히어로 섹션이 올바르게 변환되었는지는 한눈에 알 수 있지만, 40개 섹션을 한꺼번에 확인하는 것은 불가능합니다.
- 실수로 사이트 헤더, 푸터, 쿠키 배너를 가져오는 일을 피할 수 있습니다.
- 한 섹션이 잘못 변환되면 해당 소스만 고쳐서 따로 다시 실행하면 됩니다. 전체를 다시 할 필요가 없습니다.
- 페이지 바깥쪽 래퍼를 가져오지 않으므로 중첩이 더 얕게 유지됩니다.
슬라이스하는 두 가지 방법
비주얼 피커
페이지를 불러온 다음, 비주얼 피커를 사용해 렌더링된 미리보기 위에 마우스를 올리고 원하는 블록을 클릭하세요. 이 도구는 해당 요소의 마크업을 가져오며, 중요한 점은 페이지의 스타일시트도 함께 가져온다는 것입니다. 따라서 스타일이 클래스 기반 CSS 파일에 정의된 블록도 스타일이 그대로 유지된 채 변환됩니다.
복사 루트
전체 페이지를 한 번 변환한 다음 구조 맵을 열고 원하는 행의 대상 아이콘을 클릭하세요. 해당 행이 복사 루트가 되고 그 하위 트리만 내보내집니다. 바깥 래퍼는 제외됩니다. 십자 아이콘으로 개별 행을 제외할 수도 있습니다.
확장 가능한 워크플로
- 먼저 히어로 섹션을 변환해 붙여넣으세요. 간격, 글꼴, 버튼 호버 상태까지 제대로 맞추세요.
- 페이지를 한 번에 한 섹션씩 아래로 이동하면서 각 섹션을 이전 섹션 아래에 붙여넣으세요.
- 두세 개 섹션을 붙일 때마다 세 가지 기기 화면을 순서대로 확인하세요. 반응형 문제를 일찍 발견하는 것이 마지막에 발견하는 것보다 훨씬 비용이 적습니다.
- 재사용할 항목(기능 행, 추천 블록 등)은 작업하면서 Elementor 템플릿 라이브러리에 저장하세요.
섹션을 분리해 두세요
모든 것을 하나의 거대한 컨테이너로 합치고 싶은 유혹을 물리치세요. 섹션마다 최상위 컨테이너를 하나씩 유지하는 것이 Elementor 페이지가 일반적으로 구축되는 방식과 일치하고, 순서 변경이 쉬워지며, 트리 구조와 씨름하지 않고도 섹션 수준의 배경과 패딩을 설정할 수 있습니다.
피커가 스타일시트를 함께 가져오는 이유
여기에는 슬라이스 작업이 전혀 작동하는지 여부를 결정하는 미묘한 문제가 있습니다. 스타일이 문서 head의 클래스 기반 CSS에 정의된 페이지에서 요소 자체의 마크업에는 스타일 정보가 거의 없습니다. <section class="hero">는 .hero가 어떻게 생겼는지 알려주지 않습니다.
따라서 선택을 확인하면 피커는 요소만 반환하지 않습니다. 추출된 마크업 앞에 페이지 자체의 스타일 블록을 붙여서 슬라이스가 자체 완결적으로 도착하고 모양이 그대로 유지된 채 변환되도록 합니다. 피커 자체의 하이라이트 스타일은 태그가 지정되어 제외되므로 피커 UI가 결과물에 새어 들어가지 않습니다.
이것이 Tailwind나 Bootstrap 페이지에서 섹션을 선택하는 것이 작동하는 이유입니다. 반면 개발자 도구에서 해당 섹션의 outerHTML을 복사해 붙여넣으면 스타일이 없는 마크업이 됩니다. 피커 대신 수동으로 추출하는 경우 스타일 블록도 함께 복사하세요. 그렇지 않으면 뼈대만 변환하게 됩니다.
상황별 슬라이스 방법 선택
두 가지 방법은 서로 바꿔 쓸 수 없으며, 잘못 선택하면 시간이 낭비됩니다.
- 전체 페이지가 있고 그중 일부만 원할 때는 피커를 사용하세요. 시각적이고 스타일시트 문제를 대신 처리해 주며, 페이지의 나머지 부분을 변환기에 불러오지 않습니다. 경쟁사 스타일 레퍼런스나 대형 템플릿에서 히어로 섹션을 뽑아낼 때 가장 좋습니다.
- 한 페이지의 여러 부분을 원할 때는 복사 루트를 사용하세요. 한 번 변환한 다음 매번 분석을 다시 실행하지 않고도 다양한 하위 트리를 다시 내보낼 수 있습니다. 완전히 다시 구축하려는 페이지를 체계적으로 따라 내려가며 작업할 때 가장 좋습니다.
진행하면서 중첩을 살피세요
슬라이스에는 사람들이 늦게 알아차리는 부작용이 있습니다. 각 슬라이스는 원본에서 그 위에 있던 래퍼 수준을 그대로 가져옵니다. 슬라이스 네 개를 붙여넣으면 네 섹션이 서로 다른 깊이에 놓여 완성된 페이지가 보기에는 멀쩡해도 편집할 때 일관성이 떨어질 수 있습니다.
구조 맵에는 변환마다 최대 중첩 깊이가 표시됩니다. 슬라이스마다 이를 확인하고 매번 같은 얕은 깊이를 목표로 하세요. 보통 가장 바깥쪽 래퍼를 그대로 받아들이는 대신 복사 루트를 한두 단계 아래로 설정하면 됩니다. 여기서는 절대적인 수치보다 섹션 간 일관성이 더 중요합니다.
헤더, 푸터, 쿠키 배너에 대한 참고 사항
전체 페이지 변환은 body의 모든 것을 가져오는데, 실제 페이지에서는 사이트 헤더, 푸터, 쿠키 바, 경우에 따라 채팅 위젯까지 포함됩니다. 그중 어느 것도 섹션에 속하지 않으며, 나중에 Elementor에서 삭제하는 것은 애초에 가져오지 않는 것보다 느립니다.
이것이 슬라이스를 해야 하는 가장 강력한 실용적 근거입니다. 또한 특정한 불쾌한 놀라움도 피할 수 있습니다. 가져온 고정 위치 헤더는 변환 중에 의도적으로 absolute로 강등되는데, 이는 사이트 전체를 덮지 못하게 하기 위한 것입니다. 그 결과 섹션 위에 떠 있는 헤더 모양 블록이 남으므로 찾아서 제거해야 합니다.
전체 페이지를 변환해도 괜찮은 경우
히어로 섹션, 두세 개의 섹션, 푸터 CTA 정도로 짧은 페이지는 한 번에 깔끔하게 변환됩니다. 섹션별 접근 방식은 긴 마케팅 페이지나 마크업이 변환을 염두에 두고 작성되지 않은 모든 페이지에서 진가를 발휘합니다.
합리적인 규칙은 다음과 같습니다. 페이지 전체가 세 번의 스크롤 높이 안에 보이고 사이트 공통 UI(크롬)가 없다면 전체를 변환하세요. 그보다 길거나 독립형 블록으로 제작되지 않고 실제 사이트에서 캡처한 것은 슬라이스로 작업하는 것이 더 빠릅니다.