2. Ghost 블로그에 태그별 포스트 컴포넌트 추가하기

블로그에 포스트가 늘어나다보면 포스트들을 파악하는게 어려워지는 것 같다. 구조화를 중요하게 생각하는 사람으로써 메인 페이지에서만 보이는 최신 포스트들뿐만 아니라, 태그별로 정리된 목록이 있으면 원하는 내용을 더 쉽게 찾을 수 있을 것 같았고 태그별 포스트 페이지를 기본 제공하고있으니 만들기도 쉬워보였다. 그래서 좌측 사이드바에 태그별 포스트 목록을 추가했다.

태그별 포스트 사이드바

왜 필요했나

포스트가 많아지면서 특정 주제의 글을 찾고 파악하는게 어려워졌다. 예를 들어 "JavaScript" 태그가 붙은 모든 포스트를 보고 싶을 때, 메인 페이지를 계속 스크롤하거나 태그 페이지로 이동해야 했다. 특히 포스팅 페이지에서 읽다가 관련된 다른 포스트를 찾고 싶을 때는 더욱 불편했다.

사이드바에 태그별로 정리된 포스트 목록이 있으면, 현재 보고 있는 포스트와 같은 태그의 다른 글들도 바로 확인할 수 있을 것 같았다.

어떻게 구현했나

Ghost의 {{#get}} 헬퍼를 사용해서 모든 태그와 각 태그별 포스트를 가져왔다. 아코디언 형태로 만들어서 공간을 효율적으로 사용하도록 했다.

{{#get "tags" limit="all" include="count.posts"}}
    {{#foreach tags}}
        <details class="tag-accordion">
            <summary>{{name}} ({{count.posts}})</summary>
            {{#get "posts" filter="tag:{{slug}}" limit="all"}}
                <!-- 포스트 목록 -->
            {{/get}}
        </details>
    {{/foreach}}
{{/get}}

가장 신경 썼던 부분은 현재 페이지의 태그를 자동으로 열고, 현재 포스트를 하이라이팅하는 기능이었다. JavaScript로 현재 URL과 포스트 URL을 비교해서 처리했다. URL 비교할 때 trailing slash나 상대/절대 경로 차이 때문에 정확한 매칭이 어려워서, URL 정규화 함수를 만들어서 해결했다.

function normalizeUrl(url) {
    // trailing slash 제거, 상대/절대 경로 처리
    let path = url;
    if (path !== "/" && path.endsWith("/")) {
        path = path.slice(0, -1);
    }
    return path;
}

처음에는 position: sticky로 스크롤해도 사이드바가 따라오도록 만들려고 했는데, 포스트 페이지에 목차 컴포넌트가 아래에 추가되어서 둘 다 stickty로 주면 ux가 불편해져서 결국 태그별 포스팅 컴포넌트만 기본 위치로 두는 게 더 자연스럽고 편해서 위치를 고정시켰다.

결과

메인 페이지와 포스팅 페이지 좌측에 태그별 포스트 목록이 추가되었다. 태그를 클릭하면 해당 태그의 모든 포스트가 펼쳐지고, 현재 보고 있는 포스트는 primary color로 하이라이트되어 한눈에 알아볼 수 있다.

특히 포스팅 페이지에서 읽다가 관련 포스트를 찾을 때 유용하다. 현재 포스트의 태그는 자동으로 열려있어서 바로 확인할 수 있고, 같은 태그의 다른 포스트들도 쉽게 탐색할 수 있다.

1. 메인 페이지 레이아웃 (좌측 사이드바)
2. 태그 아코디언 열기/닫기
3. 현재 포스트 하이라이팅
4. 포스팅 페이지에서의 사이드바

메인 페이지 그리드 3열로 변경

왜 필요했나

기존에는 4열 그리드로 포스트가 표시되었는데, 화면이 넓어지면 카드가 너무 작아 보였다. 3열로 줄이면 각 포스트 카드가 더 크게 보여서 가독성이 좋을 것 같았다.

어떻게 구현했나

CSS Grid의 grid-template-columns를 repeat(4, 1fr)에서 repeat(3, 1fr)로 변경했다. 반응형은 그대로 유지해서 모바일에서는 1열, 태블릿에서는 2열로 표시된다.

.post-feed {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

결과

데스크톱에서 포스트 카드가 더 크게 보여서 제목과 썸네일을 더 잘 볼 수 있게 되었다.

추가/수정된 파일

partials/
└── tag-sidebar.hbs

assets/css/site/
└── tag-sidebar.css

assets/css/site/
└── layout.css (2컬럼 레이아웃 추가)

assets/css/blog/
└── post.css (그리드 3열로 변경)

assets/js/lib/
└── tag-sidebar.js

index.hbs (사이드바 추가)
post.hbs (사이드바 추가)

빌드

yarn dev  # 개발 모드
yarn zip  # 배포용 압축 파일 생성

마무리

태그별 포스트 사이드바를 추가하면서 Ghost의 Handlebars 템플릿 시스템과 {{#get}} 헬퍼를 더 잘 이해하게 되었다. 특히 중첩된 {{#get}} 호출로 태그별 포스트를 가져오는 부분이 처음에는 성능이 걱정됐는데, 실제로는 문제없이 잘 작동했다.

sticky positioning을 구현하려다가 여러 시행착오를 겪었지만, 결국 단순한 것이 더 나을 때도 있다는 걸 배웠다. 앞으로도 더 쉽게 콘텐츠를 탐색할 수 있도록 계속 개선해나갈 예정이다.