친절한효자손 취미생활

안녕하세요, 친절한효자손 입니다. 부지러너 분들을 위해서 친효스킨 2.0을 배포는 했으나 공식 설명서가 없어서 조금 어려워하시는 분들이 계시는 것 같습니다. 그래서 아예 설명서를 글로 만들어 놓도록 하겠습니다. 이 내용을 보시고 차근 차근 적용하시면 될 것 같습니다.

 

목차

     

 

친효스킨 2.0에서 달라진 점

친효스킨 1.7X 까지는 커버 기능이 없었습니다. 또한 인덱스 페이지의 목록 구성 부분도 빠진 상태였습니다. 그리고 몇 가지 자잘한 오류들이 숨어있었습니다. 이번 2.0에서는 정말 많은 사용자 편의성 부분이 개선됩니다. 또한 기존 친효스킨 사용방법을 그대로 계승한 것이므로 혹시 친효스킨이 이번에 처음이시라면 꼭 아래의 글과 같이 읽어주시기 바랍니다.

 

 

최신 글 (인덱스 페이지) 목록 기능

이전 버전까지는 목록 기능이 없었습니다. 그래서 최신글 인덱스 페이지에 목록 기능을 추가했습니다. 가장 먼저 할 일은 아래와 같이 변경해 주시는 것 입니다.

 

홈 설정의 목록 구성 요소는 내용만으로, 기본 설정의 목록 구성 요소는 목록만으로 설정하시고 저장하시면 됩니다. 매우 간편합니다.

 

위의 스크린샷 이미지가 바로 목록만 스타일 입니다. 티스토리 내에서 검색을 했을 때, 혹은 월별 문서를 살펴볼 경우에, 또는 카테고리별로 보기를 진행할 경우 이런 식의 스타일로 목록이 나타납니다. 기존에는 인덱스 페이지와 동일했으나 이제 간단하게 목록화 되어 출력되게 변경할 수 있습니다. 다시 기존 스타일대로 만들고 싶다면, 그러니까 친효스킨 인덱스 페이지 같은 스타일로 만들고 싶다면 목록 구성 요소를 "내용만"으로 변경하시면 됩니다.

 

커버 기능

드디어 친효스킨에도 커버 기능을 추가했습니다. 이제 메인화면을 커버 아이템을 추가해서 더욱 풍부한 내용으로 채울 수 있다는 막강한 장점이 생겼습니다. 최신글 목록으로도 설정 가능하며 조회수가 많은 글 순으로도 배치 가능합니다. 또한 랜덤으로 추천글처럼 티스토리 에디터가 직접 원하는 글을 따로 골라서 묶을수도 있습니다. 게다가 카테고리별 글 배치도 가능 합니다. 여기에서 끝이 아닙니다. 완전 커스텀 글 목록도 가능 합니다. 예를 들어서 제가 작성한 글이 아닌, 외부의 사이트에 대한 페이지를 목록에 추가할 수 있습니다. 이를테면 반디집 다운로드 페이지를 목록화하여 만들 수 있다는 이야기 입니다. 커버 페이지가 적용된 예시는 현재 친절한효자손 취미생활 티스토리에도 적용되어 있습니다. 그러면 사용 방법을 알아보겠습니다.

 

스킨 편집에 들어갑니다. 그러면 오른쪽에 이렇게 최신글 / 커버를 선택할 수 있는 옵션 메뉴가 있습니다. 여기에서는 커버를 선택 합니다. 지금 제 경우는 이미 설정이 되어 있어서 3개의 커버 아이템이 등록되어 있는 상태지만 처음 세팅하시는 여러분들의 경우는 2번의 커버 아이템 추가 버튼만 덩그러니 있을 겁니다. 2번을 눌러줍니다.

 

커버 아이템 부분은 어차피 리스트 하나 뿐이어서 그대로 둡니다. 우리가 수정해야 할 부분은 1번부터 4번까지 입니다. 하나하나 설명을 드리겠습니다.

 

1. 타이틀 : 커버의 소제목을 정합니다.

2. 콘텐츠 : 커버 아이템으로 사용할 내용을 정합니다.

3. 카테고리 : 어떤 카테고리를 커버 아이템으로 등록할지 정합니다.

