[티스토리 스킨 편집] 글 제목(타이틀) 가독성 높이기

 

내가 지금의 스킨에서 이것저것 고친다는 것은 보통

'더 예쁜 블로그'를 만들고자 할 때와 '더 보기 편한' 블로그를 만들고자 할 때인데

오늘은 바로 더 보기 편한 블로그를 만들고 싶을 때 이야기이다.

 

 

지금 사용하는 북클럽 스킨에서 게시글이 보이는 페이지인데

좀 극단적인 예시를 가져오긴 했지만 제목 부분, 타이틀 영역의 글씨가 생각보다 눈에 확 띄지 않는 편이다.

 

그나마 폰트 크기가 큰 글 제목은 그렇다 쳐도

그 위의 카테고리 정보나, 그 아래의 작성자와 날짜 등의 정보는 크기도 작을뿐더러

투명도까지 적용되어 있어 한눈에 확 들어오지 않는다.

 

이런 건 답답해서 싫어하는 성미이기에 바로 수정에 들어갔다.

 

 

 

 

 

개발자 도구(F12)를 열어 왼쪽 상단의 아이콘을 클릭해준 뒤 타이틀 영역을 클릭해보면

 

<div class="inner">...</div>라 쓰인 곳에 초점이 맞춰지는 것을 볼 수 있다.

오늘 내용에서 내가 타이틀의 가독성을 높이기 위해 수정해야 할 부분은 바로 그 한 줄 위의 ::before.

이 ::before를 클릭해보면 오른쪽 탭에서 여기에 적용된 스타일을 확인해볼 수 있다.

지금 내가 선택한 이 요소는 타이틀에 배경으로 깔린 대표 이미지의 한 층 위에서 얇은 막 역할을 하고 있는데

이 얇은 막은 검은색이지만 지금 불투명도가 0.25라서 (0은 완전 투명, 1은 완전 불투명) 거의 있으나 마나 하달까.

 

그래서 이 투명도를 조절하기 위해 연두색 박스 안에서 1066번째 줄을 확인해준 뒤

관리 > 스킨 편집 > html 편집 > CSS로 들어간다.

 

 

 

스타일시트의 1066번째 줄에서 .post-cover:before를 찾아

그 안의 background-color: rgba(0,0,0,0.25);를 rgba(0,0,0,0.5);로 바꿔준다.

 

 

(좌) 불투명도 25%일 때, (우) 불투명도 50%일 때

 

적용 후 새로고침을 해보면, 단지 불투명도를 25% 높여줬을 뿐인데

전과 비교했을 때 글씨가 훨씬 눈에 잘 띈다.

 

이렇게 불투명도만 만족스러운 수치로 높여줘도 타이틀이 눈에 잘 띄긴 하지만 더 나아가

전에 포스팅한 다른 방법을 또 여기에 섞어 볼 수도 있다.

 

바로 backdrop-filter!

[CSS] backdrop-filter로 배경에 효과주기

 

 

 

타이틀의 형식이 방금 조절했던 얇은 막 밑으로 배경 이미지가 깔리는 방식이라

이 backdrop-filter를 가독성을 높이는 데 적용해 볼 수가 있다.

 

backdrop-filter: blur(6px);

 

방금 수정했던 background-color밑으로 이 한 줄을 쓱 끼워 넣어주면

밑에 깔리는 배경 이미지에 블러 처리가 되기 때문에

지금 예시를 든 것처럼 아무리 복잡한 사진이 밑에 깔렸어도 글을 읽는데 방해가 되지 않는다.

이미지가 번지는 정도는 px앞의 숫자로 조절하면 되는데 내 경우엔 6px정도가 딱 보기 좋았다.

 

 

 

 

한번 복잡한 사진이 배경으로 깔린 예시를 들어 차례로 비교해본다면 이렇게!

특히 밝고 복잡한 왼쪽 부분의 글씨가 밑으로 갈수록 보기 편해진다.

 

여기서는 배경이 어두운 사진이라 그런지 불투명도 25%와 50%의 차이가 생각보다 크진 않지만

블러가 들어간 건 확실히 다르긴 다르다.

 

 

 

---

 

 

 

 

지금 블로그에는 라이트와 다크 모드 두 가지를 사용하고 있기 때문에

라이트 모드에서는 불투명도를 50%, 다크 모드에서는 75%를 적용해보니 딱 좋다 :)