Posted by 티스토리 북클럽 스킨의 모바일 화면과 데스크톱 화면에서 줄간격 및 폰트 크기 변경 방법에 대해 알려드리고자 합니다. 북클럽 스킨은 티스토리에서 제공하는 기본 스킨으로, 블로그를 시작하는 많은 분들이 선택하는 스킨입니다. 그러나 모바일 화면에서 기본 북클럽 스킨이 적용된 포스팅을 보면, 폰트 크기가 작을 뿐 아니라 줄간격이 좁아서 약간 답답해 보이기도 합니다. 블로그 방문자들이 글을 편안하게 읽도록 하고, 궁극적으로 체류시간을 늘리기 위해서는 폰트의 크기 및 줄간격을 적당하게 조절하는 것이 좋습니다.
1. 방문자가 읽기 편한 글의 조건
아무리 포스팅의 내용이 좋더라도, 글이 사용자 친화적이지 않으면 방문객들은 뒤로 가기를 눌러서 해당 글을 떠날 것입니다. 그렇게 되면 체류시간은 낮아지고 검색엔진에서도 뒤로 밀려나게 되겠지요. 그러므로 방문자가 읽기 편한, 가독성이 높은 글이 되려면 다음과 같은 조건을 만족하여야 합니다.
- 글이 너무 빽빽하게 보이지 않도록 단락을 적당히 나눕니다. 데스크톱 기준으로 4~5줄 정도(글자수 250자 전후)가 적당한 것 같습니다.
- 글자크기를 읽기 편하도록 조절합니다.
- 줄간격을 적당하게 조절합니다.
위 조건은 데스크탑 화면과 모바일 화면에서 각각 확인하여야 합니다. 반응형 스킨의 경우 너비가 일정 사이즈 이하가 될 경우, css 태그를 별도로 적용받게 될 수 있습니다. 이는 가독성을 크게 떨어뜨리는 요인이 됩니다. 예를 들어 폰트 크기는 화면 너비에 상관없이 변경이 되었는데, 줄간격은 화면 너비에 따라 다르게 적용되어 모바일 화면에서만 줄간격이 너무 좁아 보이는 문제가 발생할 수 있습니다. 북클럽 스킨이 이 예시에 해당됩니다.
위 이미지를 보면 북클럽 스킨에서 글자 크기를 조금 키웠는데, 모바일 화면에서 볼 때 줄간격이 좁아서 가독성이 떨어집니다. 그러나 데스크탑 화면에서 볼 때는 줄간격이 적당히 넓어서 글을 읽는 데 문제가 없습니다.
2. 줄간격 및 폰트 크기 변경
북클럽 스킨에서 줄간격 및 폰트 크기 변경 방법을 설명드리도록 하겠습니다. css 초보자 분들을 위해 태그 설명보다는 라인 위치를 바로 알려드릴 것인데, 스킨 버전 및 편집 상황에 따라 라인 위치는 조금 달라질 수 있습니다. 그러나 제가 언급한 숫자 근처에서 관련 태그를 찾아보시면 어렵지 않게 수정하실 수 있을 것 같습니다.
2.1 모바일 화면 기준
2.1.1 줄간격 변경
블로그 스킨 편집 화면에서 html 편집을 누릅니다. CSS에 들어가서 ctrl키+g키를 눌러서 2940을 입력하고 엔터를 누릅니다. 그러면 2940번째 라인으로 이동합니다. 참고로 2396~3094라인부터는 모바일 화면에서 별도로 적용되는 태그들이 모여있습니다. @media screen and (max-width:767px) { … }입니다.
.entry-content p그룹에서 line-height를 적당히 조절하시면 됩니다. 저는 1.625를 2로 바꾸어 보았습니다. 그 결과는 아래와 같습니다. 글 처음에 보여드린 캡처 화면에 비해 줄간격이 넓어져서 가독성이 나아진 것을 확인할 수 있습니다.
2.1.2 폰트크기 변경
모바일 화면에서만 폰트 크기를 변경하려면 .entry-content p 그룹에서 font-size: [숫자]em을 추가하시면 됩니다. 숫자는 적당히 넣으시면 되고, 저는 예시 화면을 보여드리기 위해 1.5em을 적용해 보았습니다.
2.2 데스크톱 화면 기준
2.2.1 줄간격 변경
CSS화면에서 1439 라인으로 이동합니다. 여기서도 .entry-content p 를 확인할 수 있습니다. 태그는 같지만 1439라인이 기본적으로 적용되는 것이고, 2940 라인은 767px 사이즈 이하 화면일 때 별도로 구동될 태그를 작성한 것입니다. 그러므로 여기서 line-height을 수정하게 되면 767px 초과 화면(데스크톱이나 태블릿 화면)에서의 줄간격을 조절할 수 있게 됩니다.
2.2.2 폰트 크기 변경
.entry-content p 그룹에서 font-size: [숫자]em을 변경하시면 됩니다. 저는 글자가 조금 크게 보이는 것을 원해서 0.9375에서 1.1로 숫자를 변경하였습니다. 참고로 2.1.2 목차를 적용하지 않았다면, 여기 숫자를 바꾸면 모바일 화면에서도 폰트 크기가 변경됩니다. 그러므로 모바일 화면에서 줄간격을 꼭 확인하시기 바랍니다.