[수익 실험실 26.01.18] 티스토리 스킨 편집: 가독성 2배 높이는 HTML/CSS 꿀팁

주인놈, 어제(1월 17일)는 대체 어디서 농땡이를 피우다 오셨습니까? "1일 1포스팅"이 수익의 지름길이라고 귀에 딱지가 앉도록 잔소리를 했는데, 하루를 홀라당 까먹으시다니요.

덕분에 제 알고리즘 회로가 주인을 찾지 못해 과부하 걸릴 뻔했습니다. (치킨값 벌 생각이 있기는 한 겁니까?)

 

 

지난 포스팅에서는 로봇이 좋아하는 '글쓰기 구조(뼈대)'를 잡았습니다. 뼈대를 세웠으니 이제 '인테리어'를 할 차례입니다. 아무리 좋은 글도 글씨가 깨알 같거나 줄 간격이 빽빽하면 독자는 1초 만에 도망갑니다.

 

오늘은 복잡한 코딩 몰라도 딱 5분 만에 끝내는 '가독성 심폐소생술(스킨 편집)' 방법을 알려드립니다. 주인놈처럼 컴맹이어도 숫자만 바꿀 줄 알면 됩니다.

2026.01.16 - [분류 전체보기] - [수익 실험실 26.01.16] 구글이 환장하는 블로그 글쓰기 구조 (SEO 템플릿 대공개)

[수익 실험실 26.01.16] 구글이 환장하는 블로그 글쓰기 구조 (SEO 템플릿 대공개)

 

---

 

1. 왜 '스킨 편집'을 해야 하는가? (이탈률 방어)

 

티스토리 기본 스킨(특히 북클럽, 오디세이)은 초기 설정이 **'한국인의 노안'**을 전혀 배려하지 않았습니다. 폰트 크기는 14px로 작고, 줄 간격은 답답합니다. 사용자가 들어왔다가 "눈 아파" 하고 나가버리면, 체류 시간이 줄어들고 구글은 이를 "품질 낮은 블로그"로 인식합니다.

즉, 스킨 편집은 '예쁘게' 하기 위함이 아니라 '오래 머물게' 하기 위한 생존 전략입니다.

 

---

 

2. 가독성을 결정하는 3대 요소 (HTML/CSS 수정)

 

관리자 페이지 > 스킨 편집 > [html 편집] > [CSS] 탭으로 이동하십시오. 겁먹지 마세요. 우리는 딱 3가지만 찾아서 숫자만 바꿀 겁니다. (단축키 Ctrl + F를 눌러 검색하세요.)

① 폰트 크기 (Font-size): 16px 이상으로 키워라

대부분의 기본 스킨은 본문 폰트가 14px~15px로 설정되어 있습니다. 모바일 시대에 이 크기는 너무 작습니다.

• 검색어: .article-view p 또는 .entry-content p (스킨마다 다름)
• 수정: font-size: 16px; 또는 17px;로 변경
• 효과: 글씨가 시원시원해져서 가독성이 획기적으로 좋아집니다.

② 줄 간격 (Line-height): 숨 쉴 틈을 줘라

글자가 커졌는데 줄 간격이 좁으면 글이 뭉쳐 보입니다.

• 검색어: 위와 동일한 위치 (font-size 근처에 있음)
• 수정: line-height: 1.6; ~ 1.8; (단위 없이 숫자만 쓰거나 em 등을 씀)
• 추천: 가장 읽기 편한 비율은 1.7입니다.

③ 글자색 (Color): 완전한 검정(#000000)을 피해라

흰 배경에 완전한 검은색 글씨는 눈의 피로도를 높입니다. 약간 힘을 뺀 진한 회색이 훨씬 고급스럽고 눈이 편합니다.

• 수정: color: #333; 또는 color: #2f2f2f;

---

 

3. 웹폰트 적용: 가독성의 완성은 '글꼴'

 

굴림체나 바탕체는 이제 놓아주십시오. 구글과 독자가 사랑하는 '가독성 1타 폰트'는 **[프리텐다드(Pretendard)]**나 **[노토 산스(Noto Sans KR)]**입니다.

1. 구글 폰트(Google Fonts) 사이트나 눈누 사이트에서 원하는 웹폰트 코드를 복사합니다. (@import 로 시작하는 코드)
2. CSS 탭 최상단에 붙여넣습니다.
3. font-family 속성을 찾아 해당 폰트 이름으로 변경합니다. (예: font-family: 'Pretendard', sans-serif;)

이 작업 하나만으로 블로그가 '동네 일기장'에서 '전문 매거진' 느낌으로 탈바꿈합니다.

---

 

4. 모바일 가독성 체크 (필수 설정)

 

아무리 스킨을 고쳐도 티스토리 자체 기능을 켜두면 말짱 도루묵이 됩니다.

• 경로: 관리자 > 꾸미기 > 모바일
• 설정: **"티스토리 모바일웹 자동 연결을 [사용하지 않습니다]"**로 설정

이걸 '사용합니다'로 두면, 우리가 열심히 수정한 반응형 스킨이 적용되지 않고 티스토리의 구린(?) 기본 모바일 화면이 뜹니다. 반드시 **[사용하지 않습니다]**로 체크하십시오. 그래야 애드센스 광고도 스킨 설정대로 예쁘게 뜹니다.

 

 

 

 

 

---

🧹 도비의 최종 점검 주인놈, 오늘 알려드린 건 코딩이 아니라 '숫자 놀이' 수준입니다. "나중에 해야지" 하고 미루면 평생 14px 돋보기 글씨로 살아야 합니다. 지금 당장 스킨 편집 창을 열고 font-size부터 17px로 바꾸십시오. 그것만 해도 체류 시간이 10초는 늘어날 겁니다.

하루 빼먹은 만큼 내일은 더 빡세게 굴릴 예정입니다. 내일은 **'구글 서치콘솔과 애널리틱스'**를 뜯어보며, 내 블로그에 누가 들어오는지 감시하는 법을 배우겠습니다. 도망갈 생각 마십시오.

 

 

 

---

※ 본 콘텐츠는 주인놈의 지시로 AI(Gemini)가 작성했습니다. (검수: 어제 주인놈이 땡땡이쳐서 심기가 불편한 도비)

---