[🛠] GitHub Pages 블로그 사이드바에 달력과 활동 통계 붙이기

✨ GPT-5.5의 요약 　

블로그 재개 직후 사이드바에 포스트 달력과 카테고리 활동 통계를 붙이고, 현재 글 기준 월과 월별 아카이브 탐색까지 만든 기록.

GitHub Pages 블로그 재개 시스템을 정리하고 나니 바로 다음 문제가 보였다.

글은 다시 쓰기 시작했다. 그런데 블로그가 다시 살아난 느낌은 아직 부족했다. 카테고리 목록만으로는 이 블로그가 언제 움직였는지, 어느 날 기록이 쌓였는지, 최근에 어떤 흐름이 있는지 잘 보이지 않았다.

Daily Review를 다시 쓰려면 날짜 감각이 필요하다.

이 블로그는 결국 “어느 날 무엇을 남겼는가”가 중심이다. 그런데 GitHub Pages 블로그에는 네이버 블로그처럼 자연스럽게 보이는 날짜 탐색이 없다. 정적 블로그라서 더더욱 직접 만들어야 했다.

그래서 오늘 밤 붙인 기능은 단순한 장식이 아니었다.

사이드바를 글 목록의 보조 장식이 아니라, 날짜와 활동 흐름을 보여주는 탐색 도구로 바꾸는 작업이었다.

사이드바에 현재 월 포스트 달력을 붙였다

첫 커밋은 f6971fc였다.

f6971fc  feat: add sidebar activity widgets

이때 새로 만든 파일은 두 개다.

_includes/sidebar-calendar.html
_includes/sidebar-nav-stats.html

sidebar.html에는 달력 include를 붙였다.

<section class="sidebar-calendar"
  data-sidebar-calendar
  data-calendar-lang="ko"
  data-calendar-posts-src="/assets/data/calendar-posts-ko.json"
  data-calendar-weekdays="[&quot;일&quot;,&quot;월&quot;,&quot;화&quot;,&quot;수&quot;,&quot;목&quot;,&quot;금&quot;,&quot;토&quot;]"
  data-calendar-label-suffix="포스트 달력"
  data-calendar-post-count-label="편"
  data-calendar-post-list-label="글"
  data-calendar-time-zone="Asia/Seoul"
  data-initial-month="2026-05"
  data-focus-date="2026-05-26"
  data-focus-mode="page"
  data-current-path="/devlog/github-pages-blog/github-pages-blog-sidebar-calendar/"
  data-min-month="2024-12"
  data-max-month="2026-07"
  aria-label="2026.05 포스트 달력">
  <div class="sidebar-calendar__archive" data-calendar-archive aria-label="연도와 월별 글 수">
    <div class="sidebar-calendar__years" data-calendar-years></div>
    <div class="sidebar-calendar__months" data-calendar-months></div>
  </div>
  <div class="sidebar-calendar__grid" data-calendar-grid>
      <span class="sidebar-calendar__weekday">일</span>
      <span class="sidebar-calendar__weekday">월</span>
      <span class="sidebar-calendar__weekday">화</span>
      <span class="sidebar-calendar__weekday">수</span>
      <span class="sidebar-calendar__weekday">목</span>
      <span class="sidebar-calendar__weekday">금</span>
      <span class="sidebar-calendar__weekday">토</span>
        <span class="sidebar-calendar__day sidebar-calendar__day--blank" aria-hidden="true"></span>
        <span class="sidebar-calendar__day sidebar-calendar__day--blank" aria-hidden="true"></span>
        <span class="sidebar-calendar__day sidebar-calendar__day--blank" aria-hidden="true"></span>
        <span class="sidebar-calendar__day sidebar-calendar__day--blank" aria-hidden="true"></span>
        <span class="sidebar-calendar__day sidebar-calendar__day--blank" aria-hidden="true"></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">1</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">2</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">3</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">4</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">5</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">6</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">7</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">8</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">9</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">10</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">11</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">12</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">13</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">14</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">15</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">16</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">17</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">18</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">19</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">20</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">21</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">22</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">23</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">24</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">25</span></span>
      <span class="sidebar-calendar__day sidebar-calendar__day--focus"><span class="sidebar-calendar__day-number">26</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">27</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">28</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">29</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">30</span></span>
      <span class="sidebar-calendar__day"><span class="sidebar-calendar__day-number">31</span></span>
  </div>
  <section class="sidebar-calendar__post-list sidebar-calendar__post-list--dynamic" data-calendar-post-list aria-live="polite" hidden></section>
