티스토리 블로그를 시작한지 한달 정도 지난 것 같네요. 그동안 검색엔진 최적화, 애드고시와 같이 블로그 최적화를 위한 기본적인 사항들이 정리했습니다.
애드센스를 통해 수익화를 하기 위해서 광고의 배치가 중요합니다. 광고를 메인, 홈, 상세화면, 사이드바 영역에서 어떻게 나타나도록 하는지 고민이 필요합니다.
블로그를 광고를 위해서만 사용하는 것은 아니고 자신의 브랜드를 위한 공간이기 때문에 사이트가 깔끔하게 보여지는 것도 구독자들을 위한 예의라고 할 수 있죠.
오늘은 이런 고민들을 통해서 발견하게된 티스토리 블로그 스킨에 대한 고민들을 나누어 보겠습니다.
저는 기존에 Square 스킨을 사용하고 있었습니다. 깔끔하고 좋은 스킨입니다. 그런데 몇가지 의문점이 생겼습니다. 일단 홈화면에서 본문이 바로 노출됩니다. 스킨에 설정된만큼 로딩이 되는데 5개만 설정을 해도 그 안에 있는 본문이미지를 무겁게 로딩하는 것이 사용자들에게 좋지 않겠다는 생각이 들었습니다.
다른 단점은 사이드의 기능이 단순하고 고정되어 있습니다. 저는 사이드바가 스크롤과 함께 이동되고 PC 영역에서 광고와 다양한 정보를 표출하는 것이 더 효율적이라는 생각이 들었습니다.
기존에 편집한 스킨내용도 있고 애드고시에 영향을 주지 않을까하는 마음으로 스킨변경이 부담이 되지만 여러 장점을 고려하여 "Book Club" 스킨으로 변경하였습니다.
티스토리 Book Club 스킨 변경
스킨과 관련된 자료를 검토해보니 티스토리 스킨을 수정해서 4,5만원 수준에서 거래가 되고 있더군요. 스킨이 수정된 사이트들을 보니 나름대로 제가 생각했던 방향들이 반영된 심플하고 깔끔한 스킨들이었습니다. 티스토리의 최근 스킨들을 보니 어떤 스킨을 사람들이 선호하는지 이해가 되었습니다.
[티스토리 블로그 유료스킨]
JB FACTORY
www.jbfactory.net
스킨의 CSS 나 문구와 같은 간단한 커스텀이 3만원 정도의 가격을 형성한다면 저도 부업으로 할 수 있겠는데요... 필요하신 분들은 연락주세요. 싸게 해드릴게요. ^^
스킨에 대한 기본적인 컨셉은 광고지향적인 고민이 되어있습니다. 최대한 상단 메뉴영역을 올리고 상단 메인 광고가 노출될 수 있는 공간을 확보하고 사이드바 영역에 광고를 넣을 수 있도록 고려한 스킨들을 선호하는 것 같습니다. 글의 가독성을 올리기 위한 깔끔한 구성도 빠질 수 없습니다. 모바일에서도 정상적으로 동작할 수 있는 반응형 작업이 되어야 합니다. 정리하면...
1. 광고지향적
2. 가독성 높은 깔끔한 디자인
3. 반응형
스킨에 대한 컨셉이 어느정도 정해진 것 같습니다. 처음부터 스킨을 만드는 작업은 시간과 노력이 필요한만큼 저는 이를 최소화할 수 있는 방향으로 진행하겠습니다. 그래서 사이드바 스크롤 기능을 가진 Book Club 스킨을 기본으로 작업을 진행합니다. 웹사이트 개발자나 퍼블리셔분들은 스킨을 잘 바꾸어 사용하시는 분들이 많더군요. 이런 분들에게 많이 배울 수 있는 것들이 있을 것 같습니다.
스킨을 작업하려면 그에 따른 기본지식도 놓칠 수는 없죠. 티스토리의 스킨관련 정보를 꼭 참고하시기 바랍니다.
https://tistory.github.io/document-tistory-skin/
소개 · GitBook
티스토리 스킨 가이드 티스토리에서는 스킨을 통해서 사이트를 자유롭게 디자인할 수 있습니다. 스킨은 치환자를 사용하여 제작되고 사용된 치환자에는 티스토리의 데이터가 대입되어 티스토리의 디자인이 완성됩니다. 이 문서는 스킨에서 사용하는 치환자에 대해 설명합니다.
tistory.github.io
스킨의 편집작업은 블로그관리>스킨편집 메뉴를 통해 쉽게 작업할 수 있습니다.
Book Club 홈화면 스킨 분석
Book Club 스킨은 그대로 사용해도 좋은 스킨입니다. 그런데 저는 개인적인 취향을 고려하여 최적화 작업을 하겠습니다. 한번에 모든 작업을 진행하면 본문도 길어지고 저도 시간이 많이 들기 때문에 일단은 홈화면부터 정리하겠습니다.
저는 홈화면의 상단 메뉴를 최대한 줄이려고 합니다. 아울러 홈의 책 리뷰를 고려한 세로 썸네일과 하단 설명으로 된 리스트를 가로 썸네일과 수평 영역에 설명이 달린 리스트로 변경하고자 합니다. 생각보다 간단한 수정입니다. 누구나 쉽게 따라하실 수 있어요.
오늘 수정하고자 하는 내용을 정리해 볼까요?
1. 상단 영역 최적화
2. 홈화면 콘텐츠 리스트 최적화
기본 생성된 Book Club 스킨을 살펴보겠습니다.
블로그명을 블로그에 표시하는 것이 필요하겠지만 일단 사이드바 영역에도 나타나고 불필요하게 상단에 장식할 필요는 없을 것 같습니다. 상단이 상당히 두껍게 나타나고 있죠. 광고를 표출이 가장 잘되는 곳이 콘텐츠의 상단 영역입니다. 이 부분을 최대한 활용하는 것이 필요하죠. 그래서 저는 저 부분을 과감하게 삭제하겠습니다.
<!--
<h1>
<a href="https://kindjm.tistory.com/">
<s_if_var_logo>
<img src="" alt="친절한 재민">
</s_if_var_logo>
<s_not_var_logo>
친절한 재민
</s_not_var_logo>
</a>
</h1>
-->스킨편집 메뉴에서 "_blog_link_" 를 검색하여 해당 위치를 찾으시거나 <body> 영역의 <header> 부분에 위치합니다. 거의 코드 초입에 있으니 쉽게 찾으실 것입니다. 스킨메뉴에 타이틀 자체를 감추는 부분이 있다면 괜찮을 것 같네요.
수정된 모습을 보니 플랫하고 블로그가 가벼워진 느낌입니다. 우측에 검색기능도 살이있고 기본적인 기능도 살릴 수 있습니다.
이제 콘텐츠 리스트를 살펴볼까요?
저는 최대한 영상미디어시대에서 자주 사용하는 16:9 비율을 존중하여 썸네일을 올렸는데 티스토리가 썸네일을 다루는 방식은 약간 다르더군요. 일단 이미지를 크롭하고 있는데 중앙을 기준으로 특정 비율과 사이즈를 고려하는 것 같습니다. 위와 같이 이미지가 애매하게 나타나는 성향이 있습니다. 썸네일 이미지부터 작업을 해야겠네요.
<img src="//i1.daumcdn.net/thumb/C600x600/?fname=" alt="">썸네일의 패턴입니다. 중간에 C600x600이 보이네요. 보통 CDN 에서 이미지를 동적생성하여 캐싱 하는 기능을 제공합니다. 이 부분에 대한 패턴을 이해할 필요가 있습니다. apost 에서 잘 정리하신 내용이 있어서 참고합니다.
여러 옵션이 있지만 특별한 스킨을 제작할 일이 없다면 C 를 사용하게 될 것입니다. 일단 리스트 영역의 PC 높이가 150입니다. 모바일은 80이네요. 16:9 비율을 최대한 존중하는 가로 길이는 265입니다. 따라서 저는 아래와 같이 사용할 것입니다.
<img src="//i1.daumcdn.net/thumb/C265x150/?fname=" alt="">
변경된 썸네일의 표출 모습을 볼까요?
훨씬 깔끔하게 이미지가 표출되는 것을 볼 수 있습니다. 이미지 활용을 잘 참고하시면 좋을 것 같습니다. 여러용도로 사용이 가능할 것 같다는 생각이 드네요...
썸네일을 변경하게 되면 기존의 1:1 비율로 사용하던 CSS 가 틀어지게 될 것입니다. 이부분을 수정하고 반응형 작업에 영향을 미치는 부분이 있는지 검토를 해봐야겠죠?
CSS 의 편집은 별도의 파일을 만들지 않고 스킨편집의 CSS 영역에서 추가하여 수정하도록 하겠습니다.
썸네일 관련 Class 를 찾아보니 post-item 과 관련된 항목들의 수정이 필요하네요
.post-item .thum img {
width: 100%;
height: auto;
transform: translateY(-25%);
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%);
}
// 위 내용을 아래와 같이 수정합니다.
.post-item .thum img {
width: 100%;
height: auto;
}어떤 부분이 수정 되었는지 확인하셨나요?
transform: translateY(-25%);
-webkit-transform: translateY(-25%);
-ms-transform: translateY(-25%);이 부분은 아마도 1:1 비율의 썸네일을 CSS 를 통해서 특정 비율로 보여주기 위해 사용한 것 같습니다. 스킨에서 이미지를 여러 용도로 활용하는 것은 아닌데 이렇게 처리된 부분이 약간 의아하지만 이부분이 오히려 방해가 되니 삭제합니다.
이렇게 수정을 해도 썸네일 표시 영역하단에 약간의 공백이 생깁니다. 이 부분은 다음에서 처리합니다.
.post-item .thum {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 0;
margin-bottom: 5px;
padding-bottom: 60.869565217391304%;
background-color: #f8f8f8;
}
// 위 영역의 padding-bottom 을 조정하세요
.post-item .thum {
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 0;
margin-bottom: 5px;
padding-bottom: 56%;
background-color: #f8f8f8;
}위와 같이 padding-bottom 을 56% 수준으로 조정합니다. 근본적인 수정작업이 아니기 때문에 일단 상황에 맞게 수정하겠습니다.
이제 썸네일 부분의 CSS 처리는 완료되었습니다. 그러면 리스트를 살펴보겠습니다. 리스트 수정을 위해서 CSS 를 잘 사용하신다면 원하시는 형태로 수정하실 수 있습니다. 그러나 시간과 노력을 절약하기 위해 다른 스킨에서 원하는 형태를 가져오도록 하겠습니다.
/* 리스트 */
.list_content {padding:24px 0 26px;border-bottom:1px solid #efefef }
.list_content::after { content:''; clear:both; display:block }
.list_content .thumbnail_post { float:right; width:265px; height:150px; margin:6px 0 5px 30px }
.list_content .link_post{display:block;overflow:hidden;text-decoration:none}
.list_content .link_post:hover .tit_post {color:#ee7f8a}
.list_content .tit_post{display:block;font-weight:normal;font-size:24px;line-height:34px}
.list_content .txt_post{display:-webkit-box;display:-ms-flexbox;display:box;overflow:hidden;margin-top:4px;font-size:13px;line-height:23px;color:#5c5c5c;vertical-align:top;word-break:break-all;-webkit-box-orient:vertical;-webkit-line-clamp:4}
.list_content .txt_bar { margin:0 7px }
.list_content .detail_info{margin-top:11px;font-size:12px;color:#aaa}
.list_content .detail_info .link_cate{font-size:13px;text-decoration:none;color:#ee7f8a}
@media
only screen and (max-width:738px){
/* 리스트 */
.list_content {padding:19px 15px 15px}
.list_content .thumbnail_post { margin-top:1px; margin-left:14px }
.list_content .thumbnail_post,
.list_content .thumbnail_post img { width:140px; height:80px }
.list_content .tit_post {font-size:17px;line-height:21px;color:#222;font-family:applesdgothicneo-light;display: -webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;word-break:break-all;-webkit-box-orient:vertical}
.list_content .txt_post {font-size:14px;line-height:19px;font-family:applesdgothicneo-ultralight;-webkit-line-clamp:2;}
.list_content .detail_info {color:#a7a7a7; font-family:applesdgothicneo-ultralight; margin-top:4px}
.list_content .detail_info .txt_bar { margin:0 2px }
.list_content .detail_info .txt_date { font-size:13px }
}위와 같은 내용을 CSS 에 추가합니다. Book Club 의 반응형 처리는 화면 크기를 처리하는 기준이 다르기 때문에 738px 부터 처리되는 반응형 처리 영역을 함께 추가합니다. 위 코드에서 눈여겨볼 내용은 PC 버전에서 265,150 의 썸네일 크기 모바일 영역에서 140,80 의 썸네일 크기를 유지합니다. 나머지 수치들은 필요하시면 더 수정 하셔도 됩니다.
CSS 수정과 함께 HTML 도 손을 보아야 합니다.
<div class="list_content">
<a href="/21" class="thumbnail_post">
<s_article_rep_thumbnail>
<img src="//i1.daumcdn.net/thumb/C265x150/?fname=https://blog.kakaocdn.net/dn/bSZUsL/btqykxyNNMX/oAZF3Qsbbe9OKw7kz3aINK/img.png" alt="">
</s_article_rep_thumbnail>
<a href="/21" class="link_post">
<strong class="tit_post">블로그시작 9강. 티스토리 블로그 스킨 최적화</strong>
<p class="txt_post">티스토리 블로그를 시작한지 한달 정도 지난 것 같네요. 그동안 검색엔진 최적화, 애드고시와 같이 블로그 최적화를 위한 기본적인 사항들이 정리했습니다. 애드센스를 통해 수익화를 하기 위해서 광고의 배치가 중요합니다. 광고를 메인, 홈, 상세화면, 사이드바 영역에서 어떻게 나타나도록 하는지 고민이 필요합니다. 블로그를 광고를 위해서만 사용하는 것은 아니고 자신의 브랜드를 위한 공간이기 때문에 사이트가 깔끔하게 보여지는 것도 구독자들을 위한 예의라고 할 수 있죠. 오늘은 이런 고민들을 통해서 발견하게된 티스토리 블로그 스킨에 대한 고민들을 나누어 보겠습니다. 저는 기존에 Square 스킨을 사용하고 있었습니다. 깔끔하고 좋은 스킨입니다. 그런데 몇가지 의문점이 생겼습니다. 일단 홈화면에서 본문이 바로 노출됩니..<</p>
</a>
</div>스킨편집의 HTML 영역에서 <s_article_rep> 을 찾습니다. 밑에 <s_index_article_rep> 영역을 볼 수 있습니다. <s_index_article_rep></s_index_article_rep> 내부의 내용을 지우고 위의 코드를 대체합니다.
어떻게 변경 되었는지 살펴볼까요?
군더더기 없이 깔끔한 형태가 되었습니다. 향후에 상단에 메인배너, 사이드바에 광고, 리스트 영역을 커스텀한 광고 노출작업을 진행하고자 합니다. 모바일도 살펴볼까요? 반응형이 제대로 적용이 되었는지 확인이 필요합니다.
깔끔한 화면을 확인할 수 있습니다. 간단한 스킨수정으로 원하는 형태로 변경하였습니다. 다음에는 광고를 적용한 스킨작업을 살펴보아야겠네요. 블로그가 아직 없으신 분들은 아래 글을 보시고 블로그 생성부터 쉽게 시작해 보시면 좋을 것 같습니다.
2019/08/24 - [블로그시작] - 블로그시작 2강. 티스토리 블로그 생성
블로그시작 2강. 티스토리 블로그 생성
오늘은 블로그를 직접 만들고 만져보는 시간을 가져보겠습니다. 블로그를 만드는 것은 메일계정을 새성하는 것만큼 쉬운 작업입니다. 그동안 미루어 두었던 블로그를 오늘 바로 만들어 보겠습니다. 지난 글에서..
kindjm.tistory.com
'블로그시작' 카테고리의 다른 글
| 블로그시작11강. 티스토리 북클럽(Book Club)스킨 반응형 최적화 (17) | 2019.09.21 |
|---|---|
| 블로그시작10강. 티스토리 홈화면 애드센스 디스플레이광고 최적화 (3) | 2019.09.20 |
| 블로그 타이틀 이미지 웹에서 쉽게 만들기 (0) | 2019.09.18 |
| 블로그에 무료 이미지 넣기 (0) | 2019.09.11 |
| 블로그시작 8강. 티스토리 구글 애드센스(Google AdSense) 신청 (0) | 2019.09.11 |
댓글