loading

친절한효자손 취미생활

안녕하세요. 친절한효자손입니다. 친효스킨을 꾸준히 사랑해주셔서 감사합니다. 이번 9월에 업데이트 될 친효스킨 2.4 버전에 대한 상세한 내용을 전해드리려고 합니다. 생각보다 많은 부분이 수정되었습니다. 2.3 버전때도 더 이상 손 볼 곳은 없다고 생각했는데 많은 분들께서 피드백을 주시고 이로 인해 발생한 버그들이 꽤 있었습니다. 발견 즉시 열심히 수정을 하였습니다.

 

현재 머물고 계신 이곳! 친절한효자손 취미생활 티스토리에 친효스킨 2.4 버전이 설치되어 있습니다. 메인 화면을 가보시면 못 보던 커버 1종이 추가된걸 확인하실 수 있으실겁니다. 또한 사이드바에 디데이 모듈도 보이고 스트리밍 모듈도 보이는군요. 꽤 많은 부분이 발전하고 고쳐졌습니다. 특히 애드센스 부분도 많이 변모했습니다. 그러면 어떻게 업그레이드 되는지 자세히 살펴보겠습니다.

 

목차

     

 

스킨편집 화면 개편

기존에는 색상은 색상대로 따로 모았었는데 이제는 아예 영역별로 나뉘게 됩니다. 본문 설정에 대한것을 하나로 묶고 마찬가지로 레이아웃 설정도 한 공간에 모았습니다.

 

보기 좋아진 친효스킨 편집 화면

이런식으로 이제 하나의 영역에서 다양한 옵션들을 쉽게 조작할 수 있습니다.

 

태그 클라우드 추가

이전 버전까지는 태그 클라우드 기능이 없었습니다. 이는 티스토리에서 제공하는 기본 기능이기 때문에 사용의 유무를 떠나서 무조건 넣어야 하는 기능이었지요. 태그 자체를 워낙에 신경 안 쓰고 지내다보니 기본적인 부분을 놓치고 말았습니다. 그리하여 2.4 버전 때 태그 클라우드 기능을 추가합니다.

 

티스토리 관리자 페이지에 있는 꾸미기 > 메뉴에서 태그 검색 기능을 추가합니다.

 

그리고 해당 태그 옵션으로 들어가보면 위의 스크린샷 이미지처럼 태그 꾸러미들만 따로 살펴볼 수 있는 페이지가 나옵니다. 하지만 개인적으로는 태그 클라우드를 활용하여 콘텐츠를 소비할 방문자는 과연 몇 분이나 될런지 심히 의심됩니다. 따라서 거의 사용하지 않는 기능이 될 것 같습니다.

 

블로그 메뉴 기능 추가

위의 태그 클라우드 사용을 위해서는 메뉴 기능을 추가해야만 했습니다. 친효스킨은 메뉴 기능을 지원하지 않았습니다. 하지만 이제 메뉴 기능을 사용할 수 있습니다. 이 기능 또한 티스토리 기본 옵션이었기에 반드시 추가를 해야만 했습니다.

 

스킨편집 페이지에 들어가서 레이아웃 설정 부분을 살펴보시면 블로그메뉴라는 옵션을 확인할 수 있습니다. 기본적으로 이 기능은 OFF 상태입니다. 필요하신 분들만 활성화하여 사용하시면 됩니다.

 

활성화되면 스킨의 맨 왼쪽 상단에 이렇게 아이콘이 생성됩니다. 마우스를 올려보시면 메뉴 기능으로 설정한 기능들이 들어있음을 확인할 수 있을 것입니다. 메뉴 수정은 관리자 페이지의 꾸미기 > 메뉴에서 수정 가능합니다. 맨 처음 설명드린 태그클라우드도 여기에서 설정하는 것입니다.

 

인디케이터바 색상 설정

콘텐츠의 남은 양을 확인할 수 있는 인디케이터바의 색상을 설정할 수 있도록 수정했습니다.

 

스킨편집 화면에 있는 레이아웃 카테고리에서 수정 가능합니다. 인디케이터바 색상 부분의 16진수 핵사코드를 사용해 수정하시면 됩니다.

 

