블로그 사이드바 동적 활용법과 모바일 UX 최적화 전략 (CLS 방지 코드 포함)

블로그 수익 향상을 위한 데스크탑사이드바의 동적 위치 이동(Sticky Sidebar) 설정과 모바일 환경에서의 항시 노출 방법입니다.댓글 보기 버튼을 추가하여 사용자 경험(UX)을 개선하고 Core Web Vitals 지표 중 CLS(레이아웃 변동)를 유발하지 않는 최적화된 HTML 및 JavaScript 코드를 안내합니다.

1. 블로그 수익과 사용자 경험(UX) 관점에서의 사이드바 재정의

블로그에서 사이드바는 정보와 광고를 사용자에게 노출하여 블로그 수익에 직접적인 영향을 주는 핵심 영역입니다. 사이드바는 방문하는 사용자에게 블로그의 중요한 정보(인기글, 카테고리, 공지사항)를 간단하게 전달하는 역할을 하며, 애드센스 등 광고를 노출시켜 수익 향상에도 크게 기여합니다.

모바일 환경에서의 사이드바 문제점

하지만 모바일 접속 시 사이드바는 몇 가지 구조적인 문제가 발생합니다. 일반적인 블로그 스킨의 경우, 광고 노출이 제대로 이루어지지 않거나, 모바일에서는 사이드바가 토글 형태로 숨겨지기 때문에 운영자가 노출시키고 싶은 정보나 광고가 사용자에게 효과적으로 전달되지 않습니다. 이로 인해 사용자의 선택이 제한되고, 광고 클릭률(CTR)이 하락하여 블로그 수익이 저하될 수 있습니다.

더 큰 문제는 블로그 수익을 위한 광고 노출입니다. 많은 사용자가 모바일 상단의 토글형 사이드바를 인지하지 못하는 경우도 있어, 모바일에서 사이드 영역은 사실상 무용지물이 되어 기회비용을 잃게 됩니다. 따라서 블로그 수익과 사이드바 활용을 고려할 때, 사이드바의 노출 방식, 특히 모바일에서의 항시 노출 전략이 매우 중요합니다.

데스크탑 환경에서의 공간 낭비 문제

사이드바는 데스크탑에서 전체 영역의 3분의 1을 차지하지만, 주 콘텐츠의 양이 많아져 사용자가 길게 스크롤하면 사이드바가 끝나는 지점 이후의 나머지 영역이 빈 공간으로 남게 되는 경우가 많습니다. 이로 인해 데스크탑에서도 스크롤 시 광고 노출이 중단되는 공간 낭비가 발생하게 됩니다. 이 문제를 해결하기 위해 사이드바 정보를 동적으로 이동시키는 방법을 적용해야 합니다.

2. 블로그 수익 향상을 위한 동적 사이드바 구현 전략

데스크탑에서 사이드바 정보를 동적으로 이동 (Sticky/Follow Sidebar)

데스크탑 환경에서 사이드 정보가 사용자 뷰 영역(View Port)을 벗어나 스크롤될 때, 이를 다시 사용자 뷰 영역으로 이동시켜 항상 노출될 수 있도록 설정합니다. 이 방법으로 사이드바가 사용자를 따라다니는 '스티키(Sticky)' 구조를 구성할 수 있으며, 특히 광고 노출 효율을 극대화할 수 있습니다.

뷰 이동으로 빈 공간을 채우고 광고 노출 시간을 늘리는 전략

모바일에서 선택적 노출을 항시 노출로 설정 (모바일 최적화 전략)

모바일 환경에서 사이드 영역을 토글 형태로 사용하면 사용자가 이를 확인하기 위해 선택적으로 접근해야 합니다. 이러한 선택적 환경은 사용자에게 불편함을 줄 뿐만 아니라 광고 노출 기회를 줄입니다. 또한, 토글 형태의 사이드 정보는 주 콘텐츠를 가리기도 합니다.

따라서 사용자가 정보를 쉽게 접근할 수 있도록 사이드 영역을 주 콘텐츠 하단에 고정 배치하고, 모바일 접속 시 사이드 영역을 항상 노출되게 설정하면 광고 노출 효과도 높일 수 있습니다.

선택적 사항과 주 콘텐츠의 충돌을 방지하고 하단 고정 배치를 통한 노출 극대화

사이드 영역을 동적 사이드(데스크탑)와 고정 사이드(모바일)로 구성하는 아래 코드를 통해 이 문제를 해결할 수 있습니다. 해당 코드는 티스토리 스킨에 따라 HTML 요소의 id나 class 선택자만 변경하면 다른 스킨에서도 사용 가능합니다.

3. CLS 방지를 위한 사이드 영역 동적 고정 코드

