안녕하세요, 디자인 엔지니어 올리브예요.

hierarchy(계층)는 페이지 사이의 위아래 관계, taxonomy(분류 체계)는 콘텐츠를 묶는 기준과 이름, navigation(내비게이션)은 사용자가 실제로 이동하는 길이에요. 셋 다 '사이트 구조'라고 뭉뚱그려 부르기 쉽지만, 각각 다른 질문에 답해요. 계층은 "어디 아래에 있나", 분류는 "무엇으로 묶이나", 내비게이션은 "어떻게 가나"예요.

해외 문서나 툴 설명을 읽다 보면 이 세 단어가 계속 나와요. 처음엔 다 비슷해 보여서 그냥 넘겼는데, 구분해 두니 구조 문서를 읽고 쓰는 게 훨씬 편해졌어요. 이 블로그를 예시로 하나씩 정리해 볼게요.

hierarchy(계층)란?

hierarchy는 페이지끼리의 위아래 관계예요. 어떤 페이지가 어떤 페이지 아래에 속하는지를 말해요. 한국 실무에서 말하는 '1depth, 2depth'가 바로 계층이에요.

홈
└─ 카테고리: 웹디자인 실무        (1depth)
    └─ 글: 사이트맵과 IA 차이     (2depth)

계층은 깊을수록 좋나요?

아니요. 계층이 깊으면 원하는 페이지까지 여러 번 눌러야 해요. 반대로 너무 얕으면 한 화면에 고를 게 너무 많아져요. 그래서 보통 넓고 얕은 구조(flat) 와 좁고 깊은 구조(deep) 사이에서 균형을 찾아요. 이 블로그는 홈 → 카테고리 → 글, 세 단계로 얕게 두었어요.

taxonomy(분류 체계)란?

taxonomy는 콘텐츠를 어떤 기준으로 묶고, 그 묶음을 뭐라고 부를지 정한 체계예요. 원래는 생물을 계, 문, 강, 목, 과, 속, 종으로 나누는 생물 분류학을 가리키는 말이에요. 그리스어 taxis(배열)와 nomos(규칙)에서 왔어요.

웹에서는 카테고리와 태그가 대표적인 taxonomy예요. 워드프레스는 아예 카테고리와 태그를 'taxonomy'라는 이름으로 관리해요.

구분 카테고리 태그
하나의 글에 보통 하나 여러 개
미리 정해 두나요? 네, 정해 둔 목록 안에서 골라요 쓰면서 자유롭게 붙여요
이 블로그의 예 웹디자인 실무 IA, 정보구조, 사이트맵

계층과 분류 체계는 어떻게 다른가요?

계층은 자리를 정하고, 분류 체계는 기준을 정해요. 예를 들어 '사이트맵과 IA 차이' 글은 계층으로는 '웹디자인 실무' 아래 한 자리에 있어요. 하지만 분류로는 'IA', 'UX', '사이트맵' 태그에 동시에 속해요. 계층은 보통 한 갈래고, 분류는 여러 갈래로 걸칠 수 있어요.

navigation(내비게이션)이란?

navigation은 사용자가 페이지 사이를 실제로 이동하는 장치예요. 계층과 분류가 지도라면, 내비게이션은 그 지도 위에 낸 길과 표지판이에요.

내비게이션 하는 일 이 블로그의 예
GNB 최상위 메뉴 상단 카테고리 메뉴
시리즈 이동 이어지는 글로 가기 글 아래 이전 편·다음 편
카테고리 목록 같은 분류의 글 모아 보기 카테고리 페이지
본문 링크 관련 글로 바로 가기 본문 속 다른 글 링크

내비게이션은 계층을 꼭 따라야 하나요?

아니요. 이 점이 가장 많이 헷갈리는 부분이에요. 시리즈 이동이나 본문 링크는 계층을 건너뛰어요. 계층은 하나지만, 그 위에 길은 여러 개 낼 수 있어요. 좋은 내비게이션은 계층을 존중하면서도, 사용자가 자주 가는 곳에는 지름길을 만들어 줘요.

세 단어는 어떻게 함께 쓰이나요?

한 문장으로 이어 보면 이래요. 분류 체계로 콘텐츠를 묶고, 그 묶음을 계층으로 쌓고, 그 위에 내비게이션으로 길을 내요.

구분 hierarchy taxonomy navigation
우리말 계층 분류 체계 내비게이션, 이동 경로
답하는 질문 어디 아래에 있나? 무엇으로 묶이나? 어떻게 가나?
실무 산출물 IA 문서의 depth, 사이트맵 카테고리·태그 목록 메뉴 설계, 와이어프레임
바꾸면 생기는 일 주소가 바뀌기 쉬워요 글을 다시 분류해야 해요 화면만 바뀌어요

마지막 줄이 실무에서 특히 중요해요. 내비게이션은 비교적 쉽게 바꿀 수 있지만, 계층과 분류는 주소와 엮여 있어서 바꾸면 리다이렉트까지 챙겨야 해요. 그래서 계층과 분류는 처음에 신중하게, 내비게이션은 써 보면서 고쳐 가는 순서가 편해요.

자주 묻는 질문

IA와 이 세 단어는 어떤 관계인가요?

IA(정보 구조)가 이 셋을 모두 포함하는 큰 설계예요. 계층, 분류 체계, 내비게이션은 IA를 이루는 부분이에요.

태그도 계층이 있나요?

보통 태그는 계층 없이 나란히 붙어요. 계층이 필요한 분류는 카테고리로 만들고, 가볍게 여러 개 붙이는 분류는 태그로 쓰는 게 일반적이에요.

breadcrumb는 셋 중 무엇인가요?

내비게이션이에요. 다만 지금 위치를 계층대로 보여 줘서, 계층을 사용자 눈에 보이게 해 주는 내비게이션이에요.

정리

  • hierarchy(계층): 페이지의 위아래 관계예요. "어디 아래에 있나?"
  • taxonomy(분류 체계): 묶는 기준과 이름이에요. "무엇으로 묶이나?"
  • navigation(내비게이션): 실제로 이동하는 길이에요. "어떻게 가나?"
  • 바꾸기 쉬운 순서: 내비게이션은 쉽고, 계층과 분류는 주소와 엮여 있어 어려워요.

분류로 묶고, 계층으로 쌓고, 내비게이션으로 길을 낸다고 기억하면 돼요.

오늘도 읽어 주셔서 고마워요. 다음 글에서 만나요! 🌿