친절한효자손 취미생활

안녕하세요, 친절한효자손 입니다. 코로나 때문에 밖을 또 못나가게 생겼습니다. 진짜 잠잠해진다 싶으면 안전불감증 때문에 또 이렇게 문제가 커져버리니... 한창 교육을 신나게 해도 부족할 판에 다시 모임을 모두 중단해야하는 상황에 직면하고 말았습니다. 억울하지만 어쩔 수 없죠. 안전이 제일이니까요. 밖에도 못나가는 날에는 뭘 해야 할까요? 그렇습니다. 신나게 코딩 삼매경에 빠져야 합니다. 오늘도 열심히 친효스킨을 업그레이드 시키고 있습니다.

 

갑자기 버전이 껑충 뛰어올랐습니다. 그렇습니다. 정말 많은 기능들이 추가가 될 것이기 때문입니다. 이번 2.0 버전에는 엄청난 변화가 일어납니다. 이제 사용자가 좀 더 편리하게 스킨을 편집할 수 있습니다. 그동안 자주 질문주셨던 내용을 적극 반영하여 원하는대로 커스터마이징이 가능하도록 만들었습니다.

 

이제 스킨편집 페이지에서 쉽게 조작하자!

테스트 티스토리에서 열심히 코딩을 진행 중 입니다. 최대 난이도였던 커버 기능을 드디어 추가했습니다. 아직 시작 단계이긴 하지만 하나 하나 업그레이드를 해 나갈 계획 입니다. 보시는 화면은 스핀편집 화면 입니다. 오른쪽에 뭔가 여러개의 항목이 생성되어 있습니다. 하나 하나 살펴볼까요?

 

커버 기능 추가

드디어 친효스킨에도 커버 기능을 추가했습니다. 보시는 것 처럼 커버 아이템을 추가해서 메인 화면을 꾸밀 수 있습니다. 최신글 목록으로도 설정 가능하며 조회수가 많은 글 순으로도 배치 가능합니다. 또한 랜덤으로 추천글처럼 티스토리 에디터가 직접 원하는 글을 따로 골라서 묶을수도 있습니다. 게다가 카테고리별 글 배치도 가능 합니다. 여기에서 끝이 아닙니다. 완전 커스텀 글 목록도 가능 합니다. 예를 들어서 제가 작성한 글이 아닌, 외부의 사이트에 대한 페이지를 목록에 추가할 수 있습니다. 이를테면 반디집 다운로드 페이지를 목록화하여 만들 수 있다는 이야기 입니다. 커버 페이지가 적용된 예시는 아래의 티스토리에서 확인 가능 합니다.

 

https://rgyhm.tistory.com/

 

친절한효자손 기록장

친절한효자손 기록 공간 입니다. 공식 블로그는 "https://rgy0409.tistory.com" 랍니다.

rgyhm.tistory.com

단 커버 기능을 사용하면 애드센스 인덱스 광고는 비활성화 됩니다. 커버 페이지에 어떻게든 다른 형태의 애드센스 광고를 넣고자 노력은 하고 있는데 쉽지 않을 듯 합니다. 그래도 계속 연구해 보겠습니다.

 

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

 

최상단/최하단 애드센스 버튼 추가

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

 

스킨 색상 변경

이제 손쉽게 색상을 변경할 수 있습니다. 그저 클릭만 하면 됩니다. 물론 16진수 컬러코드를 알고 있으면 더 좋습니다. 메인색상, 서브색상, 마우스를 올렸을 때 색상, 본문 링크에 대한 색상, 본문 리스트 색상 등을 편집할 수 있습니다.

 

프로필 아래 SNS 아이콘 편집

그리고 프로필 하단의 SNS 아이콘에 대한 부분입니다. 이걸 은근히 많이 물어보셨습니다. 이제 버튼 하나로 켜고 끌 수 있습니다. 제일 위의 버튼은 전체를 ON / OFF 하는 버튼 입니다. SNS 아이콘이 필요 없다면 전체를 꺼서 공간을 절약할 수 있습니다. 그리고 사용은 하는데 다 필요없는 경우도 있을 겁니다. 그럴 때는 아래 개별 선택 버튼을 통해서 원하는 아이콘을 직접 고를 수 있습니다. 단 최대 5개까지만 선택해야 합니다. SNS 계정은 편리하게 입력칸에 넣으시면 됩니다. URL 주소를 그대로 붙여넣기만 하면 끝 입니다. 완전 편리하죠?

 

본문 설정

