모바일 페이지 만들기 관련 팁

텍큐닷컴 블로그의 모바일 페이지 만들기

by BLUEnLIVE | 2010/10/06 02:47

텍스트큐브닷컴은 모바일 페이지를 지원하라! by BLUEnLIVE | 2009/12/12 10:00 티스토리와 텍큐닷컴은 근본도 비슷하고, 기능도 여러모로...

Google Mobilizer를 이용하면 간단하게 모바일 페이지를 만들 수 있다.

하지만, 이 기능을 사용해보면 원하지 않는 화면이 나오는 경우가 종종 있다.
이 기능은 사람이 판단하는 것이 아니기 때문이다.

본 블로그를 Mobilizer에서 띄우면 아래와 같이 나오는데, 대략 3가지 문제점을 볼 수 있다.

1. 좌측상단 로고 출력
2. 첫화면이 본문이 아닌 우측 사이드 바
3. 본문으로 이동시 하단 페이지 이동 누락 및 불필요 이미지 출력

아이폰에서 이런 그림을 보고 싶지는 않다. OTL

이런 현상이 발생하는 원인을 정확히는 알 수 없지만, 동작 메커니즘을 추측하면 아래와 같다.

1. 블로그를 크게 아래와 같은 3부분(1-3)으로 구분
2. 좌측 상단 배너(1)는 단순 이미지로 판단
3. 본문은 좌우(2,3)로 구분되어 있으며, 무조건 오른쪽 div(3)를 본문으로 간주
4. 하단 댓글창의 BBCode 관련 이미지(4)는 단순 이미지로 간주
5. 하단 댓글창을 처리하면서 (실수로) 페이지 이동 누락

이 문제를 해결하려면 모바일 환경에서 보고 싶지 않은 부분을 숨김으로 지정한 뒤에 javascript를 이용해서 다시 보이도록 하면 된다. Google Mobilizer에서 javascript를 해석하지 않는다는 점을 활용하는 것이다.

즉, 위의 구성에서 1,3,4를 보이지 않게 설정한 뒤 바로 다음에서 보이도록 변경하면 원하는 화면을 볼 수 있다.

예컨데, 상단 배너의 경우 원래의 코드는 아래와 같다.

<img src='http://fs.textcube.com/blog/0/8395/skin/1/images/ROH-Banner.gif' alt='노무현 대통령 배너' border='0' usemap='#rohforever' id='textcubeSticker' />

이 부분을 아래와 같이 수정한다.
이미지의 위아래를 <div>로 묶고, 아래와 같이 id와 style을 부여한 뒤 바로 아래에 다음과 같은 코드를 추가하는 것이다.

<div id="rohbanner" style="display:none;">
  <img src='http://fs.textcube.com/blog/0/8395/skin/1/images/ROH-Banner.gif' alt='노무현 대통령 배너' border='0' usemap='#rohforever' id='textcubeSticker' />
</div>
<script type="text/javascript">
//<![CDATA[
var emo = document.getElementById("rohbanner");
emo.style.display = 'block';
//]]>
</script>

이런 식으로 만들어진 본 블로그의 모바일 페이지는 아래와 같다.

물론, 블로그 하단의 페이지 이동도 정상적으로 보임

덧. 이런 식으로 본문 내에 javascript 코드를 추가하는 것은 권장되는 방식은 아니다.