주소모아 | 사이트 모음 | 주소모음 – 추천최신주소

사이트모음 – 최신 주소 바로가기 | IBKorea

UX · INFORMATION ARCHITECTURE

사이트모음 — 한 화면에서 끝내는 정보 구조의 설계

13개 카테고리·5,200여 항목을 어떻게 한 화면 안에 정리해야 사용자가 헤매지 않을까. 카드 그리드·필터·정렬·검색의 4가지 UX 축으로, 평균 2.3초 안에 원하는 곳에 도달하도록 설계된 화면 구조를 분해해 봅니다.



📐 정보 구조가 잘 설계된 카탈로그로 이동 →
카드 그리드 · 필터 · 3-Click Rule 적용 · 평균 도달 2.3초

→

평균 도달 2.3초 · 카테고리 13개 · 모바일 한 손 탐색 최적화

2.3s평균 도달 시간
13최상위 카테고리
3-Click최대 깊이
1.0x한 손 도달률
— TABLE OF CONTENTS
  1. 왜 카탈로그 화면 설계가 콘텐츠보다 중요한가
  2. 정보 아키텍처(IA) 5대 원칙 — 분류·라벨·탐색·검색·표현
  3. 카드 그리드 vs 리스트 — 두 레이아웃의 의사결정 기준
  4. 필터·정렬·검색의 우선순위와 화면 배치
  5. 3-Click Rule — 어디서든 3번 안에 목적지에 도달하는 깊이
  6. 자매 페이지와의 역할 분담 (화면 설계 vs 백엔드 처리)
  7. FAQ — 정보 구조 설계에 대한 7가지 의문
SECTION 01

왜 카탈로그 화면 설계가 콘텐츠보다 중요한가

아무리 좋은 정보를 모아둬도, 사용자가 그 정보를 찾을 수 없다면 의미가 없습니다. 닐슨 노먼 그룹의 오랜 연구에 따르면 디렉터리형 페이지에서 사용자가 원하는 항목을 찾는 데 실패하는 가장 큰 원인은 콘텐츠 부족이 아니라 정보 구조의 혼란입니다.

13개 카테고리에 5,200여 항목이 등록돼 있어도, 화면 설계가 잘못되면 사용자는 두세 번 잘못된 클릭을 한 뒤 떠나갑니다. 반면 같은 양의 정보라도 정리가 잘 돼 있으면 평균 2.3초 안에 원하는 곳에 도달할 수 있습니다.

이 페이지는 그 차이를 만드는 UX/UI 설계 원리를 다룹니다. 정보 아키텍처(IA)·시각적 위계·인터랙션 패턴 — 보이지 않는 곳에서 작동하는 설계 결정들이 어떻게 한 화면을 효율적으로 만드는지 살펴봅니다.

DESIGN PRINCIPLE

“좋은 디자인은 보이지 않는다. 사용자는 자신이 어떻게 도달했는지 의식하지 않은 채 목적지에 닿아 있다.” — 디자인의 성공은 사용자가 화면을 칭찬하지 않을 때 완성됩니다.

SECTION 02

정보 아키텍처(IA) 5대 원칙 — 분류·라벨·탐색·검색·표현

피터 모어빌(Peter Morville)이 정립한 정보 아키텍처의 5대 축입니다. 카탈로그 화면을 설계할 때 이 5가지를 모두 충족시키지 못하면 어딘가에서 사용자가 멈칫하게 됩니다.

PRINCIPLE 01

조직화 (Organization)

콘텐츠를 어떤 기준으로 묶을 것인가. 주제별·기능별·사용자 유형별 분류를 동시에 운영하지 않습니다. 한 페이지는 하나의 분류 축으로만 운영해야 사용자의 멘탈 모델이 흔들리지 않습니다.

PRINCIPLE 02

라벨링 (Labeling)

카테고리 이름이 사용자의 어휘와 일치해야 합니다. “엔터테인먼트”보다 “웹툰·드라마”처럼 구체적 단어가 인식 속도를 평균 1.4초 단축시킵니다. 라벨은 짧고 익숙해야 좋습니다.

PRINCIPLE 03

내비게이션 (Navigation)

현재 위치·이전 위치·이동 가능한 곳이 항상 보여야 합니다. 브레드크럼·고정 메뉴·뒤로가기 — 3가지 신호가 동시에 존재할 때 사용자는 안심하고 탐색을 이어갑니다.

PRINCIPLE 04

검색 (Search)

분류 탐색이 막혔을 때의 비상구입니다. 화면 상단에 항상 보이는 검색창 + 입력 즉시 자동완성 추천 + 결과 없을 때의 대체 안내가 한 세트로 동작해야 합니다.

PRINCIPLE 05

표현 (Representation)

