티스토리 왓에버 Whatever 스킨 오른쪽 사이드바 구현

티스토리 Whatever 스킨은 깔끔하고 다 좋은데 사이드바가 본문 밑에 위치해서 존재감이 전혀 없습니다. 본문 글 내용으로 승부를 보는 전략인데.. 아무도 밑에 달린 사이드바 내용을 확인하지 않는 것 같습니다. 최근 포스트, 인기 포스트, 최신 댓글, 카테고리 등을 사이드바에 추가했으나 거기까지 도달하는 경우는 거의 없어 보입니다. 결과적으로 구글 애널리틱스 이탈률에서 처참한 결과를 보여 주고 있는데.. 아무리 잘 잡아도 80% 중간이고 대부분 90% 대의 이탈률을 보여줍니다.

어떻게 하면 이탈률을 줄여 볼 수 있을까 고민하다가.. 최근 다크모드 업그레이드가 끝난 왓에버 스킨의 사이드바를 본문 오른쪽 옆에 위치시키기로 결심하고 프로젝트를 수행해 봤습니다. 간단하게는 사이드바가 있는 스킨 (예, 북클럽 등)으로 바꾸면 되겠지만.. 다크모드 업그레이드한 것이 아까워서 왓에버 스킨을 변경시키는 쪽으로 방향을 잡았습니다. 최근 css 실력이 부쩍 늘었으나 전혀 모르는 레이아웃을 건들려고 하니 꽤 시행착오를 겪었습니다. 최종적으로 만족스럽게 사이드바를 본문 오른쪽에 배치하는데 성공했습니다. '찐' 사이드바라고 할 수 있죠.

사이드바 재배치에 성공한 왓에버 스킨 다크모드 모습

프로젝트에서 핵심 디자인은 본문, 방명록, 태그, 카테고리 등에는 오른쪽에 사이드바를 배치하고 홈에는 기존처럼 아래쪽에 사이드바를 배치하는 것이었습니다. 이게 의외로 어려운데 결국 html 편집에서 각 모듈의 위치를 아래 html 코드처럼 재배치 시켜야 했습니다. 사이드바 (#aside) 내용들을 본문 (#content .inner) 안으로 집어 넣고 하는 과정이고, 또 본문 article 영역을 cover와 inner로 분리하고, inner는 대부분 콘텐츠를 포함한 좌측 main-body와 우측 사이드바 aside로 구분되어 있습니다. main-body는 새로 정의해 준 class입니다. 대략 이 방법으로 비교적 간단하게 (코드를 상대적으로 많이 수정하지 않고) 우측 사이드바 구현에 성공했습니다. 하지만 저도 css 초보로 배우는 입장이어서 아직 완벽하지 않은 부분이 곳곳에 있을 수 있습니다.

혹시 왓에버 스킨에서 같은 프로젝트 시도하실 분들은 아래 코드들 참고해서 html 과 css 를 변경해 보시기 바랍니다. 다만 어느 정도 html과 css를 다룰 줄 아시는 분들에게만 도움이 되는 내용이 되겠습니다. 초보로 시도해 보실 분들은 꼭 기존 스킨 백업하시고, 천천히 실험해 보면서 DIY 정신에 입각해서 도전해 보시기 바랍니다.

먼저 html 변경 부분은 앞서 설명한 것처럼 아래 구조로 본문을 변경했습니다. 

<section class="container">
	<article id="content">
		<s_cover_group>
           		.
           		.	<! 커버들을 여기에 위치시킴 >
           		.
		</s_cover_group>
        
		<div class="inner">
			<div class="main-body">
				<s_page_rep>
                
				</s_page_rep>
				<s_notice_rep>
                
				</s_notice_rep>
         
 	          		.
 	          		.   <! 기타 태그, 방명록 등을 여기에 위치시킴 >
 	          		.
           
				<s_article_rep>
                
				</s_article_rep>
                
				<s_paging>
                
				</s_paging>
			</div>
								
			<aside id="aside">
			  <!div class="inner">	<! 코멘트 처리해야 함 >
				<div class="sidebar-1">
                
	 	                .
		                .	<! 사이드바들을 여기에 위치시킴 >
		                .

				</div>
			  <!/div>
			</aside>					
		</div>
	</article>	
</section>

다음은 pc 화면에서 화면 분할하는 css 코드 부분입니다. 대부분 기존에 있던 코드를 살짝씩 수정했고, .main-body 부분은 새로 추가했습니다.

#content .inner {
	overflow: hidden;
	max-width: 1200px;
	margin: 0 auto;
}
#content .main-body {
	overflow: hidden;
	max-width: 860px;
	width: 69%;
	margin: 0 auto;
	float: left;
}
#aside {
	margin-top:100px;
	padding:36px 0 80px;
	border-top: 1px solid #e6e6e6;
}
#aside .inner {
	overflow:hidden;
	max-width: 1200px;
	margin: 0 auto;
}
#aside h2 {
	margin-bottom: 7px;
	font-size:1em;
	color:#666;
}
#aside .sidebar-1 {
	float: left;
	width: 31%;
	min-height: 10px;
	padding-left: 70px;
	box-sizing: border-box;
}
#aside .sidebar-2 {
	float: left;
	width: 31%;
	min-height: 10px;
	padding-left: 70px;
	box-sizing: border-box;
}
#aside .sidebar-3 {
	float: left;
	width: 31%;
	min-height: 10px;
	padding-left: 70px;
	box-sizing: border-box;
}

