패턴 개요
패턴 개요 (Patterns overview)
PatternFly의 패턴은 흔한 사용자 문제를 해결하는 재사용 가능하고 모범 사례에 기반한 솔루션이에요. 여러 컴포넌트 간의 관계를 다루는 복잡한 가이드를 제공하죠. 각 패턴의 규칙을 정리하기 위해 사용 방식, 모양, 기능, 변형 등을 설명하는 디자인 가이드라인을 제공해요. 또한 패턴 구현을 시각화하는 데 도움이 되는 데모도 함께 제공하는 경우가 많아요.
출처: 문서
본문
패턴은 어떻게 사용해야 하나요? (How do I use patterns?)
패턴은 복잡한 데이터 표시나 사용자 워크플로우 관리 같은 반복되는 디자인 문제에서 서로 다른 컴포넌트와 기반 스타일을 어떻게 조합해야 하는지에 대한 디자인 가이드를 제공해요. 패턴은 추상적인 가이드를 제공하지만, 실제로 미리 만들어진 코딩 솔루션을 제공하는 **확장(extensions)**과는 구별돼요.
대시보드나 카드 뷰 같은 더 포괄적인 디자인 패턴은 별도의 Patterns & Extensions Figma 라이브러리에서 관리해요.
패턴 둘러보기 (Explore patterns)
총 11개 항목
- Actions: 사용자가 버튼이나 링크 같은 UI 요소를 클릭하거나 선택해서 트리거할 수 있는 프로세스를 설계하는 모범 사례예요.
- Bulk selection: 복잡한 콘텐츠 뷰나 데이터 테이블 안에서 사용자가 여러 항목을 선택하거나 선택 해제하는 정의된 방법이에요.
- Card view: 카드 갤러리에서 카드 그리드를 표시하도록 설계된 구조적 레이아웃으로, 탐색과 상호작용에 최적화돼요. (데모)
- Component usage and behavior: 특정 사용자 컨텍스트와 사용 사례에 따라 비슷한 컴포넌트 사이에서 선택하고 적절하게 사용하는 방법에 대한 가이드예요.
- Dashboard: 핵심 지표나 성능 지표의 높은 수준 개요를 제공하는 고도로 사용자 정의 가능한 레이아웃이에요. (데모)
- Filters: 대규모 데이터셋이나 복잡한 뷰에서 사용자가 콘텐츠를 좁힐 수 있게 하는 필터링 메커니즘 구현을 위한 디자인 규칙이에요. (데모)
- Password generator: 강력한 자격 증명이 필요한 입력 필드를 보완하는 강력한 비밀번호 생성의 안내 프로세스예요. (데모)
- Password strength: 비밀번호의 강도와 필요한 보안 요구 사항을 충족하는지 표시하는 정의된 시각적 메커니즘이에요. (데모)
- Primary-detail: 항목 목록과 현재 선택된 항목의 해당 세부 정보를 보여주는 두 개의 창(panes) 레이아웃이에요. (데모)
- Right-to-left: 로컬라이제이션을 위해 오른쪽에서 왼쪽 쓰기 모드를 지원하도록 UI를 조정하는 가이드예요. (데모)
- Status and severity: UI 전반에서 상태와 심각도를 전달하기 위해 색상과 아이코노그래피를 일관되고 접근 가능하게 사용하는 방법에 대한 가이드예요.