티스토리 모바일 페이지 리뷰 완벽판 좋은점 아쉬운점

티스토리 모바일 페이지란?

티스토리는 테터툴즈를 기반으로 한 블로그 서비스 입니다. 무제한의 용량과 무제한의 트래픽, 그리고 XHTML,CSS 를 모두 수정 할 수 있도록 개방한것이 티스토리만의 장점입니다. 또한 티스토리는 컴퓨터 웹브라우저로 접속은 물론 스마트폰으로 접속시 모바일 페이지를 지원하여 1천만 스마트폰 시대에 발맞춰서 빠른 서비스를 지원중입니다.

모바일 페이지는 모바일기기에서 접속 시 모바일기기의 화면해상도에 맞도록 미리 제작된 페이지를 말합니다.스마트폰으로 접속하거나 태블랫PC 등으로 접속 시 모바일 페이지로 뜨도록 해서 상대적으로 성능이 낮은 모바일기기에서도 좀 더 빠른 속도로 블로깅을 즐길 수 있고 화면해상도에 맞게 뜨도록 해서 글자를 읽기 편하게 해줍니다.

왼쪽은 스마트폰에서 풀브라우징으로 접속을 한것이고 오른쪽은 티스토리 모바일 페이지를 접속한 모습입니다. 티스토리는 기본적으로 모바일페이지로 접속 시 모바일 기기라면 도메인 끝에 /m 이 붙어서 모바일 페이지로 접속 되게 됩니다. 풀브라우징은 블로그에 있는 모든 광고나 이미지 등이 원래의 크기대로 뜨게 됩니다. 물론 모바일기기에서의 화면 해상도에 제약이 있으므로 그만큼 축소되어서 뜨게 됩니다. 확대를 하고 축소를 해서 사이트나 블로그를 볼 수 있지만, 상대적으로 속도가 느리고 무거우며 페이징을 넘겨서 보기에도 불편한점이 있습니다. 이에 반해서 모바일 페이지는 모바일 기기에 맞게 제작된 페이지 이므로 로딩속도가 빠르며 페이징이 편하며 글을 읽기가 편합니다. 실제로 모바일 페이지는 상당히 편해서 블로그를 최초에 선택할 때 선택 기준으로 모바일페이지가 있는지 없는지를 따지는 유저가 있을 정도 입니다.
 

티스토리 모바일 페이지 장점

모바일 기기에 맞는 빠른 블로깅 가능

동일한 페이지를 스마트폰을 이용해서 한번은 모바일 페이지로 한번은 풀브라이징으로 접속한 뒤 패킷양을 조사한 내용입니다. 좌측은 모바일 페이지로 접속한 스샷이며, 우측은 풀브라우징으로 접속을 한 스샷입니다. 오차를 줄이기 위해서 먼저 모바일 페이지로 접속 후 패킷양을 조사 후 다시 정보를 초기화 후 페이지 갱신 없이 풀브라우징으로 접속해서 검사를 했습니다.

모바일 페이지로 접속 시 119KB , 같은 페이지를 풀브라우징으로 접속시 1.3MB (1331.2KB) 의 사용량을 보이고 있습니다. 약 11배정도 차이가 납니다. 즉 같은페이지에 접속해서 글만 단순히 본다면 모바일 페이지가 훨씬 이득이 많다는것이죠. 


컴퓨터에서도 빠른 블로깅을 가능하게 하는 모바일 페이지

컴퓨터를 사용중에 즐겨찾기를 해둔 블로그에 접속하거나 또는 자신의 블로그에 접속해서 최근에 올라온 글이나 댓글등을 확인해야할 때가 있습니다. 이때도 모바일 페이지 (자신의 도메인명 끝에 /m) 로 접속해서 사용이 가능합니다. 꼭 모바일 기기에서만 모바일 페이지를 접속할 수 있는건 아니라는 것이죠.

컴퓨터에서 티스토리 모바일페이지로 접속시 몇가지 장점 아닌 장점이 생깁니다. 광고나 기타 꾸며둔 무거운 스킨이 뜨지 않기에 속도가 빠릅니다. 모바일 페이지에 맞춰둔 가벼운 페이지 무게 덕분이죠.




스킨 에러로 부터 벗어날 수 있는 모바일 페이지

