티스토리 문제 해결 일지 (다크모드, 모바일화면깨짐)

티스토리를 다시 시작한 지 일주일이 지났다. 일단, 양질의 글이 가장 중요하겠지만 기본적으로 가독성이 있어야 그 글이 수요가 생긴다. 며칠 전 다크모드에서의 문제와 모바일화면에서의 문제를 발견하고 수정했다. 이외에도 티스토리를 하면서 가독성과 관련된 요소들을 고민해 보고 정리해 보았다. 

다크모드

 

1.1 berry skin

 

새로 블로그를 세팅하면서 구입한 스킨은 바로 berry skin이다. 웹과 모바일 최적화된 반응형 스킨이고 깔끔한 UI와 계속적인 개발자의 업데이트, 다양한 기능을 쉽게 사용할 수 있게 제작되어 있다. 아직 그 기능을 많이 활용할 만큼의 컨텐츠가 쌓여있진 않지만 글이 많이 쌓이다 보면 다양하게 이용하고 특별히 화려하지 않아도 심플하고 가독성 좋은 블로그를 만들 수 있을 거라 생각했다.

 

'블로그/티스토리 Berry Skin 스킨' 카테고리의 글 목록

-다크모드 전환 가능 
-제목을 인식하여 자동 목차 TOC(Table Of Contents)생성 가능 
-본문 썸네일 모양 설정 가능
-블로그 다양한 커버 설정 가능(카드,목록,갤러리,커버형 등)

 

 

1.2 다크모드 적용 시 문제점 

 

첫 글을 작성할 때는 다크모드로 변경해도 글자 및 배경 색상이 잘 변환되어 문제가 없었다. 그래서 따로 확인을 안 했다. 글이 3-4개 정도 쌓인 후에 다크모드로 변경해서 보니 아래와 같이 하얀 박스가 안에 소제목이 있거나, 본문글자가 검은색으로 보이는 문제가 있었다. 

 

다크모드 시 검은색으로 표시되는 본문

 

 

1.3 해결방법

 

구글 검색 결과, 다른 스킨에서도 이런 문제가 있었고, 이에 개발자님이 직접 해결방안을 써주신게 있어서 그대로 해보았다. 

 

-해당 글의 HTML 열기
-인라인 스타일 색상이 입혀져 있는 지 확인하기->제거 

 

소제목에는 background color #fffffff; , 본문 스타일에 color #333333; 이 추가되어있었다. 수동으로 일일이 제거하는 번거로움이 있었지만! 해결해서 정말 다행이었다. 

-문제의 원인은 티스토리 에디터에서 복사하기 붙여넣기를 할 때 자동으로 속성이 부여돼서 그런 거라고 한다. 

 

본문 스타일 인라인 색상 제거 html

 

모바일 

 

기본적으로 티스토리관리-꾸미기-모바일에 [티스토리 모바일웹 자동연결을 사용하지 않습니다]를 설정하여 PC에서 설정하고 꾸민 그대로 모바일에서 가져와 볼 수 있게끔 하였다.

 

티스토리 모바일웹 설정 사용하지 않음

 

2.1 소제목 겹침

 

PC에서는 소제목이 길어도 상관없이 깔끔하게 보였는데 모바일은 화면폭이 좁다보니 소제목이 길 경우 2줄로 넘어가고, 겹쳐져 보였다. 찾아보니 스킨편집-CSS-Entry contents-padding설정으로 변경으로 해결이 가능해 보이긴 하나 깔끔한 변화를 보여주지는 않았다. 그리고 만들어진 스킨을 산 거라 CSS에 가보면 개발자의 방식대로 되어있어서 괜히 잘못 건드렸다가는 망칠 것 같았다. 그래서 그냥 짧게 변경했다. 

 

티스토리 소제목 겹침

 

 

2.2 삽입된 표 깨짐

 

표를 PC에서는 내용에 맞는 크기로 줄여서 삽입했는데, 이걸 모바일에서 보니 표가 깨지고 보기 힘들게 되었다. html 내에 설정된 table class에 폭에 해당하는 width를 지워도 해결이 안되었다. 혹시 몰라 표를 내용에 맞게 가 아니라 글 전체 화면에 맞게 변경하니 아래와 같이 보였다. 앞으로도 이렇게 하거나, 아니면 표를 만든 후 그림파일로 삽입하는 게 가독성 측면에서 깔끔할 거 같다. 

 

본문 표넓이 설정 변경전-변경후

본문 표설정에 따른 모바일 화면 변경

 

 

 

사라보고

 

-글쓰면서 내 글 내에 적절한 내용 배치를 위해 복사하기-붙여넣기를 많이 사용하게 된다. 그러면서 다크모드 변환에 영향을 주는 인라인 속성이 들어갈 수 있으니, 글을 쓰고 난 뒤 꼭 html모드에 들어가 변경을 해줘야겠다.

-소제목은 서식제외 띄어쓰기 포함 12자이내로 작성하자. 

-표는 전체넓이로 설정하고 필요 시 작성 후 그림파일로 삽입하자(이럴 경우, 가독성은 좋아지나 표 안에 있는 내용은 구글이 크롤 할 때 걸리지 않는 건 아닐까 걱정이 된다)

-소제목과 본문, 본문과 그림 또는 표 사이의 줄 간격 하나 정도의 공간이 있어야 된다. 안그러면 너무 빽빽하고 보기 안 좋다. 모바일 최적화 연동을 하지 않아 글씨가 PC와 동일하게 보이게 되는데 이때 줄 간격까지 좁으면 답답하고 읽기 싫어진다.