대시보드

대시보드 (Dashboard)

대시보드는 애플리케이션, 프로세스 또는 비즈니스에 중요한 핵심 지표나 성능 지표의 개요를 제공해요. 대시보드의 전반적 경험은 사용 사례에 따라 크게 달라질 수 있어서, 모두에게 맞는 단일 접근법을 정의하기는 어려워요. 이 가이드라인은 다양한 상황에 적용할 수 있는 체계적인 대시보드 디자인 접근을 취합니다.

출처: 문서

본문

요소 (Elements)

대시보드는 충족해야 하는 요구 사항과 사용 사례에 따라 크게 달라질 수 있지만, 보통 두 가지 주요 부분으로 요약할 수 있어요:

• 카드(Cards): 정보는 카드를 통해 전달돼요. 각 카드는 단일 지표 또는 밀접하게 관련된 지표 그룹을 전달하도록 설계되어야 해요.
• 레이아웃(Layout): 카드의 배열이며, 보통 그리드 구조예요.

대시보드 디자인 과정을 진행하면서 이 두 가지 측면에 집중할 거예요. 다음은 그리드로 배열된 4개의 카드를 담은 대시보드 예시예요.

표준 카드 (Standard cards)

PatternFly는 정보를 일관된 방식으로 전달하는 데 도움이 되는 몇 가지 일반적인 카드 레이아웃을 지원해요. 이는 완전한 목록은 아니지만, 카드를 디자인하기 전에 전달하려는 정보가 이 일반 패턴 중 하나에 들어맞는지 먼저 확인해야 해요. 카드 레이아웃은 유연하며 커스터마이즈할 수 있다는 점에 유의하세요. 따라서 정확히 원하는 것이 여기에 없다면, 이 표준 레이아웃을 커스텀 디자인을 구축하는 기반으로 사용하길 권장해요. 카드와 카드 사용에 대한 자세한 내용은 Card 컴포넌트 문서를 참고하세요.

집계 상태 카드 (Aggregate status card)

집계 상태 카드는 객체의 총 개수와 그에 대한 집계된 상태를 보여줘요. 예를 들어, 큰 분산 네트워크를 구성하는 노드 수를 빠르게 세고, 다운되거나 유지보수가 필요한 노드 수 등을 식별하는 데 사용할 수 있어요. 보통 더 많은 세부 정보를 살펴보기 위한 링크도 있습니다.

• 카드 제목: 모니터링 중인 객체의 총 개수를 보고해요.
• 정상 상태: 모든 것이 문제 없이 정상적으로 실행 중임을 반영해요.
• 예외 상태(개수만): 예외(오류, 경고 또는 기타 조건)를 보고하는 항목의 수를 셉니다. 0이 아닌 항목만 포함하세요. 개수를 더 많은 세부 정보에 선택적으로 링크할 수 있어요.
• 주석이 있는 개수(선택 사항): 보고된 상태를 명확히 하기 위해 추가 정보가 필요할 수 있다면 라벨과 설명을 포함하세요.

추세 카드 (Trend card)

추세 카드는 시간에 따른 어떤 지표의 변화를 표시하는 데 사용돼요. 주어진 기간 동안 현재 값과 이전 값을 볼 수 있어야 합니다.

• 현재 값: 카드 제목을 사용해 현재 값을 반영해요.
• 필터(선택 사항): 차트의 데이터를 필터링하려 할 때 카드의 오른쪽 위에 필터를 배치하세요. 대부분 차트의 시간 범위를 변경하는 데 사용돼요. 예: "Last 24 hours," "Last 7 days," "Last 30 days" 등.
• 추세 차트: 스파크라인(sparkline) 차트가 추세 데이터를 표시하는 데 가장 자주 사용돼요.
• 액션(선택 사항): 카드에 액션을 포함한다면 카드의 푸터에 링크 스타일 버튼으로 추가하세요.

일반 추세 카드는 현재 값과 추세 차트를 세로로 쌓은(stacked) 레이아웃으로 배열해요. short trend card 레이아웃을 사용해 현재 값과 추세 차트를 나란히 배치하면 세로 공간을 절약할 수 있어요. 같은 카드에서 여러 지표의 추세를 모니터링하고 싶을 수도 있어요.

카드에 여러 추세 지표를 표시한다면, 각 차트가 무엇을 측정하는지 명확한 이름으로 추세 차트를 쌓고, 이 카드에 무엇이 표시되는지 전달하는 제목을 위에 추가하세요.

