1. 왜 '분류'가 디자인의 시작점인가

블로그를 시작할 때 대부분은 스킨부터 고릅니다. 폰트를 고르고, 헤더 이미지를 넣고, 색을 맞춥니다.
그런데 3개월 뒤 글이 80편쯤 쌓이면 이상한 일이 벌어집니다. 내 글인데 내가 못 찾습니다.

이건 미적 감각의 문제가 아니라 정보구조(Information Architecture, IA)의 문제입니다.
IA는 1970년대 건축가 리처드 사울 워먼(Richard Saul Wurman)이 처음 제안한 개념으로,
"정보를 이해 가능하도록 조직·배열하는 일"을 뜻합니다.
웹에서는 Polar Bear Book으로 불리는 로젠펠드·모빌의 저서를 통해 4대 구성요소로 정리되었습니다.

2. 카테고리를 나누는 5가지 과학적 기준

분류에는 정답이 없다고들 하지만, 실제로는 검증된 다섯 가지 축이 존재합니다.
IA 업계에서는 이를 LATCH라고 부릅니다. 워먼이 제안한 프레임워크입니다.

MECE : 겹치지 않고, 빠뜨리지 않게

MECE(Mutually Exclusive, Collectively Exhaustive)는 맥킨지에서 정립한 논리 원칙으로,
카테고리 설계에서 가장 실용적인 검증 도구입니다.

겹침 테스트 — "이 글, 두 카테고리 중 어디에 넣지?" 하고 3초 이상 고민되면 겹침입니다.
누락 테스트 — "이 글은 넣을 데가 없는데?" 하는 글이 생기면 누락입니다.
누락된 글이 3편 이상 쌓이면 새 카테고리를 만들 타이밍입니다.
단 1편짜리 카테고리는 만들지 마세요. 빈 서랍은 신뢰를 떨어뜨립니다.

숫자로 보는 적정 개수

인지심리학자 조지 밀러의 "마법의 수 7±2"는 널리 인용되지만,
후속 연구(넬슨 코완, 2001)에서는 실제 작업기억 용량이 4±1 청크에 가깝다고 수정되었습니다.
따라서 상단 글로벌 메뉴는 4~6개가 현실적인 최적값입니다.

사이드바 카테고리는 스캔(훑어보기) 방식이므로 조금 더 허용됩니다.
1차 5~8개 / 각 1차당 2차 3~7개 정도가 무난합니다.
3차 depth부터는 클릭 비용이 급증하므로, 그 이상은 태그로 처리하는 편이 낫습니다.

3. 라벨링 : 카테고리 이름이 곧 UI다

카테고리명은 가장 짧은 UI 카피입니다. 여기서 사람들이 가장 많이 실수합니다.

나쁜 라벨의 4가지 유형

① 자기중심 라벨 — "끄적끄적", "잡동사니", "나의 서재"
→ 감성은 있지만 클릭률이 낮습니다. 안에 뭐가 있는지 예측이 안 되기 때문입니다.

② 과도한 추상화 — "인사이트", "레버리지", "생각 창고"
→ 검색 유입자는 이 단어로 검색하지 않습니다.

③ 길이 초과 — "초보자도 쉽게 따라하는 포토샵 강좌"
→ 사이드바에서 두 줄로 줄바꿈되며 레이아웃이 깨집니다. 2~7자를 권장합니다.

④ 중복 접두어 — "디자인 이야기 / 개발 이야기 / 일상 이야기"
→ "이야기"가 반복되면 스캔 시 변별 정보가 뒤로 밀립니다. 앞쪽에 차이를 배치하세요.

SEO 관점 : 라벨은 URL이 된다

많은 블로그 플랫폼에서 카테고리는 아카이브 페이지 URL로 직결됩니다.
/category/design 같은 구조는 검색엔진에게 주제 클러스터 신호를 줍니다.

구글이 문서화한 토픽 클러스터(Topic Cluster) 개념에서는,
하나의 필러(Pillar) 페이지를 중심으로 여러 클러스터 글이 내부 링크로 연결될 때
주제 권위(topical authority)가 축적된다고 봅니다.

