모바일 사용자 비중이 급격히 증가하면서 AMP(Accelerated Mobile Pages)를 사용하는 워드프레스 블로그가 많아졌습니다. AMP는 페이지 로딩 속도를 획기적으로 높여 SEO에도 긍정적인 영향을 미치지만, 일반적인 자바스크립트 기능을 사용할 수 없다는 제약이 있습니다.
그중 모바일 메뉴 토글 기능은 AMP에서 구현하기 까다로운 부분입니다. 특히 Human 테마를 사용하는 워드프레스 사이트에서는 AMP와 메뉴의 호환성이 핵심 이슈로 떠오릅니다.
이 글에서는 AMP 지원 모바일 메뉴 토글을 Human 테마에 완전히 구현하는 방법을 코드와 함께 자세히 소개합니다.
AMP란?
AMP는 Google이 주도하는 오픈소스 프레임워크로, 모바일 환경에서 웹 페이지를 더 빠르게 로딩하기 위해 개발되었습니다. 불필요한 요소를 최소화하고 캐싱 기술을 활용해 사용자에게 빠르고 깔끔한 웹 환경을 제공합니다.
Human 테마에서 AMP 모바일 메뉴가 필요한 이유
- 기본 Human 테마는 AMP에서 메뉴 토글 버튼이 작동하지 않음
- 사용자가 메뉴를 클릭해도 아무 반응이 없거나 메뉴가 항상 표시됨
- AMP 환경에서는 일반 JS를 사용할 수 없어 onClick 기반 토글 기능이 작동하지 않음
- 사용자 경험(UX)과 SEO 모두 악영향을 받게 됨
해결 방법: AMP 전용 amp-bind를 활용한 토글 메뉴 구현
AMP에서는 amp-bind라는 방식으로 상태를 변경할 수 있습니다. 이를 활용해 AMP에서도 토글 메뉴를 구현할 수 있습니다.
코드 적용 위치 안내
- functions.php 또는 테마에 커스텀 함수 추가할 수 있는 곳에 아래 PHP 코드를 삽입
- CSS는 style.css 또는 AMP 스타일이 허용된 테마의style amp-custom 내부에 삽입
- AMP 스크립트는 head 태그 안에 삽입
Step 1: PHP 함수로 메뉴 버튼 + 메뉴 출력
functions.php에 아래 코드를 추가하세요!. 메뉴 링크만 변경해서 그대로 사용하면 됩니다.
if ( !function_exists( 'hu_print_mobile_btn' ) ) {
function hu_print_mobile_btn() {
?
!-- 메뉴 토글 버튼 --
button id="menu-toggle"
class="ham__navbar-toggler-two"
on="tap:AMP.setState({ navMenuToggledOn: !navMenuToggledOn })"
[class]="'ham__navbar-toggler-two ' + (navMenuToggledOn ? 'active' : '')"
aria-expanded="false"
[aria-expanded]="navMenuToggledOn ? 'true' : 'false'"
span class="ham__navbar-span-wrapper"
span class="line line-1"/span
span class="line line-2"/span
span class="line line-3"/span
/span
/button
!-- 메뉴 본체 --
div class="nav-container"
nav class="nav" [class]="navMenuToggledOn ? 'nav show' : 'nav'"
div class="nav-wrap container"
ul class="nav container-inner group mobile-search"
li
form role="search" method="get" class="search-form" action="https://qcai.kr/amp" target="_top"
label
span class="screen-reader-text"검색:/span
input type="search" class="search-field" placeholder="검색 " name="s"
/label
input type="submit" class="search-submit" value="검색"
/form
/li
/ul
ul id="menu-menu" class="nav container-inner group"
li class="menu-item"a href="링크1"메뉴1/a/li
li class="menu-item"a href="링크2"메뉴2/a/li
li class="menu-item"a href="링크3"메뉴3/a/li
li class="menu-item"a href="링크4"메뉴4/a/li
/ul
/div
/nav
/div
?php
}
}
이 코드는 워드프레스 테마의 functions.php 파일에 넣어야 합니다.
add_theme_support(
'amp',
array(
'nav_menu_toggle' = array(
'nav_container_id' = 'nav-mobile', // 메뉴 전체 감싸는 div의 ID
'nav_container_toggle_class'= 'expanded', // 메뉴가 열릴 때 추가될 클래스
'menu_button_id' = 'ham__navbar-span-wrapper', // 버튼 ID
'menu_button_toggle_class' = 'active', // 버튼 활성화시 추가될 클래스
),
)
);
Step 2: CSS로 메뉴 표시 제어
AMP에서는 display: none / display: block 전환을 클래스 기반으로 조작합니다.
style.css 또는 AMP 스타일 영역에 아래 스타일을 추가하세요.
경로:
wp-content/themes/hueman/assets/front/css
수정 대상 파일:
main.min.css
기존 CSS를 직접 수정(또는 삭제)해도 되지만, 수정이 번거롭다면 아래에 제공된 파일로 덮어쓰기해도 됩니다.
단, 반드시 기존 파일은 백업해두는 것이 중요합니다.
main.min.css
0.09MB
#footer .nav-container .nav,#header .nav-container .nav {
display: none
}
.nav-container .nav 코드삭제
#footer .nav-container .nav {
display: none
}
새로운 CSS를 추가합니다.
/* 메뉴 기본 숨김 */
.nav {
display: none;
}
/* AMP 상태 변경 시 보이게 */
.nav.show {
display: block;
}
Step 3: AMP 스크립트 head에 삽입
header.php 또는 AMP 문서 head에 아래 스크립트를 추가하세요: 필요한 경우.
script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"/script
SEO 관점에서 AMP 메뉴의 중요성
- 페이지 체류시간 증가: 사용자가 원하는 카테고리를 더 쉽게 탐색 가능
- 구조화된 내비게이션은 Googlebot이 사이트 구조를 더 잘 이해하게 도움
- 빠른 로딩 + 논리적 메뉴 구조로 Core Web Vitals 개선
- 모바일 사용자 이탈률 감소, 이는 결국 검색엔진 순위에도 영향
워드프레스의 Human 테마에서도 AMP 완전 대응이 가능합니다. 최근 몇칠 테스트를 해보고 있으면 특별하게 많이 수정할 부분 없이도 몇가지만 수정을 하게 되면 충분 AMP블로그로 최적화가 가능합니다. 주 문제의 핵심은 amp-bind를 통해 상태를 관리하고, 토글 버튼과 메뉴를 AMP 방식으로 연결하는 것입니다. 사용자 경험과 SEO를 모두 만족시키는 AMP 모바일 메뉴, 지금 바로 적용해 사용해 보세요.