블로그 사이드바 고정하고 모바일 수익까지 챙기는 설정 방법 (CLS 해결)

블로그를 운영하다 보면 수익을 늘리기 위해 사이드바 위치나 노출 방식을 한 번쯤 고민하게 되죠. 데스크탑에서는 스크롤을 내리면 옆 공간이 텅 비어버리고, 모바일에서는 아예 숨겨져 있어서 방문자가 광고나 중요 정보를 놓치는 경우가 많아요. 오늘은 댓글 보기 버튼을 추가해서 깔끔하게 만들고, 화면이 덜컹거리는 CLS 문제없이 사이드바를 고정하는 방법을 친구에게 알려주듯 쉽게 설명해 드릴게요.

1. 수익과 사용자 경험, 사이드바가 왜 중요할까요?

블로그에서 사이드바는 정말 중요한 영역이에요. 방문자에게 인기 글이나 공지사항 같은 알짜배기 정보를 보여주기도 하고, 무엇보다 애드센스 같은 광고를 노출해서 수익을 만드는 핵심 공간이니까요.

모바일에서 사이드바가 사라지는 문제

그런데 모바일로 접속하면 이 중요한 사이드바가 보통 숨겨져 있어요. 대부분의 스킨이 메뉴 버튼을 눌러야만 사이드바가 나오도록 되어 있거든요. 이렇게 되면 방문자가 굳이 열어보지 않는 이상 광고나 정보를 볼 수 없게 돼요. 결국 클릭률도 떨어지고, 우리가 기대하는 수익도 놓치게 되는 셈이죠.

특히 모바일 상단에 있는 토글 메뉴는 존재조차 모르는 분들도 많아서, 사실상 모바일에서 사이드바 영역은 없는 거나 다름없게 돼요. 그래서 모바일에서도 사이드바 내용을 자연스럽게 보여주는 방법이 꼭 필요해요.

데스크탑에서 남는 빈 공간 활용하기

데스크탑 화면에서도 아쉬운 점이 있어요. 글이 길어지면 스크롤을 내릴 때 사이드바는 위에 그대로 멈춰있고, 옆 공간은 하얗게 비어버리잖아요? 이 빈 공간을 그냥 두지 말고 사이드바가 따라오게 만들면 광고 노출 시간을 훨씬 늘릴 수 있어요.

2. 따라다니는 사이드바와 모바일 고정 설정하기

데스크탑: 스크롤 따라오는 사이드바 (Sticky)

데스크탑에서는 방문자가 스크롤을 내릴 때 사이드바가 화면 밖으로 사라지지 않고, 시선을 따라오도록 설정하는 게 좋아요. 이걸 ‘스티키(Sticky)’라고 부르는데, 빈 공간을 채워주면서 광고 효율을 높이는 데 정말 효과적이에요.

모바일: 숨기지 말고 하단에 보여주기

모바일에서는 좁은 화면 탓에 사이드바를 숨겨두곤 하죠. 하지만 굳이 버튼을 눌러야만 볼 수 있다면 아무도 안 봐요. 게다가 억지로 띄우면 본문을 가려서 오히려 불편할 수도 있고요.

가장 좋은 방법은 본문이 끝난 다음, 하단에 사이드바 내용이 자연스럽게 이어지도록 배치하는 거예요. 이렇게 하면 글을 다 읽은 방문자가 자연스럽게 광고나 추천 글을 보게 되니까 수익에도 도움이 돼요.

아래 코드를 적용하면 데스크탑에서는 따라다니는 사이드바를, 모바일에서는 하단에 고정된 사이드바를 만들 수 있어요. 티스토리 스킨마다 이름이 조금 다를 수 있으니 id나 class 이름만 본인 스킨에 맞춰서 바꿔주시면 돼요.

3. 레이아웃 흔들림(CLS) 없는 코드 적용 방법

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 동작 구현
            const asideRect = aside.getBoundingClientRect();
            const asideHeight = asideRect.height;
            const windowHeight = window.innerHeight;
            const scrollTop = window.scrollY;
            
            // CSS position: sticky를 우선 사용하는 것이 좋습니다.
            // 아래는 JS로 제어할 경우의 예시입니다.
            const asideBottom = asideRect.bottom + scrollTop;

            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 설정 (스타일 편집)

모바일에서 불필요한 메뉴 버튼은 숨기고, 데스크탑에서 부드럽게 고정되도록 하는 CSS 코드예요. 스킨 편집 화면의 CSS 탭 맨 아래에 붙여넣으세요.

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

@media screen and (max-width: 768px) {
    /* 모바일에서는 사이드바를 본문 아래로 자연스럽게 배치 */
    #aside {
        position: static !important;
        width: 100%;
    }
    #header .util .menu {
        display: none; /* 모바일 사이드바 토글 버튼 숨김 */
    }
}

이렇게 설정하면 화면이 덜컥거리는 CLS 문제 없이 안정적으로 광고를 보여줄 수 있어서 구글 검색 점수에도 좋아요.

4. 댓글을 숨겨서 하단 광고 더 잘 보이게 만들기

사이드바를 모바일 하단으로 옮겼을 때 한 가지 문제가 생길 수 있어요. 바로 ‘댓글’이에요. 댓글이 너무 길게 달려 있으면 방문자가 스크롤을 한참 내려야 하단 광고를 볼 수 있거든요. 이러면 광고 도달률이 확 떨어지겠죠?

그래서 댓글 창은 평소엔 숨겨두고, 보고 싶은 사람만 버튼을 눌러서 보게 하는 게 좋아요. 이렇게 하면 본문이 끝나자마자 광고나 사이드바 정보가 보여서 훨씬 효과적이에요.

댓글 보기 버튼 추가하기

페이지가 열릴 때는 댓글을 숨기고, ‘댓글 보기’ 버튼을 자동으로 만들어주는 코드예요. 이것도 HTML의 /body 바로 위에 넣어주세요.

<script async>
document.addEventListener('DOMContentLoaded', function() {
    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);
            
            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 {
    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;
    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);
}