데스크탑 동적 스크롤 및 모바일 하단 고정 스크립트

아래 코드는 데스크탑에서 사이드 정보가 사용자의 뷰 영역에 따라 동적으로 위치를 변경하고, 모바일 환경에서는 주 콘텐츠 하단에 사이드 영역을 position: static으로 고정시켜 스크롤을 따라가지 않도록 설정합니다. 이는 Blub Club 스킨 기준으로 작성되었으며, #aside와 #container 선택자를 사용합니다.

✔ HTML에 적용될 스크립트 코드 (/body 상단에 적용)

script async
document.addEventListener('DOMContentLoaded', function() {
const aside = document.getElementById('aside');
const container = document.getElementById('container');

function updateAsidePosition() {
const isDesktop = window.matchMedia('(min-width: 769px)').matches;
const isMobile = window.matchMedia('(max-width: 768px)').matches;

if (isMobile) {
aside.style.width = '100%';
aside.style.position = 'static';
aside.style.top = 'initial';
aside.style.right = 'auto';
 // 모바일에서는 토글 메뉴를 숨김 (CSS에서 처리)
} else if (isDesktop) {
 // 데스크탑 Sticky 동작 구현 (스크롤 위치에 따른 position 변경)
const asideRect = aside.getBoundingClientRect();
const asideHeight = asideRect.height;
const windowHeight = window.innerHeight;
const scrollTop = window.scrollY;
const containerRect = container.getBoundingClientRect();
const containerBottom = containerRect.bottom + scrollTop;
 
 // 이 부분은 스크립트 오류를 방지하기 위해 원본을 분석하여 수정된 형태입니다. 
 // 실제 Sticky 기능을 위해 CSS의 position: sticky를 우선 활용하는 것이 권장되며, 
 // 복잡한 계산식 대신 아래 CSS 코드를 사용하는 것이 CLS 방지에 더 안정적입니다.
 
const asideBottom = asideRect.bottom + scrollTop;

 // 만약 사이드바의 하단이 뷰포트 하단 + 스크롤 위치보다 크다면 (일반적인 Sticky 동작)
if (asideBottom windowHeight + scrollTop) { 
aside.style.position = 'absolute';
aside.style.top = `${Math.max(windowHeight - asideHeight, 0)}px`;
} else {
aside.style.position = 'sticky';
aside.style.top = '0';
}
}
}

window.addEventListener('scroll', updateAsidePosition);
window.addEventListener('resize', updateAsidePosition);
updateAsidePosition();
});
/script

CSS를 이용한 Sticky 및 모바일 메뉴 숨김

모바일에서 불필요한 사이드 메뉴 토글 버튼을 숨기고, 데스크탑에서 position: sticky를 통해 기본적인 동적 노출을 확보하는 CSS 코드입니다. CSS 편집의 맨 하단에 추가해 주세요.

✔ CSS에 적용될 CSS 코드

#aside {
position: sticky !important;
top: 0; /* 스크롤 시 상단에 고정 */
}

@media screen and (max-width: 768px) {
/* 모바일 환경에서는 사이드바를 주 콘텐츠 아래로 밀어내고 고정 해제 */
#aside {
position: static !important;
width: 100%; /* 너비를 100%로 설정하여 가시성 확보 */
}
#header .util .menu {
display: none; /* 모바일 사이드바 토글 메뉴 버튼 숨김 */
}
}

이 방법을 통해 항상 사이드 영역이 사용자에게 노출될 수 있으며, 광고의 노출 효율성도 증대됩니다. 또한, position: sticky는 뷰포트 내에서 요소가 차지하는 공간을 미리 확보하므로 CLS(레이아웃 변형)를 유발하지 않아 안정적입니다.

4. 댓글 숨기기 및 '댓글 보기' 버튼을 통한 사용자 경험(UX) 개선

사이드바를 모바일 주 콘텐츠 하단에 배치할 경우, 댓글이 문제를 일으킬 수 있습니다. 사용자가 사이드 정보(광고)에 도달하기 위해 길고 복잡한 댓글 섹션을 스크롤해야 하므로 불편함이 발생하며, 이는 사이드 정보란에 도달할 확률을 낮춥니다.

따라서 사이드바를 선택적 환경으로 만들지 않고, 댓글 영역을 선택적 환경으로 조성하는 것이 블로그 수익과 UX 모두에게 유리합니다.

댓글 보기 버튼 추가 및 코드 설명

초기 페이지 로딩 시 댓글을 숨기고, 버튼을 추가하여 사용자가 선택할 경우 댓글 내용을 볼 수 있도록 수정합니다. 아래 코드를 HTML의 맨 하단 /body 상단에 적용하면 자동으로 댓글 보기 버튼이 생성됩니다.

