동적 카테고리 시스템 구현하기 1

Tools github-blog
#jekyll #github_pages #study-bloging

지금까지 Jekyll의 기본 구조와 스타일링까지는 얼추 했는데요. 제가 하고 싶은 기능은 대부분 동적 시스템에 있더라고요.. 그래서 어쩔 수 없이 동적 시스템을 만드는 방법을 배우기로 했습니다.

목표 기능 정의

제가 만들려고 하는건 다음과 같습니다:

  1. 사이드바에서 대분류 선택 → 예: “ML&AI” 클릭
  2. 소분류 카드들이 메인 영역에 표시 → “GenAI&LLM” 등의 카드
  3. 소분류 카드 클릭 → 해당 소분류의 포스트들이 피드 형식으로 표시

이 과정에서 Jekyll의 Liquid 템플릿으로 HTML을 생성하고, JavaScript로 동적인 상호작용을 구현할 예정입니다.

Jekyll/Liquid로 HTML 구조 생성하기

먼저 카테고리 페이지의 기본 구조를 만들어보겠습니다. categories.html 레이아웃을 생성합니다.

기본 레이아웃 구조

<!-- _layouts/categories.html -->
--- layout: default ---

<div class="categories-container">
  <!-- 사이드바: 대분류 카테고리 목록 -->
  <aside class="categories-sidebar">
    <h2>카테고리</h2>
    <ul class="category-list">
       
      <li class="category-item" data-category="">
        <span class="category-name"></span>
        <span class="post-count">(64)</span>
      </li>
      
      <li class="category-item" data-category="DataEngineering">
        <span class="category-name">DataEngineering</span>
        <span class="post-count">(15)</span>
      </li>
      
      <li class="category-item" data-category="Development">
        <span class="category-name">Development</span>
        <span class="post-count">(18)</span>
      </li>
      
      <li class="category-item" data-category="ML-AI">
        <span class="category-name">ML-AI</span>
        <span class="post-count">(20)</span>
      </li>
      
      <li class="category-item" data-category="Tools">
        <span class="category-name">Tools</span>
        <span class="post-count">(9)</span>
      </li>
      
    </ul>
  </aside>

  <!-- 메인 콘텐츠 영역 -->
  <main class="categories-main">
    <div class="current-category">
      <h1>카테고리를 선택해주세요</h1>
    </div>

    <!-- 카테고리별 콘텐츠가 여기에 동적으로 표시됩니다 -->
    <div class="category-content">
      <!-- 대분류별 서브카테고리 카드들이 들어갈 영역 -->
    </div>
  </main>
</div>

서브카테고리 카드 생성 로직

각 대분류 안에서 서브카테고리들을 추출하고 카드 형식으로 표시하는 핵심 부분:

<!-- 서브카테고리별로 포스트 그룹화 -->


<!-- 유효한 서브카테고리만 필터링 -->



<!-- 서브카테고리 카드 -->
<div class="subcategory-card"
     data-subcategory=""
     data-parent="">

  <h3 class="subcat-title"></h3>
  <span class="post-count">0개 포스트</span>
  <button class="view-posts-btn">포스트 보기</button>
</div>

포스트 Front Matter 설정

카테고리 시스템이 작동하려면 각 포스트에 적절한 메타데이터가 필요합니다:

---
layout: post
title: "GPT-4 활용법 완전 정복"
date: 2025-09-08 14:30:00 +0900
categories: [ML-AI] # 대분류
subcategory: GenAI&LLM # 소분류
tags: [GPT, OpenAI, 생성형AI]
---

카테고리 구조 예시

ML&AI/
├── GenAI&LLM/
│   ├── GPT-4 활용법
│   └── 프롬프트 엔지니어링
└── Computer Vision/
    └── OpenCV 기초

Frontend/
├── React/
│   └── Hooks 완전 정복
└── Vue.js/
    └── Vue 3 시작하기

데이터 속성 활용하기

HTML 요소들에 data-* 속성을 사용해서 JavaScript에서 쉽게 접근할 수 있도록 설계했습니다:

주요 데이터 속성들

  • 카테고리 아이템: data-category="ML&AI" - 사이드바의 대분류 식별
  • 서브카테고리 카드: data-subcategory="GenAI&LLM", data-parent="ML&AI" - 소분류와 상위 카테고리 식별
  • 포스트 컨테이너: 같은 속성으로 해당하는 포스트 목록 식별

핵심 변수 할당

     # 대분류 식별자
         # 소분류 식별자
 # 소분류별 그룹화

이렇게 설정하면 JavaScript에서 DOM 조작을 통해 동적인 카테고리 시스템을 구현할 수 있습니다.