사이드바 모바일 보이기/숨기기 옵션 추가

사이드바의 공간이 너무 길어서 모바일에서는 숨기고 싶다는 의견이 있었습니다. 이 부분을 적극 반영하여 해당 옵션을 추가했습니다.

 

스킨편집 화면에 있는 레이아웃 카테고리에서 사이드바 모바일 옵션을 찾습니다. 보이기/숨기기 두 가지 선택지가 있으며 기본값은 보이기입니다. 따라서 모바일 해상도에서 사이드바를 숨기고 싶다면 숨기기를 선택하고 저장하시면 됩니다.

 

닉네임 옵션 추가

기본적으로 티스토리의 한 계정당 최대 5개의 티스토리 블로그를 동시에 운영할 수 있습니다. 그런데 한 번 설정한 닉네임은 이 다섯개의 티스토리에 동시 적용이 됩니다. 따로 적용하려면 수동으로 HTML을 수정할 수 밖에 없습니다. 이 부분을 개선했습니다.

 

스킨편집 화면에서 레이아웃 설정 카테고리를 살펴보시면 블로그닉네임이라는 옵션이 있습니다. 여기에 원하는 닉네임을 입력하면 해당 텍스트로 출력됩니다.

 

닉네임테스트라고 입력해 보겠습니다. 저장 후 결과를 살펴봅시다.

 

왼쪽은 오리지널 닉네임이고 오른쪽은 수정되어 적용된 닉네임입니다. 정상적으로 노출되고 있음을 확인할 수 있습니다.

 

또한 푸터 영역의 닉네임도 수정됩니다. 제작자 표시 부분은 당연히 그대로 보존됩니다.

 

본문 하단 수정

친효스킨 본문 하단에는 태그, 공유, 관련글 모듈이 있습니다. 이 부분을 사이드바처럼 관리할 수 있도록 수정했습니다.

 

꾸미기 > 사이드바로 들어가면 사이드바1과 2가 있습니다. 2는 스킨의 메인 페이지에 있는 바로 그 메인 사이드바이고 사이드바1이 본문 아래의 영역입니다. 따라서 필요한 모듈을 쉽게 추가하고 빼낼 수 있으며 위치 변경도 가능합니다. 가로로 긴 형태의 애드센스도 삽입 가능합니다. 하지만 비추천합니다. 본문 하단에 이미 애드센스를 사용하시는 분들이라면 말입니다. 가독성이 떨어집니다.

 

애드센스 승인코드 쉽게 삽입

이제 애드센스 승인 코드를 HTML편집에서 어렵게 넣을 필요가 없습니다. 스킨편집 페이지에서 쉽게 진행 가능합니다.

 

스킨편집 화면에 있는 애드센스(클라이언트) 설정 부분에서 클라이언트값만 입력하면 끝입니다. 예시로 번호 부분을 123123123이라고 입력해 보았습니다.

 

그리고 친효스킨을 구글 개발자도구를 사용하여 <head>안의 애드센스 스크립트 코드를 살펴봤습니다. 보시는 것처럼 정상적으로 애드센스 승인 스크립트 코드가 작동하고 있음을 확인할 수 있습니다.

 

TOC목차 및 관련글 모듈 색상 변경 옵션 추가

스킨편집 페이지에서 TOC 목차 모듈에 대한 색상을 편리하게 변경할 수 있는 옵션을 추가했습니다.

 

이 부분입니다. 색상을 변경해가면서 어떤 영역이 어떻게 바뀌는지 쉽게 파악할 수 있습니다.

 

실시간 라이브 방송 모듈 추가

가끔 실시간 방송을 하시는 분들도 친효스킨을 사용하시는 모양입니다. 스킨에 방송중임을 알리는 기능을 추가하고 싶다고 하셔서 한번 만들어 보았습니다. 왜냐하면 저도 가끔 가뭄에 콩 나듯 라이브 방송을 어쩌다 진행하기 때문입니다.

 

