티스토리 모바일 웹 스킨 적용해 보고 나니

티스토리에 모바일 페이지에 대한 스킨을 어제부터 제공 했습니다. 종류는 아직 많지 않지만 그래도 밋밋하게 모두 똑같이 보이던 모바일 페이지를 pc에서 만큼은 아니지만 조금 다르게 보여줄수 있더군요. 글 목록 유형과 타이틀을 바꿔서 개인 블로그의 취향대로 일단 바꿀수가 있습니다. 모바일 페이지에서는 타이틀이 제일 큰 변화를 줄수있는 부분이더군요.

모바일 페이지에 사용할 타이틀을 일단 하나 간단하게 만들었습니다. 현재 대부분 스마트폰의 해상도가 안드로이드의 경우 (480 * 800)의 화면 해상도 그리고 아이폰4나 터치의 경우는 (640 * 960)의 해상도를 지원 합니다.
타이틀 페이지는 가장 작은 규격인 안드로이드폰의 480에 맞춰 타이틀 페이지를 포토샵에서 만들었습니다.

모바일 페이지에 사용하기 위한 타이틀 페이지 text는 사용안함에 체크하고 이렇게 블로그 타이틀은 480 * 80으로 만들었네요.
타이틀을 제외한 나머지는 사용자가 커스터 마이징할 부분이 없기 때문에 타이틀만 제작하고 티스토리로 업로드 해서 글 목록 유형과 색을 조정하며 어떤게 눈에 제일 보기 편한지를 살펴 봤네요.
현재 모바일 페이지의 해상도가 가로는 480이상을 권장하고 타이틀이 차지하는 세로는 180이 최대 입니다.
타이틀이 화면을 너무 차지하는건 좋지 않을거 같아서 접속햇을때 글목록이 화면에서 3개이상 보이도록 하기 위해서 타이틀 페이지를 만들때 높이는 80에 맞췄습니다.

목록은 위의 2가지가 제일 무난하게 보이는거 같아서 현재는 오른쪽으로 선택을 했습니다.

왼쪽은 사진 위주로 갤러리를 이용하시는 분들에게 적당한듯 하고 오른쪽은 목록형이 너무 심플하게 보이더군요.

아이폰 해상도에 맞춰 다시 만들어본 타이틀 페이지 하나 짧은축 해상도인 640 입니다.
헌데 타이틀을 세로로 볼때는 문제가 없는데 가로로 돌려서 눕혀서 보니 아래와 같이 나오네요.

휴대폰을 가로로 돌리면 양쪽에 여백이 생깁니다. 해상도가 맞지 않아서 생기는 문제이긴 하나 이 부분은 살짝 아쉽군요.
가로모드의 긴축을 기준으로 타이틀을 만들면 세로로 회전시 이미지가 압축되어 보기에 좋지 않으니 참고 하세요.
이번 모바일 스킨의 사용하기 쉽게 되어있고 블로그 타이틀을 어떻게 만들어 주느냐에 따라 조금씩 달라 보이네요. 이전에 밋밋한 모바일 페이지보다 훨씬 깔끔하고 좋아 보입니다. 안드로이드의 경우는 사용하는 브라우저에 따라 블로그에 포스팅한 사진이 원본 크기대로 나와 세로로 봐도 모바일 페이지에서 해상도를 줄여주지 않아 타이틀 페이지가 축소되어 보이는것도 있네요.
아이폰의 경우 그런 현상은 없더군요. 안드로이드의 경우 웹 브라우저도 종류가 좀 다양하다 보니 안드로이드 보다 아이폰쪽에 좀 더 적용이 잘되어 있는듯한 느낌입니다.

티스토리 모바일 페이지는 본인 블로그 주소 뒤에 /m을 붙이면 됩니다.
제 블로그 모바일 주소는 http://raycat.net/m , http://manualfocus.tistory.com/m 이 됩니다.
스마트폰 사용하시면 한번 접속해서 보세요. 이전보다 훨씬 깔끔하게 볼수 있답니다.