같은 정보도 카드·리스트·테이블·그래프 중 어떤 형태로 보여주느냐에 따라 인식 속도가 달라집니다. 비교가 중요하면 테이블, 탐색이 중요하면 카드, 양이 많으면 리스트가 정답에 가깝습니다.

PRINCIPLE 06

일관성 (Consistency)

한 페이지에서 학습한 패턴이 다른 페이지에서도 유효해야 합니다. 카드 디자인·아이콘 배치·인터랙션 반응이 일관되면 사용자는 매번 다시 학습하지 않습니다.

SECTION 03

카드 그리드 vs 리스트 — 두 레이아웃의 의사결정 기준

카탈로그 화면의 가장 흔한 두 레이아웃입니다. 어느 쪽이 옳다고 단정할 수 없으며, 콘텐츠 성격과 사용자 목적에 따라 정답이 달라집니다.

비교 항목 카드 그리드 리스트 뷰
적합한 콘텐츠 이미지·시각 요소가 의미 있는 항목 제목·설명 위주의 텍스트
화면당 표시량 4~12개 (모바일 2~3열) 15~30개
스캔 속도 느림 (정보 풍부) 빠름 (밀도 높음)
사용자 의도 탐색·발견 (browse) 찾기·확인 (find)
모바일 적합도 높음 (터치 영역 넓음) 중간 (작은 텍스트)
대표 사례 OTT 콘텐츠·이커머스 상품 이메일·뉴스·검색 결과

이 페이지의 카탈로그 화면은 두 레이아웃을 동시에 제공합니다. 첫 진입 시 시각적 탐색에 유리한 카드 그리드가 기본이며, 화면 우상단의 토글로 즉시 리스트 뷰로 전환할 수 있습니다. 사용자가 한번 선택한 뷰는 다음 방문에도 그대로 유지됩니다.

SECTION 04

필터·정렬·검색의 우선순위와 화면 배치

이 3가지는 비슷해 보이지만 사용자 의도가 완전히 다릅니다. 위치와 시각적 위계를 잘못 잡으면 같은 기능도 사용성이 절반으로 떨어집니다.

  1. 01
    검색 (가장 위, 가장 크게)

    “무엇을 찾아야 할지 정확히 안다”는 의도. 화면 최상단·풀폭으로 배치하고, 입력 즉시 결과를 보여주는 instant search가 효과적입니다. 평균 응답 시간은 200ms 이내가 임계점입니다.

  2. 02
    필터 (좌측 또는 상단 가로 띠)

    “여러 기준으로 후보를 좁히고 싶다”는 의도. 카테고리·태그·날짜·평점 같은 다중 선택이 핵심이며, 활성 필터는 항상 시각적으로 표시되어야 사용자가 자신의 위치를 잃지 않습니다.

  3. 03
    정렬 (결과 영역 우상단, 작게)

    “이미 좁혀진 결과를 어떤 순서로 볼까”라는 의도. 인기순·최신순·이름순 등 단일 선택이며, 검색·필터 적용 후의 후처리이므로 시각적 위계는 가장 낮게 잡습니다.

  4. 04
    리셋 (필터 영역 안에 명확히)

    여러 조건을 적용한 뒤 초기화하고 싶을 때 즉시 보이는 위치. “전체 해제” 버튼 + 각 활성 필터 옆 작은 X 아이콘 — 두 단계의 리셋 옵션을 함께 제공해야 합니다.

SECTION 05

3-Click Rule — 어디서든 3번 안에 목적지에 도달하는 깊이

웹 디자인의 오랜 가이드라인 중 하나입니다. 메인 진입 후 어떤 항목이든 최대 3번의 클릭(또는 탭) 안에 도달할 수 있어야 사용자가 길을 잃지 않습니다.

이 규칙은 단순한 미신처럼 들리지만, 실제 사용성 테스트에서는 4번째 클릭부터 이탈률이 급격히 상승한다는 데이터가 반복적으로 나타납니다. 카탈로그 화면이 13개 카테고리를 다루더라도 깊이는 3을 넘지 않아야 합니다.

이 카탈로그의 도달 경로 예시

목표 1번째 2번째 3번째
특정 OTT 페이지로 이동 OTT 카테고리 카드 탭 인기 순위에서 항목 선택 외부 페이지 이동
검색 후 안전 필터 적용 상단 검색창 입력 좌측 “검증완료만” 필터 체크 결과 카드 탭
음성 호출로 결과 받기 마이크 아이콘 탭 발화 → 후보 카드 표시 카드 탭
최근 본 항목 다시 열기 “최근 방문” 토글 리스트에서 선택 외부 페이지 이동
DEPTH BUDGET

3-Click Rule은 절대 법칙이 아니라 “깊이 예산”입니다. 3번이라는 횟수보다 중요한 것은 매 단계마다 사용자가 자신의 진행 상황을 인지할 수 있느냐입니다. 5번이 걸려도 길이 명확하면 이탈하지 않고, 2번이라도 길이 흐릿하면 이탈합니다.

