중기 7차: Tools 허브 카드/배지 UX 보강 (2026-03-23)

중기 7차: Tools 허브 카드/배지 UX 보강 (2026-03-23)

작업 목적

• Tools 허브 페이지에서 방문자가 글을 열기 전에 난이도, 지원 OS, 추천 대상을 바로 판단할 수 있게 만들기
• 허브 목록을 단순 링크 나열에서 카드형 구조로 바꿔 첫 클릭 결정 시간을 줄이기

반영 내용

Tools 메인 허브

• 빠른 시작 카드 섹션 추가
• 3개 하위 허브(개발·협업, 시스템 점검, 크리에이터)마다 배지로 성격 표시

하위 허브 3종

• /tools/development/ 대표 도구 카드 추가
• /tools/system-utilities/ 대표 도구 카드 추가
• /tools/creator-media/ 대표 도구 카드 추가

각 카드에 아래 배지를 공통 제공:

• 난이도
• 지원 OS
• 추천 대상

스타일

• nm-tools-pick-grid, nm-tools-pick-card, nm-tools-badge 스타일 추가
• 기존 다크 테마 톤과 충돌하지 않도록 기존 변수(--nm-*) 기반으로 맞춤

기대 효과

• 허브 페이지 체류 중 “어떤 글부터 볼지” 판단이 빨라짐
• 모바일에서도 카드 단위로 정보가 압축되어 스크롤 피로 감소
• Search Console 데이터가 쌓인 뒤 허브 단위 CTR/다음 클릭률 분석이 쉬워짐