Studio 에디터: 에디터와 라이브 사이트의 차이점 문제 해결하기

Studio 에디터 사이트의 게시된 버전을 볼 때 에디터에서와 다르게 보일 수 있습니다. 이러한 차이는 일반적으로 미미하지만 요소가 잘못 정렬되거나 잘린 것처럼 보일 수 있습니다. 

일반적으로 이러한 차이점은 뷰포트의 일부 요소 설정(크기 조정, 위치 및 동작)으로 인해 발생합니다. 이 도움말의 권장 사항을 사용해 잠재적인 해결 방법을 찾고 전체 화면 크기에서 일관성을 유지하세요.

라이브 사이트가 에디터에 표시되는 것과 다르게 표시된다면, 중단점 및 편집 크기와 관련이 있을 수 있습니다.

화면 중단점은 다양한 기기에 맞게 사이트를 디자인하는 데 사용하는 화면 크기 범위입니다(예: 뷰포트). 이 범위 내에서 특정 편집 크기를 설정할 수 있습니다. 예를 들어, 320-750px 화면 중단점에서 편집 크기를 500px로 설정할 수 있습니다.

정의된 범위를 벗어나는 뷰포트는 최적화되지 않았으며, 정렬 및 레이아웃 문제가 있을 수 있습니다. 특정 뷰포트에 문제가 발생했다면, 그에 맞게 편집 크기를 설정하고 조정하는 것이 좋습니다.

형제 요소(상위 섹션 또는 컨테이너를 공유하는 요소)에서 다른 여백 단위를 사용하면 콘텐츠가 잘못 정렬되거나 왜곡될 수 있습니다. 단일 컨테이너 또는 섹션의 모든 형제 요소에 동일한 여백 단위(%, px, px* 등)를 사용하는 것이 좋습니다.

충돌하는 반응형 동작의 상위 및 하위 요소는 라이브 사이트의 콘텐츠에 문제를 일으킬 수 있습니다.

컨테이너에 버튼이 연결되어 있다고 가정해 보겠습니다. 버튼의 반응형 동작은 고정이고 컨테이너는 비례적 크기 조정으로 설정되어 있습니다. 버튼은 고정되어 있으므로 상위 컨테이너와 함께 크기가 조정되지 않아 라이브 사이트에서 여백, 요소가 겹치고 요소가 잘릴 수 있습니다. 이는 요소 중 하나에 혼합 반응형 동작이 있는 경우에도 발생할 수 있습니다.

이 문제를 해결하려면 요소의 반응형 동작을 정렬하는 것이 좋습니다.

일부 화면 크기에서는 요소를 볼 수 있지만, 다른 크기에서는 요소를 볼 수 없을 수 있습니다. 이는 일반적으로 요소가 특정 화면 중단점에서 숨겨져 있기 때문입니다. 레이어 패널을 사용해 요소를 찾고 원하는 뷰포트에 표시할 수 있습니다.