티스토리 무료 반응형 스킨! 친효스킨 v2.3 업데이트 안내

안녕하세요. 친절한효자손입니다. 2.2 버전을 업데이트한지도 얼마 되지 않았는데 또 버전을 업그레이드 하느냐고 불만을 토하시는 분들은 설마 안계시리라 생각하며 조심스럽게 이야기를 시작해보겠습니다. 친효스킨의 새로운 버전을 준비 중입니다. 뭐 놀랍지도 않은 소식이죠? 2.2 버전도 완벽하게 마무리했다고 생각했는데 사용자분들의 다양한 피드백을 받았습니다. 제 기준에서의 피드백은 사실 단순합니다. 단 한 사람이라도 뭔가 이런 부분에 대해 적용이 되었으면 좋겠다는 이야기를 듣게 되면 해당 내용이 친효스킨의 사용에 있어서 도움이 되는 부분인지를 집중 탐구합니다. 그리고 유익하다 싶으면 냅따 적용시킵니다. 이런 부분들을 최대한 반영했습니다. 그러면 어떤 부분들이 변경되는지 한번 살펴보겠습니다.

 

커버에 기본 썸네일 추가

리스트와 그리드 커버의 경우는 본문에 이미지가 없는 경우 그냥 글만 출력되었습니다. 썸네일 자리는 비어있는 상태로 말입니다. 문제는 갤러리 커버입니다. 갤러리, 갤러리2 커버의 경우는 본문에 썸네일이 없으면 아예 목록이 빠지게 됩니다. 사실 빠진다기 보다는 그냥 직선으로만 출력이 되어서 클릭이 어렵습니다. 이런 문제를 수정하기 위해서 기본 썸네일을 추가시켰습니다. 위의 이미지들을 살펴보시면 기본썸네일이 표시가 되고 갤러리, 갤러리2 커버의 목록에도 정상적으로 출력이 되고 있음을 알 수 있습니다.

 

기본 썸네일 이미지 변경 옵션 추가

친효스킨의 기본 썸네일은 잘 아시다시피 곰마크입니다. 이 기본 이미지를 자신만의 이미지로 변경 가능합니다. 과거에는 HTML에서 수동으로 변경을 해야만 했습니다. 이번 2.3 버전에서는 스킨편집 페이지에서 편리하게 변경이 가능합니다.

 

레이아웃 설정 카테고리에 대표 썸네일 기능을 추가했습니다. 이미지 업로드 버튼을 눌러서 원하는 대표 이미지 파일을 업로드 하시면 됩니다. 단 대표썸네일의 이미지는 되도록 작은 것을 추천합니다. 이유는 다음과 같습니다.

 

1. 대표 썸네일은 100% 원본 크기대로 출력됨 (커버 스타일별로 자동으로 맞춰지지 않음)

2. 용량이 커지면 스킨 로딩 시간도 그만큼 추가됨

 

그러므로 추천하는 대표 이미지의 사이즈는 120 × 120 px(픽셀) 입니다. 이미지 파일 포맷 방식은 gif를 추천합니다. 또한 백그라운드 색상은 흰색을 추천합니다.

 

댓글 설정 옵션 추가

스킨편집 페이지에 댓글에 대한 카테고리를 새롭게 추가했습니다. 기존 버전에서는 댓글의 색상만 설정이 가능했습니다. 2.3 버전부터는 좀 더 디테일한 설정이 가능합니다. 먼저 댓글창 ON / OFF는 원래 있던 기능인데 위치를 댓글 설정 카테고리로 변경했습니다.

 

댓글 정렬 순서는 말그대로 댓글의 정렬 방식을 예전 오리지널 방식인 작성순으로 할 것인지, 아니면 친효스킨만의 최근 작성 댓글이 가장 처음에 위치하게 할 것인지를 정하는 기능입니다.

 

댓글 폰트 크기는 말그대로 댓글의 텍스트 크기에 대한 설정입니다. 단 말풍선 안쪽의 텍스트 크기 설정만 가능합니다. 닉네임이며 아이콘 모양 크기는 변경 불가합니다. 왜냐하면 이건 정해진 위치가 있는데 크기 변경에 의해 위치가 틀어질 수 있기 때문입니다.

 

댓글 폰크 줄간격 또한 말풍선 안쪽의 줄간격을 설정하는 옵션입니다. 폰트 크기가 커지면 줄간격도 조금씩 늘려줘야 합니다. 안 그러면 윗줄과 아랫줄의 텍스트가 살짝씩 겹치게 될 겁니다.

 

본문 글꼴 변경 옵션 추가