미디어 스크린 - 태블릿 화면에서 다음 css 코드를 추가했습니다.

	#content .main-body {
	width: auto;
	float: none;
	padding: 0;
	}

기타 취향에 맞게 여기 저기 공백, 여백, 퍼센티지 숫자들을 조절해 주면 되겠습니다. 

왓에버 스킨에서 사이드바를 오른쪽에 배치하고 나니 여러 사이드바 컨텐츠들과 광고들을 배치할 수 있는 자유가 생겼습니다. 애드센스, 쿠팡, 애드핏, 데이블 등을 과감하게 집어 넣었고.. 다만 독자들 눈이 좀더 어지러워진 것 같아 살짝 미안한 마음입니다. 그러나 궁극적으로 사이드바 오른쪽 배치가 이탈률 감소에 기여했으면 좋겠고, 광고 노출에 의한 수익도 좀 더 향상됐으면 하는 바램입니다.

(추가 2020/8/4) html 코드 부분 설명을 좀 더 보완해 봤습니다. 본문의 html 구조를 예시된 모양으로 변경하면 됩니다. 특히 사이드바의 #aside .inner class를 예시처럼 코멘트(!) 처리하거나 dummy로 만들어 주어야 합니다. 대략 이정도면 초보자도 쉽게 따라할 수 있을 것 같습니다.

(추가 2020/8/18) 왓에버 스킨 오른쪽에 '찐' 사이드바를 배치하고 이탈률 감소나 수익 증가를 기대했지만 생각보다 뚜렷한 변화가 느껴지지 않습니다. 아무래도 블로그 글에 대한 집중도가 더 떨어지는 것이 아닌가 여겨집니다. 다시 원래 상태로 되돌리기 위해서는 아래처럼 main-body 클래스에서 width와 float만 수정해 주면 됩니다. 

#content .main-body {
	overflow: hidden;
	max-width: 860px;
	width: 100%;
	margin: 0 auto;
	float: none;
}

방문자 상황 봐가면서 어느 것이 더 이로운지 이것 저것 실험해 봐야 할 것 같습니다. 일단 저는 원상복구해 보겠습니다.

(추가 2020/9/1) 아래 댓글로 왓에버 스킨에서 잘 구현이 안된다고 하셔서.. 다른 블로그에서 왓에버 최신 버전으로 연습을 해 봤는데 역시 잘 됩니다. 왓에버 스킨 버젼 문제는 없었습니다. 최신 스킨 html 편집에서 다음 과정이 필요했습니다.

1. html 편집에서 #content .inner 클래스를 커버 그룹 제외하고 나머지를 다 포함하도록 <div> ... </div>를 위치시킵니다.

