티스토리 북클럽(Book Club) 스킨의 포스트 시인성 개선하기
티스토리 북클럽(Book Club) 스킨의 포스트 시인성을 개선하기 위해 CSS를 편집한 내용을 정리해 보았습니다. 참고로 여기서 이루어지는 모든 작업은 블로그 관리 페이지 [스킨 편집] 메뉴의 [Html 편집]에서 진행됩니다.
글 제목 배경에 대표 이미지 제거
티스토리 블로그에 북클럽 스킨을 적용하면 위와 같이 글 제목에 대한 배경으로 대표 이미지가 출력됩니다. 이때 배경 이미지가 복잡한 그림이거나 제목 폰트의 색상과 비슷한 톤일 경우 시인성이 크게 훼손되는 모습을 볼 수 있죠. 그래서 배경 이미지를 제거해 주기로 했습니다.
[HTML] 탭에서 위 스샷의 파란색 블록 지정된 코드를 찾아 삭제해 주고, [적용] 버튼을 눌러 저장합니다.
코드 삭제 결과 글 제목의 배경 이미지가 사라졌습니다. 이제 제목이 잘 보이네요.
코드를 검색하는 과정에서 위와 같이 유사한 코드도 발견했습니다. 일반 글이 아니라 공지 글에 대한 제목의 배경 이미지 코드로 추정되는데요. 아직 작성된 공지 글이 없기 때문에 향후 테스트가 가능한 상황이 되면 확인을 거쳐 삭제하는 것으로 계획해 두었습니다.
본문 이미지 아웃라인 추가
티스토리의 여느 스킨들과 마찬가지로 북클럽 스킨도 포스트 본문 속 이미지에 아웃라인이 없습니다. 그래서 위의 예시와 같이 포스트 배경색과 유사한 톤의 이미지가 본문에 추가되었을 때 이미지 경계가 명확하지 않아 시인성이 크게 떨어지죠.
그래서 CSS에 위와 같이 코드를 추가하여 아웃라인을 그려보았습니다. 라인 넘버와 주위 코드들을 참고하여 빨간색으로 표시한 코드를 추가해 주시면 됩니다.
한결 보기가 좋아졌네요.
본문 이미지 캡션 텍스트 스타일 변경
이미지에 아웃라인을 적용하고 보니 이번에는 이미지 캡션이 거슬립니다. 캡션 텍스트 색상이 이미지의 아웃라인과 일체감이 느껴지지 않고, 간격도 조금 멀어 보이는데요.
해당 부분을 개선하기 위해 위 빨간색 언더라인처럼 CSS를 편집하였습니다. 텍스트 색상은 이미지 아웃라인과 같은 계열의 색상 중 좀 더 진한 색으로 바꾸었고, 텍스트와 이미지의 간격은 10px에서 4x로 줄였죠. 그 결과...
이렇게 바뀌었습니다.
본문 h2 태그 스타일 개선
포스트 본문에서 소제목으로 사용되는 h2 태그 스타일도 시인성 측면에서 개선할 여지가 많아 보입니다.
h2 태그 이전과 이후의 간격 폭이 비슷해서 해당 소제목이 이후 단락과 한 덩어리라는 느낌이 떨어지는데요. 따라서 간격에 차등을 두는 것이 좋아 보입니다. 또한 이미지 아웃라인과 디자인에서 일체감이 있으면 좋겠다는 생각도 드네요.
그래서 위와 같이 수정해 주었습니다.
결과는 이렇죠.
본문 p 태그 스타일 개선
p태그는 가장 일반적인 텍스트를 출력하며 문단을 구분 짓는 태그입니다. 하지만 북클럽 스킨을 사용하면 위와 같이 문단 구분이 전혀 되지 않는 모습을 볼 수 있죠. 따라서 태그 위, 아래로 간격을 추가해 주는 게 좋습니다.
빨간 줄을 그은 부분이 수정된 CSS 코드 내용인데요. 위, 아래에 각각 16px 씩 여분을 주는 방향으로 수정했습니다.
이제 좀 괜찮아 보이네요.
지금까지 티스토리 북클럽 스킨의 포스트 시인성을 개선하기 위한 HTML 편집 내용이었습니다. 급한대로 포스트 속의 내용물에 대해서만 스타일 편집을 해 보았는데, 여전히 아쉬운 부분들이 보이네요. 틈틈이 작업을 이어가야 할 듯합니다.