가용량 카드 (Utilization card)

가용량 카드는 단일 지표 또는 여러 지표의 현재 값을 보고해요. 값이 비례적(즉 전체의 백분율)이기 때문에 가용량을 보고할 때 막대 차트나 도넛 차트가 가장 자주 사용돼요.

• 카드 제목: 이 카드가 무엇을 측정하는지 명확히 전달하세요.
• 필터(선택 사항): 차트의 데이터를 필터링하려 할 때 카드의 오른쪽 위에 필터를 배치하세요.
• 가용량 차트: 막대 차트나 도넛 차트가 가용량을 보고하는 데 흔히 사용돼요.
• 액션(선택 사항): 카드에 액션이나 다른 페이지로의 링크가 있다면 푸터에 링크 스타일 버튼으로 추가하세요.

세부 정보 카드 (Details card)

세부 정보 카드는 객체나 프로세스와 관련된 상세 데이터를 표시하는 데 사용돼요. 세부 정보는 보통 속성-값 쌍이나 표 형식으로 표현돼요.

• 카드 제목: 이 카드에 무엇이 들어 있는지 명확히 전달하세요.
• 세부 정보: 해당 객체의 세부 정보를 표시해요. 이 용도에는 description list가 종종 유용해요.
• 액션(선택 사항): 카드에 액션이 있다면 푸터에 링크 스타일 버튼으로 추가하세요.

이벤트 카드 (Events card)

이벤트 카드는 시간상 발생하는 항목을 나열해요. alert, task 또는 기타 시스템 메시지일 수 있어요.

• 카드 제목: 이 카드에 무엇이 들어 있는지 명확히 전달하세요.
• 필터(선택 사항): 차트의 데이터를 필터링하려 할 때 카드의 오른쪽 위에 필터를 배치하세요.
• 이벤트 목록: 이벤트 목록이에요. 이벤트를 나열하려면 data list나 notification drawer 컴포넌트를 사용할 수 있어요.
• 액션(선택 사항): 카드에 액션이 있다면 푸터에 링크 스타일 버튼으로 추가하세요.

대시바 (Dashbar)

대시바(dashbar)는 각 애플리케이션이나 대시보드 안에 배치되는 더 작은 대시보드로, 필요할 때 즉시 조치를 취할 수 있도록 필수 정보를 제공해요. 항상 상단에 배치되며 화면의 위쪽 절반을 차지합니다.

다음과 같은 경우 대시바를 사용하세요:

• 시스템이나 애플리케이션의 다른 부분의 현재 상태에 대한 중요한 정보를 보여줄 때.
• 과거 데이터를 제시할 때. 차트로 제시할 수 있어요.
• 테이블에서 중요한 데이터를 필터링할 때.
• 새 기능을 소개할 때.
• 시스템이나 애플리케이션의 다른 부분에 영향을 미칠 수 있는 그룹의 상태를 보여줄 때.

대시보드 단계별 디자인 (Designing dashboards step-by-step)

효과적인 대시보드를 디자인하려면 먼저 대시보드가 충족해야 하는 요구 사항과 사용 사례에 대한 확실한 이해가 있어야 해요. 아직 없다면 돌아가 더 많은 질문을 하고, 더 많은 조사를 하며, 대시보드가 무엇을 해야 하는지에 대한 전반적인 이해를 높이세요.

1단계: 카드 나열하기 (Step 1: List the cards)

첫 단계는 대시보드에 필요한 카드의 단순한 목록을 만드는 거예요. 이 목록을 부품 키트(kit of parts)로 생각하세요. 이것들이 빌딩 블록이자 (아주 쉬운) 퍼즐 조각이에요.

대시보드의 각 카드는 단일 지표, 지표 집합 또는 중요한 정보의 요약을 표시하도록 설계되어야 해요. 카드의 범위는 단일 노드의 리소스 소비만큼 좁을 수도, 실시간으로 나열된 모든 시스템 이벤트 목록만큼 넓을 수도 있어요.

답해야 할 질문:

• 이 대시보드는 어떤 사용 사례를 충족해야 하나요?
• 해당 사용 사례와 연관된 데이터나 정보는 무엇인가요?

카드 목록 예시:

클러스터 세부 정보

• 이름, 공급업체, OCS 버전 등...

성능

• 현재 사용량 + 시간에 따른 사용량 기록
• IOPS, Latency, Throughput, Recovery Rate, Recovery IOPS

건강 상태

• 클러스터가 건강한가요?
• 아니라면, 왜 그런가요?

