Astra 모바일 메뉴 사라짐 원인과 WP Rocket 설정 해결 과정

Astra 모바일 메뉴 사라짐 문제는 처음에는 단순한 반응형 오류처럼 보였습니다. 데스크톱 화면에서는 메뉴가 정상적으로 보였지만, 모바일로 접속하면 상단 햄버거 메뉴와 구분선이 바로 나타나지 않고 스크롤을 조금 내린 뒤에야 표시되는 현상이 있었습니다.

처음에는 로고 크기나 사이트 제목 길이 때문에 모바일 헤더 영역이 밀리는 문제라고 생각했습니다. 그래서 로고 크기, 타이틀 간격, 메뉴 위치를 여러 번 조정했지만 화면 첫 진입 시 메뉴가 사라지는 현상은 그대로 남아 있었습니다. 캐시를 삭제하면 잠시 정상처럼 보이는 경우도 있었지만 시간이 지나면 다시 같은 문제가 반복되었습니다.

더 헷갈렸던 부분은 새로 만든 다른 사이트에서는 같은 Astra 테마를 사용해도 이런 문제가 생기지 않았다는 점입니다. 기존 사이트와 거의 같은 구조였기 때문에 테마 자체의 문제인지, 캐시 플러그인 문제인지, 차일드 테마 문제인지 바로 판단하기 어려웠습니다.

결과적으로는 차일드 테마 확인, 추가 CSS 적용, WP Rocket의 Delay JavaScript execution 설정을 차례대로 점검하면서 해결할 수 있었습니다. 이 글은 제가 실제로 겪은 Astra 모바일 메뉴 사라짐 현상을 기준으로 어떤 부분을 확인했고, 어떤 설정에서 문제가 멈췄는지 정리한 내용입니다.

Astra 모바일 메뉴가 보이지 않았던 증상

모바일에서 사이트에 접속하면 상단에는 로고와 사이트 이름이 보였지만 오른쪽 메뉴 아이콘이 비어 있는 것처럼 나타났습니다. 원래라면 햄버거 메뉴 버튼이 바로 보여야 하는데, 첫 화면에서는 해당 영역이 빈칸처럼 보이고 아래쪽 구분선도 함께 표시되지 않았습니다.

스크롤을 아주 조금 내리면 메뉴 버튼과 구분선이 뒤늦게 나타났습니다. 페이지를 읽는 데 치명적인 오류는 아니었지만, 사이트에 처음 들어온 사용자가 메뉴를 찾지 못할 수 있고 화면이 늦게 완성되는 느낌을 주기 때문에 그대로 두기에는 불안한 문제였습니다.

이 현상은 홈 화면과 게시물 화면에서 다르게 나타나기도 했습니다. 어떤 페이지에서는 수정된 것처럼 보였지만 다른 페이지에서는 다시 메뉴가 늦게 나타났기 때문에 단순 CSS 문제만으로 보기 어려웠습니다.

Astra 모바일 메뉴 사라짐 문제를 먼저 차일드 테마에서 확인한 이유

가장 먼저 의심한 부분은 Astra 차일드 테마였습니다. 부모 테마는 업데이트가 이루어지지만, 차일드 테마는 사용자가 직접 설치한 뒤 그대로 두는 경우가 많습니다. 저도 사이트를 처음 만들었을 때 설치한 차일드 테마를 계속 사용하고 있었고, 버전을 따로 신경 쓰지 않았습니다.

Astra Pro를 사용하고 있다면 계정의 다운로드 페이지에서 Astra Child Theme 항목을 확인할 수 있습니다. 기존 차일드 테마가 오래된 상태라면 새 파일을 받아 다시 설치하는 방식으로 교체할 수 있습니다.

차일드 테마를 새로 설치하기 전에는 반드시 기존에 추가해 둔 코드를 확인해야 합니다. 검색 엔진 소유권 확인 코드, 애드센스 관련 코드, 별도로 넣은 PHP 코드가 차일드 테마 파일에 들어 있다면 새로 설치하는 과정에서 사라질 수 있습니다. 실제 운영 중인 사이트라면 바로 교체하기보다 먼저 메모장에 백업해 두는 편이 안전합니다.

