데이터 목록
데이터 목록 (Data List)
목록은 데이터를 탐색 가능하게 만들고 필요한 객체를 빠르게 찾는 데 초점을 맞춰요.
출처: 문서
본문
디자인 목표 (Design goals)
- 목록을 쉽게 스캔(scan)할 수 있게 만들어요.
- 목록에서 객체를 빠르게 찾아요.
목록 유형 (List type)
테이블 (Table)
탐색(browsing)에 중점을 둬요. 매트릭스 레이아웃은 복잡한 데이터를 표시하는 경향이 있고, 데이터는 매트릭스 레이아웃에 따라 정렬되어 가로·세로로 데이터를 탐색하고 데이터 간의 관계를 연구하기에 편리해요. 특히 사용자가 객체의 상세 내용을 들여다보지 않고도 더 많은 데이터 노출을 원할 때 테이블을 사용해요.
리스트 (List)
탐색과 표현(presentation)을 모두 고려해요. 세로로 배치되며 객체의 기본 개요를 보여 주는 경향이 있고, 콘텐츠가 위계적으로 표시되어 빠른 스캔에 적합해요. 특히 작은 팝업 창, 사이드바, 드롭다운 패널 같은 표시 공간이 제한된 컨테이너에서는 리스트를 사용해요.
카드 목록 (Card list)
표현(presentation)에 중점을 둬요. 그리드 레이아웃은 특정 탐색 순서가 없고, 각 객체가 더 동등한 표시 기회를 가져요. 그리드 레이아웃은 페이지에서 더 매력적이며 객체를 강조하는 데 적합해요.
조작 동작 (Operation Behavior)
데이터 검색 (Search data)
적절한 검색 컴포넌트를 선택하세요.
1) 사용자의 주요 검색 패턴을 식별하세요.
- 알려진 항목 탐색(Known Items Exploration): 말로 설명 가능한 알려진 항목으로 검색을 시작해요.
- 탐색적 질의(Exploratory query): 정의되었지만 범위가 넓은 대상으로 검색해요.
2) 검색 빈도가 높을수록 효율 요구도 높아져요.
3) 개발자와 잘 소통해 시스템 성능을 이해하고 적절한 컴포넌트를 선택하세요.
조회 (Inquire)
사전 설정된 조건에 따라 여러 쿼리 조건을 선택하고 한 번에 조회 쿼리를 제출해요.
필터 (Filter)
사용자가 필터를 조정하면 결과도 그에 따라 조정돼요.
검색 (Search)
더 똑똑한 검색으로, 여러 데이터 속성에서 한 번에 키워드를 입력해 조회하고 결과를 표시해요.
페이징 (Paging)
기본적으로 페이지 로딩을 사용해 사용자 대기를 줄여요. 원래 목록에서 사용자의 탐색 위치를 캐시하고, 목록에서 탐색한 항목을 표시해야 해요. 사용자가 이전 페이지로 돌아가면 원래 탐색 위치로 돌아가도록요.
페이지네이션 (Pagination)
기본으로 권장돼요. 사용 시 페이지 콘텐츠가 한 페이지보다 적으면 페이저(pager)가 표시되지 않아요.
같은 페이지 로드 (same page load)
사용자가 목록 맨 위에서 원하는 항목을 자주 찾을 수 있고 특정 리스트 항목을 찾을 필요가 없을 때 이 모드를 고려할 수 있어요. 예: 다이내믹스, 이메일.
모두 보기 (view all)
완전한 목록을 보기 위해 페이지로 이동해야 할 때 사용해요.
상세로 이동 (Navigate to details)
기본적으로 타이틀을 클릭하면 상세로 이동하며, 다음 관점에서 상세를 어떻게 열지 판단할 수 있어요.
- 자연스러운 상호작용 관점에서, 같은 페이지에서 목록 확장이 더 자연스러워요. 다만 확장된 콘텐츠 영역의 높이가 한 화면을 넘지 않아야 한다는 점에 주의하세요.
- 상세의 정보량 관점에서, 정보 표시가 한 화면을 넘으면 사용자가 펼침 방식을 쓰기 불편해요. 이때는 Drawer 확장을 쓰는 것이 더 좋아요.
- 상세를 다른 사람과 별도로 공유해야 하거나, 복잡한 몰입형 작업이라면 독립 페이지로 이동이 더 적합해요.
- 각 상세 항목에 사용자가 관심 있을 만한 콘텐츠가 있을 수 있고, 전환 내비게이션을 편리하게 하고 서로 다른 항목을 빠르게 보고 처리하려면 **이중 컬럼 표시(double column display)**를 사용할 수 있어요.
배치 조작 (Batch operations)
사용자가 항목을 체크하면 배치 조작 모드가 트리거되고, 목록 툴바가 배치 조작 툴바를 불러내요.
새로 만들기 (New)
오른쪽 위 새 버튼 (New button in the upper right corner)
클릭하면 새 폼 팝업 창, 드로어, 페이지 등을 트리거해요. 생성이 완료되면 새로 만든 콘텐츠가 목록의 첫 번째 항목에 나타나고 잠시 강조돼요.
대시 새 버튼 (Dashed New Button)
New를 클릭하면 버튼 위치에 객체 편집 영역이 나타나고, 생성이 완료되면 새로 만든 객체가 이 위치에 표시돼요. 대시 새 버튼 위치는 목록의 시작이나 끝에 배치돼요.
삭제 (delete)
직접 삭제 (Delete directly)
삭제 후 사용자에게 undo(실행 취소)를 허용해요.
이차 확인 (Second Confirmation)
삭제 동작을 클릭할 때 이차 확인이 필요해요.
보안 검사 (Security check)
파괴적 조작은 높은 수준의 보안 검증으로 조작을 확인해야 해요.
목록 툴바 (List Toolbar)
목록을 작은 공간에 통합하는 데 필요한 공통 기능으로, 강력히 권장돼요.
레이아웃 (layout)
목록 레이아웃은 보통 위에서 아래로 타일 형태로, 다음 순서로 늘어서요. 그중 전용 영역(exclusive area)은 툴바에 통합할 수 없는 복잡한 데이터 검색과 데이터 통계 콘텐츠를 해결하기 위한 확장 공간을 제공해요.
빈 상태 (Empty state)
목록에 데이터가 없거나 검색 결과가 없을 때는 빈 상태를 표시해야 해요.