모바일시대에 맞춘 블로그 최적화방법

 

스마트폰이 대세다! 모바일환경 무시하면 큰코다친다!

위와 같은 생각 안하는 사람 없을것입니다.
블로그 최 전방에 있는 프로블로거들이야.. 매일 보고 느끼는 것이 바로..
스마트폰의 위력일테니...

저도 그러한 사실에 맞춰 스마폰, 모바일에 최적화된 블로그를 운영하고..
그에 맞는 글을 써야겠다는 마음을 먹지만.. 본격적인 최적화를 해보진 않았습니다.

(티스토리의 경우 모바일스킨 수정이 되지 않아서 모바일에드센스도 조건문을 이용하여

수동으로 적용 사용하고 있습니다.)

하지만 스마트폰으로 내 글을 볼때마다 느끼는 점은 ..
가독성이 매우 떨어진다는 점입니다.

 



분명 웹에서 보기 좋게 작성한 글임에도 모바일에서는 보기가 좋지 않습니다.

예시를 보도록 하겠습니다.

아래내용은 웹(PC)에서 봤을때의 모습입니다.
한글자가 아래로 내려가긴 했지만.. 대체적으로 읽는데 불편함없이 보기 좋습니다.  

 

PC에 본 블로그 글

 

 

같은 글을 스마트폰으로 봤을때

 

같은 글을 스마트폰으로 봤을때의 모습입니다. 


 

스마트폰에서 봤을때의 모습스마트폰에서 봤을때의 모습

 

스마트폰에서 봤을때

각 문단의 구분이 없없고 모든 줄이 붙어 있어서 가독성이 매우 떨어졌습니다.
그냥 블로그 초보가 별 생각없이 마구 타이핑만 친것처럼 보입니다. ^^

더군다나 링크에도 색이 들어가 있지 않고 언더라인도 없어서..
연결링크가 있는지 없는지 조차 알 수가 없습니다.
다행이 링크라는 말을 넣어서 그곳을 누르면 어딘가로 이동할 수 있다는 것을
예시해줘서 다행이네요!


 

 

스마트폰 맞는 블로그 최적화

 

 

그래서 스마트폰에서 보기 좋게 하기 위하여 글을 다시 수정해봤습니다.
수정한 후에 스마트폰으로 봤을때 다음과 같이나옵니다.


 

[수정후 스마폰에서 봤을때][수정후 스마폰에서 봤을때]


좋아요!

 

가독성도 좋고 보기도 좋아졌습니다.
링크가 걸린 글자도 파랑색으로 표시가 되어 이 글에 안내링크가 어디 있는지
쉽게 찾을 수가 있습니다.

 

 

스마트폰에 맞는 블로그최적화




스마트폰에 최적화를 하려다 보니..
줄간격을 한줄씩 더 띄어야 하는 문제가 발생했습니다.
이는 글을 쓰는 사람과 블로그 환경에 따라서 달라지겠지만..
저의 경우에는 엔터를 치면 한줄이 떨어지도록 환경설정을 하고 글을 씁니다.

그래서 문단과 문단사이에서 엔터를 쳐서 줄간격을 띄우는데요..
바로 이 부분에서 모바일과 웹에서 봤을때 글의 모양이 달라보이는것입니다.
스마트폰(모바일)에서는 문단의 구분을 의미하는 <p> 태그를 무시하나봅니다.
<P>태그를 무시하기 때문에 스마트폰에서 봤을때 문단과 문단사이의 줄간격이 차이가 없이..
모두 동일한 줄간격으로 보이는 것입니다.
그래서 스마트폰에서 볼 수 있도록 한줄의 공백을 더 넣으면 비로소 잘 보입니다.

 

[수정전][수정전] [수정후][수정후]

 

 

모바일에서의 가독성을 높이기 위해서 문단과 문단사이 줄간격을 한줄씩 더 띄었더니..
위와 같이 웹에서 봤을떄는 줄간격이 2줄씩 떨어져 보입니다.

