웹사이트에서 카테고리 분류 시각화하기

👥 이런 분께 추천

• 콘텐츠가 많아지면서 분류 체계가 필요한 분

• 프로젝트 내 규칙을 만들고 그 규칙 변경 과정을 기록하고 싶으신 분

• UI 컴포넌트에 새로운 기능을 추가해본 적 없으신 분

• 스타일 시스템(CSS 변수)을 활용해본 적이 없으신 분

📝 한줄 요약

사례글들이 개인작업에 쌓이면서 “강의·설치·보안·규칙·데이터” 같은 태그로 분류해보았습니다.

규칙 문서화부터 UI 구현, 기존 글 정리까지의 전 과정을 기록했습니다.

Before: 사례글이 시간순으로만 쌓임 (분류 체계 없음)
After: 각 글이 명확한 태그와 색상으로 분류됨 (한눈에 구분 가능)

결과물

23기 AI온보딩 스터디에서 제공되는 학습위키에 카테고리 [태그] 추가

ALT

한국사이트 스크린샷

🙋 내 스펙 & 환경

진행 방법

1. 왜 하게 되었나

사례글이 점점 쌓이면서 문제가 생겼다.

상황:

• 개인작업 섹션에 이제 6개의 사례글이 있음

• 각 글의 주제가 다름 (강의, 설치, 보안, 규칙, 데이터)

• 하지만 좌측 목록에는 “제목”만 있고 주제 구분이 없음

• 독자가 “어떤 주제의 글들이 있나” 한눈에 파악하기 어려움

필요한 것:

• 각 글의 주제를 시각적으로 표현하는 방법

• “1주차 개념”, “사례”, “회고” 같은 종류 태그처럼 색상 있는 칩 형태

2. 첫 번째 단계: 규칙 정의

먼저 AGENTS.md에 새로운 규칙을 문서화했다.

## ★ 사례글 카테고리와 태그

사례글은 카테고리와 태그로 분류됩니다.

**카테고리:** n주차 작업 vs 개인작업
- `카테고리: w1`, `w2`, `w3`, `w4` — 해당 주차의 학습 작업
- `카테고리: 개인작업` — 주차와 무관한 개인 프로젝트나 일반 학습

**태그:** 카테고리 내 세부 분류
- 1주차, 2주차 등에선: 「개념」「사례」「회고」「규칙」 등
- 개인작업에선: 「보안」「규칙」「자동화」「학습」 등
복사

배운 점: 규칙을 먼저 정의하면, 이후 구현이 명확해진다. “뭘 만들지”보다 “뭐가 필요한지”를 먼저 정하는 게 중요했다.

3. 두 번째 단계: 설정 파일 수정

config.ts에 새로운 필드 추가:

// 카테고리: 글이 속한 카테고리 (n주차 또는 개인작업)
카테고리: z.enum(['w1', 'w2', 'w3', 'w4', '개인작업']).optional(),
// 태그: 카테고리 내 세부 분류
태그: z.string().optional(),
복사

이제 frontmatter에서 이 필드들을 사용할 수 있게 되었다.

---
title: "글쓰기 규칙을 자동화하기"
카테고리: 개인작업
태그: 규칙
---
복사

4. 세 번째 단계: UI 렌더링 로직 추가

WikiSidebar.astro에서 태그 색상 맵 정의:

const 태그색상: Record<string, { bg: string; fg: string }> = {
  규칙: { bg: 'var(--blue-bg)', fg: 'var(--blue-fg)' },
  보안: { bg: 'var(--red-bg)', fg: 'var(--red-fg)' },
  자동화: { bg: 'var(--purple-bg)', fg: 'var(--purple-fg)' },
  강의: { bg: 'var(--orange-bg)', fg: 'var(--orange-fg)' },
  설치: { bg: 'var(--slate-bg)', fg: 'var(--slate-fg)' },
  데이터: { bg: 'var(--pink-bg)', fg: 'var(--pink-fg)' },
};
복사

그리고 개인작업 섹션과 주차별 섹션 모두에 태그를 렌더링하는 코드 추가:

{e.data.태그 && (
  <span
    class="tag"
    style={`background: ${태그색상[e.data.태그]?.bg || 'var(--surface)'}; 
            color: ${태그색상[e.data.태그]?.fg || 'var(--fg)'};`}
  >
    {e.data.태그}
  </span>
)}
복사

배운 점: Astro 컴포넌트에서 동적 스타일을 적용할 때는 인라인 style 속성보다 CSS 변수를 활용하면, 나중에 다크모드를 지원할 때 편하다.

5. 네 번째 단계: 색상 시스템 구축

Base.astro에 CSS 변수 추가:

:root {
  --blue-bg: #dbeafe;
  --blue-fg: #1e40af;
  --red-bg: #fee2e2;
  --red-fg: #991b1b;
  --purple-bg: #f3e8ff;
  --purple-fg: #6b21a8;
  --sky-bg: #e0f2fe;
  --sky-fg: #0c4a6e;
  --orange-bg: #fed7aa;
  --orange-fg: #9a3412;
  --slate-bg: #e2e8f0;
  --slate-fg: #334155;
  --pink-bg: #fbcfe8;
  --pink-fg: #be185d;
}
복사