본문 글꼴에 대한 문의가 심심찮게 접수되곤 했습니다. 사실 이건 설정을 넣지 않으려고 했습니다. 왜냐하면 현재의 글꼴이 가독성이 가장 좋다고 생각되었기 때문입니다. 하지만 티스토리는 어디까지나 자기만족이 최우선! 저 역시 컬럼에서 늘 외치는 부분이기도 합니다. 그래서 이번 2.3 버전에서 본문에 대한 글꼴 변경 옵션을 추가했습니다. 추가된 글꼴은 다음과 같습니다.

 

1. 이롭게바탕체

2. 본고딕

3. 기본글꼴

 

딱 이렇게 세개의 글꼴 변경만 가능합니다. 이유는 다양한 글꼴을 추가하려면 그만큼 글꼴 파일을 로드해야하는데 이것은 결국 스킨 속도와 직결되는 문제로 이어집니다. 어차피 본문은 하나의 글꼴을 사용하게 될텐데 그러면 나머지 불필요한 글꼴이 늘어나면 늘어날수록 본문 로딩 속도는 그만큼 늦어지게 될 것입니다. 위의 세 개의 글꼴 중에서 이롭게바탕체를 제외한 나머지는 티스토리에서 기본적으로 제공하는 글꼴입니다. 따라서 기존 버전의 글꼴과 차이는 사실상 없습니다.

 

차이를 굳이 찾자면 2.2 버전까지는 나눔고딕체를 사용했었습니다. 본문을 제외한 나머지 영역에 모두 나눔고딕체가 적용되어 있었습니다. 해당 글꼴이 티스토리의 기본 글꼴과 큰 차이가 없다는걸 알게 되었고 그로인해 친효스킨 2.3 버전부터는 나눔고딕체가 삭제됩니다. 필요가 없거든요.

 

Bold 처리된 글꼴들 삭제

방금 위에서 나눔고딕체를 삭제했다고 말씀 드렸죠? 이로 인하여 다소 어색한 굵게(Bold) 처리된 일부 폰트들을 전부 normal 상태로 변경했습니다.

 

모바일(스마트폰) 해상도에서 본문 상단 애드센스 가로 사이즈 최대 크기로 출력되도록 변경

다음은 애드센스 부분입니다. 기존 버전에서는 모바일 해상도에서의 본문 상단 애드센스 크기가 제한이 되어있었습니다. 최대 크기가 336px × 280px 으로 고정되어 있었습니다. 이 부분을 세로 300px로 고정시키고 가로 사이즈는 디스플레이 해상도에 맞춰지도록 설정했습니다.

 

이것이 기존 버전의 본문 상단 애드센스 크기였습니다.

 

친효스킨 2.3 버전에서는 이렇게 가로 사이즈가 디바이스의 가로 해상도 사이즈에 맞게 반응형으로 바뀌어 출력됩니다. 물론 일부 구간에서는 다시 기존대로 출력되기도 합니다. 또한 모바일(스마트폰)에서는 사이즈의 큰 차이가 발생하지 않습니다.

 

사이드바 링크 모듈 추가

사이드바에 다른 티스토리나 사이트를 추가할 수 있는 링크 모듈이 업데이트 됩니다. 이 모듈을 사용하면 자주 방문하는 사이트에 대해 편리하게 링크 걸기가 가능해집니다. 프로필 모듈 아래의 SNS 아이콘에는 없는 다른 소셜 커뮤니티에 대한 링크를 걸 수 있습니다. 하지만 너무 남발하면 오히려 보기 좋지 않으니 적당히 사용하시기 바랍니다.

 

사이드바 링크 추가 및 삭제는 관리자 페이지의 링크 카테고리에서 관리합니다.

 

이곳에서 링크 추가를 통해 원하는 URL과 이름을 등록하거나 필요없는경우 편리하게 삭제가 가능합니다.

 

다크모드 추가

친효스킨 다크모드가 추가됩니다. 허나 아직 미처 적용하지 못한 부분이 있을 수 있습니다. 이 기능은 사용자가 늘어날수록 많은 피드백을 받아 조금씩 업그레이드를 진행할 생각입니다. 다크모드는 친효스킨 기본 색상과 가장 잘 어울리도록 세팅되어있습니다. 따라서 친효스킨의 기본 색상을 변경하여 사용하시는 분들은 다크모드를 적용하면 일부 구간이 잘 보이지 않거나 어울리지 않을 수 있습니다.

 

다크모드는 기본적으로 OFF 상태입니다. 활성화하려면 스킨편집 페이지의 레이아웃 설정에서 다크모드 ON으로 변경하시고 저장하면 됩니다. 현재 기어베스트 티스토리에서 임시로 테스트중입니다. 구경해보고 싶다면 아래의 티스토리를 방문하시면 됩니다.

 

친절한효자손 기어베스트

 

스킨편집 페이지에서 추천글 모듈 설정 기능 추가

이 기능을 넣을지 말지 고민을 많이 했습니다. 하지만! HTML에 대해서 완전 모르시는 분들도 계실 수 있을 것 같아서 결국 구현하기로 결심했습니다. 이제 추천글 모듈을 스킨편집 화면에서 편하게 등록할 수 있습니다.

 

