친절한효자손 취미생활

안녕하세요. 친절한효자손입니다. 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으로 변경하시고 저장하면 됩니다. 현재 기어베스트 티스토리에서 임시로 테스트중입니다. 구경해보고 싶다면 아래의 티스토리를 방문하시면 됩니다.

 

 

친절한효자손 기어베스트

친절한효자손이 전하는 기어베스트 최신 할인 쿠폰 및 세일 소식!

gearbestkorea.tistory.com

 

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

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

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 고생하시네요 항상 유용하게 잘쓰고 있습니다. 감사합니다.
    2020.12.19 05:24 신고
  2. 꾸준히 업데이트 해주셔서 감사합니다~
    2020.12.19 09:32 신고
  3. 업데이트 감사합니다. 특히 광고요^^
    2020.12.19 12:01 신고
  4. 우왕 2.2 잘쓰고 있다고 댓글남기려고 왔다가 업뎃 소식 듣고 가네요! 스킨 잘쓰고 있습니다 감사합니다~
    2020.12.20 17:45 신고
  5. 2.2 받아서 열심히 고친지 얼마 지나지 않았는데 벌써 업데이트라니...
    고생길 열렸네 싶으면서도 그만큼 사용자 의견을 고려해주시는 거니 감사할 따름입니다.
    근데 현재 기능은 스킨을 바꾸고 싶을 정도로 크게 끌리는 기능은 아니네요.
    바꾸느라 며칠간 고생한 걸 생각하니 당분간은 고치고 싶지 않기도 하고...
    하지만 3월에 배포할 예정이시니 그때되면 생각이 바뀔지도 모르겠네요.
    코드 백업만 잘 해두면 편집은 크게 어렵지 않을테니..
    그때 업데이트 되는 걸 보고 결정해야죠..
    감사합니다
    2020.12.21 01:06 신고
  6. 끊임없이 연구하시는 모습이 존경스럽습니다~~
    2020.12.21 23:05 신고
  7. 안녕하세요 효자손님. 스킨 잘 쓰고 있습니다. 다름이 아니라 구글에서 itemlistelement 가 없다고 고치라고 연락이 왔는데 검색해보니 브레드 크럼을 스킨에 적용하면 된다고 하더라구요.
    근데 스킨마다 적용 위치가 달라서 잘 모르겠습니다. 혹시 어디다 해야하는 지 알 수 있을까요?
    2020.12.22 17:51 신고
    • 안녕하세요. 그거 신경안써도 됩니다. 빈 카테고리가 있거나 최근 글 삭제를했거나 비공개로 변경했을경우에 발생하는 오류입니다.
      2020.12.22 17:56 신고
    • 아 그렇군요 감사합니다 ㅎㅎ
      2020.12.22 17:59 신고
  8. Favicon of https://donhoney.com
    고생이많으십니다 ㅎㅎ 업데이트는 환영이죠^^ 다양하고 수많은 사용자들의 피드백이 올테니, 그것을 바탕으로 업그레이드 해나가는것은 굉장히 좋은 일입니다. 감사할따름이죠.

    다름아니라 제가 2차도메인을 사용하고있는데, 댓글에 댓글을 달 시 필명을 입력하라고 나오더군요. 주인장이 댓글 직접 달아준것처럼 되질 않고, 익명의 또다른 이용자가 댓글을 단 것처럼 되더군요.. 티스토리 로그인이 되어있는 상태인데도요.. 1.5버전을 이용할때는 그렇지 않았는데, 2.2버전으로 업데이트하고나서 생기는 문제같습니다.

    2차도메인은 예전부터 사용중이었습니다. 혹시 업데이트 때 여유가 되신다면 부탁드리겠습니다 ㅎ
    2020.12.24 04:00 신고
    • 아마 우연의 일치일겁니다. 2차도메인 문제가 발생한 시점이랑 말입니다. 버전과는 상관 없을겁니다. 딱히 댓글 부분은 수정한게 없거든요. 2차도메인 문제는 티스토리측에서 해결해줘야 합니다. 아직 해결이 안 된 것 같군요.
      2020.12.24 18:27 신고
  9. 벌써 2주년이군요. 미리 축하드려요. 2.2버전도 너무 감사하게 잘쓰고 있습니다.
    2021.01.08 23:48 신고
  10. 뜨문뜨문 블로그 작성을 하면서 효자손님 스킨을 잘 애용하고 있습니다.
    근데 글씨를 굵게 하고 발행하면 실제로 올라간건 형관펜이 칠해지는데 이건 어떻게 하나요?
    새 에디터 버그인가 해서 구에디터로 쓰는데도 형광펜 칠해지는건 줄었는데 없어지진 않았습니다.
    해결방법 좀 알려주실 수 있나요
    2021.01.24 21:54 신고
  11. 꾸준한 업데이트.. 고맙습니다.

    얼마전에 내려받아 v2.2 사용중인데 요청드릴게 있어서 글 남깁니다.
    유뷰브영상을 iframe으로 본문내 삽입시 가로폭이 짤리는 문제때문에
    기존에도 수정버전을 내놓으신 것 같던데..
    이 수정코드가 실제본문폭과는 상관없이 가로 크기를 100%로 잡고 있는 것 같더군요.
    예로 들면,
    실제 본문 가로폭이 840인 경우(총 가로폭은 1200)
    유튜브영상 가로폭이 560으로 실 본문가로폭인 840보다 작은경우인데도
    본문폭과 동일하게 100%로 확대가 되는..
    뭐.. 이런 얘기입니다만..
    본문가로폭보다 작으면 실제소스코드 그대로..
    본문가로폭보다 크면 100%로..
    이런식으로 구현이 가능할런지 모르겠군요.
    즉,
    총 가로폭이 1200일때 본문가로폭이 840,
    유뷰브가로폭이 560이면 본문에 그대로 560으로 삽입
    유튜브가로폭이 840이상이어서 가로스크롤이 생기면 100%로 삽입..
    이런 형태로 구현이 가능할런지 궁금합니다.
    새벽부터 주절주절 말씀드려서 죄송하구요..
    지금처럼 유튜브가로를 100%로 하는것도 좋은 방법이고 만족하나
    이런 방법으로 구현이 가능하다면 더 낫지 않겠나 싶은 맘에 문의드려봅니다.
    2021.02.01 06:51 신고
    • 그런 경우는 미디어쿼리를 사용하면 가능합니다만 그럴바에야 지금처럼 가로는 100%로 본문에 알아서 맞춰지는게 낫지않나요? 딱히 미디어쿼리를 써야하는 이유를 모르겠습니다. 그리고 신형글쓰기 에디터의 경우 링크에서 엔터를 누르면 바로아래에 링크폼이 생성이되는데 그게 유튜브도가능해서 상당히 편리합니다. 반응형으로 바로 들어가지거든요.
      2021.02.01 12:21 신고
  12. 너무나 잘쓰고있습니다! 혹시 제가 효자스킨 제 블로그에 홍보글 하나 올려도 되나요??!!
    2021.02.02 13:10 신고
  13. 또 궁금한것 생겨서 문의드려봅니다.
    헤더와 푸터 부분의 색상만 따로 바꿀수는 없을까요?
    즉,
    "친절한효자손 취미생활" 및 검색창이 나오는 헤더부분과 "Copyleft" 나오는 푸터부분의 배경색상만 따로 바꿀수는 앖을런지요?
    지금은 설정부분에서 메인색상으로 지정된 색상에 따라 헤더 및 푸터, 카테고리 등 모두 같은색상으로 변경되고 있는데 이를 따로 지정할 수는 없을런지요?
    2021.02.02 13:57 신고
    • 친효스킨 커스텀 수정에 대해서 문의하시면 질문 내용을 파악하는데 그것이 친효스킨의 오류나 버그 문제 혹은 기능 변경에 대한 내용이라면 수정 방법에 대해 바로 안내해 드리고 있습니다. 그리고 다음 버전때 수정해 놓지요. 허나, 단순히 스타일을 변경하고자 하는 부분이라면 그건 죄송하지만 직접 적용하셔야 합니다. 왜냐하면 그런 질문들을 일일히 다 대응해드리기가 어렵기 때문입니다. 사용자가 많아서 개인별로 맞춤 적용할 수 없는 점 양해바랍니다.
      2021.02.02 14:06 신고
  14. 감사합니다~
    지금 잘 쓰고 있어요~
    그런데 페이지 로딩이 조금 느린 것 같은데
    메인이나 상세에 페이지 로딩 줄일려면 혹시 어떻게 해야 하는지 알 수 있나요?
    기능적인 부분이면 기능을 몇개 빼면서 테스트 해보고 싶어요~
    2021.02.13 23:28 신고
    • 로딩시간 늦추는 1등 공신은 광고입니다. 스킨에서 뺄건 더 이상 없어요.
      2021.02.13 23:34 신고
  15. 2.2 버전 잘쓰고 있습니다.
    신규버전이라니 기대 됩니다.

    새로운 마음으로 블로그를 추가로 하나 더 개설 하려고 하는데
    2.3 버전 적용하면 좋을 것 같습니다.

    감사합니다!!
    2021.02.27 16:41 신고
    • 내일 저녁때 라이브로 사용 방법을 필히 시청 부탁드립니다~
      2021.02.27 19:26 신고
  16. 오늘 밤이 기대됩니다. 얼른 2.3 버전 적용하고 싶어요!!
    2021.02.28 12:57 신고
  17. 언제나 친효스킨 감사히 쓰고있는 구독자 1인입니다.오늘 유튜브 라이브 꼭 시청하겠습니다. 감사합니다!
    2021.02.28 17:39 신고
loading