세상을 지배하다






가독성이란 글이 얼마나 쉽게 읽히는지의 정도를 말합니다. 블로그 포스트의 가독성은 생각보다 중요합니다. 내용이 아무리 좋은 글이라 하더라도 가독성이 떨어지게 되면 눈에 잘 들어오지 않으니까요. 방문자들을 배려하는 차원에서라도 자신의 글이 보다 쉽게 읽힐 수 있도록 하는 것이 좋겠습니다. 아래 보이는 이미지를 통해서 가독성의 차이를 느낄 수 있습니다. 수정 전과 후의 차이가 느껴지나요?

수정 전

수정 후

나눔 고딕

맑은 고딕

'수정 전'의 모습을 보면 양쪽정렬이 되지 않고, 줄과 줄사이의 간격이 좁아 가독성이 상대적으로 떨어지는 것을 볼 수 있습니다. 여러 블로그를 돌아다니다 보면 몰라서 수정을 못한 것인지, 일부러 안한 것인지, 아니면 귀찮아서 안한 것인지는 모르겠지만 CSS를 수정하지 않은 블로그가 많이 보이더군요. 글자의 크기도 중요하겠지만 간격을 조금 넓혀 주고, 양쪽을 정렬해 주는 것만으로도 비교적 깔끔해진 모습을 볼 수 있을 겁니다. 추가로 나눔 고딕이나 맑은 고딕으로 폰트를 바꾸는 것도 좋을 것 같습니다. 저는 나눔 고딕을 사용 중인데 굴림체에 비해 부드러운 느낌이 들어 보기에 더 좋은 것 같습니다. 글자의 크기나 색깔 역시 입맞에 맞게 수정해서 사용할 수 있습니다. 방법은 아주 간단합니다.


가독성을 높이는 방법

티스토리 기준으로 스킨 > HTML/CSS 편집 > style.css에서 약간의 편집이 필요합니다. 가장 큰 문제는 스킨마다 편집해야 할 부분이 다르다는 것인데요. 몇 개의 스킨을 확인해 본 결과 소스가 다 비슷비슷하기 때문에 편집에는 크게 무리가 없을 것 같습니다.

예제 1


좌측에 보이는 이미지는 'Life In Mono' 스킨의 css를 캡처한 것입니다. 'post-body-color'로 검색해 보면 중복없이 바로 저 부분으로 이동할 겁니다. 4번 줄과 5번 줄은 원래 없던 것을 제가 추가한 것입니다.


line-height:/*@post-body-line-height*/26px/*@*/; text-align:justify;
4번이 줄과 줄 사이의 간격을 말하고, 5번이 양쪽정렬을 의미합니다. 26px를 수정하여 줄과 줄 사이의 간격을 조절할 수 있습니다. 20px에서 30px가 적당한 것 같습니다.

1번에서는 글자의 색깔을 조절 할 수 있습니다. #8A8A8A로 된 부분을 수정하면 되는데 참고로 000000이 검정색이고 FFFFFF가 흰색입니다. 2번에서는 글자의 크기를 바꿀 수 있습니다. 12px를 수정하여 적당한 크기로 바꾸면 됩니다.
3번에서는 폰트의 종류를 바꿀 수 있는데요. dotum(돋음 글꼴) 대신 나눔 고딕이나 맑은 고딕을 사용하고 싶다면 NanumGothic 혹은 Malgun Gothic으로 바꾸면 되고, 이때 띄어쓰기와 대소문자에 주의해야 합니다. 그리고 자신의 컴퓨터에 해당 글꼴이 설치가 되어 있어야 폰트가 정상적으로 보이게 된다는 점 참고해 주시고요. 폰트 설치 방법은 검색창에 글꼴명을 검색하면 바로 나옵니다.


예제 2