스킨 에러에서 벗어날 수 있다는 장점이 생깁니다. 실제로 겪었던 문제이지만 티스토리는 HTML/CSS 를 마음껏 꾸밀 수 있는 장점도 있는 반면 XHTML 오류를 떠 맡을 수 있다는 점도 생깁니다. 비밀댓글 부분에 오류가 생겨서 비밀댓글을 썻지만 비밀댓글이 안되고 공개가 되어버리는 경우가 생길 수 도 있죠. 저는 실제로 여러번 겪어 봤습니다. 그래서 가끔 정말 중요한 비밀댓글을 달아야할 때는 일부러 해당 블로그의 모바일 페이지로 접속 후 비밀 댓글을 달기도 합니다. 이럴 경우 꾸며둔 스킨과 모바일 페이지는 분리가 되므로 비밀댓글이 잘못 노출되는 일을 막을 수 있습니다. 당연히 그전에 스킨을 웹표준에 맞춰서 잘 꾸며야겠죠.

티스토리 모바일 페이지 꾸며보자

티스토리 관리자 페이지에서 스킨 > 모바일웹 스킨 으로 접속하면 티스토리 모바일 페이지를 꾸밀 수 있습니다.

모바일웹 스킨 부분은 크게 스킨 탬플릿 , 스킨 미리보기 , 설정 부분으로 나뉘어져 있습니다. 처음 접속해서 모바일 스킨 탬플릿이 너무 적은것 아니냐고 하시는 분도 있을듯하지만, 모바일 스킨이란게 틀이 나눠져 있고 상단에 이미지가 들어가는 부분 아래에 메뉴 그 아래에 본문이 나오는 부분으로 되어있기에 크게만 몇몇 부분의 예시만 올려져 있는거라고 생각하면 됩니다. 나머지는 이미지를 넣고 싶을 걸 넣고 색을 넣고 싶을걸 넣어서 꾸미면 되는것이죠. 미리보기 페이지 등에서 미리 메뉴등을 눌러보면서 어떻게 나타날지 미리 확인해 볼 수 있습니다.

모바일웹 스킨 꾸미는 부분에 대해서 설명 동영상을 만들어봤습니다. 초보자도 사용이 가능할 정도로 메뉴구성은 쉽게 되어있습니다. 한가지 조금 아쉬운건 메뉴바와 강조색 부분의 의미가 조금 햇갈릴 수 있어서 선으로 해당 부분을 나타내거나 또는 미리 적용된 이미지를 해당 셋팅을 눌렀을 때 바로 보이도록 해서 인지를 시켜주면 좋겠다는 생각이 들었습니다. 하지만 이런 사소한 문제를 접어두더라도 미리보기에서 미리 셋팅 내용을 볼 수 있기에 어렵지 않게 모바일 페이지를 완성할 수 있습니다.

씨디맨이 권하는 모바일 페이지 스킨

모바일 페이지 스킨을 꾸미는것에 있어서 특별히 정답은 없습니다. 다만 모바일 페이지는 모바일 기기에서 접속할 때 유리하도록 미리 셋팅된 페이지인 만큼 그 특성을 잘 살려주는게 좋다고 생각합니다. 모바일 페이지의 CSS 등도 임의로 사용자가 수정할 수 있도록 하면 좋겠지만 모바일 기기마다 특성을 타는 부분도 있고 하기에 임의로 문제의 소지가 있는 셋팅 부분을 티스토리에서 공개는 안할거라고 생각합니다. 공개를 어느정도 메뉴로 구성해서 하긴 해야할거라고 생각은 하고 그에 동의하지만 임의로 어느정도 막아둬야한다는것에도 이유는 있다고 생각합니다.

티스토리 모바일 페이지는 모바일 기기에 띄워야하기에 페이지가 가벼워야 합니다. 그래서 제가 몇가지 권장하는 사항을 생각해 봤습니다.

1. 모바일 페이지 상단을 가능하면 텍스트로

모바일 사용자가 가능하면 데이터 사용량을 줄이고 보다 빠르게 뜨게 하기 위해서 가능하면 상단을 이미지를 쓰지 않고 기본 텍스트로 출력되도록 하는게 좋다고 생각합니다. 어디까지나 권장사항입니다.


2. 자신의 블로그의 주로 사용된 색과 일치하도록