4. 글수 : 커버 아이템의 글 목록 개수를 정합니다.

 

말로는 감이 잘 안 오므로 직접 시연해 봅시다.

 

타이틀의 경우는 바로 저 빨간색 화살표로 가리킨 부분을 정의합니다. 각 커버별 소제목을 지정할 수 있습니다. 한글로 입력해도 되고 영어와 숫자도 됩니다. 특수기호도 상관 없습니다. 어썸폰트 아이콘도 등록 가능 합니다. <i>태그를 그대로 입력하시면 됩니다.

 

콘텐츠는 이렇게 네가지 선택 항목이 있습니다.

 

-최신 글 : 기존 친효스킨 스타일처럼 최신글을 목록화 합니다.

-글 선택 : 친효스킨 사이드바의 추천글과 같은 개념 입니다. 원하는 글만 따로 글 목록을 꾸밀 수 있습니다.

-직접 입력 : 타 사이트의 글들을 링크로서 등록할 수 있습니다.

-인기 글 : 자신의 티스토리에서 가장 조회수가 높은 글들을 목록화 합니다.

 

직접 입력의 경우는 특수한 경우이므로 이건 생략하도록 합니다. 나머지는 한번씩 눌러보시면 무슨 내용인지 감이 오실 겁니다. 이 콘텐츠를 최대한 활용하여 메인화면을 커버로서 꾸밀 수 있는 것 입니다. 제 경우는 인기글, 추천글, 최신글의 3가지 리스트 커버 아이템을 구성한 상태 입니다.

 

글 설정의 카테고리는 그야말로 어떤 카테고리를 노출시킬지를 정할 수 있습니다. 기존 친효스킨의 경우는 무조건 카테고리에 상관 없이 최신글 순서로 출력되었습니다. 하지만 이제는 카테고리별로 노출이 가능 합니다. 이 기능을 활용하여 커버 메인화면을 풍성하게 꾸밀 수 있습니다.

 

마지막으로 글 수는 커버 아이템의 목록 개수 입니다. 3이라고 입력하면 해당 커버는 3개의 목록만 출력 합니다. 예를 들어서 콘텐츠는 인기글로 설정했고 글 수를 6이라고 입력했다면 인기글의 커버 아이템 목록은 총 6개가 되는 것 입니다. 이해가 되시나요?

 

또한 커버 기능에도 기존 방법처럼 인피드 광고를 게시할 수 있도록 만들었습니다. 단 각 리스트마다 설정은 불가능하고 기존 인덱스 페이지처럼 인식하여 배치가 됩니다. 예를 들어서 위의 친효기록장 티스토리에 들어가보면 현재 최신글 목록이 3개이고 그 밑으로 인기글이 4개가 있습니다. 만약 5개 목록마다 인피드광고를 배치하도록 설정을 하면 최신 목록에는 인피드 광고가 없고, 그 다음인 인기글 목록 2번째 다음에 인피드 광고가 하나가 사이에 배치가 될 겁니다. 그러면 인기글 목록은 육안상으로는 5개로 보여지게 되죠. 가운데는 인피드 광고니까요. 이런식으로 각 리스트 묶음을 무시하고 전체적으로 목록을 인식하여 인피드 광고를 게시할 수 있습니다.

 

애드센스

친효스킨 2.0 업데이트 설명에서 보셨듯 애드센스를 편리하게 입력할 수 있습니다. 최상단 및 최하단에는 가로로 긴 형태의 애드센스 광고를 삽입할 수 있습니다. 이제 최상단/최하단 애드센스 광고 넣기가 편리해집니다. 기존에는 코드를 직접 수정하는 방법 뿐이었습니다. 주석 처리를 지워야 코드가 활성화 되었는데 이제는 편리하게 이 버튼 하나로 켜고 끌 수 있습니다. 또한 애드센스 고유 ID값인 클라이언트(Client)와 슬롯(Slot) 번호도 편리하게 입력할 수 있습니다. 이제 더 이상 HTML 편집을 하지 않아도 됩니다. 클라이언트 값이 하나인 이유는 개인의 애드센스 클라이언트값은 절대 변하지 않기 때문입니다. 따라서 한 번만 입력하게 만들었습니다. 하나만 입력해도 최상단 및 최하단의 애드센스에 동시에 입력됩니다.

 