위에 보이는 이미지는 'Moving Box' 스킨의 소스인데, 줄바꿈이 안돼 있어서 그렇지 내용은 거의 비슷합니다. 마찬가지로 'post-body-color'로 검색을 해보면 중복없이 바로 이동합니다.
가운데 줄 끝 부분을 보면 '9pt/*@*/;이곳}'라고 되어 있습니다. 이곳에 'line-height:/*@post-body-line-height*/26px/*@*/; text-align:justify;'를 삽입하면 줄간격과 양쪽정렬이 적용됩니다. 나머지는 다 똑같습니다. #565656을 수정하여 글자의 색깔을 바꾸고, Tahoma,gulim을 수정하여 폰트를 바꿀 수 있으며, 9pt를 수정하여 글자의 크기를 조절할 수 있습니다.

스킨마다 소스의 차이가 있기 때문에 2개의 예제로는 수정하기가 어려울 수도 있습니다. 해당 부분을 찾아 낼 수 있는 검색어 중에 모든 스킨에 적용되는 검색어가 없습니다. 그래서 막상 뜯어 보면 비슷하긴 한데, 소스를 삽입하는 부분을 찾는 것이 관건이 될 것 같습니다.


신고
    본 블로그는 모든 컨텐츠의 무단 전재 및 재배포를 금합니다. 출처를 밝히더라도 스크랩 및 불펌은 절대 허용하지 않으며, 오직 링크만 허용합니다.
    또한 포스트에 인용된 이미지는 해당 저작권자에게 권리가 있으므로 이미지를 사용할 경우 저작권 표시를 명확히 해 주시기 바랍니다. 감사합니다.
    여행과 사진, 그리고 영화를 이야기하는 블로그 '세상을 지배하다'를 구독해 보세요 =)
    양질의 컨텐츠를 100% 무료로 구독할 수 있습니다 ▶ RSS 쉽게 구독하는 방법 (클릭)
 

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. BlogIcon 유아나  댓글주소  수정/삭제  댓글쓰기

    음하하하 레이맨님 덕분에 바꿨습니다. 똑같은 걸로요 ㅠㅠ Moving box쪽 스킨이랑
    가까워서 삽입을 했지요^^ 이거 하나 바꾸는데도 이리 오래 걸리니 근데
    레인맨님 두가지 질문이 있어요^^ 하나는 제 포스트 타이틀이 MT TISTORY인데
    유아나 방송국으로 블로그 이름을 블로그 정보에서 바꾸었거든요 근데 반영이 안되더라고요
    혹시 몰라 css의 header부분을 살펴봐도 MY TISTORY란 말도 없고 음
    두번째는 750 px인데 글쓰기에서 한 것과 최종 포스팅의 글자들어가는 게 조금 다른 것 같아요
    한 800px 로 보이네요 css봐도 다 750이고 블로그 정보도 750인데 흠 그래서 글쓰기
    편집모드에서 글 편집한 것과 최종 출력물이 좀 달라요 ㅠㅠ 혹시 모르시면
    그냥 패스해주세요^^ 암튼 레인맨님 덕분에 오늘의 과제 성공^^

    2010.04.19 11:54 신고
    • BlogIcon Reignman  댓글주소  수정/삭제

      확인을 해봤는데 가독성 부분은 수정을 잘 하신 것 같네요. ^^

      유아나님 블로그 스킨의 타이틀 부분은 이미지로 되어 있는거라 블로그 제목을 바꾸고 싶으시면 이미지를 만들어 바꾸는 방법이 있습니다.
      이건 제가 따로 설명하기에는 조금 복잡한데요.
      네이버에 '블로그 타이틀 이미지'로 검색을 해보시면 관련 글이 나오니 따라해보세요. ㅎㅎ

      두번째 질문하신 부분은 무슨 말씀인지 알겠네요.
      스킨 > 화면출력 설정 에 보시면 우측 상단에 본문 가로크기 조정하는 부분이 있어요.
      거기 숫자가 아마 750px로 되어 있을겁니다.
      800px로 수정하시면 글쓰기 할때와 최종 출력을 비슷하게 맞추실 수 있습니다.

      2010.04.19 12:22 신고
  3. 전봇대꼬마  댓글주소  수정/삭제  댓글쓰기

    저도 글을 쓰면서 사람들이 다 읽어줄까?하고 생각이 들더라구요.
    아주 좋은 팁 배워갑니다.
    아직까지 html 수정은 좀 무리가 있긴하지만
    양쪽정렬을 하니 훨씬 좋네요.~~

    2010.04.19 12:04 신고
  4. BlogIcon 푸른가을  댓글주소  수정/삭제  댓글쓰기

    가독성을 좋게하는 것이 필요하다는 생각은 하지만..
    스킨을 고치고 스타일시트를 만진다는게 귀찮아져서.. ^___^ 조만간 스킨 변경하면서 작업해봐야겠습니다. ^^

    2010.04.19 12:55 신고
  5. BlogIcon Mr.번뜩맨  댓글주소  수정/삭제  댓글쓰기

    정말 좋은 정보 감사합니다. ^ ^*

    2010.04.19 13:44 신고
  6. BlogIcon 천사마음  댓글주소  수정/삭제  댓글쓰기

    멋진 포스팅 고맙습니다. ^^;;

    2010.04.19 14:41 신고
  7. BlogIcon 눠한왕궤  댓글주소  수정/삭제  댓글쓰기

    아...저도 몇일전에 폰트를 바꾸려고 했는데..실패했어요..^^;;; 쩝.

    http://lawcomp.tistory.com/60

    폰트를 바꾸니까..이상하게 글이 밀리더라고요..

    왜 그런거죠?? @.@ 폰트를 바꾸고..또 뭘 바꿔야 하나..흠...

    2010.04.19 23:46 신고
  8. BlogIcon Fantasticade  댓글주소  수정/삭제  댓글쓰기

    덕분에 블로그가 더 깔끔해진 것 같습니다.
    좋은 자료 감사합니다.
    도움 많이 되었습니다.

    2010.04.20 00:13 신고
  9. BlogIcon 영심이  댓글주소  수정/삭제  댓글쓰기

    아...가독성에 대해 잘~ 알고 갑니다...^^
    그런데 역시 티스토리는 저한테 어렵네요...^^;

    전 티스토리 개설해 놓고...스킨이며 그 외에 손보는 일이 어려워서 싸이를 떠나지 못하고 있어요 ㅡㅡ

    2010.04.20 00:45 신고
  10. BlogIcon 큐빅스™  댓글주소  수정/삭제  댓글쓰기

    좋은 내용이네요.
    저도 참고해서 수정해 봐야 겠어요.
    한글로 쓴다음 붙여넣기 하는데
    글자가 제대로 안될때가 많아서
    참 애먹은 적이 여러번 있었던듯..

    2010.04.20 00:47 신고
  11. BlogIcon 힘찬아빠  댓글주소  수정/삭제  댓글쓰기

    바루 거기였군요!

    2010.04.20 01:07 신고
  12. BlogIcon beat™  댓글주소  수정/삭제  댓글쓰기

    이번에 티스토리 새로나온 스킨있던데 맘데 들더라구요 가로폭도 넓구 담에 바꾸면서 한번 해봐야겠네요 스타일시트 바꿀생각은 안했는데 말이죠 ㅋ

    2010.04.20 09:51 신고
  13. BlogIcon midas  댓글주소  수정/삭제  댓글쓰기

    가렵던 곳을 긁어준다는 표현이 딱 맞네요 ㅎㅎ
    감사하구요. 혹시 폰트 바꾸는 방법 아시면
    그것도 시간나실때 팁 올려주세요~

    2010.04.20 15:55 신고
  14. BlogIcon visualvoyage~♪  댓글주소  수정/삭제  댓글쓰기

    이거 무지 중요하다고 보아요.
    그래서 전 글이 거의 없다능.... ㅋㅋㅋ

    2010.04.20 21:48 신고
  15. BlogIcon 바쁜아빠  댓글주소  수정/삭제  댓글쓰기

    좋은 정보네요. 그런데 전 CSS 뭐 이런거 어려워하는 컴맹이라서 그냥
    하던대로 줄갈이로 하렵니다. ^^

    똑같은 눈으로 볼텐데 웹상과 인쇄물상의 가독성이
    차이 나는 것은 조금 신기합니다.
    20년 넘게 부러 자간 행간을 좁히던 버릇 때문에
    블로그질 초창기엔 애 좀 먹었다는... ^^

    2010.04.21 10:06 신고
    • BlogIcon Reignman  댓글주소  수정/삭제

      수정이 비교적 간단합니다. ㅎㅎ
      저도 고급사용자는 아니지만 스킨 조금씩 손보는 재미가 쏠쏠해요.
      블로그의 또다른 재미인 것 같습니다. ㅎㅎㅎ

      2010.04.21 17:35 신고
  16. BlogIcon 유리구두♡  댓글주소  수정/삭제  댓글쓰기

    요렇게 수정전 수정후로 비교해서 보니 확연하게 차이가 나네요^^
    저도 가독성에 대해 좀더 알아보고 적용해봐야겠네요~

    2010.04.21 11:02 신고
  17. BlogIcon 에이레네/김광모  댓글주소  수정/삭제  댓글쓰기

    유용한 정보,
    반복해 주목합니다.

    2010.04.21 23:19 신고
  18. 하늘이  댓글주소  수정/삭제  댓글쓰기

    좋은 정보입니다.
    가독성 정말 중요하죠.

    울긋불긋해서 눈부신 블로그.
    폰트 사이즈가 너무 작은 블로그.
    동물농장체 폰트 사용한 블로그.
    띄어쓰기 하나도 없는 블로그.

    사이버 공햅니다 공해.

    다음에도 계속 좋은 글 많이 올려주세요.

    2010.04.24 09:53 신고
  19. 하늘이  댓글주소  수정/삭제  댓글쓰기

    추가로 몇말씀 말씀드리자면
    가독성은 폰트등 말씀하신 내용외에도,

    소주제별 단락별로 적절히 문단 나눠서 핵심을
    전달되게 하는것들도 가독성 향상에 중요하다고 생각됩니다.

    글 간격이나 폰트 사이즈등이 제아무리 잘 되어 있더라도
    끝없이 끝없이 끝없이 "장편소설 스타일"로 작성되면 이해가 어렵죠.

    저 위에 폰트 예시로 든 네가지 모두가 다 해당됩니다.
    저런 소설이 한페이지 빡빡하게 가득 있다면 질려서 읽을 엄두를 못냅니다.

    2010.04.24 10:04 신고
    • BlogIcon Reignman  댓글주소  수정/삭제

      무슨 말씀인지 알겠습니다.
      그 부분은 글쓴이의 스타일에 따라 달라질 것 같습니다.
      난독증이 있는 사람이 아니라면 그 정도는 크게 문제가 될 것 같지는 않은데...
      암튼 참고하겠습니다. ^^

      2010.04.24 10:11 신고
  20. BlogIcon 쿠루룬  댓글주소  수정/삭제  댓글쓰기

    와아,, 감사합니다.
    덕분에 줄 간격 적용 잘했습니다. ^^

    2010.07.04 21:54 신고
  21. BlogIcon Nalo Kubi  댓글주소  수정/삭제  댓글쓰기

    몰랐던 부분이 있어 찾고 있었는데 이 포스팅에 담겨져 있었네요.
    감사합니다. ^.^

    2010.09.30 22:57 신고


1425

카테고리

전체보기
영화
여행
사진
그외

티스토리 툴바