모바일시대에 맞춘 블로그 최적화방법
스마트폰이 대세다! 모바일환경 무시하면 큰코다친다!
위와 같은 생각 안하는 사람 없을것입니다.
블로그 최 전방에 있는 프로블로거들이야.. 매일 보고 느끼는 것이 바로..
스마트폰의 위력일테니...
저도 그러한 사실에 맞춰 스마폰, 모바일에 최적화된 블로그를 운영하고..
그에 맞는 글을 써야겠다는 마음을 먹지만.. 본격적인 최적화를 해보진 않았습니다.
(티스토리의 경우 모바일스킨 수정이 되지 않아서 모바일에드센스도 조건문을 이용하여
수동으로 적용 사용하고 있습니다.)
하지만 스마트폰으로 내 글을 볼때마다 느끼는 점은 ..
가독성이 매우 떨어진다는 점입니다.
분명 웹에서 보기 좋게 작성한 글임에도 모바일에서는 보기가 좋지 않습니다.
예시를 보도록 하겠습니다.
아래내용은 웹(PC)에서 봤을때의 모습입니다.
한글자가 아래로 내려가긴 했지만.. 대체적으로 읽는데 불편함없이 보기 좋습니다.
PC에 본 블로그 글
같은 글을 스마트폰으로 봤을때
같은 글을 스마트폰으로 봤을때의 모습입니다.
스마트폰에서 봤을때의 모습
스마트폰에서 봤을때
각 문단의 구분이 없없고 모든 줄이 붙어 있어서 가독성이 매우 떨어졌습니다.
그냥 블로그 초보가 별 생각없이 마구 타이핑만 친것처럼 보입니다. ^^
더군다나 링크에도 색이 들어가 있지 않고 언더라인도 없어서..
연결링크가 있는지 없는지 조차 알 수가 없습니다.
다행이 링크라는 말을 넣어서 그곳을 누르면 어딘가로 이동할 수 있다는 것을
예시해줘서 다행이네요!
스마트폰 맞는 블로그 최적화
그래서 스마트폰에서 보기 좋게 하기 위하여 글을 다시 수정해봤습니다.
수정한 후에 스마트폰으로 봤을때 다음과 같이나옵니다.
[수정후 스마폰에서 봤을때]
좋아요!
가독성도 좋고 보기도 좋아졌습니다.
링크가 걸린 글자도 파랑색으로 표시가 되어 이 글에 안내링크가 어디 있는지
쉽게 찾을 수가 있습니다.
스마트폰에 맞는 블로그최적화
스마트폰에 최적화를 하려다 보니..
줄간격을 한줄씩 더 띄어야 하는 문제가 발생했습니다.
이는 글을 쓰는 사람과 블로그 환경에 따라서 달라지겠지만..
저의 경우에는 엔터를 치면 한줄이 떨어지도록 환경설정을 하고 글을 씁니다.
그래서 문단과 문단사이에서 엔터를 쳐서 줄간격을 띄우는데요..
바로 이 부분에서 모바일과 웹에서 봤을때 글의 모양이 달라보이는것입니다.
스마트폰(모바일)에서는 문단의 구분을 의미하는 <p> 태그를 무시하나봅니다.
<P>태그를 무시하기 때문에 스마트폰에서 봤을때 문단과 문단사이의 줄간격이 차이가 없이..
모두 동일한 줄간격으로 보이는 것입니다.
그래서 스마트폰에서 볼 수 있도록 한줄의 공백을 더 넣으면 비로소 잘 보입니다.
[수정전] [수정후]
모바일에서의 가독성을 높이기 위해서 문단과 문단사이 줄간격을 한줄씩 더 띄었더니..
위와 같이 웹에서 봤을떄는 줄간격이 2줄씩 떨어져 보입니다.
한쪽을 맞추면 다른 한쪽이 보기 싫고....
스마트폰에 글 최적화를 하니 웹에서 보는데 별로 안 좋네요!
스마트폰에 맞는 블로그글 작성, 글 최적화
스마트폰에 맞춰서 글을 작성하는 방법 정리해보도록 하겠습니다.
첫번째 방법. 문단과 문단사이는 엔터를 두번쳐서 2줄의 공백을 둔다.
두번째 방법. 글을 쓸때 문단을 바꿀때(줄을 바꿀때) 엔터가 아닌 shift + Enter를 누르면서 글을 쓴다.
세번째 방법. 티스토리의 경우 편집기에서 "문단 간격 없음"을 체크하고 사용하는 방법이 있습니다.
그러면 네이버와 같은 환경이 됩니다.
첫번째 방법은 웹에서(PC에서) 봤을때 문단과 문단의 줄간격이 너무 많이 떨어진 느낌이 들 수가 있는 문제가있고..
두번째 방법은 웹, 스마트폰 모두 보기좋고 만족스러운데.. 편집상의 불편함이 있을 수 있습니다.
예를 들어 소제목만 중앙정렬을 하려고 할때 모든 글들이 중앙정렬이 되어 버리는 문제가 생기게 됩니다.
현재는 세번째 방법이 정답이 될 수 있겠습니다.
한가지 바란다면 제대로 된 최적화가 되게 하기 위해서는 스마트폰과 웹의 표준화가 먼저 되어야
블로거들이 좀더 편리하게 글을 쓸 수 있을것 같습니다.
'블로그팁' 카테고리의 다른 글
반응형 티스토리스킨 배포용 스파이더웹(Spider's Web) 설치방법 (8) | 2014.12.31 |
---|---|
[윈도우7에서 블로그운영] 사진등록시 이전폴더 초기화되는 문제, 직전폴더 기억 (37) | 2013.04.03 |
네이버검색 외부블로그 글수집방법 업그레이드, 티스토리갱신적용 (37) | 2012.12.27 |
티스토리 댓글란 초기입력상태 한글로하기, 한글자동입력,한글입력모드로 자동변환 (31) | 2012.12.21 |
네이버 검색노출 제한, 검색제한 기준 강화? (11) | 2012.11.29 |