모바일페이지의 상단의 색과 자신의 블로그에서 많이 사용된 색과 비슷하거나 또는 일치를 시키는게 좋다고 생각합니다. 자신의 블로그의 주로 사용된 색은 검은색인데 모바일 블로그는 푸른색이라면 일체감이 조금 덜 할 겁니다. 색을 비슷하게 일치시켜두면 해당 블로그로 자주 접속했던 사용자의 머리속에 그려지는 이미지와 비슷하기에 익숙하게 기억을 해낼겁니다.

3. 자신의 블로그의 주제와 맞도록 꾸미기

자신의 블로그가 사진을 주로 올리는 블로그라면 이미지 썸네일이 먼저 보이는 형태의 본문 구성을 하면 좋을겁니다. 리뷰나 정보를 알려주는 글을 주로 적는다면 썸네일 보다는 리스트나 썸네일 + 리스트 형태의 목록 형태가 유리합니다. 관련글을 쉽게 찾아서 읽어 볼 수 있기 때문이죠. 그날 그날 독특한 주제로 글을 적는 사용자라면 리스트보다는 본문이 바로 보이는 형태로 가는게 좋을듯합니다.


4. 필요한 메뉴만 넣도록

메뉴구성은 넣고 뺄 수 있기에 자신의 모바일 페이지에 필요한 메뉴만 나타나도록 하는게 좋을듯합니다. 메뉴를 선택 할 필요 없이 사진만 편안하게 감상하길 원한다면 메뉴를 모두 없애버리는것도 좋겠죠. 혹은 자신의 블로그에 자신을 소개하고 싶다면 프로필 메뉴를 적극 활용해 보는 것도 좋을 것 입니다.

완성도가 높아진 티스토리 모바일 페이지

아이폰3, 아이폰4, 갤럭시U, 아이팟터치, 갤럭시플레이어 등 구형 모바일 기기부터 최근에 나온 모바일 기기까지 모두 티스토리 모바일 페이지를 띄워봤습니다. 실제로 이 글을 적기 전에도 저는 이미 모바일 페이지를 참 많이 애용하던 유저입니다. 아이폰4에서만 모바일페이지로만 접속해서 사용하는 양이 한달에 2GB 를 보통 넘으니 많이 쓴다고 할 수 있죠.

아이팟터치 2.5세대는 조금 오래된 모바일 기기인데 티스토리 모바일 페이지가 잘 뜨더군요. 예전에는 모바일 페이지에서 유튜브 동영상이 있을 경우 공백으로 나타나지 않는 문제가 있었습니다. 그런데 최근에는 이 문제도 해결되어서 모바일 페이지에서 동영상도 보고 글도 보고 댓글도 달 수 있게 되었죠. 모바일 페이지에서 모든게 가능해졌다는 의미입니다. 스마트폰으로 일부러 풀브라우징으로 접속해서 이것저것 눌러볼 필요가 없어진것이죠. 당연 풀브라우징으로 접속해야하는 경우도 분명 있겠지만 모바일 페이지 만으로 큰 불편함이 없이 글을 읽고 사용할 수 있다는 점은 참 매력적입니다. 스마트폰 사용자가 1천만명이 넘었다는 이야기를 들었습니다. 지하철에서도 출퇴근을 하면서보면 참 많은 사람들이 모바일기기를 사용중입니다. 참 많은 분들이 웹서핑도하고 음악도 듣고 스마트한 세상을 즐기고 계시더군요. 근데 블로깅을 하는데 모바일 페이지가 없다면 참 답답할겁니다. 출퇴근하는 시간동안 페이지를 몇개 못보는 일이 생길테니까요. 모바일 페이지가 있는 덕분에 빠르게 접속해서 블로깅도 가능하고 이웃블로그의 글도 볼 수 있어서 좋습니다.

티스토리 모바일 페이지 건의 사항 및 버그리포팅

티스토리 모바일 페이지를 자주 사용하는 유저 입장에서 건의사항을 생각해보니 여러가지가 떠올랐습니다. 추가되면 분명 좋을듯한 몇가지를 추려봤습니다.

1. 추가 로딩 기능