본문의 폰트 크기, 줄 간격, 자간을 편리하게 편집할 수 있게 했습니다. 자간의 기본 값은 0 입니다. 나머지는 위에 표시된 값이 기본값 입니다. 폰트 크기와 줄 간격은 모바일(스마트폰)과 PC(데스크탑) 해상도에서 서로 다르게 입력 가능 합니다. 한번 값을 늘리고 줄이면서 글자 크기의 변화와 줄 간격 변화를 확인해 보세요. 또한 친효스킨은 B(굵게) 처리가 형광펜 효과가 적용되도록 세팅되어 있습니다. 이 기능을 원치 않으신 분들이 꽤 되셨습니다. (머쓱) 그래서 편리하게 해제하는 기능도 넣어놨습니다.

 

레이아웃 설정

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

 

댓글 화면 스타일 변경

전부터 정말 바꾸고 싶었던 UI중 하나였습니다. 왠지 카카오톡같은 채팅창 느낌으로 만들고 싶었습니다. 그 결과 마침내 변화를 일으키는데 성공했습니다. 자그마치 8시간에 걸친 대 수술이었습니다. 지금 친효스킨 다운로드 페이지로 가보시면 변화된 댓글 UI를 확인할 수 있습니다. 방명록은 그냥 그대로 두려고 합니다.

 

앞으로 추가될 업데이트 내용

이제 왠만한건 거의 끝냈습니다. 좀 더 추가를 하자면 글꼴 정도가 있겠습니다. 다만 어느 글꼴을 추가해야 좋을지는... 아직 미지수 입니다. 메인은 "나눔고딕" 폰트이고 본문에만 따로 여러가지를 사용자가 쉽게 적용시킬 수 있도록 만들 계획 입니다. 다만 너무 많이는 적용시키지 않으려고 합니다. 이유는 그만큼 모든 글꼴을 로드(Load) 해야 하는데 그러면 불필요한 로딩 시간만 늘어나기 때문이죠. 우리 모두는 빠른 스킨을 원하지 않습니까? 저 역시 그렇습니다.

 

업데이트 예정일은 언제?

좀 더 테스트를 해야 하기 때문에 당장은 업데이트를 진행할 수 없습니다. 예정은 9월 쯤으로 예상하고 있습니다. 급하게 진행하지 않고 느긋하게 진행하려고 합니다. 그러니 여러분들께서도 여유를 가지시고 기다려 주시기 바라겠습니다. 솔직히 스킨보다 더 중요한게 바로 콘텐츠 아니겠습니까? 콘텐츠를 최우선으로 생각하시고 그동안 열심히 사람들에게 도움이 되는 글을 작성해 주시기를 바라겠습니다. 앞으로도 친효스킨을 많이 사랑해 주시고 버그나 기타 문제나 개선했으면 하는 내용이 있다면 언제든 문의 주시기 바랍니다. 감사합니다. 끝.

당신을 위한 콘텐츠

이 글을 공유합시다

facebook twitter googleplus kakaoTalk kakaostory naver band

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

비밀글모드

  1. 원래 친효스킨 자체가 굉장히 간결하고 노력대비 가성비가 뛰어난 스킨이라 기다리진 않았습니다만(?), 적용하면 훨씬더 멋지고 간편한 스킨이 되겠군요! 오프라인으로도 뵐 수 있으려나 생각만 하고 있었는데, 역시 코로나 때문에 어렵게 되었네요. 오프소식 공지 뜨면 강남으로 가겠습니다. 친효스킨, 효자손 감사합니다!
    2020.06.27 23:17 신고
    • 안녕하세요! 코로나...으...정말 극혐입니다. 교육때 뵙겠습니다. :)
      2020.06.28 02:39 신고
  2. 와 기대돼요!!! 지금도 여전히 친효스킨 너무 잘 사용하고 있습니다~ 감사해요! ㅎㅎ
    2020.06.28 12:49 신고
  3. 안녕하세요. 며칠 전 애드센스 승인나고 이것저것 만져보고 있는데 스킨이 맘에 안든 와중에 이런 고급스킨을 무료배포하신다는 글을 보고 깜놀해서 댓글답니다. 2.0 버전 다운로도 링크를 못찾겠는데 염치없지만 링크 부탁드려도 될까요?
    2020.07.02 03:32 신고
    • 안녕하세요, 친효스킨 2.0은 9월에 배포할 예정 입니다. 아직 테스트할게 많기 때문 입니다. 대신 지금은 1.175 버전으로 사용 가능 합니다.
      2020.07.02 03:42 신고
  4. 아.넵. 늦은시간 답글 감사합니다.
    내일은 스킨변경해봐야겠어요!!! 감사히 잘쓰겠습니다.!!!
    2020.07.02 03:55 신고