중기 10차: AI 허브 카드형 네비게이션 고도화 (2026-03-23)

중기 10차: AI 허브 카드형 네비게이션 고도화 (2026-03-23)

배경

• Tools 허브는 카드/배지 기반 진입 구조를 적용한 뒤 가독성과 다음 클릭 흐름이 개선됨
• AI 허브는 메인 페이지만 카드가 있고, 하위 허브(코딩 도구, 브라우저·리서치, 로컬 LLM, 실무용 워크플로우)는 표/목록 중심이라 진입 초반 스캔 속도가 상대적으로 느림

작업 목적

• AI 허브 하위 페이지도 카드형 요약 진입점을 제공해 첫 스크롤 구간에서 의사결정을 빠르게 만들기
• 허브 간 이동과 설치/비교 글 이동을 자연스럽게 연결해 재순환을 높이기

반영 내용

1) AI 하위 허브 카드 섹션 추가

• 대상 페이지:
  • /ai/coding-tools/
  • /ai/browsers-research/
  • /ai/local-llm/
  • /ai/workflows/
• 각 페이지 상단에 빠른 선택 카드 블록 추가
  • 목적별 시작점
  • 추천 대상
  • 난이도/환경 배지

2) 공통 스타일 추가

• assets/css/main.scss에 아래 클래스 신설
  • nm-hub-pick-grid
  • nm-hub-pick-card
• hover, 다크모드 배경, 배지 가독성 포함
• 기존 nm-tools-badge 스타일을 재사용해 시각 일관성 유지

기대 효과

• AI 허브 첫 화면에서 “무엇부터 읽을지” 결정 시간이 짧아짐
• 비교 글 -> 설치 글 -> 개념 글로 이어지는 다음 클릭률 개선 기대
• Tools/AI 허브 사이의 UI 톤 통일로 사이트 전반 탐색 경험 일관성 강화