즉 카테고리 = 필러, 개별 글 = 클러스터로 설계하면
분류 작업이 그대로 SEO 전략이 됩니다.
재능넷의 '지식인의 숲'처럼 지식 콘텐츠를 다루는 공간도 이 원리로 카테고리가 구성됩니다.

/blog/design/                 ← 필러(카테고리 아카이브)
  /blog/design/color-theory   ← 클러스터
  /blog/design/typography     ← 클러스터
  /blog/design/grid-system    ← 클러스터
각 클러스터 → 필러로 상향 링크
필러 → 주요 클러스터로 하향 링크

4. 내비게이션 UI 패턴 : 무엇을 어디에 둘 것인가

내비게이션은 크게 글로벌 / 로컬 / 컨텍스추얼 / 보조 네 종류로 나뉩니다.

브레드크럼(Breadcrumb)의 재평가

브레드크럼은 촌스럽다며 빼는 경우가 많지만, 실제로는 가장 비용 대비 효율이 높은 요소입니다.

① 현재 위치 인지 — 검색으로 들어온 독자는 홈을 거치지 않습니다.
전체 트래픽의 상당수가 개별 글로 직접 진입하는 현실에서,
브레드크럼은 "여기가 어디인지"를 한 줄로 알려주는 유일한 장치입니다.

② 검색결과 표시 — 구조화 데이터(BreadcrumbList, schema.org)를 넣으면
검색결과의 URL 자리에 계층 경로가 노출되어 클릭률에 유리합니다.

<script type="application/ld+json">
{
 "@context":"https://schema.org",
 "@type":"BreadcrumbList",
 "itemListElement":[
  {"@type":"ListItem","position":1,"name":"홈","item":"https://example.com/"},
  {"@type":"ListItem","position":2,"name":"디자인","item":"https://example.com/design/"},
  {"@type":"ListItem","position":3,"name":"타이포그래피"}
 ]
}
</script>

정보 향기(Information Scent)

제록스 PARC의 정보 채집 이론(Information Foraging Theory)은
사용자를 "먹이를 쫓는 동물"에 비유합니다.
링크가 주는 단서가 강할수록 클릭하고, 약하면 즉시 이탈합니다.

향기를 강화하는 구체적 방법:

· 글 수 표기 : 「컬러 (7)」처럼 숫자를 붙이면 빈 서랍 클릭을 방지합니다.
· 현재 위치 하이라이트 : 활성 카테고리를 굵게/색으로 구분.
· 아이콘 + 텍스트 병기 : 아이콘 단독은 해석 오류율이 높습니다. 반드시 라벨 동반.
· 1줄 설명 : 카테고리 아카이브 상단에 15~30자 설명문 배치.

5. 모바일 내비게이션 : 엄지의 지배

블로그 트래픽의 대부분이 모바일에서 발생하는 시대입니다.
그런데 카테고리 UI는 여전히 데스크톱 사이드바 사고방식으로 설계되곤 합니다.

엄지 영역(Thumb Zone)

스티븐 후버의 관찰 연구에 따르면 모바일 사용자의 약 75%가 엄지 한 손으로 조작합니다.
화면 하단 중앙이 가장 도달하기 쉽고, 상단 모서리가 가장 어렵습니다.

그래서 최근 앱과 모바일 웹은 주요 내비게이션을 하단 바로 내립니다.
블로그에서도 "목차 / 카테고리 / 검색 / 맨위로"를 하단 고정으로 두면 체류시간이 개선됩니다.

햄버거 메뉴의 명암

햄버거 아이콘(☰)은 공간 절약의 왕이지만, 발견 가능성(discoverability)이 낮습니다.
숨겨진 메뉴는 보이는 메뉴보다 사용률이 확연히 떨어진다는 것이 다수 사용성 테스트의 공통 결론입니다.

절충안 3가지

