파운데이션과 스타일 개요

파운데이션과 스타일 개요 (Foundations and styles overview)

PatternFly의 파운데이션(토대)과 스타일은 모든 컴포넌트와 확장의 기반을 이루는 토양이에요. 디자인 시스템을 구성하는 시각적·구조적 프레임워크가 어떻게 맞물리는지 이 문서에서 전반을 훑어 드릴게요.

출처: 문서

본문

PatternFly의 파운데이션과 스타일은 우리가 제공하는 모든 컴포넌트와 확장의 기반을 마련해요. 이러한 시각적·구조적 프레임워크는 모든 컴포넌트가 어떻게 구축되고 설계되어야 하는지 설명하며, 디자이너와 개발자가 더 효율적으로 협업하고 명확하고 일관된 제품 경험을 만들도록 돕는 추가 표준과 지침을 제시해요.

파운데이션과 스타일은 어떻게 사용하나요? (How do I use foundations and styles?)

우리의 파운데이션과 스타일은 디자인 시스템의 "원자(atoms)"이므로, 그 사용은 일반적으로 PatternFly 기능에 내장되어 있어요. PatternFly에서 이것이 나타나는 방식은 다양하며, 가장 흔한 몇 가지는 다음과 같아요:

디자인 토큰 (Design tokens): 색상, 간격, 타이포그래피 같은 기초적인 디자인 선택을 일관성을 위해 재사용 가능한 시맨틱 변수로 구현해요.
컴포넌트 (Components): 여러 파운데이션과 스타일이 컴포넌트에 내장되어 UI 화면 전반의 시각적·상호작용 일관성을 보장해요.
패턴 (Patterns): 파운데이션 레이아웃 안에서 컴포넌트를 결합해 일반적인 디자인 문제를 해결해요.
접근성 (Accessibility): 색상 대비, 타이포그래피, 포커스 상태의 파운데이션이 접근 가능한 제품을 구축하기 위한 규칙과 지침에 영향을 미쳐요.

이러한 디자인 결정 중 많은 것이 이미 PatternFly에 정해져 있지만, 사용 사례에 더 잘 맞도록 이러한 작고 기초적인 디자인 결정 중 일부를 조정해야 할 때가 있을 수 있어요. 각 파운데이션이나 스타일에 대한 사용 및 커스터마이징 지침은 해당 문서에서 찾을 수 있어요.

파운데이션과 스타일 탐색 (Explore foundations and styles)

9개 항목

Colors: 모든 PatternFly 기능이 접근 가능한 대비를 보장하고 유연하고 효과적인 시각적 커뮤니케이션을 가능하게 하는 데 사용하는 지원되는 색상 팔레트.
Design tokens: 제품 전반의 일관성을 보장하기 위해 색상, 타이포그래피, 간격을 포함한 모든 시각적 디자인 속성을 저장하고 관리하는 시맨틱 변수.
Iconography: 일반적인 개념을 나타내고 기능을 빠르게 알려 주는 데 사용되는 단순하고 시각적인 기호 집합.
Layouts: 페이지에서 컴포넌트를 배치하고 정렬하는 데 사용되는 구조적 옵션으로, 반응형 디자인을 지원하기 위해 간격, 순서, 흐름을 관리해요.
Motion: PatternFly의 모션이 의도적이고 매력적이며 일관되고 포용적이도록 보장하는 컴포넌트 애니메이션의 프레임워크와 규칙.
Spacers: UI 요소 사이의 패딩과 여백을 정의하여 디자인이 시각적으로 균형 잡히도록 보장하는 치수 디자인 토큰 집합.
Theming: 서로 다른 스타일 및 접근성 요구를 지원하기 위해 모든 UI 요소의 시각적 모양을 전역 수준에서 조정하는 미리 만들어진 디자인 토큰 조합.
Typography: 텍스트 크기, 무게, 계층을 정의하는 규칙과 글꼴 선택. 화면 전반에서 일관된 가독성과 강력한 시각적 계층을 보장해요.
Utility classes: 개발자가 제품의 UI 요소에 추가 커스터마이징이나 수정을 빠르고 안전하게 적용할 수 있게 하는 정의된 CSS 클래스 집합.