Wix 하모니 에디터: DOM 순서로 작업하기
2 분
페이지 메뉴
- DOM 순서가 중요한 이유
- DOM 순서 수동 조정하기
- 접근성 마법사에서 DOM 순서 조정하기
이 도움말은 2026년 1월에 출시된 새로운 Wix 하모니 에디터를 참조합니다. Wix 하모니 에디터를 사용 중인지 Wix 에디터를 사용 중인지 확실하지 않다면, 여기에서 자세한 정보를 확인하세요.
DOM(문서 객체 모델) 순서는 사이트 페이지가 구조화된 방식을 나타냅니다. 페이지 요소의 로딩 및 선택 순서(첫 번째, 두 번째 등)를 결정합니다.
명확하고 논리적인 DOM 순서가 있으면 여러 방식으로 사이트를 최적화할 수 있습니다. 이 도움말의 정보를 사용해 DOM이 중요한 이유 및 DOM 작업 방법에 대해 자세히 알아보세요.
DOM 순서가 중요한 이유
사이트 DOM은 사이트 페이지 요소의 로딩 및 읽기 순서이며, 사이트의 다음 순서에 영향을 줄 수 있습니다.
- 접근성: 일부 사이트 방문자는 Tab 키, 스크린 리더 또는 기타 보조 기술을 사용해 사이트를 탐색할 수 있습니다. 이러한 기술은 DOM 순서에 의존해 요소를 선택하거나 읽는 순서를 파악합니다.
- 성능: DOM은 요소가 사이트에 로딩되는 순서를 결정합니다. 요소의 시각적 순서와 일치하지 않는 경우, 사이트의 로딩에 영향을 줄 수 있습니다(예: 콘텐츠 로딩 시 페이지 레이아웃이 이동될 수 있습니다).
- 검색 결과 순위: 검색 엔진은 DOM을 사용해 사이트가 오른쪽으로, 위에서 아래로 크롤링되는 순서를 결정합니다. DOM이 구성되지 않거나 DOM이 올바르지 않으면 검색 엔진이 잘못된 순서로 콘텐츠를 '읽고' 콘텐츠를 오해할 수 있습니다.
사이트의 DOM 순서를 테스트하고 싶다면:
사이트의 라이브 버전에서 키보드의 Tab 키 또는 스크린 리더를 사용해 Wix 사이트의 자동 DOM 순서를 테스트할 수 있습니다.
DOM 순서 수동 조정하기
Wix는 기본적으로 사이트의 DOM 순서를 자동으로 구성해 페이지 콘텐츠를 성능 및 순위에 대해 최적화된 상태로 유지합니다. 하지만, 특정 섹션 및 컨테이너의 DOM 순서를 수동으로 조정할 수 있습니다.
자동 DOM을 비활성화하려면:
- 에디터로 이동합니다.
- 에디터 왼쪽 하단에서 레이어
아이콘을 클릭합니다. - (레이어 패널에서) 해당 섹션 또는 컨테이너 옆의 추가 작업
아이콘을 클릭합니다. - DOM 순서 최적화 옆 활성화를 클릭해 비활성화합니다.
- 해당 요소를 원하는 순서로 끌어다 놓습니다.
접근성 마법사에서 DOM 순서 조정하기
접근성 마법사에서 DOM 순서를 자동으로 구성하라는 메시지가 표시될 수 있습니다. 이는 특정 페이지 아래에 표시되거나 사이트 전체에 표시될 수 있습니다.
- 사이트 레벨 문제: 언어마다 읽는 순서가 다릅니다. 예를 들어, 프랑스어는 왼쪽에서 오른쪽으로 읽고, 아랍어는 오른쪽에서 왼쪽으로 읽습니다. 이 작업은 사이트 언어의 읽기 방향이 요소의 시각적 순서와 정렬되지 않은 경우 표시됩니다.
- 페이지 문제: 이 작업은 페이지의 섹션 또는 컨테이너 중 최소 하나에서 DOM이 비활성화된 경우 표시됩니다.
마법사로 DOM 순서를 구성하려면:
- 에디터로 이동합니다.
- 에디터 왼쪽 상단에서 사이트 이름을 클릭합니다.
- 접근성으로 스크롤해 문제 해결을 클릭합니다.
- 사이트 스캔을 클릭합니다.
- 작업 유형으로 DOM 순서를 구성합니다.
- 사이트 레벨: 사이트 레벨 드롭다운을 선택합니다.
- 페이지 레벨:
- 해당 페이지 컬렉션을 클릭합니다(예: 메인 페이지, 쇼핑몰 페이지).
- 특정 페이지를 클릭합니다.
- DOM 순서 구성 드롭다운을 클릭합니다.
- 자동(권장)을 선택합니다.
- 적용을 클릭합니다.
- (선택사항) 사이트 요소의 시각적 표시를 확인해 정렬되어 있는지 확인합니다.
Wix는 접근성 정보를 어디에서 확인하나요?
- Wix에서는 W3C(World Wide Web Consortium)에서 개발한 WCAG(웹 콘텐츠 접근성 가이드라인) 문서에 따른 권장 사항을 준수합니다.
- Wix는 다음과 같은 성공 기준을 기반으로 지침을 작성했습니다.