저처럼 글을 길게 적는 블로그 경우에 모바일 페이지로 접속하더라도 상당히 글이 길어지고 로딩이 길어지는걸 느낄 수 있습니다. 제가 제 블로그에 접속하더라도 상당히 로딩이 긴걸 느끼는데 방문한 사람은 더 길게 느껴지겠죠. 그 시간만큼 데이터 사용량도 압박이 느껴질 겁니다. 모바일 페이지에 본문에도 페이징 기능을 넣어서 본문 내용이 길어질 경우 페이징처리되어서 나타나면 좋지 않을까 생각을 해봅니다. 또는 스크롤을 옆으로 넘기면 다음페이지로 넘어가는 기능으로 대체해서 구현할 수 도 있겠죠.

본문 페이징이 자동으로 될 경우에 장점이라면 본문이 상당히 길 경우에도 부담없이 페이지를 띄우고 첫페이지를 확인해보고 글을 더 읽을 사람만 다음 페이지로 넘겨서 볼 수 있을겁니다. 그만큼 시간도 아낄 수 있고 데이터 사용량도 줄일 수 있겠죠. 물론 3G 로 접속했을 때만 페이징 기능이 뜨고 WiFi 로 접속시에는 전체다가 뜨는것도 나쁘지 않아 보입니다.


2. 모바일웹 스킨 수정 폼의 직관성

모바일웹 스킨 수정 폼 부분입니다. 상단에는 템플릿이 있고 왼쪽에는 미리보기를 오른쪽에서는 설정을 할 수 있는데 해당도가 낮은 넷북등에서 확인시에 설정 부분이 가려서 안보이는 문제가 있더군요. 이부분은 해결이 되었으면 합니다. 추가로 설정 부분의 설정 메뉴의 직관성이 좀 떨어져 보입니다. 메뉴바, 강조색 부분이 특히 그런데요. 메뉴바와 강조색 등을 선택 시 색을 선택하는 부분이 나오고 색을 실제로 클릭을 해야지만 미리보기에서 내용이 수정되게 됩니다. 이것보다는 미리보기 메뉴에서 특정 부위에 포인터가 있어서 그부분을 눌러서 색을 조정하게끔 하거나 또는 설정부분을 선택 시 그림과 같이 선이 하나씩 그려져서 해당 부분을 나타낸다는걸 인지시켜주는게 필요해 보입니다.


3. 사소한 버그들

파이어폭스에서 상단 배경 타이틀에 용량이 100KB 가 넘는 이미지를 선택시 용량을 넘었다는 경고창이 뜨는데 이 경고창을 닫을 수 가 없더군요. 다른 경고창은 모두 닫히는데 이 경고창만 그랬습니다. 이부분은 분명 수정되어야한다고 생각합니다. 이외에도 사소한 버그들을 내용을 받아서 수정이 되어야겠죠.


4. 상단의 기능의 단촐함

티스토리 모바일 페이지 상단에는 다음 모바일 첫페이지 그리고 티스토리 내 검색 페이지로 가는 아이콘이 상단에 있습니다. 근데 윗 부분에 넓은 공간에 좀 더 기능을 넣을 수 있을거라고 생각합니다. 블로그 카운터가 나올 수 도 있을테고, 날씨 위젯등이 나올 수 도 있겠죠. 이 공간을 좀 더 활용할 수 있으면 좋겠습니다. 개인적으로는 블로그 카운터가 나오면 좋겠습니다.


5. 모바일 페이지 프로필 영역

모바일 페이지의 프로필 영역이 있으면 모바일 페이지를 띄워서 본 유저에게 좀 더 어필 할 수 있을것입니다. 다만 2차도메인을 사용하고 있는 유저 경우 해당 도메인이 나타나지 않고 .tistory.com 도메인이 나타납니다. 모바일 페이지로 접근시 2차도메인이 /m 도메인을 따라가서 .tistory.com/m 도메인으로 변경이 되는것 때문일듯하지만, 개인도메인을 가진 유저경우 개인도메인 정보가 뜨면 좋겠습니다.


6. 강제 모바일페이지 , 강제 일반페이지 접속

아이폰으로 모바일 페이지를 자주 보다보면 즐겨찾기를 하게되는 블로그가 분명 있습니다. 자신의 블로그로 접속할 때 도 마찬가지입니다. 티스토리 모바일 페이지 경우 기본적으로 바로 접속시 http://cdmanii.com 으로 접속하더라도 /m 이 자동으로 붙으면서 처음에는 모바일 페이지로 접근하게 됩니다. 이후에 다시 풀브라우징으로 접근 시 PC화면 이라는 아이콘을 본문 맨 하단으로 스크롤을 내려서 눌러야만 합니다. 바로 처음에 풀브라우징으로 접속을 하고 싶어도 모바일페이지 > 풀브라우징으로 접근을 해야해서 한단계를 더 거쳐야하죠. 중간에 스크롤을 내리는 과정까지 끼면 상당히 번거롭게 됩니다.

