가독성(可讀性)이란, 얼마나 쉽게 읽히는가 하는 능률의 정도를 뜻합니다. 이는 활자체, 글자 간격, 행간(行間), 띄어쓰기 따위에 따라 달라집니다.
즉, 방문자가 내 블로그의 글을 직접 육안으로 보고 지각하는 과정(scan-and-perceiving process)의 성공도가 바로 이 리더빌리티(readability, 가독성)에 달려 있다는 말이죠.
연속적인 본문은 빠르고, 정확하게, 그리고 쉽게 읽혀 이해되어야 하는데 그러려면 글을 잘 쓰는 것과 별개로 게시물의 글씨 크기, 줄 간격의 적절한 조절도 굉장히 중요합니다.
오늘은 이러한 가독성과 관련해 구글 블로거 본문의 글씨 크기와 줄 간격을 설정하는 방법을 소개합니다.
내 블로그 관리자 설정인 대쉬보드에서
테마
– HTML 편집
으로 이동하세요. 그다음 소스 코드에서 Ctrl + F 단축키를 활용해 post-body
부분을 찾습니다. 구글에서 기본으로 제공하는 무료 테마를 사용하는 분들의 경우는 아마도 아래와 같은 소스 코드를 발견하게 될 것입니다.
.post-body{
font-size: 100%;
line-height: 1.6;
position:left;
}
font-size: 100%;
line-height: 1.6;
position:left;
}
여기서 font-size가 글씨 크기, line-height가 바로 줄 간격입니다. 당연히 설정된 숫자가 커질수록 글씨 크기도 커지고, 줄 간격도 넓어집니다.
한 10여 년 전만 하더라도 블로그 게시물의 글씨 크기가 작고 행간이 좁으면 전문적으로 보였는데, 요즘은 워낙 모바일로 검색을 많이 하다 보니. 조그만 스마트폰으로 작을 글씨를 보는 일이 방문자에게는 답답하게 느껴질 수도 있습니다. 그래서 기왕이면 또렷하고 시원하게 읽힐 수 있도록 글씨 크기도 큼직하고, 줄 간격도 여유롭게 조정하는 편을 권장합니다.
여기서 잠깐.
타 유저가 제작한 사제 템플릿을 적용한 구글 블로거인 경우는 소스 코드가 조금 다르게 보일 수도 있습니다.
제 구글 블로그가 이런 케이스인데요. post-body를 검색하면 상당히 많은 부분이 나타납니다. 이럴 땐
static_page .post-body
부분을 유심히 찾아보시면 됩니다.
static_page .post-body{width:100%;color:#5E5E5E;font-size:15px;line-height:1.5em;overflow:hidden}
제 구글 블로그의 경우 font-size:15px;line-height:1.5em 이런 식으로 코드가 이뤄져 있습니다. 여기서 글씨 크기를 17픽셀, 줄 간격을 2.0으로 변경했습니다.
변경 전과 변경 후를 비교해보니 확실히 가독성이 더 좋아졌습니다. 마땅한 기준은 없기 때문에 운영자가 직접 본인의 블로그 소스 코드를 변경해보면서 적절한 글씨 크기와 줄 간격으로 조절하시면 됩니다.
글 내용대로 수정했는데 데스크탑 환경에서는 줄간격이 원하는 대로 나오는데 모바일 환경에서는 줄간격이 변화하지 않습니다. 이런 경우 어떻게 해결하면 좋을까요?
답글삭제답을 금방 찾았습니다. 이렇게 입력하니까 되네요.
삭제.mobile .post-body{
line-height: 2.0;
}
덕분에 보기 좋게 변경했네요. 감사해요.
답글삭제구글 블로그는 정보가 없었는데 잘 해결했습니다^^
답글삭제감사합니다.
답글삭제