gongbone.com, 이제 모바일 페이지에서도 다 보실 수 있습니다.

데스크탑 사이트를 리프레시하다 보니, 모바일서도 제대로 보이나 싶어 들여다봤더니, 카테고리(즉 메인메뉴) 메뉴 링크들이 다 끊겨 있었다.

사실 늙다리라 폰을 안 쓰는 관계로 모바일 페이지는 처음 사이트 열 때 몇 번 들어가보곤 제대로 본 일이 없는데…

이번에 워드프레스에서 사용 중인 메인 템플릿을 바꾸면서 데스크탑 사이트를 개편한 후, 워낙 많이 바꾼 만큼 모바일 페이지는 제대로 되는지 확인하다가 지금에야 발견한 사실이다. 즉 개편했다지만 핵심 메뉴 페이지는 이전에 사용하던 것과 대동소이하니, 이것들이 이미 끊겨 있었던 것이다.

통계도 안 들여다보다가 최근에 관심을 갖고 보기 시작했는데, 두세 배 높아진 바운스레이트(즉 들어오자마자 나가는 사람)가 이상하다 싶었는데…

모바일 페이지의 경우, 첫 화면에서 다른 카테고리로 넘어가면 다 끊겨 있었으니, 뭐 바운스 레이트가 하늘을 치솟는 수준임은 당연한 이치라 하겠다.

원래 필자가 사용하는 웹페이지 구성 툴은 엘리멘토인데, 이 툴로 페이지를 구성하면 자동으로 모바일에 최적화되는 줄 알았는데…

일일이 설명하기는 어렵고 웹 페이지를 맞춤구성하다 보니  모바일에서는 볼 수 없는 지경에 이른 것이다.

가령 좌측에 사진을 넣고 오른쪽으로 길게 포스트물의 발췌문을 넣으면 모바일에선 달랑 사진만 보이게 되니 페이지 자체가 망가져 버리는 것이다.

한 반나절은 사투한 끝에 방법을 찾았다.

참, 미국애들이 무시무시한 게 이런 툴을 만든다는 게 정말이지 놀랍다.

첨엔 모바일 페이지를 별도로 구성해야 하는 것 같았는데, 이런 상황에 들어가면, 젠장, 카테고리 별로 5페이지 정도는 새로 만들어야 하는데, 이렇게 페이지를 구성하면 일일이 url 따서 연결해야 하는 것은 물론이고, 그것을 설령 구성한다고 해도 모바일 메뉴와 데스크탑 메뉴 2개를 만들어야 하는 것인지…

이런 문제 해결은 꼬리에 꼬리를 물고 늘어진다.

즉 하나를 해결하면 초짜인 필자로서는 다른 문제가 생긴다.

즉, 이걸 자칫 잘못 건드렸다가는 기존에 애써 만든 것도 복구할 수 없는 상황이 일어날 수 있다.

즉 다음에 어떤 난관이 기다리는지 알 수 없는 것이다.

비체계적으로 그때그때 땜빵을 해서 만들어놓으면, 본업이 이것이 아니다보니 몇 달 지난 후에 다시 보면 과거 페이지를 어떻게 제대로 구성했는지 깜깜할 정도여서 일일이 다 다시 봐야 한다.

아무튼…

이런 상황에서는 요즘 모바일을 이용한 방문이 50%(이건 네이버도 마찬가지다)에 이르니, 그 방문객들은 욕을 퍼부으며 나가곤 다시 안 돌아올 것이다.

아무튼 이러한 난국에서, 섣불리 마구 고쳐댔다가는 수습하는 데 며칠 걸릴 수도 있어, 그냥 테스트 삼아서 핀셋 검색을 하며, 해결책을 찾게 되었다.

