친효스킨 v2.4 업데이트 내용 안내
안녕하세요. 친절한효자손입니다. 친효스킨을 꾸준히 사랑해주셔서 감사합니다. 이번 9월에 업데이트 될 친효스킨 2.4 버전에 대한 상세한 내용을 전해드리려고 합니다. 생각보다 많은 부분이 수정되었습니다. 2.3 버전때도 더 이상 손 볼 곳은 없다고 생각했는데 많은 분들께서 피드백을 주시고 이로 인해 발생한 버그들이 꽤 있었습니다. 발견 즉시 열심히 수정을 하였습니다.
현재 머물고 계신 이곳! 친절한효자손 취미생활 티스토리에 친효스킨 2.4 버전이 설치되어 있습니다. 메인 화면을 가보시면 못 보던 커버 1종이 추가된걸 확인하실 수 있으실겁니다. 또한 사이드바에 디데이 모듈도 보이고 스트리밍 모듈도 보이는군요. 꽤 많은 부분이 발전하고 고쳐졌습니다. 특히 애드센스 부분도 많이 변모했습니다. 그러면 어떻게 업그레이드 되는지 자세히 살펴보겠습니다.
목차
스킨편집 화면 개편
기존에는 색상은 색상대로 따로 모았었는데 이제는 아예 영역별로 나뉘게 됩니다. 본문 설정에 대한것을 하나로 묶고 마찬가지로 레이아웃 설정도 한 공간에 모았습니다.
이런식으로 이제 하나의 영역에서 다양한 옵션들을 쉽게 조작할 수 있습니다.
태그 클라우드 추가
이전 버전까지는 태그 클라우드 기능이 없었습니다. 이는 티스토리에서 제공하는 기본 기능이기 때문에 사용의 유무를 떠나서 무조건 넣어야 하는 기능이었지요. 태그 자체를 워낙에 신경 안 쓰고 지내다보니 기본적인 부분을 놓치고 말았습니다. 그리하여 2.4 버전 때 태그 클라우드 기능을 추가합니다.
티스토리 관리자 페이지에 있는 꾸미기 > 메뉴에서 태그 검색 기능을 추가합니다.
그리고 해당 태그 옵션으로 들어가보면 위의 스크린샷 이미지처럼 태그 꾸러미들만 따로 살펴볼 수 있는 페이지가 나옵니다. 하지만 개인적으로는 태그 클라우드를 활용하여 콘텐츠를 소비할 방문자는 과연 몇 분이나 될런지 심히 의심됩니다. 따라서 거의 사용하지 않는 기능이 될 것 같습니다.
블로그 메뉴 기능 추가
위의 태그 클라우드 사용을 위해서는 메뉴 기능을 추가해야만 했습니다. 친효스킨은 메뉴 기능을 지원하지 않았습니다. 하지만 이제 메뉴 기능을 사용할 수 있습니다. 이 기능 또한 티스토리 기본 옵션이었기에 반드시 추가를 해야만 했습니다.
스킨편집 페이지에 들어가서 레이아웃 설정 부분을 살펴보시면 블로그메뉴라는 옵션을 확인할 수 있습니다. 기본적으로 이 기능은 OFF 상태입니다. 필요하신 분들만 활성화하여 사용하시면 됩니다.
활성화되면 스킨의 맨 왼쪽 상단에 이렇게 아이콘이 생성됩니다. 마우스를 올려보시면 메뉴 기능으로 설정한 기능들이 들어있음을 확인할 수 있을 것입니다. 메뉴 수정은 관리자 페이지의 꾸미기 > 메뉴에서 수정 가능합니다. 맨 처음 설명드린 태그클라우드도 여기에서 설정하는 것입니다.
인디케이터바 색상 설정
콘텐츠의 남은 양을 확인할 수 있는 인디케이터바의 색상을 설정할 수 있도록 수정했습니다.
스킨편집 화면에 있는 레이아웃 카테고리에서 수정 가능합니다. 인디케이터바 색상 부분의 16진수 핵사코드를 사용해 수정하시면 됩니다.
사이드바 모바일 보이기/숨기기 옵션 추가
사이드바의 공간이 너무 길어서 모바일에서는 숨기고 싶다는 의견이 있었습니다. 이 부분을 적극 반영하여 해당 옵션을 추가했습니다.
스킨편집 화면에 있는 레이아웃 카테고리에서 사이드바 모바일 옵션을 찾습니다. 보이기/숨기기 두 가지 선택지가 있으며 기본값은 보이기입니다. 따라서 모바일 해상도에서 사이드바를 숨기고 싶다면 숨기기를 선택하고 저장하시면 됩니다.
닉네임 옵션 추가
기본적으로 티스토리의 한 계정당 최대 5개의 티스토리 블로그를 동시에 운영할 수 있습니다. 그런데 한 번 설정한 닉네임은 이 다섯개의 티스토리에 동시 적용이 됩니다. 따로 적용하려면 수동으로 HTML을 수정할 수 밖에 없습니다. 이 부분을 개선했습니다.
스킨편집 화면에서 레이아웃 설정 카테고리를 살펴보시면 블로그닉네임이라는 옵션이 있습니다. 여기에 원하는 닉네임을 입력하면 해당 텍스트로 출력됩니다.
닉네임테스트라고 입력해 보겠습니다. 저장 후 결과를 살펴봅시다.
왼쪽은 오리지널 닉네임이고 오른쪽은 수정되어 적용된 닉네임입니다. 정상적으로 노출되고 있음을 확인할 수 있습니다.
또한 푸터 영역의 닉네임도 수정됩니다. 제작자 표시 부분은 당연히 그대로 보존됩니다.
본문 하단 수정
친효스킨 본문 하단에는 태그, 공유, 관련글 모듈이 있습니다. 이 부분을 사이드바처럼 관리할 수 있도록 수정했습니다.
꾸미기 > 사이드바로 들어가면 사이드바1과 2가 있습니다. 2는 스킨의 메인 페이지에 있는 바로 그 메인 사이드바이고 사이드바1이 본문 아래의 영역입니다. 따라서 필요한 모듈을 쉽게 추가하고 빼낼 수 있으며 위치 변경도 가능합니다. 가로로 긴 형태의 애드센스도 삽입 가능합니다. 하지만 비추천합니다. 본문 하단에 이미 애드센스를 사용하시는 분들이라면 말입니다. 가독성이 떨어집니다.
애드센스 승인코드 쉽게 삽입
이제 애드센스 승인 코드를 HTML편집에서 어렵게 넣을 필요가 없습니다. 스킨편집 페이지에서 쉽게 진행 가능합니다.
스킨편집 화면에 있는 애드센스(클라이언트) 설정 부분에서 클라이언트값만 입력하면 끝입니다. 예시로 번호 부분을 123123123이라고 입력해 보았습니다.
그리고 친효스킨을 구글 개발자도구를 사용하여 <head>안의 애드센스 스크립트 코드를 살펴봤습니다. 보시는 것처럼 정상적으로 애드센스 승인 스크립트 코드가 작동하고 있음을 확인할 수 있습니다.
TOC목차 색상 변경 옵션 추가
스킨편집 페이지에서 TOC 목차 모듈에 대한 색상을 편리하게 변경할 수 있는 옵션을 추가했습니다. TOC목차는 현재 본 페이지 위에 있는 목차를 의미합니다. 해당 목차의 색상을 위치별로 손쉽게 편집할 수 있습니다.
색상을 변경해가면서 어떤 영역이 어떻게 바뀌는지 쉽게 파악할 수 있습니다. 직접 변경해 보세요. 물론 TOC목차를 사용하지 않으시는 분들은 이 설정을 변경할일이 없겠지요?
실시간 라이브 방송 모듈 추가
가끔 실시간 방송을 하시는 분들도 친효스킨을 사용하시는 모양입니다. 스킨에 방송중임을 알리는 기능을 추가하고 싶다고 하셔서 한번 만들어 보았습니다. 왜냐하면 저도 가끔 가뭄에 콩 나듯 라이브 방송을 어쩌다 진행하기 때문입니다.
스킨편집 화면의 맨 아래에 위치한 스트리밍 설정 옵션입니다. 기본값은 방송종료 상태입니다.
왼쪽이 친효스킨 사이드바의 스트리밍 모듈의 기본 모습입니다. 방송종료 상태가 저 모습입니다. 이것을 방송중으로 변경하면 백그라운드가 초록색으로 변경됩니다.
모듈 타이틀과 스트리밍 URL을 입력해봤습니다. 유튜브/트위치 스트리밍 스위치는 아이콘 표시입니다. 현재 스트리밍중인 플랫폼을 선택하시면 됩니다. 아프라키는 일부러 뺐습니다. 아프리카는 혐오 콘텐츠가 너무 난무하는 플랫폼이기 때문입니다. 방송 제목도 입력해봤습니다. 그 결과는 다음과 같습니다.
이렇게 표시됩니다. 이 모듈을 클릭하면 입력해둔 URL로 새창이 뜨면서 이동됩니다. 실시간 방송을 하시는 분들에게는 매우 유용한 모듈이 될 것입니다.
메인폰트, 헤더라인, 푸터링크 색상 변경 옵션 추가
메인 테마 색상을 밝게 하시는 분들의 경우는 기본 글씨색이 흰색이다보니 글씨가 잘 보이지 않는 문제가 있었습니다. 그래서 이런 경우 글씨 색상을 변경하시면 문제는 해결이 됩니다. 해당 옵션을 레이아웃 설정 부분에 추가했으니 적극적으로 이용해 보시기 바랍니다.
커스텀 단축키 추가
티스토리 기본 단축키 중 하나는 Q키입니다. 관리자 화면과 메인 화면을 왔다 갔다 할 수 있는 편리한 단축키죠. 그래서 좀 더 편리하게 사용 가능하도록 커스텀 키 기능을 추가했습니다. W는 글쓰기, E는 홈으로 기능이 들어있는 단축키입니다. 단 티스토리 메인 화면에서만 동작합니다. 관리자 화면에서는 동작하지 않습니다.
디데이(D-Day) 모듈 추가
사용자 요청에 의해 디데이 모듈을 추가했습니다. 두 가지 기능이 포함됩니다. 하나는 등록한 날짜로부터 카운트가 되는 것과 나머지 하나는 등록한 날짜까지의 남은 일수를 계산해주는 기능입니다.
스킨편집 화면의 아래쪽으로 내려가보면 친효애드온 : 디데이 모듈 설정 옵션이 있습니다. 디데이텍스트를 제외한 모든 칸은 비어있는 상태입니다. 기본적으로 모든 기능은 켜진 상태입니다. 따라서 본인이 사용하고자 하는 기능만 활성화하시고 안 쓰는 기능은 꺼주시면 됩니다. 주제에는 목표를 하는 키워드를 입력하면 되고 연도(년)와 월, 일은 그에 맞는 숫자만 입력하면 됩니다. 디데이완료 텍스트는 디데이(~일 남음)의 카운트가 모두 완료되면 출력되는 텍스트를 입력하시면 됩니다. 또한 디데이완료 시 링크버튼을 켜서 혹시 해당 내용의 문서가 있다면 바로 갈 수 있는 기능도 추가했습니다. 디데이날에 링크버튼을 활성화하시면 됩니다. 디데이링크 URL에는 이동하고자 하는 문서번호 혹은 URL 주소를 입력하시고 디데이링크 텍스트는 그냥 비워두면 기본 스타일의 바로가기 아이콘으로 출력됩니다. 원하는 문구를 넣으면 해당 문구에 링크가 걸리게 됩니다.
사이드바의 디데이 모듈에 입력한 날짜에 따라 자동으로 계산되어 빨간색 라운드 박스에 일 수가 표시됩니다. 또한 디데이(~일 남음) 카운터의 경우에는 입력한 날짜가 되면 문구가 바뀌도록 설계되어있습니다. 바뀌는 문구도 원하는대로 입력 가능합니다.
디데이완료 링크에 대해서 좀 더 자세히 설명을 드리겠습니다. 이건 기본적으로 비활성화 상태입니다. 어떤 기능인지 알아야겠죠? 간단합니다. 디데이가 되었을 때 특정 페이지를 통해서 뭔가 알리고 싶다면 바로가기 아이콘을 문구 바로 오른쪽에 넣어서 방문자가 불편 없이 바로 확인할 수 있도록 유도하는 기능입니다. 디데이완료 링크버튼을 활성화 후 디데이링크 텍스트를 아무것도 입력하지 않은 결과는 다음과 같습니다.
보시는 것처럼 디데이 모듈에 링크 아이콘만 표시됩니다.
만약 텍스트를 입력한다면 어떨까요?
그러면 해당 텍스트가 그대로 입력되어 적용됩니다. 이 차이점이고 기능은 똑같습니다.
와이드바 커버 추가
새로운 커버 스타일을 1종 추가했습니다. 와이드바 배너를 연상케하는 스타일의 커버로 시원 시원한 디자인이 특징입니다. 게다가 마우스를 올렸을 때 다양한 애니메이션이 연출됩니다. 제목은 위에서 아래로 내려옴과 동시에 밑줄이 왼쪽에서 오른쪽으로 그어집니다. 본문의 내용 중 일부는 확대/축소, 카테고리는 왼쪽에서 오른쪽으로, 작성 날짜는 아래에서 위로 토글되는 애니메이션 기능이 들어있습니다. 또한 썸네일 배경은 1.07배 확대되며 커짐과 동시에 하얗게 변하는게 특징입니다.
이렇게 마우스를 올리면 변화합니다. 다른 커버 스타일과 마찬가지로 스킨편집 페이지에서 썸네일의 세로 사이즈를 사용자가 임의로 조정할 수 있습니다.
또한 와이드바 커버에는 반응형 디스플레이 애드센스를 배치할 수 있도록 설계하였습니다. 와이드바 커버 애드센스는 기본적으로 비활성화 상태입니다. 차후 애드센스 승인을 받으면 그때 활성화하시면 됩니다. 그리고 와이드바 커버에 사용할 애드센스 슬롯(Slot) 번호만 넣으면 됩니다. 간격은 와이드바의 목록 몇 개마다 애드센스를 배치할 것인지를 정의합니다. 기본값은 3입니다. 즉 목록 3개마다 애드센스가 하나씩 배치되는 구조입니다.
본문 상/하단 애드센스 적용 방식 변경
친효스킨 2.3 버전까지는 본문 상단의 애드센스를 수동 코드를 사용했습니다. 물론 실 사용자는 스킨편집 화면에서 슬롯 번호만 넣으면 간단하게 사용이 가능했습니다만 이 코드가 모두 수동으로 만들어진 것입니다. 스킨 설명에 보시면 반응형 광고를 만들어 슬롯값만 사용한다고 되어있습니다. 이 방식을 반응형 스킨에서 사용하게되면 전혀 문제가 없습니다. 단 아주 미약하게나마 부족한 부분은 있습니다.
바로 모바일 페이지에서의 애드센스입니다. 모바일 페이지는 URL 주소에 /m이 붙습니다. 스킨 설정에서 「모바일 페이지를 사용하지 않습니다」로 변경하면 /m 페이지로 들어올일은 거의 없습니다만 이따금씩 다음에서 메인 노출을 시켜주는 경우가 있을겁니다. 이럴때 들어오는 형태가 바로 모바일 페이집니다. 그러면 기존 애드센스 적용방식을 사용하게되면 다음 메인 노출로 진입하는 경우 애드센스 수익이 극대화되지 않습니다. 그래서 이 문제를 수정했습니다. 위의 스크린샷 이미지처럼 친효스킨 2.4 버전에는 모바일 URL 주소로 진입해도 본문 상단 애드센스가 노출되도록 설계되었습니다.
본문 하단 애드센스도 마찬가지입니다. 왼쪽은 모바일 페이지에서의 애드센스 모습이며 오른쪽은 친효스킨 상태의 애드센스입니다. 둘 다 정상적으로 노출되도록 설계했습니다.
설정 방법은 간단합니다. 티스토리 관리자 화면에서 애드센스 연동을 해주시고 본문 상단을 활성화만 해주시면 됩니다.
물론 기존에 사용해왔던 스킨 설정 페이지의 본문 상단 애드센스는 그대로 사용해야 합니다. 또한 2.4 버전부터 추가된 본문 하단 애드센스도 사용을 해주셔야 모든 세팅이 완료됩니다. 친효스킨 2.4 버전에서의 애드센스 광고 로드 방식은 다음과 같습니다.
-본문상단 : 해상도 799px 이하까지는 애드센스 연동 페이지의 광고가 노출됨
-본문상단 : 해상도 800px 이상부터는 스킨 설정 페이지의 애드센스가 노출됨
-본문하단 : 모바일 페이지에서는 애드센스 연동 페이지의 광고가, 친효스킨에서는 스킨 설정 페이지의 광고가 노출됨
참고하시기 바랍니다. 본문 하단에 대한 애드센스 변화는 없습니다. 종전과 동일합니다.
이 기능에 대해서는 호불호가 있을 듯 하여 기존 방식인 티스토리앱은 그냥 신경 쓰지 않고 스킨 설정 페이지의 애드센스만 계속해서 노출되기를 희망한다면 티스토리앱 본문상단 애드센스 비활성화를 켜주시면 됩니다.
헤더 우측 상단 기본 아이콘 ON/OFF 기능 추가
친효스킨의 우측 상단에 보시면 이렇게 아이콘 꾸러미가 있습니다. 왼쪽부터 홈으로 / 전체글 / 방명록 / 글쓰기 / 관리자 / 로그인-로그아웃 버튼입니다. 이 모든 버튼이 노출되는게 싫으시면 개별적으로 켜고 끌 수 있도록 업그레이드를 진행시켰습니다. 단 로그인-로그아웃 버튼은 제외입니다.
스킨편집 페이지에 가보시면 레이아웃 카테고리에 이렇게 헤더관련 버튼 목록이 있습니다. 여기에서 원치않는 아이콘을 꺼주시면 됩니다. 기본값은 모두 켜진 상태입니다.
사업자 정보 추가
티스토리에서 기본적으로 제공하는 플러그인 중 사업자 정보를 입력하는 모듈이 있습니다. 만약 티스토리를 통해서 자신이 진행하고 있는 사업에 대한 콘텐츠를 운영하고 싶으시면 이 기능을 활성화해야합니다. 특히 통신판매업 카테고리라면 더더욱 진행해야합니다.
바로 이 기능입니다. 본 플러그인의 활성화를 위해서 눌러보시면 다음의 정보를 입력하게 되어있습니다.
필수 입력 부분은 통신판매신고번호를 제외하고 모두 입력해야합니다. 다 입력했다면 적용버튼을 누릅니다.
그러면 본문의 공감버튼 꾸러미 아래에 사업자 정보 표시 메뉴가 생성되고 기본적으로 접혀있는 상태입니다.
눌러보시면 플러그인에 입력했던 부분들이 가로로 인라인 정렬되어 노출됩니다. 개인적으로는 이 부분이 좀 가독성도 떨어지고 바로 바로 사업자 정보를 확인할 수 없다는 단점으로 많이 와닿았습니다. 그래서 친효스킨 2.4 버전에서 사업자 정보에 대한 옵션을 추가했습니다.
스킨편집 페이지에 가보시면 사업자 정보 설정 옵션을 확인할 수 있습니다. 입력 항목은 플러그인과 동일합니다. 사업자 정보 버튼을 먼저 켜줍니다. 그리고 나머지 항목을 입력합니다. 통신판매신고번호만 따로 ON / OFF 버튼을 만들었는데 이유는 플러그인과 같습니다. 티스토리를 이용하는 모든 사업자가 통신판매업으로 운영하시지는 않을 것이니까요. 그래서 해당 옵션을 추가한 것입니다.
입력 완료 후에는 사이드바 프로필 모듈의 SNS 아이콘 아래에 사업자 정보가 표시됩니다.
TOP버튼 세로축 위치 수정 옵션 추가
레이아웃 설정에 TOP버튼의 세로축에 대한 위치를 수정할 수 있는 옵션을 추가했습니다. 이유는 다음과 같습니다.
이제 PC 해상도에서도 앵커광고가 노출되도록 애드센스가 변경된건 아실겁니다. 문제는 애드센스의 앵커 광고가 하단에서 나타날 때입니다. 위의 이미지에서 빨간색 영역으로 표시된게 바로 앵커광고입니다. 해당 앵커광고의 세로크기만큼 푸터 영역이 위로 밀리는데 이렇게되면 TOP버튼도 가려버리게 됩니다. 또한 TOP버튼의 위치와 애드센스 광고 위치가 겹쳐버리고 이것은 곧 애드센스 정책위반으로 연결될 위험이 있습니다. 따라서 부득이하게 수동으로 TOP버튼의 위치를 수정할 수 밖에 없었습니다. 이런 불편함을 최소화하고자 TOP버튼의 세로 위치를 변경할 수 있는 옵션을 레이아웃 설정에 추가했습니다.
스킨편집 페이지의 레이아웃 설정을 살펴보시면 TOP버튼 세트 세로축 위치 설정에 대한 옵션이 있습니다. 기본값은 220px인데 이 뜻은 스킨의 가장 밑바닥부터 위로 220px 위치만큼 떠 있는 상태라는 의미입니다. 이전 스크린샷의 분홍색 화살표가 그것입니다. 즉 Height 값이 바닥으로부터 220px 위치인 것입니다. TOP버튼의 가장 밑인 Buttom과 스킨 가장 밑바닥 사이의 간격을 조절한다고 이해하시면 될 것 같습니다. 참고로 기본값인 220px은 애드센스 앵커 광고의 최대 광고 크기를 고려해서 입력한 값입니다.
그 밖의 소소한 변화
-스킨 로딩 태그를 <body> 바로 뒤로 위치를 수정했습니다.
-본문 리스트 기능의 2단형 이상 적용이 제대로 되지 않던 문제를 수정했습니다.
-친효애드온의 본문 중간 수동 링크 CSS 스타일을 모두 제거했습니다. 사용량이 거의 없기 때문입니다.
-커버 스타일 중 직접 입력 시 내용과 URL 부분이 정상적으로 출력되지 않았던 문제를 수정했습니다. 단 내용 부분은 아무리 많이 입력해도 최대 2줄까지만 노출되도록 설정했습니다.
-사이드바 카테고리의 글 개수 스타일을 변경했습니다.
-사이드바 글보관함의 글 개수 스타일을 변경했습니다.
-친효애드온 : 본문 관련글 모듈 (rgyTextBox 관련 클래스) CSS 삭제
-친효애드온 : DIV 커스텀 박스 그라데이션에서 단색으로 CSS 변경
마무리
친효스킨은 앞으로도 무한히 업그레이드가 될 것입니다. 그리고 친효스킨2도 생각하고 있습니다. 친효스킨2의 경우는 초단순하게 제작할 계획입니다. 최대한 스킨편집에서 수정가능한 옵션들을 넣지 않을 생각입니다. 친효스킨의 순정 버전이라고 생각하시면 이해가 빠를 것 같습니다. 정 수정하려면 사용자가 임의로 HTML를 하나 하나 커스텀 할 수 밖에 없을 것입니다. 제작 일정은 미정입니다. 그냥 상상만 하고 있어요. 언제 시작할지는 아무도 모릅니다. 저도 모릅니다. 하지만 언젠가는 만들 것입니다. 이건 확실합니다. 그때까지는 친효스킨을 열심히 사용해주시기 바랍니다. 감사합니다. 끝.
친효스킨 다운로드 / 사용법 / 업데이트 일지
드디어 친효스킨을 만들었습니다. 사용자가 원하는대로 스타일을 꾸며서 커스텀하기 쉬운 스킨 입니다. 여기에 애드센스는 구석구석 삽입할 수 있으며 쉽게 적용됩니다. 모바일이든 PC에서든
rgy0409.tistory.com
