테마

테마 (Theming) — 글라스 모드 개발자 핸드북

글라스 모드는 기본(Default) 테마와 Project Felt 테마 양쪽에서 수동으로 활성화할 수 있는 대비 모드 옵션이에요. 글라스는 UI에 투명도, 블러, 깊이를 더해, 브랜드 승인을 받은 배경 이미지와 레이어로 쌓인 UI 요소가 은은하게 비치는 더욱 역동적인 시각 효과를 만들어 줘요.

출처: 문서

본문

글라스를 켜면 다음 컴포넌트(확장 기능에서의 용도를 포함)에 적용돼요:

  • 로그인 페이지 (Login page)
  • Masthead
  • 네비게이션 (Navigation)
  • 페이지 (Page)

또한 다음 컴포넌트에는 isGlass prop을 통해 수동으로 활성화할 수 있어요:

  • 카드 (Card)
  • 드로어 (Drawer)
  • Hero
  • 패널 (Panel)

많은 컴포넌트가 isPlain prop도 지원하는데, 이 속성은 기본 테두리와 단색 배경색을 제거해 의도한 깊이 효과를 가리지 않으면서 글라스가 활성화된 표면 위에 바로 놓일 수 있게 해줘요.

글라스 전용 컴포넌트 변형 (Glass-specific component variants)

글라스가 활성화되면 경험을 고정하는 데 도움이 되도록 두 컴포넌트 변형이 표준 대응물 대신 자동으로 적용돼요:

  • 밴드형 masthead (Banded masthead): masthead에 투명도, 블러, 음영 테두리를 추가해 페이지 나머지 위에 지속적으로 떠 있는 dock처럼 구분되게 해줘요.
  • 플로팅 사이드 네비게이션 (Floating side navigation): 사이드 네비게이션에 투명도, 블러, 음영 테두리를 추가하고 안쪽으로 밀어넣어 시각적으로 높여 보이고, 글라스 맥락 안에서 네비게이션 리소스로 명확히 읽히게 해줘요.

배경 이미지 (Background images)

글라스 효과는 배경 이미지 위에 놓일 때 가장 잘 드러나요. 가독성을 유지하고 적절한 대비 비율을 충족하려면 이미지에 높은 수준의 디테일이나 극단적인 대비가 없어야 해요.

브랜드가 없는 옵션과 제품별 옵션을 포함한 배경 이미지는 Red Hat 브랜드 포털에서 다운로드할 수 있어요. Red Hat 제품 팀이 사전 제작된 배경 옵션을 쓰고 싶지 않다면, 브랜드 팀과 협력해 맞춤 배경 이미지를 만들어야 해요.

텍스트는 배경 이미지 위에 직접 절대 놓지 말아야 해요 — 배경색이나 글라스 효과가 있는 컨테이너 안에 배치해야 해요. 더 굵은 글꼴 두께를 가진 제목이나 heading은 특정 브랜드 및 대비 요구사항을 통과하는 경우에만 배경 이미지 위에 직접 놓을 수 있어요.

기본 배경 이미지 (Default background images)

PatternFly는 글라스 테마용 배경 이미지를 포함하고 있으며, PatternFly 스타일을 가져오면 자동으로 적용해요. 두 세트의 이미지가 제공돼요:

  • 기본 PatternFly 테마: PF-Bkg-Generic-Light.svg 및 PF-Bkg-Generic-Dark.svg
  • Project Felt 테마: Felt-Bkg-Generic-Light.svg 및 Felt-Bkg-Generic-Dark.svg

이 이미지들의 경로는 PatternFly 스타일을 가져오는 방식에 따라 달라져요.

  • @patternfly/patternfly에서(보통 @patternfly/patternfly/patternfly.css 통해): @patternfly/patternfly/assets/images/
  • @patternfly/react-core에서(@patternfly/react-core/dist/styles/base.css 통해): @patternfly/react-core/dist/styles/assets/images/

이 두 방법 중 하나로 PatternFly CSS를 포함하기만 하면 배경 이미지가 자동으로 적용돼요.

배경 이미지 맞춤 설정 (Customizing background images)

표준 가져오기 경로를 사용하지 않거나 나만의 이미지를 제공하고 싶다면 다음 CSS 변수를 덮어쓸 수 있어요. 덮어쓰기는 :root 선택자 범위로 제한해야 해요.

변수 (Variable) 기본값 (Default value) 용도 (Usage)
--pf-t--global--background--image--glass url("./assets/images/PF-Bkg-Generic-Light.svg") 기본/글라스 라이트 테마 배경 이미지
--pf-t--global--background--image--glass--dark url("./assets/images/PF-Bkg-Generic-Dark.svg") 기본/글라스 다크 테마 배경 이미지
--pf-t--global--background--image--felt--glass url("./assets/images/Felt-Bkg-Generic-Light.svg") Felt/글라스 라이트 테마 배경 이미지
--pf-t--global--background--image--felt--glass--dark url("./assets/images/Felt-Bkg-Generic-Dark.svg") Felt/글라스 다크 테마 배경 이미지

