친효스킨 v2.1 업데이트 예고 안내

안녕하세요, 친절한효자손 입니다. 벌써 10월의 끝자락에 도착해가고 있습니다. 날씨가 금방 쌀쌀해졌습니다. 이제 밤과 새벽은 춥기까지 합니다. 해동시켰다가 냉동시켰다가 환장하겠습니다. 그바람에 코에서 물이 마를 날이 없습니다. 노우즈 워터 (Nose Water)가 범람하는 시기가 다가왔습니다. 죽겠네요. 비염때문에... 으으!! 잠시 넋두리 글이었습니다. 그러면 오늘도 친효스킨 관련 소식을 전해드리겠습니다.

 

메일로 친효스킨 메인화면을 어떻게 하는건지에 대해서 문의주시는 분들이 계셨습니다. 음... 이거 2.01 공지글에 작성해뒀는데 아무래도 겸사겸사 홍보를 해서 그런지 많이들 못 보신 것 같습니다. 그래서 다시 한 번 제대로 공지를 합니다.

 

그리드(Grid) 스타일 커버 추가

친효스킨 메인화면의 모습입니다. 보시는 것처럼 그리드(Grid) 스타일의 커버 기능을 추가했습니다. 현재 다른 버전의 그리드를 하나 더 추가해서 배포를 할까하고 계획 중 입니다. 한개만 넣기에는 조금 밋밋한 느낌이 좀 있어서요. 당연히 기존의 스타일인 리스트(List) 커버는 그대로 존재합니다. 선택지가 하나 더 늘어난 샘입니다.

 

친효스킨의 스킨편집 화면입니다. 보시는 것처럼 커버 기능을 사용 중이고 두 가지 옵션이 적용되어있는것을 확인 할 수 있습니다. 하나는 기존 스타일인 리스트 메뉴고, 다른 하나가 이번에 업데이트되는 그리드 스타일입니다.

 

커버 아이템 등록시 리스트 말고 그리드를 선택하시면 바둑판식 목차 적용이 가능해집니다. 그리하여 멋들어진 메인 화면을 꾸밀 수 있게 됩니다. 그리드 뿐만 아니라 새롭게 추가된 갤러리 커버도 목록에 있습니다. 갤러리 커버에 대한 설명은 아래에 나옵니다.

 

또한 스마트폰(모바일)이나 태블릿에서 접속 시 디바이스의 해상도에 따라서 목록 크기가 유동성있게 변합니다. 약간씩 변한다는 소리입니다. 기준 크기는 가로 200px 이지만 절대값 200px이 아닌 약간씩 유도리있게 값이 변한다는 의미입니다. 그래서 보시는 것 처럼 어떤 목록은 가로로 3개지만, 어떤 목록은 가로로 4개 혹은 2개가 될 수 있습니다. 가장 마음에 드는 부분이죠. 너무 규칙적인 크기면 딱딱해 보이는데 유동성을 발휘하니깐 뭔가 훨씬 자유로운 느낌입니다. 단점이라고 한다면 유동성이 있다보니 다소 지저분해 보이고 혼잡해 보일 수 있을텐데요, 개인 취향으로 오히려 이쪽을 더 선호하는지라 전 너무 마음에 듭니다. 스킨 제작자가 마음에 들어하면 되는거죠 뭐. (흐믓)

 

갤러리(Gallery) 스타일 커버 추가

갤러리 커버 기능도 업데이트 됩니다. 그리드와는 다른 스타일의 커버입니다. 썸네일 이미지를 부각시킨 커버로서 여행이나 맛집, 음식, 제품 콘텐츠 관련 글을 작성하시는 분들에게 잘 어울리는 커버가 될 것 입니다.

 

갤러리 커버 특징은 마우스를 올려보시면 썸네일 이미지가 뿌옇게(Blur) 처리 되면서 아래에서 위로 글 제목과 카테고리, 글 작성일 박스가 토글되는 애니메이션이 적용되어 있다는 것 입니다. 예전부터 이런 스타일을 한번 표현해보고 싶었는데 생각만큼 잘 나와줘서 매우 뿌듯하군요. (흐믓) 현재 제 티스토리 메인화면에 갤러리 커버가 적용되어 있으니 마우스를 한번 올려보세요. 바로 확인 가능합니다.

 

