Glassmorphism
글래스모피즘
글래스모피즘은 투명한 레이어 표면을 가진 시각적 스타일입니다. 블러, 밝은 테두리 및 작은 깊이감을 사용합니다.
다른 예시
음악 재생 화면은 밝은 앨범 표지 위에 약간 투명한 유리창 같은 패널을 띄워서 조작 버튼들을 올려요.
주요 부분
- 01Content surface
- 02Distinct visual treatment
- 03Action and readability check
사용할 때
눈에 보이는 배경과 재질 깊이가 브랜드에 맞을 때 작은 요소를 사용하세요.
다음 경우에는 사용하지 마세요
붐비는 이미지 위에 낮은 대비의 유리처럼 보이는 요소를 두지 마세요. 비싼 블러 레이어 쌓기를 피하세요.
코드에서 사용된 이름
translucency + backdrop-filter 출시하기 전에
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 글래스모피즘 (Glassmorphism)。 User context：음악 재생 화면은 밝은 앨범 표지 위에 약간 투명한 유리창 같은 패널을 띄워서 조작 버튼들을 올려요. Design concept to apply：글래스모피즘 (Glassmorphism)。 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 글래스모피즘 (Glassmorphism) 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.