상위 소비자

• 어떤 프로젝트, 포드, 클러스터가 가장 많은 리소스를 사용하나요?
• 프로젝트, 노드, 클래스, 워크로드별로 뷰를 필터링하는 기능
• 상위 5개만 표시

이벤트

• 시스템 이벤트 목록
• 이벤트 유형에 따라 필터링하는 기능

인벤토리

• 현재 노드, 디스크, 포드, PV, PVC 수 목록
• 다운/오류 중인 것이 몇 개인지, 몇 개인지.

용량

• 물리적 용량(사용 백분율)
• 요청된 용량(사용 백분율)

2단계: 카드 우선순위 정하기 (Step 2: Prioritizing your cards)

가장 광범위한 사용 사례 범위에 가장 유용한 정보를 담은 카드가 무엇인지 판단해 목록의 우선순위를 정하세요.

이 단계에 너무 많은 시간을 쓰지 마세요; 완벽할 필요는 없어요. 목록에서 중요도의 명확한 계층이 있을 수도 있고, 중요도가 같은 카드 목록이 있을 수도 있어요. 어려움을 겪고 있다면 다음 단계로 넘어가세요.

이상적으로, 표시하는 모든 정보가 중요합니다. 이 단계의 목적은 어떤 카드를 전면 중앙에 두고 어떤 카드에 덜 강조를 둘지 결정하는 데 도움을 주는 것입니다. 이 구분은 반응형 디자인에서 주로 중요합니다. 4열 레이아웃이 모바일 뷰포트에서 1열 레이아웃이 될 때, 카드를 적절히 정렬하면 가장 중요한 정보가 위로 오도록 보장합니다.

우선순위가 정해진 카드 목록의 예시 (Example of a prioritized card list)

우선순위 전(unprioritized):

• Top consumers
• Events
• Capacity
• Inventory
• Performance
• Details
• Health

우선순위 후(prioritized):

• Details
• Performance
• Inventory
• Health
• Capacity
• Top Consumers
• Events

참고: 목록 맨 아래의 카드가 반드시 "중요하지 않다"는 뜻은 아니며, 단지 목록 맨 위 카드보다 위에 있어서는 안 된다는 뜻일 뿐입니다.

3단계: 카드 크기 정하기 (Step 3: Sizing your cards)

다음으로, "이 카드가 얼마나 클 필요가 있을까?"라는 질문을 하며 카드 크기를 정해야 합니다.

스스로에게 물어볼 몇 가지 질문과 더 나은 감을 잡기 위한 실제 예시가 있습니다.

• 세 가지 표준 크기(small, medium, large)를 사용하며 시작하세요. 이 크기 지정은 다음 단계인 열 구조 결정을 준비하는 데 도움이 됩니다. 이 크기는 카드의 전체 표면적을 말하며, 구체적으로 길이나 너비가 아닙니다. 같은 표면적을 차지하는 키 큰 medium 카드와 넓은 medium 카드를 가질 수 있어요. 우리는 추정(guessestimate)하는 중입니다. 카드가 medium인지 large인지 결정하는 데 상당한 시간을 쓰지 마세요. 이 단계는 단순히 반복(iteration)을 위한 기반을 만드는 것입니다. 각 카드의 레이아웃을 개념적 수준에서 생각하기 시작하고 싶으며, 이는 레이아웃 반복을 시작할 때 도움이 됩니다.
• 각 카드에 대해 질문하세요:
  • 어떤 형식으로 이 정보가 가장 명확하게 표시될까요?
  • 이 카드에는 얼마나 많은 데이터가 들어갈까요?
  • 이 카드의 정보량은 정적(static)인가요, 동적(dynamic)인가요? 정적 카드의 크기와 모양은 시간이 지나도 변하지 않습니다. 예를 들어 항상 차트가 하나인 카드일 수 있어요. 동적 카드는 이벤트 목록처럼 커지거나 작아질 항목 목록을 포함할 수 있어요.

이 질문들을 다양한 유형의 카드에 적용해 대시보드에서 적절한 크기를 결정하는 예시는 다음과 같습니다:

세부 정보 카드

"어떤 형식으로 이 정보가 가장 명확하게 표시될까요?"

• 이 카드는 클러스터의 다양한 세부 정보를 나열해야 합니다. 각 세부 정보는 라벨과 값을 가집니다. 예: name // cluster-name
• 이는 데이터를 2열 목록으로 만들어야 하는 것처럼 보입니다. 한 열은 라벨, 한 열은 값.