추천글 모듈의 편집창이 다소 길다는게 조금 단점이긴 합니다. 최대 5개의 목록을 생성할 수 있도록 설계했습니다. 그 이상의 추천글을 넣고자 하는 경우에는 종전 방법대로 HTML 수동 설정을 통해서 진행 가능합니다. 추천글 설정창에는 5가지 항목이 있습니다.

 

• 추천글 목록 버튼
• 추천글 URL
• 추천글 글 제목
• 추천글 뱃지 선택 (HOT/NEW)

 

먼저 가장 처음에 있는 추천글 모듈 버튼은 말그대로 사이드바에 추천글 모듈을 켜고 끄는 기능을 담당합니다. 기본적으로는 비활성화 상태입니다. 만약 사용을 원하신다면 이 버튼을 먼저 켜주시면 됩니다. 이후부터는 목록당 할당되는 기능입니다. 추천글1번부터 5번까지 있으니 사용을 원하시면 1번부터 차례로 사용하시면 됩니다.

 

추천글1~5 버튼은 각 목록을 켜고 끄는 버튼입니다. 만약 첫번째 추천글을 사용을 원하신다면 해당 기능을 켜주시면 됩니다. 이후에 밑에 있는 4가지 옵션들을 하나 하나 사용하시면 됩니다.

 

추천글 URL은 해당 목록을 눌렀을 때 이동하는 URL 주소를 입력하시면 됩니다.

 

추천글 글 제목에는 목록에 보여지는 텍스트를 입력하시면 됩니다.

 

추천글 HOT / NEW 뱃지는 둘 중 하나만 사용하시는것을 추천합니다. 이 버튼은 마케팅 효과가 있습니다. 추천글 목록 중에서도 좀 더 이목을 집중시킬 수 있습니다.

 

만약 추천글1, 추천글2를 모두 사용한다면 이런 식으로 두 개의 목록이 출력될 것입니다.

 

또한 사이드바 모듈이기 때문에 기존처럼 꾸미기 > 사이드바에서 원하는 위치로 드래그하여 위치 변경도 가능합니다. 스킨편집창에서도 ON/OFF가 가능하지만 사이드바 설정에서도 추천글 모듈을 빼고 넣을 수 있습니다.

 

스킨로딩 이미지 편집 기능 추가

스킨로딩의 기본 이미지는 제 트레이트 마스코트인 효자곰입니다. 그리고 효자곰 주위를 무언가가 뱅글 뱅글 돌지요. 효자곰 대신 여러분들께서 원하는 이미지를 별도로 지정할 수 있는 옵션을 추가했습니다. 또한 스킨 로딩 전체 이미지가 다소 크거나 작다고 생각되시면 이미지 사이즈 값을 변경하여 크기 조절이 가능합니다. 기본값이 1이므로 소수점으로 값을 올리거나 내려서 입력하시면 됩니다. 가령 키우려면 1.1이나 1.2 이런 식으로 올리고 크기를 줄이려면 0.9 혹은 0.8 정도로 값을 입력하면 됩니다.

 

그 밖에...

본문 공유 모듈에 사용되고 있는 png 파일의 이미지들을 모두 gif 포맷으로 변경했습니다. 또한 새로운 글쓰기 에디터에서 이미지를 가로로 배치 시 자막을 넣는 경우, 자막 스타일이 적용이 정상적으로 되지 않았던 문제를 수정했습니다. 나머지는 짜잘한 CSS 변경이 대부분입니다.

 

업데이트 예정일

친효스킨 2주년인 2021년 3월 1일에 배포를 계획하고 있습니다. 그 사이에 또 오류를 발견하거나 새로운 기능이 생각나서 추가하게 될 수도 있을겁니다. 그런 경우는 본 페이지에 꾸준히 내용을 업데이트 시켜놓겠습니다. 그러니 관심이 있으시면 본 페이지를 즐겨찾기(북마크) 하시어 신선한 소식을 받아가시기 바랍니다. 티스토리 반응형 스킨 중 최고가 되기 위해 부단한 노력과 정성을 쏟는 중입니다.

 

이번 2.3 버전에서는 꽤 많은 기능들이 추가됩니다. 정말이지 많은 신경과 관심을 쏟아부었습니다. 피드백 중 괜찮겠다 싶은 기능들은 싹 다 갈아넣었습니다. 그밖에 이제 잘 사용하지 않을 것 같은 기능들은 과감히 제거했습니다. 아무튼 사용해보시면 알 것입니다. 친효스킨을 한 번 사용하면 이제 다른 스킨은 불편해서 사용을 안 하게 될 것입니다. 그러면 많이 사용해 주시고 다양한 의견을 주시기 바랍니다. 감사합니다. 끝.