Primary-detail
Primary-detail
A primary-detail 레이아웃은 항목 목록과 선택된 항목의 해당 세부 정보를 함께 보여주는 인터페이스예요.
출처: 문서
본문
요소 (Elements)
primary 컴포넌트는 페이지의 컨테이너에 자리하고, detail 컴포넌트는 보통 슬라이드아웃 드로어(slide-out drawer)에 자리해요.
- Primary 컴포넌트: 각 요소의 세부 정보 드로어를 열도록 선택할 수 있는 요소들의 그룹을 담고 있어요.
- Drawer 컴포넌트: 각 개별 요소의 세부 정보를 담고 있어요.
페이지 콘텐츠 배경이 흰색이라면, 드로어를 primary 콘텐츠와 같은 높이에 구분선과 함께 배치할 수 있어요. 또는 드로어를 primary 콘텐츠 위로 올려(elevate) 배치할 수도 있어요. 드로어에는 선택된 primary 항목과 연결되는 제목을 두는 걸 권장해요.
일반적인 primary 컴포넌트:
- Data list*
- Data table*
- Card view*
- Simple list/light nav
* 위 중 어느 것이든 관련 툴바가 있을 수 있어요. 툴바는 primary의 컴포넌트 카드 헤더에 넣을 수 있지만, 카드 뷰가 있거나 뷰 사이를 전환할 수 있는 경우(그리고/또는 세부 정보 드로어를 열고 닫을 수 있는 경우)에는 페이지 헤더에 넣어야 할 수도 있어요.
일반적인 detail 컴포넌트:
- Markdown 텍스트 폼 또는 코드 편집기
- Description list
- 차트 또는 그래프
- 입력 폼
- 콘텐츠
용도 (Usage)
같은 페이지에 있는 큰 목록이나 그룹의 항목에서 세부 정보를 볼 때 primary-detail 레이아웃을 사용하세요. primary-detail 레이아웃은 목록을 앞뒤로 탐색하고 각 목록 항목의 세부 정보를 편집하면서 더 큰 목록의 맥락을 잃지 않을 때 유용해요. primary-detail 레이아웃은 더 넓은 화면에서 가장 잘 보이지만, 반응형으로도 사용할 수 있어요.
특성 (Characteristics)
PatternFly는 왼쪽의 primary 요소와 오른쪽의 detail 요소를 나란히 보여주는 뷰를 지원해요. primary 창(pane)의 컴포넌트는 detail 창에 표시될 정보를 제어하는 데 사용돼요.
primary-detail 컨테이너는 페이지 헤더 아래에서 시작될 수 있어요. primary와 detail 창의 너비는 표시하는 콘텐츠의 양과 유형에 따라 달라질 수 있어요. 보통 창은 뷰포트의 절반, 1/3, 1/4 크기예요. detail 창의 높이는 primary 컨테이너의 100%예요.
primary-detail 레이아웃은 보통 전체 페이지를 차지하지만, 특정 사용 사례에서는 카드 안에 배치할 수도 있어요. 단순한 내비게이션이나 데이터 목록을 사용하고 detail 창이 항상 열려 있을 때는 primary-detail 레이아웃을 카드에 배치하는 걸 제안해요. 이 뷰에서는 detail 창에 드롭 섀도우(drop shadow)를 쓰지 않는 걸 권장해요.
동작 (Behavior)
primary-detail 컴포넌트는 사용자가 왼쪽 primary 컴포넌트에서 항목을 선택하면 오른쪽에 detail 컴포넌트가 열리는 방식으로 동작해요. 사용자는 detail 컴포넌트를 닫거나 primary 컴포넌트에서 다른 항목을 선택해서 detail 컴포넌트의 뷰를 전환할 수 있어요.
반응형 동작 (Responsive behavior)
상호작용의 모바일 동작은 일반적으로 데스크톱 동작을 그대로 따릅니다. 모바일 뷰에서는 primary 컴포넌트 또는 detail 컴포넌트 중 한 번에 하나의 컴포넌트만 표시됩니다. primary 컴포넌트에서 항목을 선택하면 detail 컴포넌트가 오른쪽에서 슬라이드 인하며 primary 컴포넌트를 덮고 뷰포트의 전체 너비를 차지합니다. primary 컴포넌트의 제목은 primary 컴포넌트로 돌아가는 명확한 내비게이션을 제공하는 헤더로 그대로 유지됩니다. detail 컴포넌트는 닫을 수도 있으며, 닫으면 오른쪽으로 슬라이드 아웃되어 primary 컴포넌트만 다시 드러납니다. 뷰포트는 정의된 브레이크포인트에서 모바일 뷰로 전환되는데, 보통 2x 아래로 내려갈 때(일반적인 모바일 너비)입니다.
데스크톱 뷰의 detail 컴포넌트가 닫을 수 없고 항상 활성화된 경우, 모바일 뷰로 전환하면 detail 컴포넌트는 닫을 수 있게 되며 위에서 설명한 대로 동작합니다.
변형 (Variations)
선택 가능한 행 (Selectable rows)
행 선택(row selection)은 일괄 선택/체크박스 선택(bulk/checkbox selection)과 다르며, 두 선택 유형은 서로 독립적으로 동작해요.
primary-detail 레이아웃에 체크박스 선택과 행 선택이 모두 있는 경우, detail 창은 빈 상태(empty state)로 채워지고 사용자가 툴바에서 어떤 조치를 하거나 선택한 체크박스를 지워서 선택된 행의 세부 정보 뷰로 돌아가도록 안내합니다. 이 빈 상태는 테이블에 두 선택 상태가 모두 있을 때 사용자 혼란을 줄이기 위해 표시해야 합니다.
다음은 염두에 둘 모범 사례 몇 가지예요:
- 현재 detail 창을 채우고 있는 primary 항목(행 또는 카드)의 선택 상태(selected state)가 있어야 합니다.
- detail 창이 자동으로 확장되지 않는다면, primary 창에서 항목을 여는 어포던스(affordance)가 있어야 합니다(예: 호버/선택 가능한 행/카드 상태) 또는 툴바에 있어야 합니다(예: detail 창을 열고 닫는 아이콘).
- detail 창을 닫도록 토글이 가능하다면, detail 창의 오른쪽 위에 닫기 아이콘이 있어야 합니다. 사용자는 툴바에서도 열기/닫기를 토글할 수 있습니다.
빈 상태에 관해서, detail 창이 기본적으로 자동 확장되지만 primary 항목이 기본 선택되지 않는다면, detail 창에 primary에서 선택하도록 안내하는 빈 상태가 있어야 합니다. primary 컴포넌트에 일괄 선택 기능이 있는 경우, 확장된 detail 드로어는 여러 항목이 선택되었다는 빈 상태를 표시해야 합니다. 단일 primary 항목의 세부 정보를 보려면 사용자가 자신의 선택을 지워야 합니다.
primary-detail의 스플리터 (Splitter in a primary-detail)
스플리터(splitter)는 크기를 조절할 수 있는 창이 있는 레이아웃을 만들 수 있게 해줘요. 스플리터의 방향은 세로나 가로로 설정할 수 있어요.
콘텐츠에 더 많은 공간을 주기 위해 패널의 너비나 높이를 조정해야 한다면 primary-detail에 스플리터를 추가하세요. 이는 집중하고 있는 콘텐츠에 우선순위를 두는 데 도움이 돼요. primary-detail에 표시되는 데이터가 충분한 공간을 갖고 있다면 스플리터를 사용할 필요가 없어요.