일단 4개 컬럼으로 구성한 기존의 구성 페이지를 찾아서, 그것을 그대로 두고 아래에 똑같은 템플릿을 추가하였다. 그려면 역시 4칼럼 디자인이 뜨는데 이걸 1칼럼으로 바꾸는 것은 필자가 아는 것이니 구성하였다. 그러니까 똑같은 카테고리의 두 가지 버전이 한 페이지에 표시되는 것이었다. 마침 검색해보니 이 템플릿에는 모바일, 태블릿, 데스크탑에 표시, 블록 옵션이 있었다. 빙고! 그래서 4칼럼 템플릿 옵션에서는 데스크탑과 태블리에서는 표시하고, 폰에서는 블록하는 옵션을 선택했다. 즉 4칼럼으로 구성된 페이지는 데탑, 태블릿에선 표시되고, 폰에선 표시되지 않는 것이다. 그리고 모바일용으로 구성한 템플릿에서는 폰에 표시, 데탑·템플릿은 불표시로 옵션을 선택했다. (옵션에는 구성 요소가 한 100개는 족히 되니까 사실 이걸 찾는 것조차 힘든 것이다)

아무튼 반나절의 사투 끝에 모바일 공번 닷컴도 이제 아무런 무리없이 보실 수 있다. (파인 터치만 남았다 하겠는데…

망가지는 부분이 없으니, 전 카테고리 모두 이제 폰에서 확인하실 수 있다.

네이버 블로그의 독자와 공번닷컴의 독자가 겹치는지는 모르겠으나, 혹시 공번닷컴 모바일 사이트가 망가져 안 보던 분들은 이제 접속하시면 지장 없이 보실 수 있을 것이다.

혹시나 비슷한 문제를 겪고 계신 분이 있다면, 이 버튼이다. 물론 엘리멘토 프로 버전이 있어야 한다.

엘리멘토는 사실 워드프레스 블로그를 운영하는 비코더에게는 필수적인 도구다.

엘리멘트와 자웅을 겨루는 한 회사가 있는데, 아무튼 엘리멘토가 워낙 훌륭해서, 프리버전을 몇 차례 활용해본 후, 사용 중이다.

엘리멘토는 사실 번역 캣툴과는 비교가 안 될 정도로 그 규모와 유틸리티가 방대하여,  머리에 쥐가 나기는 하나, 코더가 아니면 못 만들 웹페이지를 뚝딱 만들 수 있다. 이 제품은 얼마더라? 요즘 기억력이 정말 나쁘다. 대략 연간 200달러 하려나? 물론 캣툴은 한 번 사면 10년도 버티기는 하나, 이 제품이 하는 기능은 정말 엄청나다. 코드를 하나도 모르고도 웹페이지를 만들 수 있으니 말이다. 대단하다.

이거 가르쳐서 밥 먹고 사는 유튜버들도 꽤 많은데… 엘리멘토 자체 튜토리얼을 제작 하는 자체 직원이 너무 잘 설명한다.

아무튼 나를 감탄시키는 훌륭한 소프트웨어다.

덕분에 데스크탑 UI도 좋아졌다.

일단 만족스럽게 나와줬다.

템플릿을 잘 선택한 것 같다.

번역일기의 요 부분 서브 메뉴가 훌륭한 것 같다.

아마 네이버에서 보는 것보다 편리하실 것도 같다.

물론 단어로 검색해도 되나…

아, 그리고 이렇게 스크린샷 캡처하여, 펜슬로 사각형 그리고, 동영상 기기 간에 주고 받아서 올릴 때마다, 아이패드의 짜릿한 구동에 매료된다.

 

공번 닷컴 모바일 작동 인증 샷이다.

흠, 세로로 촬영하니 위는 짤린다. 아무튼 전 페이지 모두 잘 구동된다.

복잡한 동영상을 몇 번 만들더니 이게 짤방이구나 느낀다. 정말 쉽다. 걍, 간단한 동영상 스크린 캡처에서 구글 드라이브로 연결했다.

 

 

아, 그리고… 사실 이 정도 툴이라면 디자이너가 아니고 필자처럼 무식하게 배우는 사람은 없을 것이나… 혹시 필자 같은 1인이 또 있을까 하여, 내용은 다 절삭하고 데스크탑·모바일 설정 버튼 찾는 법만 알린다. 위에 개념을 설명하였으니, 엘리멘토를 쓰시는 분이라면 찾을 수 있을 것이다.

 

 

0 공감

Leave a Comment