블로그시작11강. 티스토리 북클럽(Book Club)스킨 반응형 최적화

티스토리 반응형 스킨은 제작자의 고민과 철학을 통해 잘 구성되어 있습니다. 제 블로그는 북클럽(Book Club) 스킨을 기본 베이스로 하여 구성을 하였습니다. 

최근 블로그 애드센스와 스킨 최적화 작업을 진행하면서 디바이스에 따라서 반응하는 반응형에 관련된 사항도 검토하였습니다. 현재 사용하고 있는 스킨에 대한 분석작업이 필요한 난이도가 높은 작업입니다. 

여러 분석작업을 통해 대략적인 스킨의 구조가 파악이 되었습니다. 기본적으로 잘 구성된 스킨임지만 저는 가능한 애드센스 광고를 더 활용하기 위한 디테일한 튜닝을 위해서 몇몇 부분을 수정해 보았습니다.

지난 애드센스 최적화 작업들이 궁금하시면 아래 글들을 참고해 주시기 바랍니다.

2019/09/20 - [블로그시작] - 블로그시작10강. 티스토리 홈화면 애드센스 디스플레이광고 최적화

블로그시작10강. 티스토리 홈화면 애드센스 디스플레이광고 최적화

먼저 스킨의 반응형 구조 파악이 필요합니다. 북클립 스킨은 반응형 작업을 하기 위해서 테블릿 이하버전과 구형 PC해상도 부분이 나누어집니다. 

/* Media Screen */
@media screen and (max-width:1080px) {

...

@media screen and (max-width:767px) {

스킨의 CSS 코드내용을 살펴보시면 위와 같은 영역을 찾을 수 있습니다. 이 부분들은 모두 반응형 작업을 위한 커스텀 영역입니다. 그러면 기본적인 1080이 초과된 해상도의 구성은 어떤 형태를 가지고 있을까요?

위와 같이 margin, padding 을 가진 가로 1080 해상도를 기준으로 합니다. 1080 초과된 영역은 모두 가운데 정렬이 된 상태로 1080을 계속 유지합니다. 그리고 해당 영역을 비율로서 구분합니다. 콘텐츠와 사이드바 영역을 구분하는 구분선과 이를 기준으로 각 20, 총 40에 해당하는 여백도 관리가 필요합니다. 

기본 CSS 수정이 필요할까요? 일단 아래 자료를 검토하겠습니다.

https://support.google.com/adsense/answer/6002621?hl=ko

광고 크기 안내 - AdSense 고객센터

구글의 광고크기에 대한 안내입니다. 첫 머리에서 다음과 같은 사항을 다루고 있습니다. 

실적이 좋은 광고 사이즈가 어떤 것인지를 알려줍니다. 실적이 좋다는 것은 그만큼 광고주가 선호한다는 의미이고 가치가 더 가치가 있다는 의미로 해석이 됩니다. (제가 놓치는 부분이 있다면 댓글 부탁드립니다. ^^)

또 하나 더 살펴볼 자료가 있습니다. 사이드바는 PC 에서 노출이 되고 모니터의 해상도에 따라 반응합니다. 그러면 어떤 해상도에 초점을 두어야 할까요?

https://brunch.co.kr/@clay1987/124

UI 디자인 스터디 : 해상도의 거짓말, UI 스케일링

https://gs.statcounter.com/screen-resolution-stats/desktop/south-korea

Desktop Screen Resolution Stats Republic Of Korea | StatCounter Global Stats

위 자료를 검토하면 이미 많은 PC 사용자들이 가로 1920 해상도로 전환된 것을 볼 수 있습니다. 그래도 소수의 사용자들을 좀더 배려한다면 아직 1366 해상도의 사용자들을 고려해야 합니다. 과거에는 1080의 해상도 비율이 높았기 때문에 반응형스킨에서 이러한 부분들이 고려되는 내용들이 있습니다. 특히 위에서 검토한 광고를 고려한다면 더욱 고민이 필요하죠.

기본 북클럽 스킨은 사이드바 영역이 광고 300크기를 고려하지 않았습니다. 가로의 크기가 대략 230 정도입니다. 저는 이 부분을 수정해서 사이드바 영역에 광고 300크기의 광고가 나타나도록 조정하고자 합니다. 

어떤 CSS 를 수정해야할지 알아볼까요? 

#aside {
	float: right;
	width: 21.296296296296296%;
	padding: 75px 0 32px;
	box-sizing: border-box;
}

// 광고 300에 해당, 아래와 같이 27.7777777777778% 로 변경

#aside {
	float: right;
	width: 27.7777777777778%;
	padding: 75px 0 32px;
	box-sizing: border-box;
}

