티스토리 모바일 페이지 사진에 대한 비교 & 블로그 전체글 수정중

 티스토리 블로그를 이용하면서 정말 편리하다는 생각을 합니다. 예전에 직접 제로보드를 이용해 만들때 하고는 비교가 안될 정도입니다. 어릴때 html 공부를 좀 해서 제로보드로도 만들어 보았지만 디자인부터 여러가지가 쉽지가 않아서 티스토리 블로그로 작년에 넘어 왔습니다. 작년부터 150여개의 글을 작성했습니다. 그런데 요즘은 모바일 웹의 트래픽이 증가하고 있다는 것을 알고, 모바일 페이지에 더 신경을써야 겠다고 생각했습니다. 어플을 만들어도 모바일 페이지로 바로 연결 할 것이기 때문입니다. 모바일 페이지라고 하면 보통 모바일 기기로 보았을때 최적화 되어있는 페이지를 말합니다. 예전부터 국내 뿐 아니라 해외의 주요 포털들도 모바일에서 접속할때는 자동으로 모바일 페이지로 전환되어 보여줍니다.

*네이버-세로화면

*다음-세로화면

*티스토리-세로화면

*네이버-가로화면

*다음-가로화면

이런 환경이 제공되어 모바일로도 충분히 검색이나 기타 여러가지 것들을 할 수 있게 되었습니다. 그래서 언론사는 물론이고 티스토리 같은 블로그에서도 모바일 페이지를 지원하게 되었습니다. 그러나 아직은 고칠점이 보이는 것도 사실입니다.

 저는 오늘 제 블로그에 지금까지 포스팅한 모든 글들을 수정하고 있는 중입니다. 모바일 페이지로 최적화 되어 보여 진다고는 하나 그림, 사진을 올리는데 있어서는 약간의 주의사항이 필요합니다. 우선 제대로 올려진 그림을 볼까요? 제대로 올려졌단 말은 모바일 페이지에서 봐도 페이지의 벗어남 없이 가운데 정렬이 되어 기기에 맞게 해상도가 조정되어 나오느냐 하는 것입니다. 이것을 리사이징 이라고들 합니다.

*세로화면

*가로화면

 이렇게 최적화 되어 보이게 하려면 글 작성시에 세심한 주의가 필요합니다. 그림의 정렬을 잘못하거나 html을 잘못 수정하면 약간의 어긋남이 생기거나 페이지를 이탈해 버리는 현상이 나타납니다. 잘못된 사진을 보여드릴께요. 제 블로그도 수정전에는 이런 화면들이었습니다.

 잘 보시면 사진, 그림의 크기가 웹과 동일한 크기로 자동으로 리사이징이 되지 않은 것입니다. 여러가지 방법을 써 보던중 겨우겨우 방법을 찾았습니다. 다른 블로거들은 처음부터 쉽게 찾았을수 있지만 전 이번에 발견했습니다.ㅠㅠ 바로 "가운데정렬" 이었습니다. 그림, 사진은 가운데 정렬해주면 모바일 페이지에서 자동으로 크기를 줄여줍니다. 이걸 이제야 알았다니.ㅠㅠ 그러나 여기에서 한발 더 나아가서 그냥 가운데 정렬만 해 주는 것과 글 작성시 html 에서 center 명령어를 넣어주는 것과의 차이를 발견했습니다. 큰 차이는 아니지만 정가운데에서 그림을 보려면 html 에서 center 태그를 꼭 넣어줘야 합니다. 비교된 사진을 보겠습니다.

*세로화면

*가로화면

 두 그림을 보시면 첨부사진이 왼쪽으로 붙어 있는 것을 보실수 있습니다. 별로 큰 차이는 느끼지 못할 사항이긴 하지만 저는 왠지 신경이 쓰이더라구요. 그래서 제 블로그의 전 글을 가운데로 옮기는 작업을 진행중입니다.  

 가운데 보여 드렸듯이 이렇게 그림을 정 가운데로 정렬하려면 center 태그가 있어야 한다고 했습니다.간단하게 그림으로 보여 드리겠습니다.

 파란 글씨로 된 부분입니다. 첨부파일을 넣고 오른쪽 위의 html로 편집하기를 누르시면 첨부파일이 들어간 태그가 보입니다. 거기에 앞뒤로 <center> ~~~~~~ </center> 을 넣어주시면 그림이 정 가운데로 정렬되는 것입니다.

 휴~ 저는 이 문제를 해결한다고 정말 많은 검색을 하고 시간을 투자했습니다. 어떻게 보면 별것 아닌데도, 막상 원인을 찾으려고 하니 머리가 아플 정도네요. 오늘 블로그 전체글을 다 수정할 수 있을진 모르겠습니다만, 여러분들도 모바일에서 최적화된 티스토리 블로그를 만들어 보세요~

 아, 그리고 티스토리에서 곧 모바일 페이지에 스킨적용을 할수 있게 한다는 공지사항이 떳습니다. 더 잘 만들어진 모바일 페이지가 될 수 있겠네요. 읽어주셔서 감사합니다^^