테마 화면에서 Astra Child 버전을 확인했을 때 오래된 차일드 테마를 사용하고 있다는 점도 확인했습니다. 그래서 최신 차일드 테마로 교체했고, 한동안은 Astra 모바일 메뉴 사라짐 현상이 줄어든 것처럼 보였습니다.

다만 이 단계에서 문제가 완전히 끝난 것은 아니었습니다. 다음 날 다시 모바일로 접속했을 때 일부 화면에서 메뉴가 다시 늦게 나타났습니다. 차일드 테마 업데이트는 필요한 점검이었지만, 이 사이트에서 발생한 핵심 원인은 따로 있었습니다.

추가 CSS로 Astra 모바일 메뉴 위치를 보정해 본 과정

차일드 테마를 교체한 뒤에도 문제가 남아 있어 추가 CSS를 적용했습니다. Astra 모바일 메뉴 버튼 영역이 화면 첫 진입 시 제대로 잡히지 않는 경우가 있어, 모바일 메뉴 버튼 위치를 강제로 상대 위치로 잡아주는 방식이었습니다.

워드프레스 관리자 화면에서 외모 > 사용자 정의하기 > 추가 CSS 메뉴로 들어가 아래 코드를 넣었습니다.

.ast-mobile-menu-buttons {
    position: relative !important;
}

이 코드를 넣은 뒤 게시물 화면에서는 메뉴가 바로 보이는 것처럼 보였습니다. 모바일 첫 화면에서 빈칸처럼 보이던 메뉴 영역도 어느 정도 안정되는 느낌이 있었습니다.

다만 홈 화면에서는 같은 증상이 다시 나타났습니다. 게시물에서는 정상인데 홈 화면에서는 늦게 표시되는 식으로 화면마다 반응이 달라졌기 때문에, CSS만으로는 Astra 모바일 메뉴 사라짐 문제를 완전히 해결하기 어렵다고 판단했습니다.

WP Rocket JavaScript 지연 설정에서 원인을 찾은 과정

마지막으로 확인한 부분은 WP Rocket의 JavaScript 지연 설정이었습니다. WP Rocket에는 Delay JavaScript execution 기능이 있는데, 사용자가 스크롤하거나 클릭하기 전까지 일부 JavaScript 실행을 늦춰 페이지 속도를 높이는 기능입니다.

속도 개선에는 도움이 되지만, 메뉴나 폼처럼 첫 화면에서 바로 보여야 하는 요소가 이 기능의 영향을 받으면 화면 일부가 늦게 나타날 수 있습니다. 제가 겪은 모바일 메뉴 문제도 이 흐름과 비슷했습니다. 접속 직후에는 메뉴가 보이지 않다가 스크롤을 하면 표시되었기 때문입니다.

WP Rocket 설정 안에서 Delay JavaScript execution 항목을 열고, One-click exclusions 영역에서 Themes를 선택했습니다. 그 아래에 있는 Astra와 Astra – Carousel 항목을 제외 대상으로 체크했습니다.

이 설정을 적용한 뒤 캐시를 삭제하고 모바일에서 다시 접속했습니다. 이전처럼 스크롤을 해야 메뉴가 나타나는 현상이 사라졌고, 첫 화면에서 햄버거 메뉴와 구분선이 바로 보였습니다.

제 경우에는 Astra 모바일 메뉴 사라짐 현상의 직접적인 원인이 WP Rocket의 JavaScript 지연 처리와 Astra 모바일 헤더 스크립트가 맞물린 부분에 가까웠습니다. 차일드 테마와 CSS도 점검할 만한 요소였지만, 최종적으로는 WP Rocket 제외 설정을 넣은 뒤 가장 안정적으로 바뀌었습니다.

캐시 플러그인 문제로 보기 어려웠던 이유