#content {
	float: left;
	width: 68.518518518518519%;
	padding: 72px 0 60px;
	box-sizing: border-box;
}

// 본문 1080-40-300 = 740이며 기존 비율에서 변동 없음

#container .content-wrap:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 10;
	width: 1px;
	height: 100%;
	margin-left: 255px;
	background-color: #eee;
}

// 본문과 사이드바의 구분선 위치 조정 47.4% 로 조정

#container .content-wrap:before {
	content: "";
	position: absolute;
	top: 0;
	left: 47.4%;
	z-index: 10;
	width: 1px;
	height: 100%;
	margin-left: 255px;
	background-color: #eee;
}

위와 같이 수정하면 가로 1080 이 초과된 해상도에서 다음과 같이 사이드바 영역이 항상 300으로 유지됩니다.

그러면 1080 이하에 해당하는 영역은 어떻게 할까요? 1080 이하 768 이상의 영역에 대한 조정이 필요합니다. 1080 영역은 생각보다 가로 크기가 작습니다. 만약 블로거들에게 인기있는 가로 336 크기의 상단 광고 2개 표현하려면 672 가 필요합니다. 그리고 768 크기에서 300에 해당하는 광고를 사용하면 상단 광고 2개는 포기해야합니다. 뿐만 아니라 본문의 가독성도 현저하게 떨어집니다. 따라서 300에 해당하는 광고를 최대한 유지하면서 768에서는 가로 300을 고집하지 않고 최소 250에 해당하는 광고를 표출하고자 합니다. 

이를 위해 아래와 같이 aside, content 를 1080 영역에 추가하고 구분선의 위치 비율을 조정합니다. 

	@media screen and (max-width:1080px) {
    ...
    // 추가, 광고 250 을 기준으로하는 사이드바 영역 유지
	
	#aside {
		float: right;
		width: 34.3406593406593%;
		padding: 75px 0 32px;
		box-sizing: border-box;
	}
	
	// 추가, 구분선을 기준으로 여백 40을 고려한 본문 비율 유지
	
	#content {
		float: left;
		width: 60.1648351648352%;
		padding: 72px 0 60px;
		box-sizing: border-box;
	}
	
    
	#container .content-wrap:before {
		left: 72.7%;
		margin-left: 0;
	}
    
    // 변경된 비율을 고려하여 62.5% 로 구분선 위치를 조정

	#container .content-wrap:before {
		left: 62.5%;
		margin-left: 0;
	}

위와 같은 코드가 적용된 화면을 살펴보겠습니다.

가장 작은 크기인 가로 768 에 해당하는 화면입니다. 사이드는 아직 유지되고 250에 해당하는 크기를 유지하고 있습니다. 따라서 250 사이드바 광고, 나머지는 본문 상단광고 1개를 운영할 수 있는 구조가 됩니다.

1080 해상도는 어떨까요?

비율로 조정이 되기 때문에 사이드바 영역이 가로 300이나 336 이상으로 나타나는 경우도 발생합니다. 자연스럽게 본문 상단은 2개 광고를 개제할 수 없게 됩니다. 그러나 반대로 사이드바 영역에 336, 300 에 해당하는 광고를 표현할 수 있게 될 것입니다. 최소 가로 250에 해당하는 광고도 물론 사이드바 영역에서 유지할 수 있습니다. 그만큼 광고의 인벤토리가 늘어나는 효과가 있을 것이라고 생각합니다. 

마지막으로 태블릿을 기준으로 나누고 있는 768 미만의 해상도는 어떻게 처리할까요? 메뉴가 슬라이딩 되는 형태를 가지고 있는데 모바일은 심플한 구성이기 때문에 크게 흔들지 않고 기존의 설정을 유지하고자 합니다. 

작업을 통해 사이드바 영역에 실적이 좋은 가로 300 광고를 삽입할 수 있는 구조를 만들게 되었습니다. 더 궁금하신 사항이 있으면 문의해 주시고 아래 지난 글들을 통해서 유익한 정보들 얻어 가시기 바랍니다.