안녕하세요! 독자가 편안한 환경을 만드는 SEO 디렉터입니다.
여러분이 쓴 글, 스마트폰으로 직접 읽어보신 적 있나요? PC에서는 시원시원하게 보이던 글이 모바일에서는 ‘깨알 같은 글씨’와 ‘숨 막히는 줄 간격’으로 변해 읽기 싫어지는 경우가 태반입니다.
방문자가 글을 읽다가 눈이 아파서 나가버린다면(이탈), 당연히 광고를 클릭할 확률도 사라집니다. 가독성(Readability)은 곧 수익성(Profitability)입니다.
오늘은 내 블로그를 ‘술술 읽히는 책’처럼 만들어주는 폰트 설정의 황금 비율을 공개합니다.
1. 폰트 크기(Font Size): 과감하게 키우세요
과거 웹사이트들은 본문 폰트 크기를 14px~15px로 설정하는 경우가 많았습니다. 하지만 고해상도 스마트폰 시대인 지금, 이 크기는 너무 작습니다.
- PC 기준: 최소 18px 이상
- 모바일 기준: 최소 16px, 권장 17px~18px
“너무 크지 않을까?” 싶을 정도로 키워야 합니다. 시력이 좋지 않은 중장년층 독자까지 고려한다면 18px이 가장 이상적입니다. 글씨가 커야 눈의 피로가 줄고, 스크롤을 내리는 속도가 빨라져 광고 노출 빈도도 늘어납니다.
2. 줄 간격(Line Height): 숨 쉴 공간을 주세요
폰트 크기보다 더 중요한 것이 바로 ‘줄 간격’입니다. 윗줄과 아랫줄 사이가 너무 붙어 있으면 글자가 덩어리져 보여서 읽기 답답합니다. 반대로 너무 멀면 시선의 흐름이 끊깁니다.
- 황금 비율: 폰트 크기의 1.6배 ~ 1.8배 (160% ~ 180%)
- 예: 폰트 크기가 18px이라면, 줄 간격은 약 29px~32px 정도가 적당합니다.
- 워드프레스 설정: 테마 설정(Customizer)이나 CSS에서
line-height: 1.7;로 설정해 보세요. 가장 안정적인 비율입니다.
3. 문단 길이와 여백: 모바일은 ‘세로’다
PC는 가로로 넓지만, 모바일은 세로로 깁니다. PC에서 3줄짜리 문단이 모바일에서는 6~7줄의 거대한 ‘텍스트 장벽(Wall of Text)’이 됩니다.
- 문단 쪼개기: PC 화면 기준 한 문단을 2~3줄 이내로 짧게 끊으세요. 모바일에서는 4~5줄 정도로 보여 읽기 딱 좋습니다.
- 좌우 여백(Padding): 화면 꽉 차게 글자가 붙어 있으면 답답합니다. 좌우 여백을 충분히(보통 20px 이상) 주어 시선이 중앙에 집중되도록 하세요.
4. 폰트 서체(Font Family): 가독성의 왕 ‘고딕’
블로그, 특히 정보성 글에는 감성적인 ‘명조체(Serif)’나 귀여운 ‘손글씨체’보다는 깔끔한 **’고딕체(Sans-serif)’**가 유리합니다.
- 추천 폰트: 프리텐다드(Pretendard), Noto Sans KR (본고딕)
- 이 폰트들은 한글 가독성이 뛰어나고, 다양한 굵기(Weight)를 지원하여 모바일 화면에서도 뭉개지지 않고 선명하게 보입니다.
💡 실제 경험담
“제 블로그는 처음에 무료 테마 기본 설정인 폰트 크기 15px, 줄 간격 1.4를 그대로 쓰고 있었습니다. 몰랐는데 제 친구가 제 글을 보더니 ‘야, 눈 빠지겠다. 글씨 좀 키워’라고 하더군요.
충격을 받고 CSS를 수정했습니다.
- 폰트 크기: 15px -> 18px
- 줄 간격: 1.4 -> 1.7
- 폰트 색상: 완전 검정(#000) -> 진한 회색(#333) (눈 피로 감소)
변경 후 일주일 뒤, 구글 애널리틱스에서 평균 체류 시간이 1분 20초에서 2분 10초로 급상승했습니다. 글이 잘 읽히니 끝까지 읽는 사람이 늘어났고, 하단 광고 클릭률도 덩달아 올랐습니다. 폰트 설정 하나 바꿨을 뿐인데 말이죠.”
❓ 자주 묻는 질문 (FAQ)
Q1. 워드프레스에서 폰트 설정을 어디서 바꾸나요? A. 사용하는 테마에 따라 다릅니다. 보통 외모 > 사용자 정의하기 > 타이포그래피(Typography) 메뉴에서 설정할 수 있습니다. 만약 없다면 ‘추가 CSS’ 메뉴에 간단한 코드를 넣어 수정할 수 있습니다.
Q2. 제목 폰트 크기는 어떻게 해야 하나요? A. 본문보다 확실히 커야 합니다. H2 태그는 본문의 1.5배(약 26~30px), H3 태그는 1.3배(약 22~24px) 정도로 설정하여 위계 질서를 명확히 해주세요.
Q3. 배경색은 흰색이 가장 좋은가요? A. 네, 가독성 면에서는 흰색 배경에 검은 글씨가 가장 좋습니다. 다만, 너무 쨍한 흰색(#FFF)보다는 아주 미세하게 회색빛이 도는 흰색(#F9F9F9)이나, 글자색을 완전 검정(#000) 대신 짙은 회색(#333)으로 하면 눈의 피로를 줄여줄 수 있습니다.
결론
가독성은 독자에 대한 ‘예의’이자 블로거의 ‘수익 전략’입니다. 지금 당장 스마트폰을 켜고 내 블로그에 들어가 보세요. 읽기 편한가요? 만약 조금이라도 찡그리게 된다면, 오늘 알려드린 수치대로 설정을 바꿔보세요. 독자들의 체류 시간으로 보답받게 될 것입니다.