스킨편집 화면의 맨 아래에 위치한 스트리밍 설정 옵션입니다. 기본값은 방송종료 상태입니다.

 

왼쪽이 친효스킨 사이드바의 스트리밍 모듈의 기본 모습입니다. 방송종료 상태가 저 모습입니다. 이것을 방송중으로 변경하면 백그라운드가 초록색으로 변경됩니다.

 

모듈 타이틀과 스트리밍 URL을 입력해봤습니다. 유튜브/트위치 스트리밍 스위치는 아이콘 표시입니다. 현재 스트리밍중인 플랫폼을 선택하시면 됩니다. 아프라키는 일부러 뺐습니다. 아프리카는 혐오 콘텐츠가 너무 난무하는 플랫폼이기 때문입니다. 방송 제목도 입력해봤습니다. 그 결과는 다음과 같습니다.

 

이렇게 표시됩니다. 이 모듈을 클릭하면 입력해둔 URL로 새창이 뜨면서 이동됩니다. 실시간 방송을 하시는 분들에게는 매우 유용한 모듈이 될 것입니다.

 

메인폰트, 헤더라인, 푸터링크 색상 변경 옵션 추가

메인 테마 색상을 밝게 하시는 분들의 경우는 기본 글씨색이 흰색이다보니 글씨가 잘 보이지 않는 문제가 있었습니다. 그래서 이런 경우 글씨 색상을 변경하시면 문제는 해결이 됩니다. 해당 옵션을 레이아웃 설정 부분에 추가했으니 적극적으로 이용해 보시기 바랍니다.

 

커스텀 단축키 추가

티스토리 기본 단축키 중 하나는 Q키입니다. 관리자 화면과 메인 화면을 왔다 갔다 할 수 있는 편리한 단축키죠. 그래서 좀 더 편리하게 사용 가능하도록 커스텀 키 기능을 추가했습니다. W는 글쓰기, E는 홈으로 기능이 들어있는 단축키입니다. 단 티스토리 메인 화면에서만 동작합니다. 관리자 화면에서는 동작하지 않습니다.

 

디데이(D-Day) 모듈 추가

사용자 요청에 의해 디데이 모듈을 추가했습니다. 두 가지 기능이 포함됩니다. 하나는 등록한 날짜로부터 카운트가 되는 것과 나머지 하나는 등록한 날짜까지의 남은 일수를 계산해주는 기능입니다.

 

스킨편집 화면의 아래쪽으로 내려가보면 친효애드온 : 디데이 모듈 설정 옵션이 있습니다. 디데이텍스트를 제외한 모든 칸은 비어있는 상태입니다. 기본적으로 모든 기능은 켜진 상태입니다. 따라서 본인이 사용하고자 하는 기능만 활성화하시고 안 쓰는 기능은 꺼주시면 됩니다. 주제에는 목표를 하는 키워드를 입력하면 되고 연도(년)와 월, 일은 그에 맞는 숫자만 입력하면 됩니다. 디데이완료 텍스트는 디데이(~일 남음)의 카운트가 모두 완료되면 출력되는 텍스트를 입력하시면 됩니다.

 

사이드바의 디데이 모듈에 입력한 날짜에 따라 자동으로 계산되어 빨간색 라운드 박스에 일 수가 표시됩니다. 또한 디데이(~일 남음) 카운터의 경우에는 입력한 날짜가 되면 문구가 바뀌도록 설계되어있습니다. 바뀌는 문구도 원하는대로 입력 가능합니다. 아직 초기 버전이기에 사용자의 피드백을 받아 더 발전시키도록 하겠습니다.

 

와이드바 커버 추가

새로운 커버 스타일을 1종 추가했습니다. 와이드바 배너를 연상케하는 스타일의 커버로 시원 시원한 디자인이 특징입니다. 게다가 마우스를 올렸을 때 다양한 애니메이션이 연출됩니다. 제목은 위에서 아래로 내려옴과 동시에 밑줄이 왼쪽에서 오른쪽으로 그어집니다. 본문의 내용 중 일부는 확대/축소, 카테고리는 왼쪽에서 오른쪽으로, 작성 날짜는 아래에서 위로 토글되는 애니메이션 기능이 들어있습니다. 또한 썸네일 배경은 1.07배 확대되며 커짐과 동시에 하얗게 변하는게 특징입니다.

 

