사이드바의 동적 이동과 고정 설정으로 블로그 수익 향상 방법

검색 엔진 최적화(SEO) 성공을 위한 5가지 팁 소개

블로그 수익 향상을 위한 사이드바 활용법과 모바일 최적화 전략

블로그에서 사이드바는 정보와 광고를 사용자에게 노출하며 [ 블로그 수익 ]에 영향을 주는 요소입니다. 그러나 일부 스킨은 모바일에서는 사이드바가 선택적 요소로 작용하면서 주 콘텐츠를 차지해 사용자가 불편할 수 있습니다. 주 콘텐츠에 방해되지 않도록 사이드바의 노출 방식을 조정하고, 댓글 보기 버튼을 추가하여 사용자 경험을 개선하며 블로그 수익을 올릴 수 있는 방법을 구상해보겠습니다.

블로그 수익을 위한 사이드바 활용 방안

블로그 수익 향상을 위해 사이드바는 활용도가 높은 콘텐츠 영역입니다.

방문하는 사용자에게 블로그의 중요한 정보를 간단하게 전달하는 역할을 하며, 광고를 노출시켜 수익 향상에도 기여합니다. 하지만 모바일 접속 시 사이드바는 문제가 발생합니다. 광고 노출이 제대로 이루어지지 않고, 모바일 환경에서는 일반적으로 제한된 영역으로 사이드바가 토글 형태로 숨겨지기 때문에, 운영자가 노출시키고 싶은 정보가 사용자에게 잘 전달되지 않습니다. 이로 인해 사용자의 선택이 제한되는 상황이 발생합니다.

더 큰 문제는 블로그 수익을 위한 광고 노출입니다. 많은 사용자가 모바일 상단의 사이드바를 인지하지 못하는 경우도 있어, 모바일에서 사이드 영역은 사실상 무용지물이 될 수 있습니다.

따라서 블로그 수익과 사이드바 활용을 고려할 때, 사이드바의 노출 방식이 매우 중요합니다.

사이드바의 효율성

사이드바는 데스크탑에서 전체 영역의 3분의 1을 차지하지만, 주 콘텐츠의 양이 많아지면 사이드 정보의 나머지 영역이 빈 공간으로 남게 되는 경우가 많습니다. 이로 인해 공간 낭비가 발생하게 됩니다. 그렇다면 이 문제를 해결할 방법은 없을까요?

아래와 같은 방법을 고려해 볼 수 있습니다.

데스크탑에서 사이드바 정보를 동적으로 이동

데스크탑 환경에서 사이드 정보가 사용자 뷰 영역을 벗어나면, 이를 다시 사용자 뷰 영역으로 이동시켜 항상 노출될 수 있도록 설정합니다. 이 방법으로 사이드바가 사용자를 따라다니는 구조를 구성할 수 있습니다.

뷰이동으로 빈 공간

데스크탑에서 사이드 정보

모바일에서 선택적 노출을 항시 노출로 설정

모바일 환경에서 사이드 영역을 토글 형태로 사용하면 사용자가 이를 확인하기 위해 선택적으로 접근해야 합니다. 이러한 선택적 환경은 사용자에게 불편함을 줄 수 있습니다.

또한, 토글 형태의 사이드 정보는 주 콘텐츠를 가리기도 합니다. 따라서 사용자가 정보를 쉽게 접근할 수 있도록 사이드 영역을 고정 배치하는 것이 좋습니다. 모바일 접속 시 사이드 영역을 항상 노출되게 설정하면 광고 노출 효과도 높일 수 있습니다.

선택적 사항과 주 콘텐츠의 충돌

모바일에서 사이드 노출

사이드 영역을 동적 사이드와 고정 사이드로 구성

사이드 영역 동적 고정 코드

아래 코드는 데스크탑에서 사이드 정보가 사용자의 뷰 영역에 따라 동적으로 이동하고, 모바일 환경에서는 주 콘텐츠 하단에 사이드 영역을 고정시키는 코드입니다. 이 코드는 티스토리 스킨에 따라 변경될 수 있습니다.

현재 코드는 Blub Club 스킨을 기준으로 하며, 다른 스킨에서도 선택자만 변경하면 사용 가능합니다.

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

아래 코드를 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';
        } else if (isDesktop) {
            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;

            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와 사이드의 기본 위치를 지정하는 CSS 코드입니다. 아래 코드를 CSS 편집의 맨 하단에 추가해 주세요.

#aside {
position: sticky !important;

}


@media screen and (max-width: 767px) {
    #header .util .menu {
        display: none;
    }
}

이렇게 하면 항상 사이드 영역이 사용자에게 노출될 수 있으며, 광고의 노출 효율성도 증대됩니다.

하지만 모바일 환경에서 사이드 정보가 주 콘텐츠의 하단에 표시될 경우, 댓글이 문제를 일으킬 수 있습니다. 사용자가 사이드 정보에 도달하기 위해 많은 댓글을 스크롤해야 하므로 불편함이 발생합니다. 이로 인해 사이드 정보란에 도달할 확률이 낮아집니다.

따라서 사이드를 선택적 환경으로 만들지 않고, 댓글을 선택적 환경으로 조성하는 것이 좋습니다.

댓글 보기 버튼 추가

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

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

<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');
    
    if (namecardBox) {
      namecardBox.parentNode.insertBefore(buttonContainer, namecardBox.nextSibling);
    }

    button.addEventListener('click', function() {
      const comments = document.querySelector('.tt-comment-cont');
      if (comments) {
        comments.style.display = comments.style.display === 'block' ? 'none' : 'block';
      }
    });
  }, 1000);
});
</script>

✔ CSS에 적용될 CSS 코드

아래 코드는 댓글 버튼을 꾸미기 위한 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 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(레이아웃 변형)를 유발하지 않아 안정적입니다.