테마

테마 (Theming)

테마는 UI 컴포넌트에 특정한 시각적 스타일을 적용해 독특하고 일관성 있으며 목적에 맞는 모습을 만들어 줘요. 우리의 테마 아키텍처는 디자인 토큰 시스템을 활용해 다양한 브랜드 정체성, 사용자 선호, 접근성 요구를 유연하게 지원해요.

출처: 문서

본문

테마 아키텍처 (Theming architecture)

UI의 모습을 일관되게 관리하기 위해 계층적인 테마 아키텍처를 사용해요:

테마 (Theme): 핵심 색상, 테두리 반경, 아이콘, 에셋 등 브랜드의 기본 모습을 정의해요.
컬러 스킴 (Color scheme): 밝은 환경과 어두운 환경 사이에서 밝기와 팔레트의 변화를 제어해요.
대비 모드 (Contrast mode): 특정한 미적 또는 접근성 요구에 맞게 표면과 요소의 스타일을 조정해요.

테마 (Themes)

PatternFly는 사전 구축된 테마 2개를 지원해요. 각 테마의 시각적 정체성은 다르지만, 기본이 되는 상호작용 패턴과 접근성 기준은 동일해요.

기본 테마 (Default theme)

기본(Default) 테마는 표준적인 오픈소스 PatternFly 경험을 만들어 줘요. 파란색 브랜딩과 현대적이고 각진(m square) 테두리가 특징이에요.

Project Felt 테마 (Project Felt theme)

상징적인 Red Hat 페도라의 소재에서 이름을 따온 Project Felt는 Red Hat 포트폴리오 내 제품을 위해 설계되었으며, Red Hat 디자인 시스템(RHDS)과 더욱 밀접하게 정렬되도록 해줘요. PatternFly 파랑을 액센트 색상으로 쓰는 대신 Red Hat 빨강을 사용하고, 버튼·컨트롤·컨테이너에 알약(pill) 모양 테두리를 도입해 제품 UI가 확실히 Red Hat스럽게 느껴지게 해요.

Project Felt는 마케팅 사이트와 제품 마켓플레이스부터 복잡한 엔터프라이즈 소프트웨어에 이르기까지 Red Hat 전 여정에 걸쳐 고객에게 더 매끄러운 경험을 만들려는 광범위하고 장기적인 노력의 일부이며, RHDS와 협력하여 개발되고 있어요.

Project Felt는 우리의 디자인 토큰 시스템 위에 구축되었기 때문에 breaking change 없이 도입할 수 있어요. 활성화하려면 애플리케이션의 <html> 태그에 .pf-v6-theme-felt를 추가하면 돼요. PatternFly.org의 masthead 테마 전환기(theme switcher)를 통해 다른 테마 옵션과 함께 미리 볼 수 있어요.

사용자 정의 테마 (Custom themes)

우리 테마에서 갈래를 내어 나만의 테마를 만들려면, all tokens 페이지에서 조정하고 싶은 디자인 토큰을 찾고 애플리케이션 안에서 사용할 새 값을 제공하면 돼요.

테마를 언제 사용자 정의하나요? (When to customize a theme)

기존 PatternFly 테마를 조정하고 싶은 경우는 몇 가지가 있어요:

일회성 조정: 제품 전반에 의도적인 이탈이 필요할 때 단일 버튼 색상, 스페이서, 글꼴 크기 같은 것을 바꾸는 경우예요.
애플리케이션 전반 조정: 제품 전체의 브랜드 정체성을 조정하기 위해 모든 버튼 색상과 글꼴 크기를 바꾸는 경우예요.

컬러 스킴 (Color schemes)

라이트 모드 (Light mode)

라이트 모드는 대부분의 웹 환경에서 표준적인 모습이에요.

라이트 모드는 밝은 배경 위에 어두운 텍스트를 배치하면서, 텍스트 대비 비율을 최소 4.5:1, 비텍스트(non-text) 대비 비율을 최소 3:1로 유지해요. 어떤 사용자는 밝은 화면을 더 읽기 쉽게 느낄 수 있고, 다른 사용자는 단순히 그 모습을 선호할 수도 있어요.

다크 모드 (Dark mode)

다크 모드는 빛에 민감한 사용자나 저조도 환경을 위한 색상 팔레트를 적용해요. 라이트 모드와 동일한 접근성 비율을 유지하면서 어두운 배경 위에 밝은 텍스트를 보여줘요. 어떤 사용자는 미적인 이유로 다크 모드를 선호할 수 있고, 다른 사용자는 눈이 편하고 빛에 민감한 사람에게 덜 부담된다고 느낄 수도 있어요.

구현 지침은 다크 테마 핸드북(dark theme handbook)을 참고하세요.

대비 모드 (Contrast modes)

대비 모드는 두 컬러 스킴 모두에서 UI 요소의 표면 처리를 조정해요. 서로 상호 배타적이라 동시에 적용될 수 없어요.

기본 대비 (Default contrast)

