개요

오늘은 블로그의 핵심 페이지인 메인 페이지, 아카이브 페이지, 태그 페이지의 사용자 경험을 개선하기 위한 여러 가지 기능 구현 및 수정을 진행했다. 메인 페이지와 아카이브 페이지는 성공적으로 개선되었으나, 태그 페이지의 신규 기능 추가는 예상치 못한 기술적 난관에 부딪혀 결국 원상 복구하게 되었다.

주요 작업 내용

1. 메인 페이지 (index.html) 개선

메인 페이지의 정보 표시 방식을 더 동적이고 유용하게 변경했다.

  • 블로그 섹션 로직 변경: 기존에는 단순히 최신 글 2개를 보여주었으나, 실제 블로그 페이지(/blog/)의 필터링 로직(2025년 6월 1일 이후 작성, ‘Diary’ 카테고리 제외)과 동일한 기준으로 최신 글 2개가 표시되도록 수정했다.
  • 레이아웃 재정렬: 사용자의 동선과 콘텐츠 중요도를 고려하여 페이지의 섹션 순서를 블로그, 다이어리, 아카이브, 프로젝트 순으로 변경했다.
  • 아카이브 섹션 기능 추가: archive로 연결되는 단순 링크였던 기존 방식에서, 2025년 6월 1일 이전의 과거 게시글 중 4개를 무작위로 추천하여 보여주는 동적인 섹션으로 기능을 강화했다.

2. 아카이브 페이지 (/archive/index.html) 필터링 및 페이지네이션 구현

메인 페이지와의 통일성을 위해 아카이브 페이지에도 필터링 기능을 추가했다.

  • 요구사항: 2025년 6월 1일 이전의 글만 목록에 표시하되, 기존의 페이지네이션(페이지 나누기) 기능은 유지해야 했다.
  • 문제점: Jekyll의 기본 페이지네이션 플러그인은 특정 조건으로 글을 필터링하는 기능을 지원하지 않아, 단순 적용 시 페이지별 글 개수가 맞지 않거나 빈 페이지가 생기는 문제가 있었다.
  • 해결: JavaScript를 이용해 필터링과 페이지네이션 로직 전체를 클라이언트 사이드에서 직접 구현했다. 이를 통해 필터링된 목록을 기준으로 ‘이전/다음 페이지’ 및 페이지 번호 표시 기능이 정상적으로 작동하도록 만들었다.

3. 태그 페이지 (/tags/index.html) 기능 구현 시도 및 후퇴

태그 페이지의 사용성을 높이기 위해 두 가지 기능을 추가하고자 했다.

  • 요구사항:
    1. 태그 정렬 기능 (기본: 가나다순, 선택: 게시글 많은순)
    2. 현재 선택된(활성화된) 태그를 시각적으로 하이라이트하는 기능
  • 1차 구현: JavaScript로 태그 데이터를 불러와 동적으로 정렬하고 렌더링하는 기능을 구현했다.
  • 문제 발생: 정렬 기능은 정상적으로 작동했으나, 활성 태그 하이라이트 기능이 작동하지 않는 버그가 발생했다. 클릭 시 URL의 해시(#)는 변경되지만, 해당 태그의 스타일은 변경되지 않았다.
  • 디버깅 과정:
    1. 로직 수정: URL 해시 값을 비교하는 로직을 더 단순하고 명확하게 수정했으나, 문제는 해결되지 않았다.
    2. 문제 분리: 원인 파악을 위해 정렬 기능을 일시적으로 제거하고 하이라이트 기능의 핵심 로직만으로 테스트를 진행했다. 하지만 이 단순화된 버전에서도 하이라이트 기능은 여전히 작동하지 않았다.

결론

예상과 달리 태그 페이지의 하이라이트 기능 구현에서 해결이 어려운 버그를 마주했다. 기능이 의도치 않게 꼬일 가능성과 유지보수의 어려움을 고려하여, 사용자의 동의 하에 태그 페이지에 오늘 시도했던 모든 변경 사항을 되돌리기로 결정했다.

비록 목표했던 기능을 모두 완성하지는 못했지만, Jekyll의 한계와 이를 JavaScript로 우회하는 과정에서 많은 것을 배울 수 있었던 하루였다.