구글 블로그 테마 만들기 6편 맨 위로 가기 버튼 적용 요령

블로그를 운영하다 보면 독자가 글을 읽다가 다시 맨 위로 올라가고 싶어 하는 순간이 언제인지 고민하게 됩니다. 특히 정보가 가득 담긴 긴 글을 읽을 때, 스크롤을 한참 내린 독자가 다시 첫머리로 가기 위해 마우스 휠을 연신 굴려야 한다면 상당한 피로감을 느끼게 되죠. 이러한 사소한 불편함이 결국 블로그를 이탈하게 만드는 원인이 되기도 합니다. 독자의 편의성을 높이고 사이트에 더 오래 머물게 만들기 위해 꼭 필요한 장치가 바로 'Back to Top(맨 위로 가기)' 버튼입니다.

맨 위로 가기 버튼이 블로그 체류 시간과 가독성에 미치는 영향

우리가 공들여 작성한 양질의 롱테일 콘텐츠는 대개 분량이 길어지기 마련입니다. 독자가 긴 스크롤을 내려 글을 모두 읽은 뒤, 다른 유용한 카테고리나 메뉴를 탐색하려 할 때 상단 내비게이션 바가 보이지 않는다면 자연스럽게 브라우저의 뒤로 가기 버튼에 손이 가게 됩니다. 이는 웹사이트의 이탈률을 높이는 직접적인 요인이 됩니다.

Back to Top 버튼은 단순한 디자인적 장식이 아닙니다. 독자에게 "언제든 편리하게 처음으로 돌아가 다른 글을 탐색해 보세요"라는 동선을 시각적으로 제안하는 정교한 사용자 경험(UX) 설계의 일환입니다. 실제로 가독성이 좋은 레이아웃과 편리한 네비게이션이 갖추어진 블로그는 독자의 신뢰도를 높이고 체류 시간을 비약적으로 상승시키는 효과를 가져옵니다.

CSS만으로 구현하는 초고속 순수 CSS Back to Top 버튼

가장 단순하면서도 블로그의 로딩 속도에 아무런 부담을 주지 않는 방법은 바로 100% 순수 CSS만을 활용하는 것입니다. 자바스크립트를 전혀 사용하지 않기 때문에 브라우저가 코드를 해석하는 시간을 최소화할 수 있으며, 모바일과 PC 환경 모두에서 극도로 가벼운 구동 속도를 자랑합니다.

이 방식은 HTML 내에 앵커 링크(Anchor Link)를 설정하고, CSS를 통해 화면 우측 하단에 버튼을 항상 고정시켜 두는 형태입니다. 속도와 단순함을 최우선으로 고려하는 미니멀한 테마를 지향한다면 이 순수 CSS 방식을 적용해 보시기 바랍니다.

/* ==========================================================================
12. 맨 위로 가기 버튼 (Back to Top) - 100% 순수 CSS 초고속 버전
========================================================================== */
#back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 46px;
	height: 46px;
	background-color: #1a73e8;
	color: #ffffff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease-in-out;
	z-index: 999;
}
#back-to-top:hover {
	background-color: #004499;
	transform: translateY(-3px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
#back-to-top.show {
	opacity: 1;
	visibility: visible;
}
#back-to-top::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	transform: rotate(45deg);
	margin-top: 4px;
}
@media (max-width: 480px) {
	#back-to-top {
		bottom: 20px;
		right: 20px;
		width: 42px;
		height: 42px;
	}
}

스타일시트 작성을 마쳤다면, 이제 버튼 역할을 수행할 HTML 코드를 배치해야 합니다. 구글 블로그 테마 에디터에서 </body> 태그를 찾은 다음, 바로 위에 아래의 HTML 한 줄을 삽입해 줍니다.

<a href="#content" id='back-to-top' title='맨 위로 이동' aria-label="맨 위로 이동"/>

