친효스킨 v2.0 설명서 (사용 방법)
안녕하세요, 친절한효자손 입니다. 부지러너 분들을 위해서 친효스킨 2.0을 배포는 했으나 공식 설명서가 없어서 조금 어려워하시는 분들이 계시는 것 같습니다. 그래서 아예 설명서를 글로 만들어 놓도록 하겠습니다. 이 내용을 보시고 차근 차근 적용하시면 될 것 같습니다.
목차
친효스킨 2.0 설명에 대한 유튜브 라이브 예고 안내
이번달인 8월 30일 일요일 저녁10시에 유튜브로 라이브를 합니다. 친효스킨 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을 열심히 사용해 보시기 바랍니다. 버그나 오류는 제보 부탁드립니다. 끝.
