여러분의 블로그 모바일 화면, 지금 한번 켜보시겠어요? 우측 상단(혹은 좌측)에 있는 메뉴 버튼이 눈에 확 들어오나요?
아스트라(Astra)는 가볍고 빠른 최고의 테마지만, 무료 버전의 기본 모바일 메뉴 아이콘은 솔직히 말해 너무 ‘소심’합니다. 배경색과 아이콘 색이 비슷해서 보호색을 띠고 있거나, 터치하기에 너무 작은 경우가 많죠. 이 작은 차이가 방문자를 3초 만에 나가게 만듭니다.
▲ (Before & After) CSS 몇 줄이면 ‘찾기 힘든 아이콘’이 ‘누르고 싶은 버튼’으로 변합니다.
1. 왜 메뉴 버튼에 목숨 걸어야 할까요?
단순히 예쁘게 보이기 위함이 아닙니다. 이건 ‘사용성(Usability)’의 문제입니다.
“작년 여름, 패션 블로그를 운영하던 분이 상담을 요청했습니다. 유입은 많은데 페이지뷰가 1.2에 머물러 있었죠. 사이트를 열어보니 흰색 헤더에 회색 햄버거 메뉴가 둥둥 떠 있더군요. 야외 햇빛 아래서는 아예 보이지도 않았습니다. 제가 CSS로 배경에 검은색 박스를 깔아주자마자, 거짓말처럼 페이지뷰가 2.5까지 올라갔습니다. 메뉴는 방문객을 안내하는 ‘네비게이션’이니까요.”
방문자가 메뉴를 못 찾으면, 더 깊은 콘텐츠로 이동할 기회 자체를 잃는 겁니다.
2. 실전 CSS 코드 (그대로 복사해서 쓰세요)
워드프레스 관리자 화면에서 [외모] > [사용자 정의하기] > [추가 CSS]로 이동해서 아래 코드를 붙여넣으시면 됩니다.
① 아이콘 크기와 색상만 바꾸고 싶을 때
기본 아이콘을 좀 더 진하고 크게 만들어서 가독성을 높입니다.
/* 햄버거 아이콘 색상 변경 */
.ast-mobile-menu-trigger-fill path {
fill: #FF5722 !important; /* 원하는 색상 코드로 변경 */
}
/* 아이콘 크기 키우기 */
.ast-button-wrap .menu-toggle .ast-mobile-menu-trigger-fill {
width: 30px; /* 기본값보다 크게 */
height: 30px;
}
② ‘박스 형태’의 버튼으로 만들고 싶을 때 (강력 추천)
아이콘 주변에 배경색과 테두리를 넣어 확실한 ‘버튼’처럼 보이게 합니다. 주목도가 훨씬 높습니다.
/* 메뉴 버튼 박스 스타일링 */
.main-header-menu-toggle {
background-color: #333333; /* 배경색 */
border-radius: 8px; /* 모서리 둥글게 */
padding: 10px 12px; /* 내부 여백 */
margin-top: 5px;
}
/* 아이콘 색상은 흰색으로 고정 */
.ast-mobile-menu-trigger-fill path {
fill: #ffffff !important;
}
💡 코드캠의 실전 TIP
“코드를 넣었는데 변화가 없나요? Astra 테마 업데이트 버전에 따라 클래스명(Class ID)이 미세하게 다를 수 있습니다. 그럴 땐 캐시(Cache) 플러그인에서 ‘모두 비우기’를 한 번 실행해 보세요. 90%는 해결됩니다.”
3. 주의사항: 과유불급 (Too Much)
버튼을 강조하겠다고 빨간색 배경에 형광색 아이콘을 쓰거나, 애니메이션을 과하게 넣으면 오히려 역효과가 납니다.
- ⚠️ 로고보다 크면 안 됩니다: 메뉴 버튼은 주인공이 아니라 조연입니다.
- ⚠️ 모바일에서만 확인하세요: 위 코드는 반응형에 따라 PC 화면에서도 보일 수 있으니, 미디어 쿼리(@media)를 활용해 모바일 화면(max-width: 921px)에서만 적용되도록 감싸주는 게 가장 안전합니다.
마치며
웹사이트 최적화는 거창한 게 아닙니다. 사용자가 “어, 메뉴가 어디 있지?”라고 생각하는 0.5초의 망설임을 없애주는 것, 그게 바로 최적화입니다. 지금 바로 적용해 보세요. 블로그의 인상이 확 달라질 겁니다.
혹시 적용하다가 아이콘이 깨지거나 색이 안 바뀌나요?
댓글로 블로그 주소를 남겨주시면, 해당 사이트에 맞는 코드를 확인해 드리겠습니다!