"얼마나 많은 데이터가 들어갈까요?"

• 저장 대시보드의 이 특정 인스턴스에서 목록에는 4개 항목만 있습니다. 아주 큰 목록은 아닙니다.

"정보량은 정적인가요 동적인가요?"

• 카드의 항목은 사용자나 이해관계자의 피드백에 따라 추가되거나 제거될 수 있지만, 우리가 변경하기로 결정하지 않는 한 변경되지 않습니다. 따라서 이 정보는 정적이며 이 카드가 항상 같은 양의 정보를 포함할 것으로 기대할 수 있습니다.

결론:

• 이 카드는 항상 4개 항목의 2열 목록을 포함합니다.
• 이 카드는 small일 수 있습니다.

성능 카드

"어떤 형식으로 이 정보가 가장 명확하게 표시될까요?"

• 이 카드는 5가지 서로 다른 값의 현재 성능 지표를 표시합니다. 시간에 따른 값의 과거 데이터를 보여주어야 합니다.
• 현재 값을 텍스트로, 시간에 따른 값을 표시하는 꺾은선 그래프로 보여주세요. 이는 5개 지표 각각이 텍스트 라벨, 텍스트 값, 꺾은선 그래프를 가진다는 뜻입니다.

"얼마나 많은 데이터가 들어갈까요?"

• 대부분 위에서 답했습니다. 5개 지표를 포함하며, 각각 현재 데이터 값과 시간에 따른 값을 보여주는 그래프를 반영합니다.

"정보량은 정적입니까 동적입니까?"

• 이 카드는 항상 같은 것을 보여주는 지표를 포함할 것입니다: 지표에 대한 라벨, 현재 값, 시간에 따른 값. 이 정보 자체는 끊임없이 변하지만 정보의 양이나 밀도는 변하지 않습니다. 따라서 정적입니다.

결론:

• 꺾은선 차트 5개를 포함하세요. 이 카드는 아마 large일 것입니다.

이벤트 카드

"어떤 형식으로 이 정보가 가장 명확하게 표시될까요?"

• 이 카드는 발생하는 이벤트 목록을 표시합니다.
• 각 이벤트 목록 항목은 몇 줄의 정보를 보여줍니다: 발생 시간, 이벤트 소스, 이벤트 설명.
• 이 정보는 목록 뷰 형식으로 가장 잘 표시됩니다.

"얼마나 많은 데이터가 들어갈까요?"

• 이벤트는 빠르고 대량으로 발생합니다. 이 카드는 수천 개의 이벤트를 포함할 수 있습니다. 사용자는 이 뷰를 필터링해 자신의 특정 요구에 맞게 조정할 수 있어야 합니다.

"정보량은 정적입니까 동적입니까?"

• 0개 이벤트를 포함하거나 수천 개를 포함할 수 있는 목록이므로, 확실히 동적입니다.

결론:

• 이 카드는 엄청난 양의 이벤트를 포함할 수 있습니다. 한 번에 보기에 합리적이라고 생각되는 항목 수를 기준으로 카드에 최대 높이를 부여해야 합니다. 최대 높이를 설정할 때 한 번에 4개 항목이 합리적입니다. 사용자가 더 많은 이벤트를 보고 싶으면 카드는 스크롤됩니다.
• 최대 높이가 4개 항목이고 이 목록 뷰는 1열만 필요하므로, medium 크기면 충분하다고 추정할 수 있습니다.

완료되면 목록은 대략 다음과 같아야 합니다:

• Details: Small
• Performance: Large
• Inventory: Medium
• Health: Medium
• Capacity: Medium
• Top consumers: Large
• Events: Medium

4단계: 열 구조와 카드 배열 반복하기 (Step 4: Iterate on column structure and card arrangement)

이제 우선순위가 정해지고 크기가 정해진 카드 목록이 있으니, 이를 사용해 카드 레이아웃을 만드세요. 시작하려면 전체 크기 데스크톱 뷰에서 열을 그리세요.

• 모든 열은 너비가 같아야 합니다.
• 모든 열은 같은 크기의 거터(gutter, 열 사이 공간)를 가져야 합니다.
• 표준 데스크톱 크기(1200-1400px)에서는 열 레이아웃이 페이지의 전체 너비를 채우도록 하세요.
• 프로젝트 맥락 안에서 열을 그리세요. 예시에서는 상단 마스트헤드, 상단 헤더 정보 영역, 왼쪽 내비게이션, 대시보드용 캔버스가 있다는 것을 알고 있습니다.