이렇게 마우스를 올리면 변화합니다. 다른 커버 스타일과 마찬가지로 스킨편집 페이지에서 썸네일의 세로 사이즈를 사용자가 임의로 조정할 수 있습니다.

 

또한 와이드바 커버에는 반응형 디스플레이 애드센스를 배치할 수 있도록 설계하였습니다. 와이드바 커버 애드센스는 기본적으로 비활성화 상태입니다. 차후 애드센스 승인을 받으면 그때 활성화하시면 됩니다. 그리고 와이드바 커버에 사용할 애드센스 슬롯(Slot) 번호만 넣으면 됩니다. 간격은 와이드바의 목록 몇 개마다 애드센스를 배치할 것인지를 정의합니다. 기본값은 3입니다. 즉 목록 3개마다 애드센스가 하나씩 배치되는 구조입니다.

 

본문 상/하단 애드센스 적용 방식 변경

친효스킨 2.3 버전까지는 본문 상단의 애드센스를 수동 코드를 사용했습니다. 물론 실 사용자는 스킨편집 화면에서 슬롯 번호만 넣으면 간단하게 사용이 가능했습니다만 이 코드가 모두 수동으로 만들어진 것입니다. 스킨 설명에 보시면 반응형 광고를 만들어 슬롯값만 사용한다고 되어있습니다. 이 방식을 반응형 스킨에서 사용하게되면 전혀 문제가 없습니다. 단 아주 미약하게나마 부족한 부분은 있습니다.

 

바로 모바일 페이지에서의 애드센스입니다. 모바일 페이지는 URL 주소에 /m이 붙습니다. 스킨 설정에서 「모바일 페이지를 사용하지 않습니다」로 변경하면 /m 페이지로 들어올일은 거의 없습니다만 이따금씩 다음에서 메인 노출을 시켜주는 경우가 있을겁니다. 이럴때 들어오는 형태가 바로 모바일 페이집니다. 그러면 기존 애드센스 적용방식을 사용하게되면 다음 메인 노출로 진입하는 경우 애드센스 수익이 극대화되지 않습니다. 그래서 이 문제를 수정했습니다. 위의 스크린샷 이미지처럼 친효스킨 2.4 버전에는 모바일 URL 주소로 진입해도 본문 상단 애드센스가 노출되도록 설계되었습니다.

 

본문 하단 애드센스도 마찬가지입니다. 왼쪽은 모바일 페이지에서의 애드센스 모습이며 오른쪽은 친효스킨 상태의 애드센스입니다. 둘 다 정상적으로 노출되도록 설계했습니다.

 

설정 방법은 간단합니다. 티스토리 관리자 화면에서 애드센스 연동을 해주시고 본문 상단을 활성화만 해주시면 됩니다.

 

물론 기존에 사용해왔던 스킨 설정 페이지의 본문 상단 애드센스는 그대로 사용해야 합니다. 또한 2.4 버전부터 추가된 본문 하단 애드센스도 사용을 해주셔야 모든 세팅이 완료됩니다. 친효스킨 2.4 버전에서의 애드센스 광고 로드 방식은 다음과 같습니다.

 

-본문상단 : 해상도 799px 이하까지는 애드센스 연동 페이지의 광고가 노출됨

-본문상단 : 해상도 800px 이상부터는 스킨 설정 페이지의 애드센스가 노출됨

-본문하단 : 모바일 페이지에서는 애드센스 연동 페이지의 광고가, 친효스킨에서는 스킨 설정 페이지의 광고가 노출됨

 

참고하시기 바랍니다. 본문 하단에 대한 애드센스 변화는 없습니다. 종전과 동일합니다.

 

그 밖에...

-스킨 로딩 태그를 <body> 바로 뒤로 위치를 수정했습니다.

-본문 리스트 기능의 2단형 이상 적용이 제대로 되지 않던 문제를 수정했습니다.

