티스토리 가독성 글자 크기 자간 설정 방법

티스토리 블로그는 모바일과 데스크톱 환경에 따라 가독성에 큰 차이를 보이는데요. 모니터에서는 적당한 크기와 간격으로 잘 읽히지만, 모바일에서는 작은 글씨와 좁은 자간 때문에 가독성이 떨어지는 경우가 많습니다. 모바일에서 편안하게 읽을 수 있도록 가독성 높이는 방법을 알려드립니다.

티스토리 북클럽 기본 설정

저는 Tistory Book Club 스킨을 사용하고 있는데요.

 

모바일 기준 아래 이미지와 같은 설정이 적용되었습니다.

 

tistory-bookclub

1. line-height(텍스트 줄 간격)

 

텍스트 줄 간격(자간)을 지정하는 CSS 속성입니다. 줄과 줄 사이의 간격을 설정하고 가독성을 조절할 때 사용되는데요.

 

북클럽의 경우 1.625 rem으로 줄 간격이 설정되어 있습니다. 저는 간격이 답답해 보여 1.9 rem 설정했습니다.

 

2. font-size(글자 크기)

 

모바일에서 보이는 글자 크기 별도로 설정되지 않습니다.

 

가독성을 위해 텍스트 크기로 1.1em으로 적용했습니다.

 

글자 크기가 너무 작으면 가독성이 떨어질 수 있어, 실제 스마트폰에서 편안하게 읽을 수 있는 크기로 설정하는 것이 좋습니다.

 

모바일 가독성 글자 자간 설정

티스토리 북클럽 스킨 기준 모바일 가독성을 높이기 위해 글자 자간(텍스트 줄 간격)을 수정하는 방법 알려드립니다.

 

스칸-편집

1. 먼저, 블로그 관리 홈> 스킨 편집으로 이동해 주세요.

 

html-편집

2. html편집을 클릭하고 CSS탭 선택합니다.

 

3. 빈 곳에 커서를 두고 키보드 control + F 누릅니다.

 

줄-간격-찾기

4. entry-content p { 입력하고 enter 누르고 두 번째 위치로 이동합니다.

 

5. 글 사이 간격을 늘려 가독성을 높이기 위해 line-height 값을 더 크게 설정해 주세요.

 

기본 설정 1.625 rem에서 1.9 rem으로 변경했는데요. 추가적으로 값을 변경하려면 1.9 rem을 원하는 값으로 수정합니다.

 

6. 상단 오른쪽 적용 버튼 눌러 저장해야 반영되므로, 잊지 말고 버튼 클릭해 주세요.

 

줄-간격-수정

어떤가요? 확실히 달라진 것을 느낄 수 있는데요. 저는 최종적으로 2.0 rem을 적용했습니다. 각자 본인이 테스트해 보고 가장 적합한 값을 찾아보면 됩니다.

 

티스토리 본문 텍스트 크기 수정

이번에는 본문 텍스트 크기를 수정하는 방법입니다.

 

1. 스킨편집> html편집> CSS로 이동해 주세요.

 

2. control + F 눌러  entry-content p { 찾아 두 번째 위치로 이동합니다.

 

본문-텍스트-크기-수정

3. 북클럽 모바일에서는 별도 글자 크기에 대한 값이 없어, 제가 추가했습니다. font-size 값 넣어 주세요. 현재 1.1em 적용되어 있어 본문 텍스트 크기를 키우기 위해서는 1.2 또는 1.3em으로 수정했습니다.

 

4. 상단 우측 적용 버튼 눌러 저장해야 반영되니 잊지 말고 클릭해 주세요.

 

적용-테스트-하기

1.2em은 현재 보다 적당히 키우며 공간 활용하기 좋고, 1.3em은 모바일에서 일반적으로 편안하게 읽히는 크기이니 참고해 주세요.

 

실제 적용하고 모바일에서 텍스트 확인하며 본인이 원하는 사이즈를 찾는 것이 좋습니다.

 

블로그 모바일 최적화

티스토리 블로그 통계를 보면 데스크톱보다 모바일 비중이 높은 것을 알 수 있습니다.

 

모바일에서 텍스트의 가독성을 높이는 것은 방문자 체류시간과 애드센스 수익에 직결되는 것으로 중요한 요소입니다.

 

적절한 글자 크기와 줄 간격을 설정하면 방문자에게 더욱 편안한 읽기 경험을 제공할 수 있습니다.

 

설정 방법 어렵지 않으니 지금 바로 적용해, 방문자가 더 오래 머물며 읽을 수 있는 환경을 만들어 보세요.

 

Blog 링크 버튼 만들기

ChatGPT로 간단하게 블로그 링크 버튼 만들기

Tistory 복사금지 텍스트 불펌 방지 방법

티스토리 복사금지 텍스트 불펌 방지 방법