블로그 UI/UX 개선기

서론

블로그를 운영하다 보면 글을 쓰는 것 못지않게 읽는 경험을 개선하는 것도 중요하다는 생각이 들 때가 있습니다. 특히 기술 블로그처럼 긴 글이 많은 경우, 목차나 네비게이션의 편의성이 독자의 체류 시간과 직결되기도 합니다. 이번에 블로그의 여러 UI/UX 요소들을 개선하면서 겪었던 과정을 정리해보려 합니다.

문제 인식

기존 블로그에는 몇 가지 불편한 점들이 있었습니다.

목차 토글의 문제

기본 상태가 닫혀 있어서 매번 열어야 했음
열린 상태에서도 버튼 텍스트가 “목차 열기”로 유지됨
헤딩이 없는 페이지에서도 버튼이 노출됨

사이드바 위치 문제

카테고리 사이드바가 고정 위치(margin-left: 530px)를 사용
화면 크기가 변하면 본문과 분리되어 어색하게 보임
각 레이아웃마다 카테고리 필터링 기준이 달랐음

포스트 네비게이션

관련글과 이전/다음 글 영역의 디자인이 통일되지 않음
화살표가 눈에 잘 띄지 않음

해결 과정

목차 토글 개선

tocGenerator.js를 수정하여 다음 기능들을 구현했습니다.

function addToggleButtonListener() {
    const headerLinks = document.getElementById('header-links');
    const toggleButton = document.getElementById('header-links-toggler');

    // 실제 목차 항목이 있는지 확인
    const hasContent = headerLinks.querySelectorAll('li, a').length > 0;

    if (!hasContent) {
        toggleButton.style.display = 'none';
        toggleButton.dataset.hidden = 'true';
        headerLinks.style.display = 'none';
        headerLinks.dataset.hidden = 'true';
        return;
    }

    // 기본 상태: 열림
    headerLinks.classList.add('expanded');
    toggleButton.textContent = '목차 닫기';

    toggleButton.addEventListener('click', function() {
        headerLinks.classList.toggle('expanded');
        toggleButton.textContent = headerLinks.classList.contains('expanded')
            ? '목차 닫기'
            : '목차 열기';
    });
}

핵심은 목차 항목이 없으면 버튼을 숨기고, 있으면 기본으로 열린 상태에서 시작하도록 한 것입니다.

사이드바 동적 위치 계산

본문 영역(.main-content)의 경계를 기준으로 사이드바 위치를 동적으로 계산하도록 변경했습니다.

function updateSidebarPositions() {
    var mainContent = document.querySelector('.main-content');
    if (!mainContent) return;

    var rect = mainContent.getBoundingClientRect();
    var scrollY = window.scrollY || window.pageYOffset;

    // 카테고리 사이드바 - 본문 왼쪽에 배치
    if (categoryList) {
        var leftPosition = rect.left - 200;
        if (leftPosition < 10) {
            categoryList.style.visibility = 'hidden';
        } else {
            categoryList.style.visibility = '';
            categoryList.style.left = leftPosition + 'px';
        }
    }

    // 목차 토글 - 본문 오른쪽에 배치
    if (headerLinksToggler) {
        var rightPosition = rect.right + 20;
        if (rightPosition + 140 > window.innerWidth) {
            headerLinksToggler.style.visibility = 'hidden';
        } else {
            headerLinksToggler.style.left = rightPosition + 'px';
        }
    }
}

window.addEventListener('scroll', updateSidebarPositions);
window.addEventListener('resize', updateSidebarPositions);

getBoundingClientRect()를 활용해 본문의 실제 위치를 얻고, 그 좌우에 사이드바를 배치합니다. 화면이 좁아지면 자동으로 숨깁니다.

카테고리 사이드바 통합

기존에는 front.html, category.html, 각 포스트 레이아웃마다 카테고리 목록을 따로 정의하고 있었습니다. 필터링 기준도 제각각이었습니다. 이를 _includes/category-sidebar.html로 통합했습니다.

<aside id="category-list" aria-label="Category List">
  <h2>Categories</h2>
  <ul>
    {% for category in site.categories %}
      {% unless category[0] == 'Legacy' or category[0] == 'Pre-Renewal'
         or category[0] == 'ProtoType' or category[0] == 'WeeklyPosts'
         or category[0] == 'ETC' or category[0] == 'Algorithm'
         or category[0] == '디자인패턴' %}
        <li><a href="/categories/{{ category[0] }}">{{ category[0] }}</a></li>
      {% endunless %}
    {% endfor %}
  </ul>

  <details class="sidebar-drawer">
    <summary>더 보기</summary>
    <ul>
      {% for category in site.categories %}
        {% if category[0] == 'WeeklyPosts' or category[0] == 'ETC'
           or category[0] == 'Algorithm' or category[0] == '디자인패턴' %}
          <li><a href="/categories/{{ category[0] }}">{{ category[0] }}</a></li>
        {% endif %}
      {% endfor %}
    </ul>
  </details>
</aside>

주요 카테고리는 바로 보이고, 자주 안 보는 카테고리는 “더 보기” 서랍 안에 넣었습니다. 이제 모든 레이아웃에서 {% include category-sidebar.html %}만 호출하면 됩니다.

포스트 네비게이션 카드 스타일

이전/다음 글 링크를 카드 스타일로 통일하고, 화살표를 더 눈에 띄게 만들었습니다.

.post-navigation .prev-post {
  padding-left: 3em;
  position: relative;
}

.post-navigation .prev-post::before {
  content: "←";
  position: absolute;
  left: 0.8em;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4em;
  font-weight: bold;
  color: #157878;
}

.post-navigation a:hover {
  background: #157878;
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(21, 120, 120, 0.3);
}

호버 시 배경색이 테마 색상으로 바뀌고 살짝 떠오르는 효과를 줬습니다.

스크롤 버튼 재배치

기존에 화면 우하단에 고정되어 있던 스크롤 버튼(위로/홈/아래)을 본문 왼쪽 경계에 붙여 배치했습니다. 눈에 너무 띄지 않으면서도 필요할 때 쓸 수 있도록 은은한 회색 톤으로 변경했습니다.

.scroll-top, .scroll-bottom, .home-button {
  position: fixed;
  width: 48px;
  height: 44px;
  background: rgba(200, 200, 200, 0.6);
  color: #666;
  border: 1px solid rgba(180, 180, 180, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-button::before {
  content: "home";
}

홈 버튼은 처음에 이모지나 기호를 시도했지만, 가독성 문제로 결국 “home” 텍스트로 결정했습니다. 시력이 좋지 않은 분들도 읽을 수 있도록 14px 크기로 설정했습니다.

결과

이번 개선으로 다음과 같은 변화가 있었습니다.

목차가 기본으로 열려 있어 바로 활용 가능
화면 크기에 관계없이 사이드바가 본문에 붙어서 이동
모든 페이지에서 동일한 카테고리 목록 노출
이전/다음 글 네비게이션이 더 직관적으로 변경
스크롤 버튼이 본문 영역과 시각적으로 연결

Jekyll 기반 블로그를 운영하면서 이런 소소한 개선들이 쌓여 더 나은 읽기 경험을 만들어간다고 생각합니다. 비슷한 고민을 하시는 분들께 참고가 되었으면 합니다.

2026-02-01

서론