워드프레스 구텐베르크 편집기에서 링크를 설정하기 위해 링크 아이콘을 클릭하면 링크 설정 팝업이 콘텐츠 영역을 벗어나 왼쪽 메뉴에 가려지는 현상이 나타나는 경우가 있습니다. 팝오버(Popover) 컴포넌트 오버레이가 제대로 표시되지 않는 문제가 나타날 경우 회피 방법에 대하여 살펴보겠습니다.
워드프레스 링크 설정 팝업이 메뉴에 가려지는 문제가 나타나는 경우
워드프레스 블록 에디터(구텐베르크)에서 링크를 설정하기 위해 텍스트를 선택하고 링크 아이콘을 클릭하면 그림과 같이 왼쪽 메뉴 패널에 링크 설정 팝업이 가려지는 현상이 발생하여 불편한 경우가 있습니다.
(※ 참고로 블록 에디터에서 단축키를 사용하면 링크 넣기 등의 작업을 쉽고 빠르게 수행할 수 있습니다. 링크 설정의 경우 텍스트를 선택하고 Ctrl+K 단축키를 누르면 팝업 설정창이 표시됩니다. "시간과 능률을 향상시키는 워드프레스 구텐베르크 키보드 단축키"를 참고하세요.)
이러한 팝업 요소가 가려지는 버그는 작년에 워드프레스 커뮤니티에 보고되어 기본 편집기(구텐베르크)에서는 문제가 해결되었습니다.
테스트를 해보니 Rank Math 플러그인과 같은 일부 플러그인을 사용하는 경우에 이런 현상이 나타났습니다. Yoast SEO와 All in One SEO에서는 이 문제가 발생하지 않았습니다.
링크 팝업 창이 다른 요소에 가려져서 일부가 보이지 않는 문제가 나타나는 경우 회피 방법
이 문제는 이 문제를 야기하는 플러그인(예: 랭크 매쓰)에서 해결해 주어야 하는 사안입니다. Rank Math에 이 버그를 보고하면 문제가 더 빨리 해결되지 않을까 생각됩니다.
당분간 다음과 같은 방법으로 이 문제에 대응할 수 있습니다.
- 왼쪽 메뉴 패널의 맨 아래에 있는 메뉴 접기 아이콘(①을 클릭하여 메뉴 패널을 축소합니다.
- 오른쪽 상단의 설정 아이콘(②)을 클릭하여 오른쪽 설정 패널을 숨깁니다.
- 그리고 많은 사용자들이 이용하는 방법으로 브라우저 화면 확대/축소 배율을 90% 또는 80% 등으로 낮추는 것을 고려할 수 있습니다. 숫자가 낮을 수록 화면이 축소되어 더 많은 콘텐츠가 표시되고 링크 팝업 창이 가려지는 현상도 완화됩니다. 크롬, 엣지 등 대부분의 브라우저에서 키보드의 Ctrl 키를 누른 상태에서 마우스 휠을 아래로 스크롤하여 쉽게 화면을 축소할 수 있습니다.
이외에도 브라우저 화면 크기를 조정하면서 링크할 텍스트의 위치가 왼쪽에서 오른쪽으로 이동하도록 하면 링크 팝업 창이 다른 요소에 의해 가려지는 문제를 회피할 수도 있을 것입니다.
마치며
이상으로 워드프레스 기본 편집기에서 글을 작성할 때 팝업 요소가 메뉴 등에 가려지는 현상이 발생하는 경우 대처 방법에 대하여 살펴보았습니다.
이 문제는 Rank Math에서만 발생하는 것으로 보이고 Yoast SEO나 AIO SEO 등의 다른 SEO 플러그인에서는 나타나지 않는 것 같습니다. Rank Math를 사용하는 경우 이런 현상이 나타나면 본문에 설명된 방법을 참고하여 대응할 수 있습니다.
댓글 남기기