워드프레스 햄버거 메뉴가 모바일 사파리에서 보이지 않을 때

현재 이 블로그에서 사용하고 있는 워드프레스 테마는 Typist – WordPress Theme for Serious Writers인데, 깔끔한 디자인이 마음에 들어서 조금 수정해서 꽤 오랫동안 적용하고 있습니다. 2004년 이후로 지원이 끊겼습니다만…

최근에 아이폰 사파리 브라우저에서 햄버거 모양의 메뉴 아이콘이 보이지 않는다는 사실을 알게 되었네요.

아이폰 사파리에서만 보이지 않는 메뉴 아이콘

원래는 가로 길이가 길면 아래처럼 메뉴가 보이다가,

wordpress responsive theme menu

아래와 같이 가로 길이가 좁은 기기로 접속하면 메뉴를 여닫을 수 있는 햄버거 메뉴 아이콘이 나타나야 합니다.

typist hamburger menu

하지만 PC에서 창 크기를 줄이면 잘 되는데, 아이폰 사파리에선 메뉴 아이콘 자체가 없더군요.

위와 같이 없어요 ;; 안 보여요. 신기한 게 아이폰 크롬 앱에서는 또 보입니다. ;;;

그래서 구글 검색을 좀 해봤습니다.

문제는 아이폰 사파리의 광고차단 플러그인

처음에는 iOS 버전 올라가면서 뭔가 호환이 안 되어서 나타나는 문제일 거라고 생각했는데, Stackoverflow에서 찾은 내용에 의하면,

아이폰 사파리에 광고차단필터 같은 거 적용해서 쓰는 경우, 이런 아이콘을 광고의 하나로 생각하고 차단하는 플러그인들이 있다고 합니다.

순간 아이폰 사파리에서 광고차단 플러그인을 사용하고 있다는 생각이 났습니다.

해결방법 1 – 화이트리스트에 내 블로그를 추가

제 경우는, 테마의 header.php 에 보니

<div class="menubutton"><a href="#"><i class="fa fa-bars"></i></a></div>

와 같이 메뉴 버튼 아이콘이 나오는 부분이 있더군요.

위의 fa fa-bars 부분이 문제의 아이콘을 호출하는 부분인데, 사파리에 적용해서 사용하고 있던 광고차단 플러그인 유니콘의 설정에서 제 블로그를 화이트리스트에 추가하니 당장 화면에 아이콘이 나타났습니다.

보통 사파리에서 광고차단 플러그인을 붙여서 구동하는 경우에, 1) 소셜 아이콘 감추기 2) 웹폰트 보지 않기 등의 옵션을 제공하게 되는데, 1)의 경우 트위터나 페이스북 아이콘을 웹폰트 방식으로 보여주는 사이트들에서 이를 감추는 겁니다. 플러그인 제작자가 어떤 리스트를 받아서 일괄 적용하는 듯 싶습니다. 제 경우 소셜 아이콘 감추기와 웹폰트 차단을 둘 다 사용하고 있었는데, 햄버거 아이콘은 소셜 아이콘은 아니고 웹폰트에는 해당되어 차단되었나봐요. 해당 플러그인 옵션에서 1) 소셜 아이콘 차단은 켜고, 2) 웹폰트 차단은 설정한 경우 햄버거 아이콘이 나타나지 않았습니다. 반대의 경우엔 나타나구요.

사실 아이콘을 모두 그림파일로 처리하고 호스팅하면 부담스럽기 때문에 많은 사이트/테마에서 웹폰트 방식으로 간단한 아이콘을 표시하는데, Font-Awesome 의 경우에 화살표나, 블릿, 버튼 등 기능적인 요소를 웹폰트로 구현해놓고 편리하게 사용할 수 있는 환경을 갖추었죠. 하지만 광고 차단 플러그인 입장에서 이를 웹폰트를 강제한다고 생각해서 차단하게 되면 사용자 입장에선 웹 사이트 컨텐츠의 중요 영역을 보지 못하게 되는 것입니다.

그러나 칼을 들고 지우는 쪽은 폰트의 제작자 쪽이 아니라 차단 플러그인을 만드는 쪽이어서 곤란하게 되었네요.

해결방법 2 – 해당 아이콘을 직접 블로그에서 호스팅하기

화이트리스트에 추가하는 건, 나만 해결되는 거지 다른 사람은 여전히 안 보일 수 있다는 말이죠. 가령 똑같은 방식으로 메뉴 아이콘을 사용하고 있는 다른 사이트에 가면 다시 안 보이게 되어 있습니다.

현재 이 문제 관련한 논의는 깃헙에 이슈 열고 계속 얘기되는 중인데, 요약하면

  1. AdBlock 같은 PC 브라우저용 광고차단 확장도구/플러그인에서도 Font-Awesome 에서 제공하는 일부 아이콘을 가리는 문제가 있다. 특히 페이스북, 트위터 아이콘 같은 소셜 아이콘이 블록됨.
  2. 합법적으로 해당 아이콘을 사용하고자 하는 사람 입장에서 제3의 플러그인이 아이콘을 가리는 문제에 적잖은 사람들이 불편+불쾌해 하지만, 해당 광고차단 플러그인의 입장은 “니가 소셜아이콘 가리기 옵션을 끄고 쓰면 됨”에 가깝다.
  3. 광고차단 플러그인/확장도구 만드는 사람들의 선택에 따라 어떤 아이콘이 차단되는지가 결정되는 구조이다. 소셜 아이콘 자체를 광고차단 플러그인이 막아버리는 것에 대해 반대하면서 제작자에게 연락하는 사람들도 있는가본데 미래는 어두워보임..

근본적으로 해결하려면, 해당 아이콘을 .png 파일 같은 걸로 바꿔서 블로그 내에서 직접 호스팅하는 방법이 제일 먼저 생각나네요.

하지만 아래와 같은 방법을 먼저 시도하는 것을 권장합니다. 즉 이름만 바꿔치기인데요.

style.css 수정

스타일시트에서 영향받는 아이콘에 대한 클래스 네임을 수정합니다. 가령 저는 fa-bars가 지금 문제가 되고 있으니, new-fa-bars로 수정하기로.

그리고 아래와 같은 라인을 새로 넣어줍니다. 스타일시트에서 저의 경우 header 쪽에 넣어주시면 될 듯 합니다.

.new-fa-bars:before {
  content: "\f0c9";}

content에 들어갈 내용은 the original font-awsome.css raw file에서 참고하세요.

header.php 수정

그리고, 이제 header.php 에 있는 햄버거 아이콘이 출력되는 부분의 클래스도 변경해줍시다.

<div class="menubutton"><a href="#"><i class="fa new-fa-bars"></i></a></div>

그리고 짜잔…. 망했네요. 여전히 안 보이네요.

결론. 사파리 광고 차단 플러그인은 많은 사용자들이 즐겨 쓰고 있을텐데, Font-Awsome 처럼 폰트로 기능적인 아이콘을 표시하는 경우 특정 사용자에게 블로그의 중요 디자인이 잘 보이고 있는지 점검해야 한다.

(2016년 10월)

  • LEEJM

    ㅋㅋㅋㅋ짜잔! 부분에서 빵 터졌어요 ㅋㅋㅋ