한쪽을 맞추면 다른 한쪽이 보기 싫고....

스마트폰에 글 최적화를 하니 웹에서 보는데 별로 안 좋네요!

 

 

스마트폰에 맞는 블로그글 작성, 글 최적화




스마트폰에 맞춰서 글을 작성하는 방법 정리해보도록 하겠습니다.

첫번째 방법. 문단과 문단사이는 엔터를 두번쳐서 2줄의 공백을 둔다.
두번째 방법. 글을 쓸때 문단을 바꿀때(줄을 바꿀때) 엔터가 아닌 shift + Enter를 누르면서 글을 쓴다.

세번째 방법. 티스토리의 경우 편집기에서 "문단 간격 없음"을 체크하고 사용하는 방법이 있습니다.
그러면 네이버와 같은 환경이 됩니다.

첫번째 방법은 웹에서(PC에서) 봤을때 문단과 문단의 줄간격이 너무 많이 떨어진 느낌이 들 수가 있는 문제가있고..
두번째 방법은 웹, 스마트폰 모두 보기좋고 만족스러운데.. 편집상의 불편함이 있을 수 있습니다.

예를 들어 소제목만 중앙정렬을 하려고 할때 모든 글들이 중앙정렬이 되어 버리는 문제가 생기게 됩니다.

 

현재는 세번째 방법이 정답이 될 수 있겠습니다.


 

 


한가지 바란다면 제대로 된 최적화가 되게 하기 위해서는 스마트폰과 웹의 표준화가 먼저 되어야
블로거들이 좀더 편리하게 글을 쓸 수 있을것 같습니다. 

 


 

 

댓글을 달아 주세요