예를 들어 두 다크 테마 배경 이미지를 덮어쓰려면 애플리케이션 CSS에 다음을 추가하세요:

:root {
  --pf-t--global--background--image--glass--dark: url(../backgrounds/custom/my-glass-dark-image.jpg);
  --pf-t--global--background--image--felt--glass--dark: url(../backgrounds/custom/my-felt-glass-dark-image.jpg);
}

불투명도 (Opacity)

컴포넌트에서 사용하는 기본 불투명도 값은 접근성, 가독성, 시각적 매력을 위해 테스트되었어요. 글라스 표면(페이지, masthead, 네비게이션 등)은 라이트·다크 모드 모두에서 배경 블러 효과와 함께 50% 불투명도를 사용해요.

제품 팀이 이러한 토큰 값을 덮어쓰기로 선택하면, WCAG 준수를 위해 자체 접근성 평가를 수행할 책임이 있어요.

글라스 모드 활성화 (Enabling glass mode)

글라스 모드는 기본(Default) 테마와 Project Felt 테마 모두에서 라이트·다크 컬러 스킴에 걸쳐 동작하도록 설계됐어요. 글라스를 활성화하려면 애플리케이션의 <html> 태그에 .pf-v6-theme-glass 클래스를 추가하면 돼요. 글라스를 구현할 때 그것이 제품의 전반적인 접근성이나 사용성을 해치지 않도록 하는 것이 중요해요.

기술적 제약 (Technical constraints)

제품에서 글라스를 사용할 때 지켜야 할 몇 가지 기술적 제약이 있어요.

  • 글라스-온-글라스 레이어링 금지: 글라스가 활성화된 컨테이너를 절대 중첩하지 마세요. 그렇게 하면 심각한 성능 및 접근성 문제가 생길 수 있어요. 예를 들어 블러 처리된 부모 컨테이너 안의 자식 객체는 자체적으로 읽기 어렵게 블러 처리될 수 있어요. 이를 완화하기 위해 우리는 추가 블러를 도입하지 않고 깊이를 시뮬레이션하도록 배경색 디자인 토큰의 불투명도를 의도적으로 조정했어요.
  • 고대비 우선순위: 고대비 모드가 활성화되면 기능적 접근성을 우선하기 위해 모든 글라스 효과를 자동으로 비활성화해야 해요.
  • 사용자 컨트롤과 선호: 일부 사용자는 글라스 모드에서 가독성 문제를 겪을 수 있으므로, 글라스를 사용하는 모든 제품은 테마 전환기나 환경설정 메뉴를 통해 사용자가 기본 대비나 고대비로 전환할 수 있게 해야 해요. 또한 제품은 OS 수준의 prefers-reduced-transparency와 prefers-contrast 미디어 쿼리를 존중해, 사용자에게 적절히 대응하도록 글라스를 비활성화하거나 단색의 높은 불투명도 배경으로 대체해야 해요.

글라스 디자인 토큰 (Glass design tokens)

다음 토큰들이 함께 사용되어 글라스 효과를 만들어 줘요.

토큰 (Token) 값 (Value) 용도 (Usage)
--pf-t--global--background--color--glass--primary--default 라이트 모드 값: #FFFFFF (50% 불투명도) / 다크 모드 값: #292929 (50% 불투명도) 글라스 컨테이너의 기본 채움(fill)
--pf-t--global--background--filter--glass--default 라이트 모드 값: 16% 블러 / 다크 모드 값: 16% 블러 요소에 적용되는 블러의 양
--pf-t--global--border--color--glass--default --pf-t--global--border--color--alt 글라스 표면의 경계 하이라이트
--pf-t--global--border--radius--glass--default --pf-t--global--border--radius--medium 글라스 요소의 둥근 테두리
--pf-t--global--box-shadow--glass--default --pf-t--global--box-shadow--md 높이(elevation)를 나타내는 그림자

참고: --pf-t--global--background--color--sticky--default는 글라스 전용 토큰이 아니지만, 글라스 콘텐츠 바로 위에 놓이는 비글라스 요소(예: sticky 헤더)에 단색 배경을 제공해 글라스 맥락에서 관련이 있어요.

모범 사례 (Best practices)

성공적인 구현을 위해 다음 모범 사례를 따르세요:

  • 모든 텍스트가 4.5:1(AA) 대비 비율을 충족하는지 확인하세요.
  • 접근성 요구사항을 유지하기 위해 고대비 모드가 글라스 사용을 덮어쓰도록 하세요.
  • 대비 실패를 조기에 발견할 수 있도록 항상 라이트·다크 배경 변형 양쪽에서 글라스 컴포넌트를 검증하세요.

더 알아보기 (Learn more)