Junie와 함께 블로그 계층적 카테고리 메뉴 구현하기

오늘은 JetBrains의 AI 어시스턴트인 Junie를 활용하여 Hugo 블로그에 계층적 카테고리 메뉴를 구현한 과정을 공유하려고 합니다. 기존의 평면적인 카테고리 목록을 부모-자식 관계가 시각적으로 표현되는 계층적 구조로 개선했습니다.

기존 문제점

기존 블로그의 카테고리 메뉴는 단순한 목록 형태로 표시되어 있었습니다:

{{/* 카테고리 섹션 - 카테고리가 하나 이상 있을 경우 표시합니다. */}}
{{ if .Site.Taxonomies.categories }}
    <div class="app-header-categories">
        <span class="app-header-category-title">카테고리</span>
        <div class="app-header-category-items">
            {{ range $name, $taxonomy := .Site.Taxonomies.categories }}
                <a class="app-header-category-item" href="/categories/{{ $name | urlize }}/">{{ $name }}</a>
            {{ end }}
        </div>
    </div>
{{ end }}

이 방식에는 몇 가지 문제점이 있었습니다:

모든 카테고리가 동일한 수준으로 표시되어 관련 카테고리 간의 관계를 파악하기 어려웠습니다.
카테고리가 많아질수록 메뉴가 복잡해지고 사용자 경험이 저하되었습니다.
각 카테고리에 포함된 포스트 수를 확인할 수 없었습니다.

Junie의 도움으로 구현한 해결책

Junie의 도움을 받아 다음과 같은 계층적 카테고리 시스템을 구현했습니다:

1. 카테고리 처리 로직 구현

먼저 process-categories.html 부분 템플릿을 만들어 카테고리 데이터를 처리하는 로직을 구현했습니다. 이 템플릿은 두 가지 방식으로 계층 관계를 인식합니다:

슬래시(/) 표기법: 포스트의 front matter에서 categories: ["부모/자식"] 형태로 정의된 관계
데이터 파일: /data/parent_categories.yaml에 정의된 관계

{{/* 
  This partial processes categories and handles slash notation for hierarchical categories.
  It returns a map with the following structure:
  {
    "categories": [list of all categories],
    "parentCategories": [list of parent categories],
    "childCategories": {map of parent -> children},
    "relationships": {map of child -> parent}
  }
*/}}

{{ $result := dict }}
{{ $allCategories := slice }}
{{ $parentCategories := slice }}
{{ $childCategories := dict }}
{{ $relationships := dict }}

<!-- 슬래시 표기법 처리 로직 -->
<!-- 데이터 파일 처리 로직 -->

{{ return $result }}

2. 계층적 메뉴 표시 구현

다음으로 nav.html 템플릿을 수정하여 계층적 카테고리를 시각적으로 표현했습니다:

{{/* 카테고리 섹션 - 계층적 카테고리를 표시합니다. */}}
{{ if .Site.Taxonomies.categories }}
    {{ $categoryData := partial "process-categories.html" . }}
    {{ $parentCategories := index $categoryData "parentCategories" }}
    {{ $childCategories := index $categoryData "childCategories" }}

    <div class="app-header-categories">
        <span class="app-header-category-title">카테고리</span>
        <div class="app-header-category-items">
            {{/* 부모 카테고리 표시 */}}
            {{ range $parentCategories }}
                <!-- 부모 카테고리 표시 로직 -->
                <!-- 자식 카테고리 표시 로직 -->
            {{ end }}

            {{/* 계층에 속하지 않은 카테고리 표시 */}}
            <!-- 독립 카테고리 표시 로직 -->
        </div>
    </div>
{{ end }}

3. 카테고리 관계 정의

/data/parent_categories.yaml 파일을 생성하여 추가적인 부모-자식 관계를 정의했습니다:

# This file defines the parent-child relationships for categories
# Format: child_category: parent_category

기초: 낚시
Github: Dev

구현 결과

이 구현을 통해 다음과 같은 개선점을 얻었습니다:

계층적 구조: 카테고리가 부모-자식 관계로 시각적으로 표현됩니다.
포스트 수 표시: 각 카테고리 옆에 해당 카테고리에 속한 포스트 수가 표시됩니다.
유연한 정의 방식: 슬래시 표기법이나 데이터 파일을 통해 계층 관계를 정의할 수 있습니다.
개선된 사용자 경험: 관련 카테고리를 쉽게 찾을 수 있어 블로그 탐색이 용이해졌습니다.

Junie의 도움이 특히 유용했던 부분

Junie는 다음과 같은 부분에서 큰 도움을 주었습니다:

복잡한 Hugo 템플릿 로직 작성: Hugo의 템플릿 언어로 카테고리 데이터를 처리하는 로직을 효율적으로 구현했습니다.
계층 구조 알고리즘 설계: 부모-자식 관계를 처리하고 표현하는 알고리즘을 설계했습니다.
디버깅 지원: 구현 과정에서 발생한 문제를 빠르게 진단하고 해결했습니다.
문서화: 시스템 사용 방법을 설명하는 README 문서 작성을 도왔습니다.

결론

Junie와 함께 작업하면서 복잡한 기능을 효율적으로 구현할 수 있었습니다. AI 어시스턴트의 도움으로 개발 시간을 단축하고, 더 나은 사용자 경험을 제공하는 블로그를 만들 수 있었습니다.

다음 포스트에서는 Junie를 활용한 블로그 검색 기능 개선에 대해 다루겠습니다. 계속해서 Junie와 함께하는 개발 여정을 공유하겠습니다!