티스토리 블로그 사이드바 활용 방안 과 사이드바 변경 코드

티스토리 블로그 사이드

티스토리 블로그에서 사이드 바는 중요한 역할을 한다. 사이드바를 데스크탑은 정보와 광고를 효과적으로 활용하는 방법과 모바일에서는 사이드 바가 선택적 요소와 주 콘텐츠를 차지하여 사용자가 불편할 수 있는 부분에 대해 고민해야 할거 같다. 주 콘텐츠에 방해되지 않도록 사이드 바의 노출 방식을 조정하고, 댓글 보기 버튼을 추가해 사용자 경험을 개선하고 블로그 수익을 올릴 수 있는 방법을 구상해본다.

티스토리 블로그 수익 향상을 위해서 사이드는 활용도가 높은 콘텐츠 영역이다. 방문하는 사용자에게 블로그의 중요한 정보를 간단하게 전달할 수 있는 역할을 한다.

그리고 광고를 노출시켜 수익 향상에도 많은 도움을 주는 영역이다. 그러나 모바일 접속 시 사이드바는 문제가 된다. 광고노출도 잘 안 된다. 모바일 환경은 보통 한정된 노출 영역으로 사이드바를 토글 형태로 숨기게 된다. 그렇다면 운영자가 노출시키고 싶은 정보는? 사용자의 선택에 맞기는 상황이 된다.

즉, 선택 사항이 된다. 더욱 큰 문제는 블로그 수익을 위한 광고 노출이다. 또한 다수의 사용자가 모바일 상단에 있는 사이드바를 모르는 경우도 있다. 모바일에서 사이드 영역은 거의 무용지물이 될수도 있다

티스토리 블로그 수익과 사이드의 활용에서 생각해야 할 부분 중 하나는 사이드의 노출이다

블로그 사이드 활용 방안

1. 블로그 사이드의 역할
2. 블로그 사이드의 효율성
3. 사이드 영역 동정, 고정 코드
4. 댓글 보기 버튼 추가

블로그 사이드의 역할

사이드바의 역할은 운영자가 원하는 정보를 사용자에게 쉽고 빠르게 전달할 수 있는 점이다. 그리고 주 콘텐츠를 방해하지 않고 추가 정보를 제공할 수 있는 역할을 한다. 또한 운영자가 전달하고자 하는 정보를 부담 없이 적용할 수 있는 장점이 있다. 만약 사이드 바가 없다면 주 콘텐츠 영역을 활용해야 하는데 간단한 정보를 전달하는 부분에서는 상당히 부담스러워질 수 있다.

블로그 사이드의 효율성

사이드바는 데스크탑에서 전체 영역의 3분의 1을 차지하지만, 대부분 주 콘텐츠의 양이 많아지면 부족한 사이드 정보의 나머지 영역은 빈공간으로 노출 된다. 공간의 낭비가 발생한다. 그렇다면 해결 방법은 없을까? 이렇게 해보면 어떨까..

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

데스크탑에서 사이드의 정보란이 사용자 뷰 영역을 벗어나게 되면 사용자 뷰 영역으로 이동시켜 주면 항상 노출시킬 수 있다. 사용자를 따라다니는 사이드를 구성하는 방법이다.

뷰이동으로 빈 공간

데스트탑에서 항상 노출되는 정보와 광고

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

모바일 환경에서 사이드 영역을 토글 형태로 사용하게 되면 사용자가 사이드의 영역을 확인하기 위해서는 선택적 환경이 된다. 이 선택적 환경은 사용자의 접근성에서 상당히 불편함을 강요하게 된다.

그리고 선택적 토글 사이드 정보는 주 콘텐츠를 가리는 부분도 발생한다. 이러한 부분을 사용자가 쉽게 정보에 접근할 수 있게 고정 배치를 한다. 모바일 접속 시도 항상 사이드 영역이 노출되게 형성한다. 그러면 광고도 잘 노출된다

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

모바일 환경에서 고정으로 배치되는 사이드

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

사이드 영역 동적 고정 코드

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

현재 코드는 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와 SIDE의 기본 POSITION을 지정해주는 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(레이아웃 변형)을 유발하지 않는다.

100

접근성

100

권장사항

100

최적화

0

CLS

사용자의 접근환경을 위해 글 작성후 측정한 측정값입니다.