이와 마찬가지로 본문 상단과 하단에도 편리하게 애드센스를 삽입할 수 있습니다. 또한 애드센스 광고 형태도 선택 가능 합니다. 특히 본문 상단의 경우는 PC2개, 모바일1개 형태의 광고를 선택할 수 있습니다. 그리고 나머지는 두꺼운 광고, 얇은 광고 형태 입니다. 다만 단점으로는 크롬의 개발자툴을 열어보면 스크립트 오류가 3개가 뜨는데 이게 모두 애드센스 광고 관련 입니다. 치명적인 오류는 아닙니다. 그러나 이게 신경이 쓰이신다면 그냥 기존 방법대로 플러그인으로 수동 등록하는 방법을 사용하시면 됩니다.

 

프로필 SNS 아이콘

프로필 하단의 SNS 아이콘에 대한 부분입니다. 이걸 은근히 많이 물어보셨습니다. 이제 버튼 하나로 켜고 끌 수 있습니다. 프로필 SNS 아이콘이란 위의 스크린샷에 표시된 빨간색 박스 부분을 말합니다. 이곳의 아이콘을 사용자가 원하는대로 켜고 끌 수 있습니다. 또한 스킨 설명에 명시된대로 최대 5개 까지만 표시할 수 있습니다. 사용하고자 하는 아이콘의 스위치를 켜고 해당 SNS의 계정 주소를 입력하시면 됩니다.

 

이런 식으로 입력하면 됩니다. 사용하지 않는 계정은 굳이 입력하지 않아도 되겠죠?

 

제일 위의 버튼은 전체를 ON / OFF 하는 버튼 입니다. SNS 아이콘이 필요 없다면 전체를 꺼서 공간을 절약할 수 있습니다. 완전 편리하죠?

 

본문 디테일

본문 설정 부분 입니다. 폰트크기, 줄간격의 단위는 예시처럼 em 혹은 px로 지정할 수 있습니다. 자간의 경우는 px 단위를 사용하면 됩니다. 자간의 기본 값은 현재 0 입니다. 만약 1px 이라고 입력하면 글자 사이의 간격이 1px만큼 떨어지게 됩니다. 마이너스값도 적용 됩니다. 그러면 반대로 더 다닥 다닥 붙어버리겠죠? 맨 아래의 본문 BOLD 처리는 글쓰기 모드에서 굵게 처리하는 기능에 대한 설정 입니다. 형광펜모드를 없애는 요청이 꽤 많아서 아예 기능을 추가했습니다. 기존 방법대로 그냥 단순히 굵게 표시되게 만들고 싶다면 저 옵션을 변경하면 됩니다. 폰트 크기와 줄 간격은 모바일(스마트폰)과 PC(데스크탑) 해상도에서 서로 다르게 입력 가능 합니다. 한번 값을 늘리고 줄이면서 글자 크기의 변화와 줄 간격 변화를 확인해 보세요.

 

레이아웃 디테일

친효스킨 2.0 업데이트 내용을 확인해 보셨으면 아마 대충 어디가 어떤 부분인지 파악이 되셨을 겁니다. 다 한번씩 바꿔가면서 어떤 부분이 변경되는지 확인해 보세요. 친효스킨의 오른쪽 최상단에는 기본 메뉴들이 아이콘으로 등록되어 있습니다. 그 중 글쓰기 아이콘이 있는데 기존에는 구형에 대한 글쓰기 아이콘만 존재했었습니다. 물론 수동으로 변경이 가능하지만 번거로웠습니다. 그래서 레이아웃에서 선택할 수 있도록 만들었습니다. 그리고 본문의 총 가로 크기를 편리하게 변경 가능하도록 만들었습니다. 기본값은 1200px 인데, 이 값을 늘리면 본문의 가로 사이즈도 늘어납니다. 둥글기 값는 각 UI 모서리의 둥글기 정도 입니다. 기본값은 0인데 10px 혹은 그 이상을 입력해 보세요. 모서리가 둥글둥글하게 변할겁니다. 그밖에 콘텐츠를 브라우저 가운데 배치, 혹은 좌측에 배치하거나 본문을 사이드바의 오른쪽 또는 왼쪽에 배치, 사이드바를 켜거나 끌 수도 있게 했습니다. 가장 신기한 기능 중 하나는 바로 사이드바 STICKEY 모드 입니다. 하지만 사이드바에 광고를 넣는 상황이라면 이 모드를 사용하면 안 됩니다. 왜냐하면 사이드바가 늘 본문을 따라다니기 때문에 고정으로 인식할 수 있습니다. 제가 알기로는 애드센스 고정 광고는 아직까지는 안 되는걸로 알고 있습니다. 따라서 이 기능을 사용하시려면 사이드바에서 애드센스를 제거 하시고 사용하시기 바랍니다. 자동광고를 활성화해도 사이드바에 광고가 들어가는 경우가 있으니 참고하시기 바랍니다.

 