애드센스 설정화면 일부 삭제

원래 본문에 대한 애드센스도 적용시켰었으나 활용도가 낮고 어차피 티스토리의 애드센스 플러그인을 사용하는것이 훨씬 편리합니다. 처음 세팅만 조금 번거롭지만 그래도 한 번 적용시켜 놓으면 스킨 변경과 상관 없이 늘 본문에 애드센스가 적용된다는 장점이 있습니다. 따라서 플러그인에서 제공하지 않는 부분에 대해서만 스킨 편집 화면에서 제어가 가능하도록 변경했습니다.

 

리스트 커버에는 인피드 애드센스가 적용이 가능합니다. 그러나 그리드나 갤러리 커버에는 인피드 애드센스가 적용이 되지 않습니다. 다양한 방법을 구사해 보았으나 현재의 제 코딩 실력으로는 어림도 없을 듯 합니다. 그리고 굳이 그리드나 갤러리 커버 목록 사이에 광고를 넣으면 오히려 더 엉성해 보일 것 같아요. (자기합리화) 또한 메인화면을 유심히 보시는 분들도 잘 없구요. (자기합리화2) 결론은 인피드광고는 리스트 커버에만 적용이 된다는 것 입니다.

 

그리드/갤러리 썸네일 세로 사이즈 설정 기능

리스트 커버는 제 고집(?)이 들어있는 집합체여서 이 부분의 썸네일 크기 변경은 따로 적용시키지 않았습니다. 물론 CSS에서 해당 코드를 찾아 수동으로 수정은 가능합니다. 대신 그리드와 갤러리의 세로 크기에 대한 변경을 스킨 설정 화면에서 가능하게 만들었습니다. 가로 크기는 변경이 불가합니다. 반응형으로 완성된 커버니까요. 세로 크기만 변경이 가능하지요. 그리드 썸네일의 세로 크기의 기본값은 120px이며 갤러리 썸네일의 세로 크기의 기본값는 250px 입니다. 값을 변경해서 본인이 마음에 드는 썸네일 크기를 찾아서 사용하시기 바랍니다.

 

본문 자동 링크 스타일 변경

새로운 글쓰기 에디터로 링크에서 엔터키를 누르면 바로 아래에 자동으로 링크 스타일이 적용되는거 알고 계실겁니다. 근데 그 링크 스타일이 너무 지나치게 큰 것 같아서 별로 보기가 좋지 않아 보였습니다. 제 기준에서는 너무 지나치게 큰 듯 합니다. 그래서 스타일을 일부 조절했습니다.

 

이게 기존 스타일의 링크글이었습니다.

 

이것이 친효스킨 2.1에서 변경된 스타일입니다. 크기를 2분의 1로 확 축소시켰습니다. 또한 미리보기 내용은 한 줄로 나오도록 수정했습니다. 출처링크 표시는 왼쪽이 아닌 오른쪽으로 위치하게하고 폰트 크기를 대폭 줄였습니다. 이제 불필요한 공간을 많이 차지하지 않아서 좋네요. 아래에 링크가 되어 있으니 한번 직접 구경해 보시기 바랍니다.

 

본문(스킨) 로딩 스크립트 추가