2. 중간에 (#aside 사이드바 위에) 위치한 </article>를 맨 마지막으로 옮깁니다.

3. #content .main-body 클래스를 #aside 애들만 제외하고 다 포함하도록 새로 <div> ... </div> 추가해 줍니다.

4. #aside .inner 클래스를 <!div> ... <!/div> 코멘트 처리합니다.

5. css 편집을 위의 예시처럼 바꿉니다.

6. 스킨편집에서 커버를 선택합니다. (최초 최신글 일 때는 동작하지 않더라구요)

사이드바 구현 도전해 보시는 분들 꼭 성공하시길 바랍니다. 제가 어떻게 더 도와줄 수 있는 방법은 없네요.

(추가 2020/9/13) 왓에버 스킨 오른쪽 사이드바로 옮기는 걸 위의 글로된 설명만 봐서 어렵다고 하시는 분들이 있어서, 아래 동영상에서 직접 시연을 하며 설명해 봤습니다. 동영상 보고 따라하면 대부분 성공하실 걸로 생각됩니다. 나머지 꾸미는 부분은 각자 취향에 맞게 하시면 될 것 같습니다. youtu.be/mdl-XFEuQ-Q

왓에버 스킨 사이드바 만들기 동영상 시연

(추가 2020/9/21) 자.. 이렇게 해도 어려워 하시는 분들을 위해 이번에는 간단한 변형 스킨을 배포하는 방법을 공부해 봤습니다. 하다하다 이제 스킨까지 배포하게 되었네요 ㅋㅋ 티스토리 왓에버 스킨에서 사이드바 "오른쪽" 노출을 위한 변형 버젼이고요.. 그래서 이름을 Whatever-Side 1.0으로 붙였습니다. 아래 스킨을 다운 받으셔서 적용하시면 되겠습니다. 스킨을 적용하는 방법은 다른 유/무료 스킨 다운받아 적용하는 방법과 똑같습니다. 스킨변경/스킨등록/적용 순서를 따라하시면 됩니다. 참고로 메타태그 플러그인과 구글서치콘솔 플러그인을 사용하면 스킨변경시 구글과 네이버 사이트 인증 태그를 복붙하는 번거로움을 줄일 수 있습니다.

기본적으로 최신 Whatever 스킨에 1. 사이드바 위치 오른쪽 변경, 2. 카테고리 추가, 3. 방명록 썸네일 수정, 4. 공지사항 저자 표시, 5. 다크모드 마이너 버그 수정 등을 반영했고, 푸터에 돋보기김선생 사이트 링크 걸었습니다. 스킨 편집의 "목록 더보기" 옵션은 사용 안하시는 게 좋습니다. 그럼 잘 쓰시고 댓글 하나 달아주시고 유튜브 동영상 한번씩 봐주시면 감사하겠습니다.

(추가 2020/9/25) Whatever-Side 1.1 에서는 몇가지 버그를 수정했고, 인기 포스트, 최신 댓글을 사이드바에 추가했습니다.

(추가 2020/10/3) Whatever-Side 1.2 에서는 유연한  (Flexible) 사이드바 구조를 구현하기 위해 사이드바1은 오른쪽에 사이드바 2-4는 기존 Whatever 스킨처럼 아래쪽에 배치하는 구조로 변경했습니다. 아래 예시처럼 사이드바를 배치해 보시기 바랍니다. 그밖에 슬라이드 자동넘김, 태그 클라우드 표시, 다크모드 색깔 조정 등을 추가했습니다.

사이드바 배치 방법 예시

(2020/10/4) 만일 사이드바를 왼쪽으로 옮기고 싶다면 main-body의 float 변수를 left에서 right로 바꿔주면 됩니다. 그리고 sidebar-1의 padding-left를 padding-right으로 바꿔주면 됩니다.

#content .main-body {
	overflow: hidden;
	max-width: 860px;
	width: 72%;
	margin: 0 auto;
	float: right;
}

#aside .sidebar-1 {
	float: left;
	width: 28%;
	min-height: 10px;
	padding-right: 36px;
	box-sizing: border-box;		
}

(추가 2020/10/15) Whatever-Side 1.3 에서는 추천 포스트를 사이드바에 추가했습니다. 추천 포스트를 편집하려면 "스킨 편집/html 편집"에서 아래 부분을 찾아 주소(숫자)와 제목 부분을 수정하고 원하는 포스트만큼 추가해 주시면 되겠습니다.

	<li><a href="/2">(예시) 과학자의 연구주기는 얼마가 적당한가</a></li>

기타 가독성을 높이기 위해 글자 크기와 줄간격을 조정했고 한글폰트를 나눔고딕으로 변경했습니다.

(추가 2020/11/9) 블로그 정보를 사이드바에 추가했습니다. 그밖에 프리뷰 파일이 깨지는 관계로 모든 파일을 원복해 봤습니다.

(추가 2022/8/24) &nbsp 공백문자 관련 본문에 엑박이 뜨는 문제 해결해서 반영했습니다. https://drkimfixnsolve.tistory.com/261 

(추가 2023/1/21) "나의 링크" 치환자를 이용해 사이드바에 추천 링크를 추가했습니다. https://drkimfixnsolve.tistory.com/275 참고하시고, 아래 최신 버전 다운 받으세요. 

Whatever-Side 1.5.zip

0.12MB

*주의* 스킨 편집의 "목록 더보기" 비활성화해야 정상 작동합니다. 

데모사이트는 sciencediary.tistory.com 입니다. 사이드바 위치를 취향에 따라 조정해서 쓰시고, 도움이 되었다면 댓글 하나 혹은 유튜브 동영상 한번씩 봐주시면 감사하겠습니다.

사이언스 다이어리