RUKXER.net

제목을 뭘로 할까 고민이 좀 됐는데, 티스토리 모바일 페이지가 특정 상품을 위한 게 아닌 모바일을 위한 범용 기능이기 때문에 위와 같이 해 봤습니다 :-)

앞서서 테스트를 진행했던 포스팅들을 참고로 삼아 모바일 페이지에 최적화시킨 포스팅을 작성하는 방법에 대해 나름대로 정리를 해봤습니다.





1. 한글폰트, 영문폰트 일부, 굵게, 기울임, 리스트, 각주, 인용구는 사용하지 않는다.







위 기능들은 모바일 페이지에서 적용이 되지 않는 기능들입니다. 때문에 이 기능들을 사용한 부분은 모바일 페이지에서 의미가 없어집니다.
그러므로 모바일 페이지를 위해서는 이 기능들을 사용하지 않는 편이 좋습니다.

비슷한 의미에서 각주 기능이 애매한데, [footnote] 라는 치환자?가 그대로 노출되어 본문에 섞여 버리므로 차라리 괄호 처리를 하거나 회색으로 연하게 표시하는 편이 시각적으로는 좋을 것 같습니다.

영문폰트도 Courier New, Georgia, Times New Roman 만 적용되고 나머지는 무시됩니다.

물론, 폰트는 폰트 파일 추가로 환경이 달라질 수 있으나 일단은 제 아이팟 터치 기본 상태에서의 테스트 결과로는 이렇게 됩니다 :-) 최소한 아이팟 터치 유저가 폰트 해킹을 하지 않는다면 저와 같은 폰트 구성을 갖고 있다는 말이 되겠죠..음.



2. 텍스트 강조를 할 때 파란색과 보라색은 되도록 사용하지 않는다.


이유는 모바일 페이지의 링크 색으로 이 두개의 색이 사용되기 때문입니다. CSS 스타일을 변경할 수 없는 모바일 스킨 특성 상, 이 두색을 본문에 사용하는 것은 혼란을 피하기 위해 사용하지 않는 편이 좋습니다.

대신 사용하기에 좋은 색은 빨간색, 노랑색, 회색, 주황색, 초록색이 있습니다. 모바일 페이지가 아닌 본래의 PC용 화면 스킨에 맞춰서 위화감 없는 색으로 쓰시면 될 것 같습니다. 제 경우엔 바탕이 흰색이라 노랑색과 회색은 강조 표시로 쓰기엔 좀 그러네요.

아니면 아예 글자 배경색을 입히는 것도 좋을 듯 합니다.



3. 태그를 본문에 포스팅할 때, 삼각 각괄호는 특수문자를 활용한다.
어떤 괄호냐면,〈 〉를 말씀드린 것입니다. 지금 모바일 페이지로 보시면 주황색으로 표시한 삼각 각괄호가 보이실텐데요, 이건 키보드에서 친 게 아니라 특수문자입니다.

그냥 태그를 바로 입력하면 모바일 페이지에서는 완전히 무시되어 버려서 아예 공백으로 나타나게 됩니다. 그래서 태그를 표시할 일이 있을 땐 특수문자를 활용하는 게 좋습니다.







1. 가로로 너무 긴 이미지는 자제한다.


PC 화면에서는 가로폭이 400px 이상인 스킨이 대부분이고, 라이트박스라는 좋은 플러그인도 있기 때문에 사실상 가로폭 제한이 거의 없는 편입니다.

하지만 모바일 페이지에서는 가로폭 400px을 넘어가는 모든 이미지는 강제로 리사이즈 되어 보여지게 됩니다.
이 과정에서 화질 열화도 발생하는데요, 위 그림에서 화살표로 표시한 가로등 기둥 부분을 유심히 보시기 바랍니다. 본래 400px인 사진보다 800px에서 강제로 400px 크기로 줄어든 이미지의 가로등 기둥 부분이 더 거칠게 표현되고 있습니다.
또한, 건물 외벽의 암부에 해당하는 부분에서도 좀 더 어둡게 나타나는 등의 문제가 발생하고 있습니다.

그렇다고 모든 이미지를 400px에 맞춰 올리라고 하면, 그건 PC에서 봤을 때 너무 작은 사이즈이지요... ㅡ,.ㅡ;;

그러므로 가로세로 비율이 극단적으로 가로가 긴 파노라마 식의 그림 같은 경우만 자제하면 될 것 같습니다.




2. 동영상은 유튜브, 다음TV팟을 이용하며 링크를 꼭 붙여 넣는다.


이건 순전히 아이폰/아이팟 터치의 한계 때문에 필요한 작업인데요, 좀 불편한 일이긴 합니다;; 귀찮기도 하고.....
일단은 위 그림처럼 URL을 그대로 노출한 형태가 아니어도 괜찮으니, 해당 동영상이 있는 웹 페이지를 링크로 거시면 됩니다.

테스트할 때 보니, 이 링크 위치를 두는 곳도 동영상 아래보다 위쪽에 두는 게 좋겠더라구요. 영상이 있는 쪽이 빈 공간으로 붕 뜨게 되어서 그렇습니다.



3. MP3 등 플래시를 이용한 포스팅은 자제한다.
이것도 아이폰/아이팟 터치가 플래시를 지원하지 않기 때문에 발생하는 불편함입니다. 티스토리 뮤직플레이어 같은 건 아예 공백으로 나타나니, 중요한 음악 파일이 아닌 한 아예 첨부하지 않는 게 좋을 것 같습니다.

뭐, 플래시 게임 같은 것도 마찬가지로 공백으로 나타나겠죠;; 이런 부분을 주의하셔야 할 것 같습니다.








1. 검색을 유도하지 말아야 한다.
왜냐면, 티스토리의 모바일 페이지에서는 블로그 내 검색이 불가능합니다! 검색 막대가 맨 아래 쪽에 있긴 한데, 티스토리 전체를 검색하는 기능입니다 ㅡ.ㅡ;;; 쌩뚱맞죠.



2. 광고는 어쩔 수 없다.
광고는..........현 상태에서는 어쩔 도리가 없습니다. 초강수를 둬서 포스팅 본문 중에 광고 코드를 심는다 하더라도 태그 자체가 공백으로 붕 떠버리는 특성 탓에 정상적으로 출력되지 않습니다.
광고는......묵념 ㅡ.ㅡ;







일단 이 정도로 가이드 정리를 마무리하겠습니다.
추후 변경점이 있거나 추가되는 부분이 있으면 수정, 보완하도록 하겠습니다 :-)

티스토리가 모바일 페이지를 쾌적하게 변경해주는 그 날까지, 유저들이여! 일어나라~~~!!!!
........읭?
ㄷㄷㄷㄷㄷㄷㄷㄷ