즐겨찾기에 추가시에는 주소 끝에 특별한 파라미터를 넣어서 특정값을 넣으면 바로 풀브라우징으로 또는 모바일페이지로 접근할 수 있으면 좋겠습니다. 예전에는 .tistory.com 으로 접근시에는 강제 접속이 되었지만 지금은 그게 다시 막힌듯 하네요.


7. 모바일 페이지의 웹표준

기기특성을 따져야하는 모바일페이지 특성상 모바일 페이지에 웹표준을 따지는건 좀 그럴 수 도 있지만 웹표준을 가능한 지켜야한다고 생각합니다. 비교가 되는 어떤 포털사이트의 모바일 페이지보다는 에러가 반정도로 티스토리가 적긴하지만, 좀 더 에러갯수를 줄여줬으면 하는 바램입니다.


8. 세로보기에서의 넓은 화면의 이용

모바일 페이지의 이미지를 넓게 보기 위해서 스마트폰등을 옆으로 뉘여서 볼 경우가 있는데 이때 이미지는 세로 이미지에 맞게 맞춰져 있기에 이미지가 작게 나옵니다. 이미지를 클릭시 커지거나 또는 가로 사이즈에 먼저 최적화를 한 뒤에 가로 세로 돌릴때 이벤트가 발생하게 하여서 이미지를 축소 또는 원래 사이즈로 나타나게 해서 좀 더 큰 화면으로의 모바일 페이지가 되면 좋겠습니다.


9. 플러그인 형태로 이미지 업로드 시 축소가 안되는 문제

모바일 페이지에서 지금 이 글에 접속한 화면입니다. 이미지를 2개 또는 3개를 한개로 묶어서 올릴 수 있는게 글쓰기 폼에 있습니다. 플러그인 형태로 이미지를 업로드 시 이미지가 모바일페이지에 맞게 축소가 안되는 문제가 있습니다. 그래서 이미지를 2개 또는 3개를 올렸을 때 첫번째 이미지도 10% 정도 짤려서 보이고 나머지 이미지는 볼 수 가 없는 문제가 있었습니다. 이미지를 플러그인 형태로 올리는 분이 많으니 이부분 해결되어야한다고 생각합니다.

티스토리 모바일 페이지 정리

티스토리 모바일 페이지는 제가 아침 출근시 굿모닝 GMP 를 켜면서 제 블로그 모바일 페이지와 다음뷰사이트등 접속하면서 항상 사용하는 페이지 입니다. 요즘은 제가 접속하는 대부분의 웹서비스가 모바일 페이지를 지원하면서 시간도 절약하면서 빨리 띄워서 볼 수 있게 되었죠. 데이터 사용량은 저는 무제한 요금제이기 때문에 큰걱정은 안하고 막 띄우고 사용하고 있지만, 모바일 페이지가 반드시 필요하고 편하다는것에는 찬성합니다. 풀브라우징 한번 띄울 때 모바일 페이지는 여러번 띄울 수 있을정도니까요.

모바일 페이지는 생각보다 많은 유저가 사용중입니다. 글을 단순히 보는 용도로도 사용하고 글을 입력도 하고 여러사람과 이야기를 나누기 위해서도 사용을 하죠. 실제로 지하철에서 상당히 많은 유저가 스마트폰을 사용하는걸 볼 수 있었습니다. 스마트폰의 증가로 일반 웹사이트의 광고수익이 줄어들거라는 이야기가 나왔을 정도니까요. 하지만 그정도 까지는 안가겠지만 분명 스마트폰쪽으로 많은 사용자가 사용중임에는 틀림없습니다. 티스토리는 티스토리 모바일 페이지의 설정 부분과 실제 사용자가 사용하는 패턴과 사용자의 불편한점 등을 잘 캐치해서 한번 모바일 페이지로 접속 한 유저가 오래 사용하다가 나갈 수 있도록 여러 시스템을 잘 꾸며주셨으면 하는 바램입니다.