✔ HTML에 적용될 스크립트 코드

script async
document.addEventListener('DOMContentLoaded', function() {
// DOM 로드 후 1초 지연 실행 (페이지 로드 안정성 확보)
setTimeout(function() {
const buttonContainer = document.createElement('div');
buttonContainer.className = 'button-container';

const button = document.createElement('button');
button.id = 'show-comments';
button.className = 'styled-button';
button.textContent = '댓글 보기';

buttonContainer.appendChild(button);

const namecardBox = document.querySelector('.tt_box_namecard');
const comments = document.querySelector('.tt-comment-cont'); // 댓글 컨테이너

 // 댓글 영역이 존재하고, 댓글 위젯이 존재하는 경우에만 버튼 삽입
if (namecardBox && comments) {
namecardBox.parentNode.insertBefore(buttonContainer, namecardBox.nextSibling);
 
 // 초기 댓글 숨기기는 CSS에서 처리
 
 // 버튼 클릭 이벤트 리스너
button.addEventListener('click', function() {
if (comments) {
 // 댓글 표시/숨기기 토글 기능
comments.style.display = comments.style.display === 'block' ? 'none' : 'block';
this.textContent = comments.style.display === 'block' ? '댓글 숨기기' : '댓글 보기';
}
});
}
}, 1000);
});
/script

✔ CSS에 적용될 CSS 코드 (댓글 숨기기 및 버튼 스타일링)

이 코드는 초기 댓글 영역(.tt-comment-cont)을 숨기고, 버튼을 사용자 취향에 맞게 꾸밀 수 있도록 제공됩니다. CSS 편집란의 맨 하단에 추가해 주시면 됩니다.

/* 초기 댓글 영역 숨김 */
.tt-comment-cont{
display: none; 
}

/* 버튼 컨테이너 및 스타일 */
.button-container {
display: flex;
justify-content: center;
margin-top: 20px;
}

.styled-button {
position: relative;
border: 1px solid #adb5bd;
color: #292d31;
font-weight: 500;
font-size: 16px;
padding: 10px 40px 10px 45px;
background-color: #f8f9fa;
cursor: pointer;
border-radius: 5px;
transition: all 0.3s ease;
}

.styled-button:hover {
background-color: #e9ecef;
color: #212529;
border-color: #6c757d;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

사이드바에 광고를 넣으면 CLS(레이아웃 변동) 문제가 생기지 않나요?

사이드바에 광고를 넣을 때 해당 광고 영역의 크기를 CSS를 통해 미리 고정(예: height: 250px;)하거나, position: sticky를 사용하여 공간을 확보하면 CLS 발생을 최소화할 수 있습니다. 위 코드처럼 position: sticky를 사용하면 요소가 차지하는 공간이 유지되므로 안정적입니다. 특히 CLS(레이아웃 변형)를 유발하지 않아 안정적인 성능을 유지할 수 있습니다.

모바일에서 사이드바를 숨기는 대신 하단으로 내리는 것이 수익에 더 유리한가요?

네, 훨씬 유리합니다. 모바일에서 사이드바가 숨겨지면 사용자가 명시적으로 열어야 하므로 광고 노출 기회가 거의 사라집니다. 사이드바를 주 콘텐츠 하단에 항시 배치하면, 사용자가 글을 끝까지 읽었을 때 자연스럽게 광고에 노출되어 수익 창출 기회가 유지됩니다. 이는 모바일 최적화의 핵심 전략 중 하나입니다.

댓글 보기 버튼을 추가하면 댓글 작성률이 줄어들지 않나요?

댓글을 숨기면 작성률이 약간 줄어들 수 있지만, 이는 트레이드 오프(Trade-off)입니다. 댓글 영역을 숨김으로써 사용자의 주 콘텐츠 소비 및 사이드바 광고 노출률을 높이는 효과를 얻을 수 있습니다. 또한, 사용자가 댓글 보기를 클릭하여 명시적으로 관심을 표현했을 때만 로드되므로, 페이지 로딩 성능 개선에도 간접적으로 기여합니다.

이 코드를 다른 블로그 플랫폼(예: 워드프레스)에서도 사용할 수 있나요?

제공된 JavaScript 코드는 HTML 요소의 ID(예: #aside, #container)에 의존합니다. 워드프레스나 다른 플랫폼에서 사용하려면 해당 플랫폼의 테마 구조를 확인하여 사이드바와 주 콘텐츠 영역의 정확한 ID나 클래스 선택자(Selector)로 변경해야 합니다. CSS 코드 역시 선택자만 변경하면 범용적으로 사용할 수 있습니다.

Daily Hub