각 색상을 배경(-bg)과 글자색(-fg)으로 쌍으로 정의했다. 이러면 나중에 다크모드를 추가할 때 CSS 변수만 바꾸면 된다.

6. 다섯 번째 단계: CSS 스타일 추가

WikiSidebar.astro에 .tag 클래스 추가:

.tag {
  font-size: 0.65rem;
  padding: 0.08rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 500;
  /* 테두리 없음 — 1주차 개념, 사례 UI와 동일 */
}
복사

테두리를 의도적으로 빼서, 기존의 종류 태그(“1주차 개념”, “사례” 등)와 같은 스타일로 통일했다.

7. 여섯 번째 단계: 기존 글 정리

이제 기존 개인작업 글들의 제목을 정규화했다.

변경 전:

• “(강의) 기술부채의 정체 - 개인 성장과 산업의 악순환”

• “(설치) 윈도우에서 구글 CLI 설치하기 - PATH 설정 방법”

• “(보안) 학습일지를 비밀번호로 보호하기”

변경 후:

• “기술부채의 정체 - 개인 성장과 산업의 악순환” + 🟠 강의

• “윈도우에서 구글 CLI 설치하기 - PATH 설정 방법” + ⚪ 설치

• “학습일지를 비밀번호로 보호하기” + 🔴 보안

모든 파일의 frontmatter에 카테고리: 개인작업과 태그: 해당태그를 추가했다.

8. 검증: 색상이 제대로 나타나는지 확인

Vercel에 배포된 사이트에서 좌측 “개인작업” 섹션을 보면:

📝 기술부채의 정체...                        🟠 강의
📝 윈도우에서 구글 CLI 설치...                ⚪ 설치
📝 학습일지를 비밀번호로 보호...              🔴 보안
📝 사례글 작성 규칙을 정리...                 🔵 규칙
📝 스프레드시트 자동화...                    🩷 데이터
📝 글쓰기 규칙을 자동화...                   🔵 규칙
📝 브라우저 암호화, 비밀번호는 진짜 잠금      🔴 보안
복사

각 글이 제 색깔의 태그로 표시된다.

배운 점

💡 핵심 교훈

1. 규칙 정의부터 구현까지의 순서가 중요하다

규칙을 먼저 정의(AGENTS.md) → 필드 추가(config.ts) → UI 구현(WikiSidebar.astro) → 스타일(Base.astro) → 기존 데이터 정리 순서로 진행했다. 역순으로 했으면 “어? 이 태그를 뭐라고 부를래?” 하면서 헷갈렸을 거다.

2. CSS 변수를 먼저 정의하면 유지보수가 쉽다

색상을 하드코딩하지 않고 CSS 변수로 관리했다. 나중에 다크모드를 추가할 때, :root 변수만 수정하면 모든 곳에 반영된다.

3. “1주차 개념”처럼 이미 있는 스타일을 따르면 사용자 학습곡선이 낮다

새로운 태그 시스템을 만들 때, 기존의 종류 태그와 같은 모양, 같은 위치에 놓았다. 그래서 사용자는 “아, 이건 그것처럼 분류하는 거구나” 하고 쉽게 이해한다.

4. 기존 데이터 정리는 규칙이 정해진 후에

6개 글의 제목과 frontmatter를 일괄 수정하는 건 규칙이 확정된 후에 했다. 중간에 규칙이 바뀌었으면 6번 다 수정해야 했다.

솔직한 소감

뿌듯했다. “새로운 기능을 추가한다”는 게 생각보다 명확한 단계들로 이루어져 있다는 걸 느꼈다.

UI도 중요한 부분인데, 이렇게 분류도 클로드로 자동화할 수 있었다.

1. 문제 인식 (태그 분류 필요)

2. 규칙 정의 (카테고리·태그의 의미)

3. 데이터 구조 확정 (config.ts 필드)

4. UI 구현 (컴포넌트 로직)

5. 스타일 (CSS 변수·클래스)

6. 기존 데이터 마이그레이션

이 순서를 지키니까 중간에 실수가 없었다.

적용할 점

🎯 즉시 적용

📋 다음 계획

1. 2주차부터 같은 방식 적용

   • 2주차 사례글도 같은 태그 사용

   • “개념”, “사례”, “회고”, “규칙” 같은 종류 태그도 각각 색상 정의

2. 다크모드 대응

   • @media (prefers-color-scheme: dark) 추가

   • 다크모드용 CSS 변수 정의

3. 필터링 기능 (장기)

   • “규칙 태그만 보기”, “보안 태그만 보기” 같은 필터 추가

   • JavaScript로 태그별 필터 구현

💡 다른 곳에도 적용할 수 있을까

이 패턴을 다른 곳에도 써볼 수 있다:

• 프로젝트 카드: 프로젝트 상태(진행중/완성)를 색상 태그로

• 학습일지: 날짜별로 쌓이는 일지를 주제 태그로 분류

• 랜딩 페이지: 소개글의 섹션마다 카테고리 태그

규칙 정의 → 필드 추가 → UI 구현 → 스타일 → 데이터 마이그레이션 순서는 언제든 써먹을 수 있는 템플릿이 되었다.