이 단계에서는 어떤 일반적인 열 수를 사용해도 되지만, 3열과 4열 레이아웃이 가장 흔합니다. 이 튜토리얼에서는 표준 4열 레이아웃으로 작업합니다.

16px 거터가 있는 4열 레이아웃. 대시보드 주변에도 16px 여백이 있습니다.

다음으로, 콘텐츠 없이 적절한 크기로 카드를 추가하세요. 아직 배열은 걱정하지 말고, 추정한 크기로 모든 카드를 그리기만 하세요.

• 카드에는 아직 실제 콘텐츠가 없어야 하며, 카드 이름만 있어야 합니다. 이 시점에서 우리가 관심 있는 것은 각 카드의 대략적인 크기뿐입니다.
• 다시 말하지만, 이는 추정입니다. 각 카드의 정확한 높이는 신경 쓰지 않습니다. 대신 열 구조를 가이드로 사용합니다.

4열 그리드에 우선순위가 정해지고 크기가 정해진 카드 목록을 배치한 결과는 이 예시처럼 보여야 합니다.

크기에 얼마나 느슨하게 충실했는지 주목하세요. details 카드는 꽤 작지만, events와 history 카드는 더 큰 카드에 가깝게 되었습니다. 괜찮습니다.

카드가 넓어야 할지 높아야 할지를 선택할 때, 카드 안의 정보 형식을 고려하면 도움이 됩니다. 예를 들어 inventory와 events 카드 모두 데이터 목록을 포함합니다. 목록은 더 키 큰 카드에 잘 어울리는 경향이 있습니다. consumers 카드(오른쪽 아래)는 꺾은선 그래프를 포함합니다. 시간에 따른 데이터를 보여주는 꺾은선 그래프는 더 넓은 카드에 잘 어울립니다.

이제 카드 배열을 반복할 수 있습니다. 이 배열을 퍼즐처럼 접근하세요. 카드의 우선순위가 강하다면, 그것이 주된 요인이어야 합니다. 가장 중요한 카드를 위에, 덜 중요한 카드를 아래에 두고 싶습니다. 카드가 더 잘 맞도록 크기를 조금 바꾸는 것은 괜찮습니다. 예시에서 events와 inventory 카드는 그렇게 키가 클 필요가 없을 것입니다. 더 많은 공간이 필요한 다른 카드를 위해 그 공간을 더 잘 활용할 방법을 찾을 수 있을지도 모릅니다.

이 단계에서 만나게 될 유일한 경계는 앞서 정의한 일반적인 크기입니다. inventory 카드가 항상 그렇게 키가 커야 한다고 가정해 자신을 제한하지 마세요. 정확히 얼마나 키가 커야 하는지 아직 모르고, 대략 medium 정도일 것이라는 일반적인 생각만 있을 뿐입니다. 특정 열 레이아웃에 어려움을 겪고 있다면, 다른 것을 시도해 문제를 해결하는지 확인하세요.

작동하는 레이아웃을 찾을 때까지 카드를 여러 번 재배열할 수 있습니다.

details와 performance가 최우선 순위 항목이라는 것을 알았으므로 이들을 위쪽에 유지하고 나머지 카드 주변을 주로 반복했습니다. 레이아웃에 더 잘 맞도록 일부 카드의 높이를 어떻게 변경했는지 주목하세요.

동적 카드는 특별한 고려가 필요합니다. 1열 동적 카드가 확장되어 아래의 2열 카드를 밀어내고 사용되지 않는 공간의 간극을 만드는 상황을 피하고 싶습니다. 다음 예시에서 events 카드로 이것이 어떻게 전개될 수 있는지 살펴보겠습니다.

inventory 카드의 높이를 항상 events 카드와 일치하도록 설정해 이 간극을 해결할 수 있습니다. 또 다른 잠재적 솔루션은 events 카드를 항상 정의된 높이로 두고, 맞지 않는 모든 정보에 대해 스크롤을 도입하는 것입니다. 유연하고 수용적인 레이아웃이 보통 가장 효과적인 장기 솔루션을 제공합니다.

5단계: 콘텐츠 추가하고 레이아웃 다듬기 (Step 5: Add your content and refine your layout)

편안한 몇 가지 레이아웃을 찾았다면, 각 카드에 실제 콘텐츠 디자인을 추가하고 크기에 어떤 영향을 미치는지 확인하세요. 이 문서의 처음에 설명한 표준 카드 템플릿으로 시작하세요. 이를 수정하거나 요구에 맞는 커스텀 카드 레이아웃을 만들 수 있습니다. 예비 레이아웃의 각 카드를 어떻게 채울 수 있는지 확인해 봅시다.