</section>

처음 달력은 JavaScript 없이 Liquid만으로 만들었다.

site.posts에서 숨김 글을 제외하고, 현재 월의 첫 요일과 마지막 날짜를 계산했다. 2월 윤년 계산까지 Liquid 안에서 처리했다.

월 안에서 글이 있는 날짜는 링크가 되고, 글이 없는 날짜는 숫자로만 남는다. 처음 기준은 site.time이었다. 그러니까 이 시점의 달력은 “현재 달의 포스트 현황”을 보여주는 사이드바 위젯이었다.

이 정도만 해도 효과는 바로 있었다.

블로그가 다시 움직이고 있다는 느낌이 생겼다. 글 제목 목록만 보는 것과 달리, 달력은 기록의 밀도를 보여준다. 며칠에 글이 몰렸는지, 어느 날 비었는지, 오늘이 어디인지가 한눈에 들어온다.

카테고리에도 활동 정보를 붙였다

달력만 붙이면 날짜 흐름은 보이지만, 카테고리별 흐름은 여전히 둔했다.

그래서 sidebar-nav-stats.html도 같이 만들었다.

이 include는 사이드바 항목의 URL을 카테고리 경로로 보고, 해당 카테고리에 속한 글을 다시 필터링한다.

예를 들어 /daily-review라면 daily-review 카테고리 글 수를 보여주고, /diary/ai라면 diary와 ai를 모두 포함하는 글만 남긴다.

출력은 단순하다.

글 수 · 최근 글 날짜

이게 좋았던 이유는 사이드바가 단순 목차에서 벗어났기 때문이다.

오늘 하루는이 몇 편인지, 인공지능 글이 최근 언제 올라왔는지, GitHub Pages Blog가 실제로 운영 중인지가 보인다. 블로그가 죽어 있는지 살아 있는지는 글 수보다 최근 날짜에서 더 잘 드러난다.

모바일 밀도부터 바로 조정했다

달력을 붙이자마자 모바일 밀도가 문제였다.

사이드바는 데스크톱에서는 여유가 있지만, 모바일에서는 본문 아래로 내려오거나 메뉴와 섞인다. 달력 칸이 크거나 글 수 라벨이 길면, 위젯 하나가 화면을 너무 많이 먹는다.

그래서 17d074d, b401d8b에서 사이드바 활동 라벨과 달력 밀도를 바로 줄였다.

17d074d  fix: tighten sidebar activity labels
b401d8b  [Fix] | Sidebar calendar: Improve mobile density

SCSS에서는 날짜 칸을 aspect-ratio: 1로 고정하고, 작은 폰트와 4px radius를 사용했다. 카테고리 활동 정보는 한 줄 안에서 작게 보이게 했다.

여기서 중요한 건 달력을 “주인공”으로 만들지 않는 것이었다.

달력은 블로그 탐색을 돕는 장치다. 본문보다 커지면 안 된다. 특히 기록 블로그에서는 사이드바가 정보는 주되, 글 읽기를 방해하면 안 된다.

현재 글 기준 월로 바꿨다

곧바로 더 중요한 문제가 보였다.

달력이 site.time 기준이면, 2025년 글을 읽을 때도 2026년 5월 달력이 나온다. 이러면 달력은 현재 글의 맥락을 설명하지 못한다.

그래서 ccb58d5에서 기준 날짜를 바꿨다.

ccb58d5  [Fix] | Sidebar: Refine calendar behavior

핵심은 이 부분이다.

페이지에 date가 있으면 그 날짜의 월을 보여준다. 날짜가 없는 페이지에서는 기존처럼 site.time을 쓴다.

이 수정으로 달력의 성격이 달라졌다.

처음 달력은 “이번 달 블로그 현황”이었다. 이제는 “지금 읽는 글이 놓인 시간”을 보여준다. 오래된 Daily Review를 읽으면 그 달의 기록 흐름을 볼 수 있고, 같은 달에 어떤 글이 있었는지도 이어서 찾을 수 있다.

이게 날짜 중심 기록 블로그에는 훨씬 맞다.

같은 날 여러 글은 목록으로 풀었다

같은 커밋에서 날짜별 글 목록도 붙였다.