나머지 글쓰기 버튼이나 TOP 세트, 목차 버튼은 스크롤을 내리면 오른쪽 하단에 나타나는 버튼 꾸러미에 대한 설정 입니다. 바로 이 버튼 꾸러미죠. 여기에도 글쓰기 버튼이 있는데 이 버튼을 신형 글쓰기로 할지, 구형으로 할지를 정할 수 있습니다. 또한 TOC 목차 버튼을 이 꾸러미에 통합했는데 단순히 보이게 하거나 끄는 기능이 추가 되었습니다. 4번째 버튼이 TOC 목차 버튼 입니다. 이 목차 기능에 대해서는 아래의 글에 더 자세히 설명되어 있습니다.

 

 

글쓰기 버튼은 이 부분입니다. 구형으로 변경하시면 해당 아이콘들이 모두 구형 글쓰기 바로가기로 변경됩니다. 아이콘 모양도 이렇게 바뀝니다. 아이콘으로 변경의 유무를 확인할 수 있어서 편리합니다.

 

신형 글쓰기로 변경시에는 이런 모양의 아이콘으로 변경됩니다. 또한 신형 글쓰기 에디터 주소로 적용됩니다. 물론 관리자의 글쓰기 설정에서 신형 글쓰기 에디터를 사용함으로 설정이 되어 있어야 합니다. 이런 세심한 부분까지 모두 신경써서 업그레이드를 진행시켰습니다. 아직 갈길이 멀지만 그래도 더 발전할 친효스킨을 기대해 주세요. 그러면 친효스킨 2.0을 열심히 사용해 보시기 바랍니다. 버그나 오류는 제보 부탁드립니다. 끝.