기본(Default) 대비 모드는 기본 테마에서 사용되며 UI 요소의 대비를 높이는 특별한 개선을 포함하지 않아요. 이 모드는 활성화할 필요가 없으며, 일반 텍스트 4.5:1, 큰 텍스트 3:1, 그래픽 및 기타 UI 컴포넌트 3:1의 대비 비율로 AA 수준 접근성을 달성하는 데 쓰이는 표준 색상 팔레트를 말해요.

고대비 (High contrast)

고대비 모드는 더 명확함과 UI 요소 간 더 높은 대비를 필요로 하는 사용자를 위한 접근성 개선에 초점을 맞춰요. 기본(Default) 테마와 Project Felt 테마 모두에서 라이트와 다크 컬러 스킴으로 사용할 수 있어요. 고대비 모드를 활성화하면 다음이 조정돼요:

텍스트 대비를 WCAG AAA 비율인 7:1로 높여요.
비텍스트 요소(대화형 요소와 경계선) 대비를 4.5:1로 높여요.
고대비 환경에서 사라질 수 있는 그림자와 미묘한 배경 채움 대신, 명확한 경계를 정의하는 전역 테두리 규칙을 적용해요.

고대비는 사용자가 수동으로 활성화하거나, forced colors 모드 같은 OS·브라우저 수준의 접근성 설정에 의해 자동으로 트리거될 수 있어요. prefers-reduced-transparency나 prefers-contrast 같은 시스템 수준 선호는 PatternFly 테마 설정보다 우선하므로, OS나 브라우저에서 이미 고대비를 구성한 사용자는 충돌 없이 일관된 경험을 얻게 돼요.

참고: PatternFly는 글라스 모드와 고대비 모드가 동시에 활성화되는 것을 자동으로 막지 않아요. 글라스 클래스와 고대비 클래스가 모두 적용되면 스타일이 충돌해요. 이 두 모드를 동시에 적용하지 않도록 관리하는 것은 제품 팀의 책임이에요.

구현 지침은 고대비 핸드북(high contrast handbook)을 참고하세요.

글라스 (Glass)

글라스 모드는 투명도, 블러, 깊이를 UI에 도입해 레이어가 쌓인 시각 효과를 만들어 줘요. 기본(Default) 테마와 Project Felt 테마 모두에서 라이트와 다크 컬러 스킴으로 사용할 수 있으며, 어느 쪽에서든 수동으로 활성화할 수 있어요.

글라스가 활성화되면 다음 변경이 적용돼요:

투명도, 블러, 그림자: 표면 수준의 컨테이너 배경이 반투명해지고 블러와 그림자 조정을 적용해, 아래 콘텐츠가 은은하게 비쳐 깊이와 콘텐츠 위계감을 만들어 줘요.
배경 이미지: 브랜드 승인을 받은 배경 이미지가 페이지 본문을 채워, 글라스 컨테이너가 놓이는 시각적 레이어를 제공해요. 제품 팀은 승인된 이미지를 사용해야 하며, 텍스트를 컨테이너 밖이나 배경 이미지 바로 위에 두지 않아야 해요.
컴포넌트 수준 글라스: 글라스는 로그인 페이지, masthead, 네비게이션, 페이지에 자동으로 적용돼요. 카드, 드로어, hero, 패널까지 수동으로 확장할 수 있어요.
레이아웃 변형: 밴드형 masthead(단색 채움과 음영 테두리로 페이지 위에 고정)와 플로팅 사이드 네비게이션(단색 채움과 그림자로 글라스 콘텐츠와 시각적으로 분리)이 표준 대응물 대신 자동으로 사용돼요.

글라스 모드를 사용하는 제품은 사용자가 기본 대비나 고대비로 전환할 수 있는 명확한 방법을 제공해야 해요. PatternFly는 사용자 선호에 따라 글라스 효과를 자동으로 비활성화하지 않으므로, 사용자가 고대비를 활성화한 경우(수동이든 prefers-reduced-transparency나 prefers-contrast 같은 OS 수준 미디어 쿼리를 통해서든) 글라스가 활성화되지 않도록 보장하는 것은 제품 팀의 책임이에요.

구현 지침을 포함한 자세한 내용은 글라스 모드 핸드북(glass mode handbook)을 참고하세요.

기능 호환성 (Feature compatibility)

다음 표는 테마별로 PatternFly 기능의 가용성과 호환성을 보여줘요.

기능	기본 테마	Project Felt 테마
액센트 색상 (Accent color)	파랑 (Blue)	빨강 (Red)
대화형 요소 색상 (Interactive element colors)	파랑 (Blue)	파랑 (Blue)
테두리 반경 모양 (Border radius shape)	각진 (Square)	알약 (Pill)
기본 대비 모드 (Default contrast mode)	표준 (Standard)	표준 (Standard)
배경 이미지 (Background image)	선택 (수동) (Optional, Manual)	필수 (글라스 모드 사용 시) (Required with glass mode)
브랜드 아이콘 (Branded icons)	선택 (수동) (Optional, Manual)	기본 (Default)
고대비 지원 (High contrast support)	예 (Yes)	예 (Yes)

모범 사례 (Best practices)

애플리케이션이 여러 테마에서 견고하고 유지보수 가능하며 적응 가능하도록, 다음 모범 사례를 따르길 권장해요.

