목록 페이지

목록 페이지 (List Page)

목록 페이지는 많은 항목(entry)을 보고 처리할 수 있게 해 주며, 자주 상세 페이지로 이동하는 내비게이션과 함께 사용돼요. 사용자는 목록 페이지에서 항목을 필터링, 비교, 추가, 분석하고 상세 페이지로 드릴다운할 수 있어요.

출처: 문서

본문

목록 페이지는 많은 항목을 보고 처리할 수 있게 해 주며, 자주 상세 페이지로 이동하는 내비게이션과 함께 사용돼요. 사용자는 목록 페이지에서 항목을 필터링, 비교, 추가, 분석하고, 드릴다운해서 상세 페이지를 완성할 수 있어요.

디자인 목표 (Design Goals)

사용자가 항목을 더 효율적으로 보고, 처리하고, 찾도록 도와줘요.

디자인 원칙 (Design Principles)

스캔 가능성 (Scannability)

객체 인식을 돕는 핵심 정보를 일관된 형식으로 강조해요. 풍부한 대화형 계층 정보를 활용해 인지 부하를 줄여요.

찾기 쉬움 (Findability)

목록을 논리적으로 탐색 가능한 순서로 정리해요. 사용자가 정보를 빠르게 찾도록 적절한 검색 컴포넌트를 제공해요.

어떻게 디자인할까 (How to Design)

기본 레이아웃 (Basic Layout)

단일 컬럼 레이아웃 (Single Column Layout)

위에서 아래로 쌓고, 데이터 필터링 모듈을 맨 위에 둬요. 데이터를 필터링한 뒤 사용자는 일반에서 개별로 탐색하고 분석할 수 있어요.

이중 컬럼 레이아웃 (Two-Column Layout)

필터링 조건이 많고 가로 공간이 충분할 때 데이터 필터링 모듈을 사이드바에 배치해요.

템플릿 - 조회 테이블 (Query Table)

언제 사용하나요

각 항목이 많은 필드를 노출해야 할 때; 사용자가 항목을 검색할 때 정확한 조회 범위를 가질 때 사용해요.

템플릿 - 표준 목록 (Standard List)

언제 사용하나요

각 항목에 대한 개요를 제공하고, 목록을 클릭하면 항목 상세로 이동해요. 페이지는 사용자가 전체 진행 상황을 이해할 수 있도록 통계 기능을 자주 제공해요. 워크벤치의 단순화 버전으로 사용할 수 있어요.

템플릿 - 카드 목록 (Card List)

언제 사용하나요

사용자가 특정 순서로 항목을 탐색할 필요가 없을 때, 각 항목을 매력적으로 제시해요.

템플릿 - 검색 목록 (Search List)

언제 사용하나요

주로 특정 항목 정보를 검색하는 데 사용하며, 키워드로 여러 주제에 걸친 검색 결과를 제공해요. 다양한 유형의 많은 콘텐츠를 검색하고 필터링하는 데 적합하며, 막연한 대상을 찾는 요구를 충족해요.

관련 작업 (Involves Operations)

필터, 검색

템플릿 - 멤버 관리 (Member Management)

언제 사용하나요

멤버 관리는 객체 안의 멤버 기본 정보와 권한을 표시하고 관리하는 데 사용해요. 관리 작업에는 보통 멤버 추가, 멤버 삭제, 멤버 역할과 권한 부여 등이 포함돼요.

관련 작업

필터, 삭제 등

디자인 제안 (Design Suggestions)

일괄 작업 (Batch Operations)

페이지 레벨 일괄 작업은 전체 페이지에 영향을 주며, 페이지 하단에 배치할 수 있어요.

목록 페이지