SECTION 06

자매 페이지와의 역할 분담 (화면 설계 vs 백엔드 처리)

이 페이지가 다루는 영역은 자매 페이지들과 명확히 다릅니다. 같은 카탈로그 시스템 안에서 각자의 책임 범위가 분리되어 있다고 이해하면 전체 그림이 보입니다.

페이지 책임 영역 대표 산출물
사이트모음 (이 페이지) 화면 설계·정보 구조 카드 레이아웃·필터 UI
링크모음 큐레이션 방법론 카테고리 분류 기준
주소요 의도 분류·라우팅 검색 처리 로직
주소야 발화 매칭 음성 인터페이스
주소콘 보안 검증 안전 점수 표시
링크몬 실시간 헬스체크 가동률 신호

즉 사이트모음은 “보여주는 방법”을, 링크모음은 “무엇을 모을 것인가”를, 주소요·주소야는 “어떻게 찾을 것인가”를, 주소콘·링크몬은 “어떻게 안전하게 살아있게 할 것인가”를 책임집니다. 이 6개 레이어가 동시에 작동해 한 화면이 완성됩니다.

SECTION 07

FAQ — 정보 구조 설계에 대한 7가지 의문

왜 카테고리를 13개나 두나요? 더 적게 정리할 수는 없나요?
밀러의 법칙(Miller’s Law)에 따르면 사람의 단기 기억은 7±2개 항목을 한 번에 처리할 수 있습니다. 13개는 이 한계를 넘는 숫자지만, 카테고리를 5개로 줄이면 각 카테고리 안의 깊이가 깊어져 도달 시간이 오히려 늘어납니다. 13개는 한국 인터넷 사용자의 주요 관심사를 빠짐없이 포괄하면서도 시각적으로 한 화면 안에 수용 가능한 균형점입니다.
카테고리 순서는 어떻게 결정하나요?
진입 후 30일간의 카테고리별 클릭 분포를 기준으로 매주 자동 재정렬됩니다. 인기 카테고리가 화면 상단·좌측에 배치되어 평균 도달 시간을 최소화합니다. 다만 급격한 순서 변동은 사용자 학습을 방해하므로, 한 주 내 최대 2칸까지만 이동합니다.
모바일 화면에서는 어떻게 다르게 보이나요?
데스크톱은 4열 그리드, 태블릿은 3열, 모바일은 2열로 자동 조정됩니다. 모바일에서는 한 손 조작을 위해 주요 액션 버튼이 화면 하단에 고정되며, 카테고리 카드도 엄지손가락으로 도달 가능한 영역에 우선 배치됩니다.
다크 모드는 지원되나요?
시스템 설정을 자동 감지해 다크 모드와 라이트 모드를 전환합니다. 사용자가 명시적으로 선택한 모드는 우선 적용되며, 카드·필터·텍스트 모두 별도의 다크 팔레트로 다시 디자인되어 단순한 색 반전이 아닙니다.
접근성(a11y)은 어떻게 고려되나요?
WCAG 2.1 AA 기준으로 설계되어 있습니다. 키보드만으로 모든 기능에 도달 가능하며, 스크린 리더용 ARIA 레이블이 모든 인터랙티브 요소에 부여돼 있습니다. 색맹 사용자를 위해 색상 외에도 아이콘·텍스트로 상태를 표시합니다.
화면 디자인이 자주 바뀌면 사용자가 헷갈리지 않나요?
대규모 변경은 분기당 1회 이하로 제한합니다. 변경 시에는 항상 A/B 테스트로 사용성 지표(도달 시간·이탈률)가 개선됨을 확인한 후에만 전면 적용됩니다. 미세한 색·간격 조정 같은 비파괴적 변경은 수시로 이뤄지지만 사용자 학습에 영향을 주지 않는 수준입니다.
UX 설계 결정의 근거는 어디에서 가져오나요?
자체 사용성 테스트 결과 + 닐슨 노먼 그룹·Baymard Institute 같은 공신력 있는 UX 연구 기관의 가이드라인을 근거로 삼습니다. 모든 디자인 결정은 “왜 이렇게 했는지”를 설명할 수 있어야 한다는 원칙을 따르며, 직관이나 트렌드만으로는 채택하지 않습니다.
UX

사이트모음 디자인 팀 / Information Architecture

— UX_DESIGN_TEAM @ IBKOREA

정보 아키텍처와 인터랙션 디자인 경험을 바탕으로 13개 카테고리·5,200여 항목을 한 화면에 담는 카탈로그 UI를 설계합니다. 핵심 원칙: “사용자가 자신이 어떻게 도달했는지 의식하지 않은 채 목적지에 닿게 한다.” 사용성 리포트는 분기마다 갱신됩니다.