세부 정보 카드 (Details card)

1단계에서 Details 카드가 클러스터 이름, 공급업체, OS 버전을 표시해야 한다고 정의했던 것을 기억하세요. 이는 표준 details 카드를 사용해 쉽게 달성할 수 있습니다.

성능 카드 (Performance card)

성능 카드는 5가지 서로 다른 측정(IOPS, Latency, Throughput, Recovery rate, Recovery IOPS)의 현재 사용량과 시간에 따른 사용량 기록을 표시해야 합니다. 이 사용 사례를 위해 5개의 표준 trend 카드를 그룹화해 가로 그리드로 배열할 수 있습니다. 그런 다음, 측정하고 싶은 데이터 범위를 변경하기 위해 헤더에 필터를 추가할 수 있습니다.

건강 상태 카드 (Health card)

건강 상태 카드는 클러스터와 클러스터 데이터의 상태를 보여주는 커스텀 카드가 될 것입니다. 여기서 표준 카드를 사용하지 않지만, 전체 건강 상태를 표시하기 위해 집계 상태 카드의 요소를 빌릴 수 있습니다.

용량 카드 (Capacity card)

용량 카드는 다음을 반영해야 합니다:

• 물리적 용량(사용 백분율).
• 요청된 용량(사용 백분율).

성능에 대해 더 큰 카드 안에서 여러 카드를 그룹화한 것과 유사하게, 두 개의 도넛 가용량 차트를 사용해 이 두 지표를 나란히 표시할 수 있습니다.

상위 소비자 카드 (Top consumers card)

이 카드는 사용자에게 어떤 프로젝트, 포드, 클러스터가 가장 많은 리소스를 소비하는지 보여줍니다. 사용자가 이러한 속성 중 어느 것에 대해서든 상위 5개 소비자에 대해 프로젝트, 노드, 클래스, 워크로드별로 이 정보를 볼 수 있게 하고 싶습니다. 이 목표를 달성하기 위해, 시간에 따른 소비를 보여주는 꺾은선 차트를 사용하는 커스텀 카드를 만들 수 있습니다. 사용자는 5개 결과를 모두 비교하거나 특정 시간으로 필터링할 수 있습니다. 사용자가 표시된 시간 범위를 변경할 수 있는 추가 필터도 포함할 수 있습니다.

이벤트 카드 (Events card)

이벤트 카드는 시스템 이벤트 목록을 표시하고 이벤트 유형에 따라 필터링할 수 있는 기능을 제공해야 합니다. 이 사용 사례에는 표준 events 카드를 사용할 수 있습니다.

인벤토리 카드 (Inventory card)

인벤토리 카드는 현재 노드, 디스크, 포드, PV, PVC 수를 나열하고 다운되었거나 오류가 있는 항목이 있는지 보여주기 위한 것입니다. 이 사용 사례에는 커스텀 카드를 만들 수 있습니다. 하지만 객체 상태 표시에 있어 집계 상태 카드와 유사한 속성이 있으므로, 집계 상태 카드의 개념 중 일부를 가져올 수 있습니다.

6단계: 레이아웃 반복하기 (Step 6: Iterate on your layout)

3단계에서 만든 레이아웃에 카드를 추가하고 결과를 확인하세요. 일부 카드는 더 키가 커지거나 짧아져야 할 수도 있지만, 어느 쪽이든 이제 작업할 몇 가지 다른 레이아웃이 있습니다. 카드에 실제로 컬럼이 하나 더 필요하다는 것을 발견하면, 완전히 디자인된 카드를 사용해 3단계를 반복하세요. 각 카드와 그 카드가 포함한 콘텐츠를 그룹화하면 반복하면서 페이지 주변으로 빠르고 쉽게 이동할 수 있습니다.

최종 결과 (The final result)

몇 가지 조정을 가한 후의 최종 대시보드입니다. inventory 카드가 필요한 것보다 키가 큰 것을 볼 수 있습니다. 하지만 주변 카드의 높이와 일치하고 균일한 레이아웃을 만들기 때문에 괜찮습니다. 또한 스크롤바를 도입하지 않고 추가 확장을 위한 공간을 허용합니다.

더 알아보기 (Learn more)

• 대시보드 데모
• PatternFly Card 컴포넌트
• PatternFly Chart 컴포넌트