이 문제를 처음부터 WP Rocket 문제로 판단하기는 어려웠습니다. 캐시를 삭제하면 일시적으로 정상처럼 보였고, 또 어떤 페이지에서는 메뉴가 잘 보이기도 했기 때문입니다. 플러그인을 모두 비활성화했을 때도 바로 원인이 드러나지 않아 테마 구조 문제처럼 보이기도 했습니다.

워드프레스에서 캐시 관련 문제는 항상 같은 방식으로 나타나지 않습니다. 특히 OpenLiteSpeed 서버, LiteSpeed Cache, WP Rocket, CDN, QUIC.cloud 같은 캐시 계층이 함께 들어가 있으면 화면 지연 문제를 한 번에 판단하기 어렵습니다. 이 사이트에서는 WP Rocket을 사용하고 있었기 때문에 JavaScript 지연 실행 항목을 따로 확인해야 했습니다.

Astra처럼 모바일 헤더를 JavaScript와 CSS가 함께 처리하는 테마에서는 메뉴, 검색창, 슬라이더, 카트 버튼 같은 요소가 지연 실행의 영향을 받을 수 있습니다. 속도 점수만 보고 모든 스크립트를 늦추면 첫 화면에서 필요한 UI가 늦게 나타나는 문제가 생길 수 있습니다.

수정 후 모바일 화면에서 달라진 점

WP Rocket에서 Astra 테마를 JavaScript 지연 실행 제외 대상으로 넣은 뒤에는 모바일 첫 화면이 바로 안정되었습니다. 햄버거 메뉴가 처음부터 표시되었고, 상단 구분선도 스크롤 전부터 정상적으로 보였습니다.

며칠 동안 캐시를 갱신하면서 홈 화면과 게시물 화면을 함께 확인했는데, 이전처럼 페이지마다 다르게 나타나는 현상도 줄었습니다. 사용자 입장에서는 작은 차이처럼 보일 수 있지만, 사이트 첫 화면이 늦게 완성되는 느낌이 사라진 점이 가장 컸습니다.

이번 문제를 겪으면서 속도 최적화 설정은 점수만 보고 켜는 것보다 실제 모바일 화면을 함께 확인해야 한다는 점을 다시 느꼈습니다. 특히 Astra 모바일 메뉴 사라짐처럼 화면 일부가 늦게 나타나는 문제는 PageSpeed 점수보다 실제 접속 화면에서 먼저 발견되는 경우가 많습니다.

적용 순서 정리

같은 증상이 있다면 바로 CSS부터 넣기보다 아래 순서로 확인하는 편이 좋습니다.

1. 모바일에서 홈 화면과 게시물 화면을 각각 확인합니다.
2. Astra 부모 테마와 차일드 테마 상태를 확인합니다.
3. 차일드 테마에 직접 추가한 코드가 있다면 백업합니다.
4. 추가 CSS로 메뉴 버튼 위치를 보정해 봅니다.
5. WP Rocket을 사용 중이라면 Delay JavaScript execution 제외 항목에서 Astra를 선택합니다.
6. 캐시 삭제 후 모바일 새로고침, 시크릿 모드, 다른 브라우저에서 다시 확인합니다.

이 과정에서 중요한 부분은 한 번에 여러 설정을 바꾸지 않는 것입니다. 동시에 여러 항목을 수정하면 어떤 설정이 실제 원인이었는지 알기 어렵습니다. 저도 차일드 테마, CSS, WP Rocket을 차례대로 확인하면서 마지막 설정에서 문제가 안정된 것을 확인했습니다.

FAQ

관련 글 추천

• 아스트라 글 보관함 제목 굵게 만드는 CSS 수정 방법
• 아스트라 404 페이지 만드는 방법｜Custom Layouts로 오류 페이지 수정
• 아스트라 이미지 문단 간격 사라졌을 때 추가 CSS로 해결한 과정
• 워드프레스 아스트라 테마 플로팅 사이드바 설정 방법