Backdrop Blur
배경 흐림
배경 흐림은 투명한 표면 뒤에 있는 것을 부드럽게 해줘요. 표면 자체의 내용물은 흐려지지 않아요.
다른 예시
반투명한 고정 헤더는 뒤에서 올라오는 콘텐츠를 흐릿하게 보이게 하면서, 정작 자신의 글자는 선명하게 유지해요.
주요 부분
- 01Content surface
- 02Distinct visual treatment
- 03Action and readability check
사용할 때
떠 있는 표면이 일부 배경 맥락을 유지하면서 여전히 충분한 대비를 가져야 할 때 사용하세요.
다음 경우에는 사용하지 마세요
넓은 영역에 강한 블러를 사용하거나 읽을 수 있는 대비 대신 블러를 사용하지 마세요.
코드에서 사용된 이름
backdrop-filter: blur() 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 배경 흐림 (Backdrop Blur)。 User context：반투명한 고정 헤더는 뒤에서 올라오는 콘텐츠를 흐릿하게 보이게 하면서, 정작 자신의 글자는 선명하게 유지해요. Design concept to apply：배경 흐림 (Backdrop Blur)。 Why it fits：떠 있는 표면이 일부 배경 맥락을 유지하면서 여전히 충분한 대비를 가져야 할 때 사용하세요. Do not use it when：넓은 영역에 강한 블러를 사용하거나 읽을 수 있는 대비 대신 블러를 사용하지 마세요. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：공식 문서라고 해도 초안, 출시 후보, 최종 버전일 수 있어요. 상태와 브라우저나 플랫폼 지원 여부를 꼭 확인하세요. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 배경 흐림 (Backdrop Blur) is used now. Definition: 배경 흐림은 투명한 표면 뒤에 있는 것을 부드럽게 해줘요. 표면 자체의 내용물은 흐려지지 않아요. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.