댓글창에 배경그림 넣는방법

  1. 이전 댓글 더보기
  2. BlogIcon 메리앤 2013.01.17 01:22 신고  댓글주소  수정/삭제  댓글쓰기

    스마트폰에서의 최적화 방법 유용하게 잘 보았습니다.
    아직은 웹환경에만 중점을 두고 있었는데 참고해야 겠네요.
    오늘도 좋은 하루 되시기 바랍니다~. ^^;

  3. BlogIcon 진율 2013.01.17 08:49 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋ 요거 꽤 신경이 쓰이더라구요..
    전 그냥 모바일 용으로 글을
    편집합니다. ~!

    그림파일 크기나 표의 경우에
    여지없이 짤려버리는 문제는
    역시 해결이 어려울 것으로
    보입니다.

    • BlogIcon Kay~ 2013.01.17 11:11 신고  댓글주소  수정/삭제

      ㅋㅋ 진율님 글 쓰는것보고 모바일에 맞춰 쓰나보다라고..
      생각을 했었는데 정말 그렇군요. ㅎㅎㅎ
      그림은 한줄에 하나만 넣으면 해결될것 같고..
      표는 이제 비표준이기 때문에
      DIV, span으로 대체하고 안 쓰는것이 좋을것 같습니다.
      물론 포스팅을 하다 보면 그렇게 안되지만요. ㅎㅎ
      엑셀의 표를 복사&붙여넣기 하면 테이블태그가 아닌
      div,span 태그로 바뀌면 참 좋을텐데 말이죠. ㅋ

  4. BlogIcon Hare's 2013.01.17 08:50 신고  댓글주소  수정/삭제  댓글쓰기

    모바일쪽으로 트래픽이 점점 증가하는 추세다 보니,
    Kay 님이 말씀하신 부분을 저도 예전에 아주 살짝 고민만 해보았었는데 ~
    잘 배우고 갑니다^^~

  5. BlogIcon 아레아디 2013.01.17 09:13 신고  댓글주소  수정/삭제  댓글쓰기

    오호~ 요런것도 있군요..ㅎ
    좋은 정보 잘 얻어갑니다~

  6. BlogIcon Hansik's Drink 2013.01.17 09:30 신고  댓글주소  수정/삭제  댓글쓰기

    정말 요즘은 폰으로 보는 사람도 많으니...
    저도 확인을 한 번 해봐야겠네요 ~ ㅎㅎ

  7. BlogIcon 신선함! 2013.01.17 10:27 신고  댓글주소  수정/삭제  댓글쓰기

    정말 신경을 안 쓸수 없겠네요 ㅎㅎ
    잘 알구 갑니닷 !!

  8. BlogIcon 도랑가재 2013.01.17 11:24 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 것 배우고 갑니다.
    즐거운 하루되세요.~

  9. BlogIcon Zez 2013.01.17 14:32 신고  댓글주소  수정/삭제  댓글쓰기

    기술자시네요.. 역시

  10. BlogIcon 홍언니네 2013.01.17 17:44 신고  댓글주소  수정/삭제  댓글쓰기

    일부러 줄간격을 띄는것으로 사용하고 있네요..
    쓰고 항상 스마트폰에서 확인하는 버릇이 생긴듯합니다.

    잘 보고 갑니다.

  11. BlogIcon ageratum 2013.01.18 07:13 신고  댓글주소  수정/삭제  댓글쓰기

    이제는 모바일 페이지에도 신경을 써야할거 같더라구요..
    애드센스만 봐도 모바일 광고가 수익의 거의 반을 차지하고 말이죠..^^:

  12. BlogIcon 자신감~ 2013.01.28 11:44 신고  댓글주소  수정/삭제  댓글쓰기

    덕분에 좋은 팁 얻어가네요. 정말 감사합니다^^

  13. BlogIcon 베스트v라인 2013.02.03 21:11 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 말씀이네요
    스마트폰의 접속수라든지..최적화부분에 대하여
    상당히 관심과 애정이 있어야할듯

    접속하는 스타일과 접속시 좋은 글쓰는...최적화방법이
    가장 중요하죠

    블로그를 운영한다면 여러가지를 겸비해준비해야하죠^^

  14. BlogIcon 한스~ 2013.02.28 12:38 신고  댓글주소  수정/삭제  댓글쓰기

    오호라!!
    빨리 티스토리 모바일 기준으로 애드센스 적용했으면 좋겠습니다.
    모바일 유입이 많은건 아는데 그냥 방치하고 있다는

  15. BlogIcon 영도나그네 2013.03.22 16:39 신고  댓글주소  수정/삭제  댓글쓰기

    스마트폰 시대의 블로그 최적화 방법이 이렇게 할수도 있군요..
    좋은자료 잘보고 갑니다..

  16. BlogIcon 구리:) 2013.05.24 00:45 신고  댓글주소  수정/삭제  댓글쓰기

    맨날 1번방법으로 했었는데,
    3번방법도 한번 써봐야겠네요~

  17. BlogIcon 소인배닷컴 2013.07.17 16:09 신고  댓글주소  수정/삭제  댓글쓰기

    좋은 정보로군요. 잘 보고 갑니다. 오랜만에 오는 듯 합니다. 잘 지내시죠?

  18. BlogIcon 카푸리오 2013.09.06 19:13 신고  댓글주소  수정/삭제  댓글쓰기

    와, 훨씬 편리하겠네요. 정보들을 정말 잘 정리해 놓으셨어요. 글 자체에 가독성이 좋아서 컴퓨터로 봐도 잘 읽히는군요ㅎㅎㅎ 잘 보고 갑니다!

  19. BlogIcon 에브리플라워 2014.01.17 23:04 신고  댓글주소  수정/삭제  댓글쓰기

    오...
    p태그가 무시되는 군요!
    좋은 정보 보고갑니다~
    링크 버튼 색깔 바뀌는건 font 태그로 하신건가요?

  20. BlogIcon 주뽕이 2014.03.26 12:02 신고  댓글주소  수정/삭제  댓글쓰기

    잘보고갑니다~~ 좋은정보 감사해요~

  21. 2014.04.26 11:21  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다