이 코드는 웹페이지 최상단에 존재하는 콘텐츠 레이아웃 ID(일반적으로 #content 또는 #header 등 테마마다 지정된 본문 시작 ID)를 타겟팅하여 작동합니다. 클릭 시 즉각적으로 페이지 상단으로 이동하게 됩니다.

자바스크립트가 필요한 이유와 스크롤 연동형 고급 버튼의 이점

방금 살펴본 순수 CSS 방식은 가볍다는 큰 장점이 있지만, 페이지를 열자마자 화면 우측 하단에 버튼이 덩그러니 나타나 있는 투박함이 있습니다. 독자가 아직 첫 페이지의 헤더 영역을 읽고 있는데 굳이 '맨 위로 가기' 버튼이 노출되어 시선을 분산시킬 필요는 없겠죠.

우리가 자바스크립트를 활용해야 하는 진짜 이유는 바로 '상황에 맞는 상호작용'을 설계하기 위함입니다. 사용자가 스크롤을 아래로 300px 이상 내렸을 때만 자연스럽게 스르륵 나타나고, 다시 맨 위로 올라갔을 때는 조용히 화면에서 사라지는 정교한 연출은 자바스크립트 없이는 구현하기 어렵습니다. 또한 화면이 툭 끊기며 올라가는 것이 아닌, 부드럽게 미끄러지듯 스크롤되는 'Smooth Scroll' 효과를 모든 구형 브라우저에서도 완벽하게 보장하기 위해 동적 제어가 필요합니다.

스크롤 연동형 고급 Back to Top 버튼 구현을 위한 CSS 설정

이번에 구현할 고급 버전의 버튼은 처음에 투명도(opacity)가 0이며 화면에서 숨겨져(visibility: hidden) 있습니다. 이후 사용자가 스크롤을 내리면 자바스크립트가 이를 감지하여 show 클래스를 주입하고, 그 순간 CSS 전환 효과(Transition)를 통해 부드럽게 화면에 등장하게 됩니다.

구글 블로그 테마의 CSS 탭이나 스킨 편집창에 아래의 세련된 스타일시트 코드를 삽입하여 버튼의 외형과 인터랙션 속성을 정의해 줍니다.

/*
맨 위로 가기 버튼
*/
#back-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 46px;
	height: 46px;
	background-color: #1a73e8;
	color: #ffffff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease-in-out;
	z-index: 999;
}
#back-to-top:hover {
	background-color: #004499;
	transform: translateY(-3px);
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}
#back-to-top.show {
	opacity: 1;
	visibility: visible;
}
#back-to-top::after {
	content: '';
	width: 10px;
	height: 10px;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	transform: rotate(45deg);
	margin-top: 4px;
}
@media (max-width: 480px) {
	#back-to-top {
		bottom: 20px;
		right: 20px;
		width: 42px;
		height: 42px;
	}
}

구글 블로그 테마 스킨에 HTML 및 자바스크립트 최종 이식하기

스타일링을 완료했다면, 다음 단계로 동적 이벤트를 받아낼 버튼 마크업(HTML)과 이를 실제로 구동시킬 스크립트를 이식해 줍니다. 이번 HTML 마크업은 단순 앵커가 아닌 실제 <button> 태그를 사용하여 웹 표준과 접근성을 높였습니다.

마찬가지로 테마의 HTML 편집창에서 </body> 태그 바로 위에 아래의 HTML 코드와 자바스크립트 코드를 순서대로 붙여넣어 줍니다.

<button id='back-to-top' title='맨 위로 이동' type='button'/>

<script type='text/javascript'>
//<![CDATA[
window.addEventListener('DOMContentLoaded', () => {
	const topBtn = document.getElementById('back-to-top');
	if (!topBtn) return;
	window.addEventListener('scroll', () => {
		if (window.scrollY > 300) {
			topBtn.classList.add('show');
		} else {
			topBtn.classList.remove('show');
		}
	});
	topBtn.addEventListener('click', () => {
		window.scrollTo({
			top: 0,
			behavior: 'smooth'
		});
	});
});
//]]>
</script>

스크립트 분석을 간단히 해보자면, 페이지의 돔 요소가 로드된 시점(DOMContentLoaded)에 작동을 준비하고 스크롤이 하단으로 300px 내려가면 show 클래스를 더해 버튼을 부드럽게 노출시킵니다. 그리고 버튼을 클릭하면 내장된 스크롤 메서드가 작동해 최상단으로 부드럽게 이동(smooth)하는 원리입니다. 복잡한 외부 플러그인이나 무거운 제이쿼리(jQuery) 라이브러리를 쓰지 않아 성능상으로 매우 강력한 정석적인 코드 배치 방식입니다.