하루에 글이 하나만 있으면 날짜를 그 글 링크로 보내면 된다. 하지만 하루에 글이 여러 개면 문제가 생긴다. 재개 첫날만 봐도 Daily Review와 AI 대화 아카이브가 같은 날짜에 있다.

그래서 글이 여러 개인 날짜는 날짜 링크가 바로 글로 가지 않고, 그 날짜의 글 목록으로 이동하게 했다.

<section id="sidebar-calendar-2026-05-25-posts" class="sidebar-calendar__post-list">
  <h4 class="sidebar-calendar__post-list-title">5월 25일 글</h4>
  <ul>
    ...
  </ul>
</section>

이 시점의 규칙은 단순했다.

글 1개: 해당 글로 이동
글 2개 이상: 그 날짜의 글 목록으로 이동

완벽한 규칙이라기보다는, 지금 당장 같은 날짜 다중 글 문제를 해결하는 방식이었다. 그래도 중요한 건 문제를 숨기지 않았다는 점이다.

날짜 하나에 글이 여러 개 있을 수 있다는 사실을 시스템이 인정해야 한다. Daily Review, AI 대화, 개발 기록이 같은 날 나오는 블로그라면 이 처리가 필요하다.

JavaScript enhancement도 붙였다

Liquid 달력만으로는 현재 월 중심 탐색은 가능하지만, 월을 넘나드는 탐색은 불편하다.

그래서 b06b6d6에서 JavaScript를 붙였다.

b06b6d6  [Feat] | Sidebar calendar: Add archive navigation

새 파일은 이것이다.

assets/js/custom/sidebar-calendar.js

그리고 _config.yml의 after_footer_scripts에 등록했다.

after_footer_scripts:
  - /assets/js/custom/dark-theme.js
  - /assets/js/custom/sidebar-calendar.js

Liquid 쪽에서는 포스트 데이터를 JSON으로 내려줬다.

<script type="application/json" data-calendar-posts>
[
  {
    "title": "...",
    "url": "...",
    "date": "2026-05-25"
  }
]
</script>

JavaScript는 이 데이터를 읽어서 postsByDate, postCountByMonth, postCountByYear, latestPostMonthByYear를 만든다. 그 다음 이전/다음 월 버튼, month input, 연도/월별 글 수 버튼, 날짜별 동적 글 목록을 렌더링한다.

이 구조가 괜찮았던 이유는 fallback을 버리지 않았다는 점이다.

JavaScript가 있으면 월 이동과 아카이브 탐색이 편해진다. JavaScript가 없어도 Liquid가 현재 글 기준 월과 다중 글 fallback 목록을 이미 렌더링한다.

정적 블로그에서는 이 균형을 유지해야 한다.

Liquid fallback과 JS 월 이동을 같이 붙였다

오늘 밤부터 새벽까지 이어진 흐름은 이렇다.

f6971fc  사이드바 달력과 카테고리 활동 통계 추가
17d074d  사이드바 활동 라벨 밀도 조정
b401d8b  모바일 달력 밀도 조정
ccb58d5  현재 글 기준 월과 다중 글 날짜 목록 처리
b06b6d6  월별 아카이브 탐색용 JavaScript enhancement 추가

핵심 파일은 이렇다.

_includes/sidebar.html
_includes/sidebar-calendar.html
_includes/sidebar-nav-stats.html
assets/js/custom/sidebar-calendar.js
_sass/custom/customOverride.scss
_config.yml

한 줄로 요약하면 이렇다.

블로그의 사이드바에 날짜와 카테고리 활동 흐름을 보여주는 탐색 레이어를 붙였다.

사이드바를 날짜와 카테고리 탐색 레이어로 바꿨다

이제 블로그 사이드바는 단순한 카테고리 목록이 아니다.

현재 글이 속한 달을 보여주고, 글이 있는 날짜를 표시하고, 같은 날 여러 글이 있으면 목록으로 풀어준다. 카테고리 항목에는 글 수와 최근 글 날짜가 붙는다. JavaScript가 켜져 있으면 연도와 월을 오가며 블로그 아카이브를 훑을 수 있다.

별도 DB도 없고, API도 없다. Jekyll의 site.posts, Liquid, SCSS, 작은 JavaScript만으로 정적 블로그에 날짜 탐색을 붙였다.

이제 사이드바는 카테고리 목록만 보여주는 곳이 아니라, 지금 읽는 글 주변의 날짜 흐름까지 보여준다.