· 햄버거 + 라벨 : 아이콘 옆에 "메뉴"라고 텍스트를 붙이면 인지율이 올라갑니다.
· 핵심 2개는 밖으로 : 가장 중요한 카테고리 1~2개는 헤더에 노출, 나머지만 숨김.
· 가로 스크롤 탭(Chip Nav) : 카테고리를 알약 모양 칩으로 가로 나열.
  유튜브·네이버 앱이 쓰는 방식으로, 숨기지 않으면서 공간을 아끼는 현재의 표준에 가깝습니다.

/* 가로 스크롤 칩 내비게이션 - 핵심만 */
.nav-chips{display:flex;overflow-x:auto;gap:8px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.nav-chips::-webkit-scrollbar{display:none}
.nav-chips a{flex:0 0 auto;min-height:44px;display:flex;
  align-items:center;padding:0 16px;border-radius:999px;
  border:1px solid #ddd;white-space:nowrap;scroll-snap-align:start}
.nav-chips a[aria-current="page"]{border-color:#4f7cff;color:#4f7cff}

마지막 칩이 살짝 잘려 보이게 하는 '피킹(peeking)' 기법을 쓰면
"옆으로 더 있다"는 신호가 되어 스크롤 발견율이 올라갑니다.

6. 카테고리 vs 태그 : 역할 분담의 원칙

둘을 헷갈리면 구조가 무너집니다. 차이는 명확합니다.

시리즈(Series) — 가장 저평가된 세 번째 축

카테고리도 태그도 아닌 '순서가 있는 묶음'입니다.
연재 글에서 "3편 중 2편" 같은 진행 표시를 넣으면
자이가르닉 효과(미완성 과제 기억 효과)로 다음 편 클릭률이 눈에 띄게 올라갑니다.

구현은 간단합니다. 글 상단에 시리즈 박스를 두고, 현재 편을 굵게, 나머지를 링크로.
페이지뷰와 체류시간 모두에 직접 기여하는 가성비 최고의 컴포넌트입니다.

7. 분류 체계를 검증하는 실무 방법론

① 카드 소팅(Card Sorting)

포스트 제목을 카드에 적어 사용자에게 자유롭게 묶게 하는 고전적 기법입니다.

오픈 카드 소팅 : 그룹 이름까지 참가자가 직접 짓게 함 → 새 카테고리 발굴용.
클로즈드 카드 소팅 : 이미 정해둔 카테고리에 카드를 배정 → 기존 구조 검증용.
참가자는 15명 내외면 패턴이 안정화된다는 것이 통설입니다.

혼자 하는 블로거라면? 메모 앱에 제목만 100개 붙여놓고 드래그로 묶어보세요.
자기 글인데도 어디에 넣을지 망설여지는 카드가 바로 구조 결함 지점입니다.

② 트리 테스트(Tree Testing)

디자인 없이 텍스트 계층만 보여주고 "○○ 관련 글을 찾아보세요"라고 지시합니다.
측정 지표는 세 가지입니다.

· 성공률 : 목표 지점 도달 비율
· 직진율(Directness) : 뒤로가기 없이 한 번에 도달한 비율
· 소요 시간

직진율이 낮다면 라벨 문제, 성공률이 낮다면 구조 문제일 확률이 높습니다.

③ 데이터로 사후 검증

· 카테고리별 이탈률 : 특정 카테고리만 유독 높다면 라벨-내용 불일치 의심.
· 사이트 내 검색어 로그 : 사람들이 검색창에 치는 단어는 없는 카테고리의 이름입니다.
· 0건 검색어 : 기대했는데 없는 콘텐츠 = 다음 글감이자 새 카테고리 후보.
· 페이지당 세션 : 1.0에 가까우면 내비게이션이 작동하지 않는다는 뜻입니다.

8. 접근성(A11y) : 모두를 위한 내비게이션

내비게이션은 웹 접근성 지침에서 가장 비중 있게 다뤄지는 영역입니다.
화려한 메뉴보다 아래 항목들이 실질적인 품질을 결정합니다.

① 시맨틱 마크업 — 메뉴는 <nav>로 감싸고 aria-label로 구분합니다.
페이지에 nav가 둘 이상이면 각각 "주 메뉴", "카테고리" 등으로 이름을 붙여야
스크린리더 사용자가 구별할 수 있습니다.

② 건너뛰기 링크(Skip Link) — 키보드 사용자는 매 페이지마다 메뉴를 전부 통과해야 합니다.
"본문 바로가기"를 최상단에 숨겨두고 포커스 시 노출시키세요.

③ 포커스 표시 — outline:none만 넣고 대체 스타일을 주지 않는 것은
키보드 사용자에게 화면을 끄는 것과 같습니다. :focus-visible로 명확히 표시하세요.

④ 현재 위치 전달 — 색상만으로 활성 메뉴를 표시하면 색각 이상 사용자는 인지하지 못합니다.
aria-current="page"와 굵기·밑줄 등 비색상 단서를 함께 제공합니다.

<a href="#main" class="skip">본문 바로가기</a>
<nav aria-label="주 메뉴">
  <a href="/design/" aria-current="page">디자인</a>
  <a href="/dev/">개발</a>
</nav>
<nav aria-label="현재 위치"> ... 브레드크럼 ... </nav>

.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:999}
a:focus-visible{outline:3px solid #4f7cff;outline-offset:2px}

⑤ 명도 대비 — 본문 텍스트 4.5:1, 큰 텍스트 3:1 이상(WCAG AA).
회색 위의 옅은 회색 메뉴는 감성적으로는 예쁘지만 기능적으로는 결함입니다.

9. 플랫폼별 현실 : 블로그 · 카페 · SNS

블로그 (티스토리·워드프레스·네이버)

자유도가 가장 높습니다. 카테고리 depth, URL 구조, 스킨 HTML까지 직접 제어됩니다.
따라서 브레드크럼 + 시리즈 + 관련글 3종 세트를 반드시 구현하는 것이 좋습니다.
네이버 블로그처럼 커스터마이징이 제한된 경우에는 프롤로그 홈과 대표 카테고리 설정,
그리고 상단 메뉴(카테고리 5개 노출) 선정이 사실상의 내비게이션 디자인입니다.

카페 (네이버 카페 등)

카페는 게시판 단위가 곧 카테고리입니다.
여기서 흔한 실패는 게시판 과잉입니다.
운영자는 "정리했다"고 생각하지만, 신규 회원에겐 글 쓸 곳을 고르는 장벽이 됩니다.

· 게시판 수는 초기에 5~8개로 시작해 활동량을 보며 증설
· 유사 게시판은 하나로 합치고 말머리(prefix)로 분기 — 태그 역할
· 최상단에 "처음 오셨나요?" 가이드 게시판 고정 — 온보딩 내비게이션
· 권한 등급으로 잠긴 게시판은 목록에서 아예 숨기거나 잠금 표시를 명확히

SNS (인스타그램·유튜브 등)

SNS에는 사이드바가 없습니다. 대신 세 가지 대체 내비게이션이 존재합니다.

① 하이라이트 / 재생목록 — 카테고리의 직접적 대응물.
커버 이미지를 통일된 스타일로 만들면 사실상 GNB가 됩니다.
② 해시태그 — 자기만의 브랜드 태그(#○○의디자인노트)를 만들면 시리즈 인덱스 역할.
③ 피드 그리드 리듬 — 3열 구조에서 색·톤을 주기적으로 반복하면
스크롤 중에도 시각적 카테고리가 인지됩니다.

플랫폼은 달라도 원리는 같습니다.
"지금 어디에 있고, 다음에 어디로 갈 수 있는가"를 보여주는 것.
재능넷에서 지식 콘텐츠를 탐색할 때도 결국 이 두 질문에 대한 답이 UI의 품질을 결정합니다.

10. 30분 실행 플랜

마무리

좋은 내비게이션은 눈에 띄지 않습니다.
독자가 "메뉴가 예쁘다"고 느끼는 순간보다,
아무 생각 없이 세 번째 글을 클릭하고 있는 순간이 성공입니다.

카테고리는 서랍이고, 내비게이션은 손잡이입니다.
서랍을 아무리 예쁘게 칠해도 손잡이가 없으면 아무도 열지 않습니다.
구조를 먼저, 이름을 정확히, 길을 짧게.
이 세 문장이 블로그 디자인의 뼈대입니다.