-친효애드온의 본문 중간 수동 링크 CSS 스타일을 모두 제거했습니다. 사용량이 거의 없기 때문입니다.

-커버 스타일 중 직접 입력 시 내용과 URL 부분이 정상적으로 출력되지 않았던 문제를 수정했습니다. 단 내용 부분은 아무리 많이 입력해도 최대 2줄까지만 노출되도록 설정했습니다.

-사이드바 카테고리의 글 개수 스타일을 변경했습니다.

-사이드바 글보관함의 글 개수 스타일을 변경했습니다.

 

마무리

친효스킨은 앞으로도 무한히 업그레이드가 될 것입니다. 그리고 친효스킨2도 생각하고 있습니다. 친효스킨2의 경우는 초단순하게 제작할 계획입니다. 최대한 스킨편집에서 수정가능한 옵션들을 넣지 않을 생각입니다. 친효스킨의 순정 버전이라고 생각하시면 이해가 빠를 것 같습니다. 정 수정하려면 사용자가 임의로 HTML를 하나 하나 커스텀 할 수 밖에 없을 것입니다. 제작 일정은 미정입니다. 그냥 상상만 하고 있어요. 언제 시작할지는 아무도 모릅니다. 저도 모릅니다. 하지만 언젠가는 만들 것입니다. 이건 확실합니다. 그때까지는 친효스킨을 열심히 사용해주시기 바랍니다. 감사합니다. 끝.

 

친효스킨 다운로드 / 사용법 / 업데이트 일지

 

친효스킨 다운로드 / 사용법 / 업데이트 일지

드디어 친효스킨을 만들었습니다. 사용자가 원하는대로 스타일을 꾸며서 커스텀하기 쉬운 스킨 입니다. 여기에 애드센스는 구석구석 삽입할 수 있으며 쉽게 적용됩니다. 모바일이든 PC에서든

rgy0409.tistory.com

공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 허억허억 9월까지 기다릴수가 없습니다. 너무 기대가 되는군요 흐흐흐흐!!
    2021.06.25 00:04 신고
  2. 안녕하세요? 친효님! 공유해주신 친효스킨 항상 감사히 쓰고 있습니다
    한 가지 질문이 있는데요, 친효 스킨에 D-day 기능을 넣을 순 없나요?
    2021.07.04 17:57 신고
    • 안녕하세요. 디데이라함은 구체적으로 카운터를 의미하는 것인가요? 오늘부터 1일♥ 이런걸 뜻하나요?
      2021.07.05 03:05 신고
  3. '남은 수능일수 D-130' <- 이런 것이요
    2021.07.05 07:08 신고
    • 아하. 디데이 모듈도 괜찮은 것 같군요. 한번 연구해 보겠습니다.
      2021.07.05 18:05 신고
    • 디데이 모듈 추가 성공했습니다. https://gearbestkorea.tistory.com/ 이곳에서 미리 볼 수 있습니다. 사이드바의 프로필 모듈 바로 아래에 위치해있으며 주제와 날짜를 스킨편집 화면에서 편리하게 입력 가능하도록 설계했습니다. 친효스킨 v2.4에 추가됩니다. 좋은 의견 감사합니다.
      2021.07.05 22:19 신고
  4. 감사합니다
    2021.07.05 22:20 신고
  5. 스킨 너무 잘 쓰고 있어요, 업데이트 기대하고 있습니다 :D!
    2021.07.11 09:45 신고
  6. 어제 테스트 해보면서 인디케이터바 색상 설정란을 찾고있었는데 2.4에 추가되는군요 기대됩니다. ㅎㅎ
    와이드바 커버 추가 부분도 좋은 기능이라 생각됩니다.
    본문에 있는 와이드바 커버부분에 화이트BG에 텍스트 정보가 있는데, 추후 블랙BG에 화이트 텍스트 정보도 계획이 있으신지 궁금합니다.
    2021.07.26 18:22 신고
    • 그건 다크모드에 적용되어 있어요. 다른커버도 마찬가지로요.
      2021.07.26 18:49 신고