기본 PatternFly 컴포넌트 사용하기: 가능하면 PatternFly 컴포넌트를 있는 그대로 사용하세요. 이렇게 하면 우리가 의도한 디자인, 기능, 접근성 기준에 맞게 최신 상태를 유지할 수 있어요. 또한 업그레이드를 더 매끄럽게 하고, 개발 시간을 줄이며, 애플리케이션 간 일관성을 보장해요.
맞춤 제작에는 디자인 토큰과 변수를 사용하기: 컴포넌트를 맞춤 제작해야 한다면 적절한 방법을 사용하세요:
- 디자인 토큰: 전역 변경용
- 컴포넌트 변수: 컴포넌트별 변경용
- 예시: 기본 버튼의 배경색을 덮어쓰려면 .pf-v6-c-button.pf-m-primary { background-color: [color token]; } 대신 .pf-v6-c-button { --pf-v6-c-button--m-primary--BackgroundColor: [color token]; }를 선언하세요.
커스텀 스타일에는 항상 토큰 사용하기: 커스텀 컴포넌트나 스타일을 만들 때 #fff나 white 같은 하드코딩된 값(hex 코드나 색상 이름)을 절대 사용하지 마세요. 대신 var(--pf-t--global--background--color--primary--default) 같은 적절한 디자인 토큰을 사용하세요. 토큰은 다양한 테마에 자동으로 적응하지만, 하드코딩된 값은 그렇지 않아요.
의미 토큰(semantic token) 우선하기: 요소의 목적을 명확히 하고 어떤 테마에서도 올바른 스타일을 받도록, 항상 사용 사례에 가장 관련성이 높은 의미 토큰을 사용하세요. 의미 토큰이 없다면 base 토큰으로 대체할 수 있어요.
팔레트 토큰은 절대 사용하지 마세요: --pf-t--color--blue--20 같은 팔레트 토큰은 값이 테마 간에 일관적임을 보장하지 않으므로 코드에서 직접 사용하지 마세요.
확장 가능한 아이콘 사용하기: 아이콘에는 래스터나 비트맵 이미지(PNG, JPEG, GIF, BMP 등) 대신 벡터 이미지(SVG)나 아이콘 폰트를 사용하세요. 이렇게 하면 CSS fill과 color 속성으로 색상을 제어할 수 있어요. 이 속성들에 디자인 토큰을 할당하면 아이콘이 활성 테마에 맞춰 자동으로 색이 바뀌어요.
정적 이미지를 써야 한다면: 테마별 클래스(예: .pf-v6-theme-dark) 존재 여부에 따라 서로 다른 이미지 파일을 숨기거나 보여줘야 할 수도 있어요.

Figma에서의 테마 (Theming in Figma)

우리의 Figma 라이브러리는 테마를 완전히 지원해요. 기본적으로 표준 라이트 기본(Default) 테마가 컴포넌트에 적용돼요. Figma의 Appearance 메뉴에서 테마(기본 또는 Project Felt), 컬러 스킴(라이트 또는 다크), 대비 모드(기본, 고대비, 글라스)의 지원 가능한 조합으로 전환할 수 있어요.

참고: 차트는 고유한 토큰 컬렉션을 사용하므로, 차트 변수 모드를 컴포넌트와 별도로 조정해야 해요. 차트의 변수 모드를 바꾸려면 컴포넌트 테마 조정에 설명된 것과 동일한 단계를 따르면 돼요.

테마 전환하기 (Swapping themes)

Project Felt의 토큰은 Styles & Components 라이브러리 안에 "extended variable collection"(확장 변수 컬렉션)으로 정의돼 있어요. Figma 디자인에서 appearance 모드를 고를 때 Appearance 메뉴의 extended collections 드롭다운을 통해 기본 PatternFly 테마와 새 Project Felt 테마 중 선택할 수 있어요. 색상(color)과 치수(dimensions) 컬렉션 둘 다에 "Felt" 또는 "Default"를 설정해야 해요.

컬러 스킴과 대비 모드 전환하기 (Swapping color schemes and contrast modes)

서로 다른 대비 모드(기본, 고대비, 글라스) 사이를 전환하려면 Appearance 메뉴의 두 번째 토글에서 원하는 대비 모드를 선택하면 돼요. 각 대비 모드에는 라이트와 다크 컬러 스킴이 정의돼 있어요. 색상 토큰, 치수 토큰, 차트 토큰 컬렉션 전반에 해당 대비 모드가 설정되어 있는지 확인해야 해요.

글라스 스타일 변형 (Glass style variants)

Figma에서 글라스 모드를 지원하기 위해 많은 컴포넌트에 새로운 "Style" 변형을 추가했어요. 글라스 모드에서 배경 이미지 바로 위에 놓이는 컴포넌트(패널, hero, 카드, 페이지, 왼쪽 네비게이션, masthead)에는 "glass" 스타일 변형이 있어요. 이전에 기본적으로 배경을 가졌던 다른 컴포넌트에도 이제 "plain"(투명) 스타일 변형이 추가되어, 글라스 스타일이 있는 부모 컴포넌트 안에 중첩해도 효과를 가리지 않아요.

테마