당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드

  1. 이전 댓글 더보기
  2. 비밀댓글입니다
    2020.07.11 23:07
  3. 비밀댓글입니다
    2020.07.11 23:19
  4. 비밀댓글입니다
    2020.07.11 23:26
    • 그렇군요. 클라이언트랑 슬롯번호는 늘 한 쌍 입니다. 근데 모든 애드센스 광고에는 클라이언트 값이 모두 똑같습니다. 그래서 한 번만 입력하게 설계되어 있습니다.
      2020.07.11 23:28 신고
  5. 비밀댓글입니다
    2020.07.11 23:30
  6. 비밀댓글입니다
    2020.07.17 16:32
    • 안녕하세요, https://rgy0409.tistory.com/1782 여기 글 보시고 괜찮다고 생각되시면 댓글 부탁드립니다.
      2020.07.17 17:21 신고
  7. 비밀댓글입니다
    2020.07.18 21:33
  8. 비밀댓글입니다
    2020.07.20 12:38
  9. 비밀댓글입니다
    2020.07.21 23:22
  10. 비밀댓글입니다
    2020.07.22 22:18
    • 비밀댓글입니다
      2020.07.22 22:51
  11. 늦은 시간까지 감사합니다ㅠㅠ 꼭 적용해보고 후기댓글 남기도록 하겠습니다
    2020.07.22 23:15 신고
  12. 안녕하세요-! 친효스킨 2.0버전 적용했는데 정말 맘에듭니다^^ 다시 한 번 감사의 말씀드립니다.

    그런데 염치없지만 몇가지만 질문드리고 싶습니다.

    친효님 글 본문에 적용되신걸 보면..

    1. (Tip)이라고 써져 있으면서 애니메이션 효과가 들어간 부분과

    2. 가장 하단에 “이 글도 읽어 보세요” 부분

    3. 그리고 링크연동인지는 모르겠는데 마우스 포인터를 올렸을 때 주황색 게이지바가 오른쪽으로 슥 움직이면서 클릭이 될 수 있게한 부분

    이렇게 3가지를 어떻게 하셨는지 궁금합니다. 이 부분도 역시 친효님께서 공개하기가 좀 어려우시다면 어쩔 수 없지만,, 공개를 해주실 수 있으시다면 가르침 받고 싶습니다.


    (쌉 노 염치 죄송합니다)


    이번 친효스킨 2.0 부분에 대해 제대로된 후기 남깁니다.

    1. 애드센스 광고를 넣기 정말 편리해졌습니다. 냉정하게 입터는게 아니라 지금까지 봐온 스킨 중에 애드센스 광고를 이렇게 넣기 쉽게끔 만든 스킨은 본 적이 없습니다.

    거의 10년전 티스토리 블로그를 할 때, 애드센스 광고를 적용하려고 html 코드 때문에 날밤샜던적도 정말 많은데, 이 스킨은 그런 고민을 한번에 해결해줍니다.

    Html 코딩을 만질줄 모르는 사람들에겐 단비같은 스킨이지 않나 생각합니다

    2. 메인페이지 구성이 편리하다는 점과 전체적인 레이아웃 툴의 색상도 사용자의 입맛에 따라 쉽게 바꿀 수 있다는 점이 좋습니다.

    3. 본문에 적용되는 효과:

    이게 바로 이 스킨의 꽃이지 않나 생각합니다. 다른 스킨들은 본문까지 신경을 써주는 스킨이 거의 없는걸로 알고 있습니다.

    아직 저는 위에 문의드린 사항이 적용되지 않아 많이 아쉽긴 하지만, 아무튼 본문에도 적용되어 있는 툴이야 말로 진정 가독성을 높여주는 툴 같습니다.

    이상입니다!^^7
    2020.07.23 01:16 신고
    • 1. https://rgy0409.tistory.com/3026
      2. https://rgy0409.tistory.com/3508
      3. https://rgy0409.tistory.com/3021

      질문 내용은 친효애드온 부분입니다. 현재 친효스킨 2.0에는 최신 친효애드온에 모두 세팅되어 있습니다. 따라서 사용법만 숙지하시면 됩니다.
      2020.07.23 02:03 신고
  13. 와.... 진짜 최고시네요ㅠㅠ 너무너무 감사합니다ㅜㅜㅠ
    2020.07.23 02:05 신고
  14. 안녕하세요! 친절한 효자님! 덕분에 2.0 스킨 잘 세팅하고 부가적으로 알려주신 것도 잘 쓰고 있습니다.
    "TIP 박스"와 "관련글 링크" 기능 너무 좋은 것 같아요! 정말 감사합니다.
    어제 새벽 늦게까지 피드백 주시고.. 다시 한 번 감사의 말씀드리고자 이렇게 찾아왔습니다!! 정말 감사합니다!
    그리고 구독버튼도 살포시 누르고 갈게요~~!!
    2020.07.23 17:12 신고
    • 친효애드온 카테고리 가보시면 다양한 스타일의 애드온들이 있으므로 한번 살펴보세용
      2020.07.23 18:57 신고
  15. 감사합니다!
    2020.07.23 19:35 신고
  16. 비밀댓글입니다
    2020.07.30 03:38
    • 안녕하세요, 혹시 모바일 전용 페이지가 활성화 상태가 아니신지 확인해 주세요. 반응형 스킨이라 PC에서 정상적으로 보인다면 모바일에서도 정상적으로 보입니다.

      카테고리 바로가기 모듈은 모바일 해상도 시 해더 부분에 카테고리 바로가기 버튼이 있는데 그것때문에 카테고리 바로 위에 배치하는 것 입니다.
      2020.07.30 11:35 신고
  17. 비밀댓글입니다
    2020.07.30 03:59
    • 스킨편집 화면에서는 사이드바가 원래대로 나옵니다. 사이드바는 꾸미기 > 사이드바에서 수정하시면 됩니다. HTML은 추천글을 제외하고는 손 볼 곳이 없습니다.
      2020.07.30 11:36 신고
  18. 모바일전용페이지는 비활성화되어있어요. 아까 댓글 달았을때는 계속 왔다리갔다리 하더니 지금은 잘 되고있어요!
    그런데 혹시 그 옆에 둥둥 떠다니는 메뉴들은 위치를 바꾸거나 제가 원하는메뉴만 넣을수는 없는걸까요? PC로 볼때는 괜찮은데 스마트폰 사파리로 보니까, 오른쪽 손잡이라 페이지 내리고 올리고 할때 오른쪽에 있는게 불편하더라구요~
    2020.07.30 11:40 신고
    • 음 왼쪽으로 출력하는 기능을 넣어보도록 하겠습니다. 직접 수정하시려면 코딩을 직접하셔야해요.
      2020.07.30 11:45 신고
  19. 친효님! 둥둥떠다니는 메뉴들(이건 뭐라고 부르는건가요? 헤헤) 을 누르면 없는 페이지라고 나오던데, 이게 제가 티스토리 도메인을 안쓰고 다른 도메인을 써서그런건지 아니면 오류가 있는건지 궁금합니다~
    그리고 포스팅 하단에 공유하는 사이트들 현재는 페이스북, 트위터, 구글플러스, 카카오톡, 네이버블로그, 네이버 밴드 이렇게 있던데, 이것들 종류를 줄이거나 변경은 못하는건가요? 제 생각에는 구글플러스나 밴드 같은경우에는 요즘 많이 사용하지 않는것같아서요~ 오히려 핀터레스트를 더 많이 쓰는 추세인데 혹시 가능할까요?
    2020.07.31 10:53 신고
    • 나타났다 사라졌다 하는 버튼 꾸러미 말씀이시라면 현재는 그냥 TOP버튼 꾸러미라고 부르고 있습니다. 2차 도메인 주소 사용 시 사용이 안 되나요? 현재 티스토리 주소 2차 사용 시 오류가 이슈인데 그것과 관련이 되어있을 수 있을 듯 하네요. 이건 좀 시간이 지나야 알 수 있을 듯 합니다.

      본문 하단 SNS 공유 버튼 부분에 대해서 스킨 편집에서 편리하게 넣고 빼는 기능도 한번 넣어보겠습니다. 핀터레스트는 이미지 공유 플랫폼 입니다. 근데 티스토리는 이미지가 아닌 텍스트가 주를 이루는 플랫폼입니다. 그래서 맞지 않다고 생각됩니다. 하지만 티스토리에서 이미지 작품 활동을 하시는 분도 계시므로 한번 추가해 보겠습니다.
      2020.07.31 11:13 신고
    • 알아보니까 티스토리에서 수익을 목적으로 핀터레스트 공유가 난무해서 핀터레스트 측에서 티스토리 공유를 모두 막아놓았다고 합니다.
      2020.08.01 01:00 신고
  20. 그리고, 카테고리를 눌렀을때 pc 버젼의 섬네일이 2배정도 커지거나 포스팅 하단의 "관련글" 같은 스타일로 뜨면 조금 더 사이드바랑 잘 어울리지 않을까 의견을 보태봅니다 :) 모바일 버젼에서도 카테고리를 눌러서 글 목록을 봤을때 썸네일이 없거나 앞서 말씀드린것처럼 커버페이지의 글 목록같은 스타일이 조금 더 예쁠것같아요~ 그래서 작성일이 본문 타이틀의 아랫부분에 오는게 보기좋지 않을까 하는 의견을 드립니다!
    정말 감사합니다! :)
    2020.07.31 10:59 신고
    • 본문의 최신글(인덱스) 설정 부분에서 기본 설정의 목록 구성 요소가 목록만으로 되어 있을 때 그렇게 목록처럼 출력됩니다. 이것을 내용만으로 변경하시면 됩니다.
      2020.07.31 11:16 신고
  21. 아~ 그렇군요! 감사합니다!!
    2020.08.01 01:02 신고