이제 본문이 완전히 로딩이 되어야 읽을 수 있도록 스크립트를 추가했습니다. 이 스크립트를 추가한 이유는 애드센스 때문입니다. 현재 티스토리의 여러가지 스크립트 중 가장 속도라 느린것이 바로 애드센스입니다. 스킨을 개발하면서 가장 최고 난재 또한 애드센스였습니다. 그렇습니다. 애드센스가 티스토리 본문 로딩 속도를 왕창 잡아먹습니다. 그리고 우리는 급합니다. 즉 본문은 로딩 되었지만, 그러니까 글과 이미지는 이미 로딩이 완료되어 출력이 된 상태지만 애드센스가 느려터져서 아직 노출이 안 되는 경우가 종종 있습니다. 그럼 사용자는 애드센스를 만나보기도 전에 본문을 스윽 하고 내려버릴겁니다. 이 점을 좀 개선하고 싶었습니다. 애드센스 속도를 빠르게 할 수는 없어요. 이건 구글에서 해결해줘야 하는 문제거든요. 결국은 애드센스가 모두 로딩이 완료 될 때 까지 기다리게 만들 수 밖에 없는거지요. 그래서 이 스크립트를 추가한 것입니다. 현재 친효스킨 2.1 버전에 적용이 완료된 상태입니다. 이제 본문이 모두 로딩이 완료될 때 읽을 수 있습니다. 그전에는 바람개비가 뱅글뱅글 돌아가며 화면 전체가 약간 어두운 상태가 됩니다. 이때가 본문 로딩 중인거죠. 애드센스를 포함해서요. 모든 요소가 다 로드 완료 되었을 때 비로소 읽을 수 있습니다. 오래 걸리지 않습니다. 길어봐야 5초 정도입니다.

 

어떤 분들은 그러십니다. 본문은 무조건 빨리 로드되는게 최고라고 하며 스킨 로딩 속도도 중요하다구요. 물론 중요합니다. 한 10초 이상 지나도 계속 무응답인 그런 스킨이 아닌 이상은 솔직히 다들 기다려줍니다. 이탈율이요? 완전 느려터진 경우가 아닌 이상 초반에 이탈하는 경우는 거의 없습니다. 그리고 괜찮은 티스토리로 소문이 나는 순간 사용자들은 무조건 기다리고 머뭅니다. 저는 제가 운영하는 티스토리와 콘텐츠에 자부심이 있기 때문에 얼마든지 방문자들이 기다려 줄 것임을 믿습니다. 그래서 과감히 이 스크립트를 적용시켰고 그 결과 애드센스 수익이 소폭 상승하였습니다. 아직 한달도 채 안 된 결과긴 하지만 왠지 좋은 결말로 이어질 것 같네요.

 

단 중요한게 있습니다. 이 스크립트는 조심히 사용해야합니다. 사용자 분들이 검색해서 어렵게 이 티스토리를 방문했는데 막상 읽어보니까 어디서 짜집기 한 내용이라던지, 그냥 뻔하디 뻔한 내용들만 있다던지 하는 이런 경우를 조우했다고 가정해 봅니다. 기껏 본문 로딩까지 다 기다리고 읽었더니 이따구(?) 내용이었단 말인가?! 하고 대실망을 할 것입니다. 그리고 방문한 티스토리를 블록(차단)해 버리겠지요. 이건 본인 얼굴에 침 벹는 격 입니다. 애드센스 로딩 문제로 이 스크립트를 적용한게 맞습니다. 하지만 그 전에 콘텐츠에 대한 퀄리티가 우선입니다. 이게 선행조건입니다. 그러니 여러분들도 내 콘텐츠는 그 어떤 티스토리에 비교해봐도 전혀 손색이 없으며 다른 곳에서는 찾아 볼 수 없는 그런 알찬 내용들 뿐이라고 생각하신다면 과감히 적용해 보시기 바랍니다. 그렇지 않다면 오히려 마이너스로 남을거에요. 이 스크립트의 ON/OFF 스위치를 스킨 편집 화면에 넣어놨습니다. 기본적으로 활성화가 되어 있는 상태지만 필요없다고 생각되시면 꺼주시면 됩니다.

 

업데이트 예정일은 언제?

정확히 11월 1일 자정이 조금 지난 시각에 배포를 계획하고 있습니다. 기존 2.01 버전을 사용하시던 분들은 그러면 어떻게 해야 할까요? 간단합니다. 다시 새로 스킨 등록해서 사용하시면 됩니다. 물론 2.01 버전에서 딱히 문제가 있어서 업데이트가 된 것이 아니고 단지 새로운 커버 스타일 2종과 기타 여러가지 옵션이 더 추가되어서 배포하는 버전이므로 필수적으로 업데이트를 할 필요는 전혀 없습니다. 그러면 앞으로도 친효스킨을 많이 사랑해주시고 아껴주시기 바라겠습니다. 끝.

 

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

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