CSS로 Liquid Glass 효과 구현
CSS liquid glass 효과 구현이 복잡해 보이지만 실제로는 몇 가지 핵심 속성만으로도 멋진 유리 질감을 만들 수 있다. 최근 웹 디자인 트렌드에서 주목받고 있는 글래스모피즘(Glassmorphism) 효과를 직접 구현해보자. 이 글에서는 backdrop-filter와 box-shadow를 활용한 실용적인 liquid glass 구현 방법을 상세히 알아보자.
기본 개념
CSS liquid glass 효과 구현의 핵심은 투명도와 블러 효과를 조합하여 유리처럼 보이는 시각적 착각을 만드는 것이다. 이 효과는 배경 이미지나 콘텐츠를 살짝 흐리게 만들면서도 투과시켜 마치 유리판을 통해 보는 듯한 느낌을 연출한다.
Liquid Glass 효과의 주요 구성 요소는 다음과 같다. 배경 블러 처리를 위한 backdrop-filter 속성, 투명도 조절을 위한 rgba 색상, 그리고 입체감을 위한 box-shadow 속성이 핵심이다.
첫 번째 이미지에서 볼 수 있듯이 “Hello World” 텍스트가 들어간 요소가 배경의 산 이미지를 흐리게 처리하면서도 투과시키고 있다. 이는 backdrop-filter: blur() 속성의 효과이다.
💡 브라우저 지원 현황:
• backdrop-filter는 Chrome 76+, Firefox 103+, Safari 9+ 지원
• 구형 브라우저를 위한 폴백 처리 필요
• 모바일 브라우저에서도 대부분 지원
두 번째 이미지의 밈은 Apple의 공식 발표와 실제 구현의 차이를 유머러스하게 표현한 것이다. 실제로는 backdrop-filter: blur(2px) 한 줄로 기본적인 효과를 구현할 수 있다.
HTML 구조
CSS liquid glass 효과를 위한 HTML 구조는 매우 간단하다. 배경 이미지를 담을 컨테이너와 글래스 효과를 적용할 요소만 있으면 된다.
기본적인 HTML 구조는 다음과 같이 작성한다. 배경 이미지와 글래스 효과 요소를 분리하여 레이어 구조로 만든다.
<div class="container">
<div class="background"></div>
<div class="glass-card">
<h2>Hello World</h2>
<p>리퀴드 글래스</p>
</div>
<div class="icon">
<span>★</span>
</div>
</div>여러 개의 글래스 카드를 만들고 싶다면 다음과 같이 확장할 수 있다. 각 카드는 독립적인 블러 효과를 가진다.
<div class="container">
<div class="background"></div>
<div class="glass-card primary">
<h2>Hello World</h2>
</div>
<div class="glass-card secondary">
<p>핵심은 Background Blur 말고 외곽 효과를 사용하는 것</p>
</div>
<div class="glass-card tertiary">
<p>X:1.2, Y:1.2, Blur:0, Spread: -1인 화이트 Inner Shadow</p>
</div>
</div>접근성을 고려한 구조로 만들려면 적절한 시맨틱 태그를 사용한다. 카드 형태의 콘텐츠는 article 태그로 감싸는 것이 좋다.
CSS 스타일링
CSS liquid glass 효과의 핵심은 backdrop-filter 속성이다. 이 속성을 사용하여 배경을 흐리게 처리하고 투명도를 조절하여 유리 질감을 만든다.
기본 컨테이너와 배경 이미지 설정부터 시작한다. 배경 이미지는 고정되어 있어야 블러 효과가 제대로 보인다.
.container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('mountain-landscape.jpg') center/cover;
z-index: 1;
}글래스 카드의 기본 스타일을 정의한다. backdrop-filter가 핵심 속성이며, 반투명한 배경색과 함께 사용한다.
.glass-card {
position: absolute;
padding: 20px 40px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
z-index: 2;
}첫 번째 이미지에서 보여준 “Hello World” 카드를 재현하는 스타일이다. 중앙 정렬과 적절한 크기 설정이 중요하다.
.glass-card.primary {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
min-width: 300px;
}
.glass-card h2 {
color: white;
font-size: 2.5rem;
font-weight: 300;
margin: 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.glass-card p {
color: rgba(255, 255, 255, 0.8);
font-size: 1.2rem;
margin: 10px 0 0 0;
}그림자 효과
첫 번째 이미지에서 언급된 Inner Shadow와 Outer Shadow 효과를 구현해보자. 이는 CSS liquid glass 효과의 완성도를 높이는 중요한 요소이다.
X:1.2, Y:1.2, Blur:0, Spread: -1인 화이트 Inner Shadow를 구현하는 방법이다. box-shadow의 inset 키워드를 사용한다.
.glass-card {
box-shadow:
inset 1.2px 1.2px 0 -1px rgba(255, 255, 255, 0.5),
0 8px 32px rgba(0, 0, 0, 0.3);
}더 현실적인 글래스 효과를 위해 여러 개의 그림자를 조합할 수 있다. 각각 다른 방향과 강도의 그림자를 적용한다.
.glass-card.enhanced {
box-shadow:
inset 1.2px 1.2px 0 -1px rgba(255, 255, 255, 0.5),
inset -1.2px -1.2px 0 -1px rgba(255, 255, 255, 0.2),
0 8px 32px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2);
}아이콘 요소에도 글래스 효과를 적용할 수 있다. 원형 모양의 글래스 버튼을 만들어보자.
.icon {
position: absolute;
top: 60%;
right: 20%;
width: 80px;
height: 80px;
background: rgba(59, 130, 246, 0.3);
backdrop-filter: blur(8px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow:
inset 1px 1px 0 rgba(255, 255, 255, 0.4),
0 4px 16px rgba(0, 0, 0, 0.2);
}
.icon span {
color: white;
font-size: 2rem;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}실제 구현
CSS liquid glass 효과의 완성된 코드를 통합하여 실제로 작동하는 예제를 만들어보자. 브라우저 호환성도 함께 고려한다.
전체 CSS 코드를 하나로 통합한 완성 버전이다. 모든 요소가 조화롭게 작동하도록 z-index와 positioning을 정확히 설정했다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
overflow: hidden;
}
.container {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: cover;
z-index: 1;
}
.glass-card {
position: absolute;
padding: 30px 50px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow:
inset 1.2px 1.2px 0 -1px rgba(255, 255, 255, 0.5),
0 8px 32px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.glass-card.primary {
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
min-width: 350px;
}
.glass-card h2 {
color: white;
font-size: 3rem;
font-weight: 300;
margin: 0 0 10px 0;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.glass-card p {
color: rgba(255, 255, 255, 0.8);
font-size: 1.3rem;
margin: 0;
}브라우저 호환성을 위한 폴백 처리를 추가한다. backdrop-filter를 지원하지 않는 브라우저를 위해 대체 스타일을 제공한다.
@supports not (backdrop-filter: blur(10px)) {
.glass-card {
background: rgba(255, 255, 255, 0.3);
border: 2px solid rgba(255, 255, 255, 0.4);
}
}
@supports not (-webkit-backdrop-filter: blur(10px)) {
.glass-card {
background: rgba(255, 255, 255, 0.3);
}
}반응형 디자인을 위한 미디어 쿼리도 추가한다. 모바일 환경에서도 글래스 효과가 잘 보이도록 조정한다.
@media (max-width: 768px) {
.glass-card.primary {
min-width: 280px;
padding: 20px 30px;
}
.glass-card h2 {
font-size: 2.2rem;
}
.glass-card p {
font-size: 1.1rem;
}
}고급 응용
CSS liquid glass 효과를 더욱 발전시킬 수 있는 고급 기법들을 살펴보자. 인터랙션과 애니메이션을 추가하여 더욱 매력적인 효과를 만들 수 있다.
호버 효과 추가
마우스 호버 시 글래스 효과가 변화하는 인터랙션을 구현한다. 블러 강도와 투명도를 조절하여 동적인 느낌을 준다.
.glass-card {
transition: all 0.3s ease;
cursor: pointer;
}
.glass-card:hover {
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.15);
transform: translate(-50%, -50%) scale(1.05);
box-shadow:
inset 1.2px 1.2px 0 -1px rgba(255, 255, 255, 0.7),
0 12px 48px rgba(0, 0, 0, 0.4);
}다중 레이어 효과
여러 개의 글래스 카드를 겹쳐서 더욱 복잡한 시각적 효과를 만든다. 각 레이어마다 다른 블러 강도를 적용한다.
.glass-layer-1 {
backdrop-filter: blur(5px);
background: rgba(255, 255, 255, 0.05);
z-index: 2;
}
.glass-layer-2 {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
z-index: 3;
}
.glass-layer-3 {
backdrop-filter: blur(15px);
background: rgba(255, 255, 255, 0.15);
z-index: 4;
}색상 변형
다양한 색상의 글래스 효과를 만들어보자. 파란색, 보라색, 초록색 등 다양한 컬러 테마를 적용할 수 있다.
.glass-card.blue {
background: rgba(59, 130, 246, 0.1);
border: 1px solid rgba(59, 130, 246, 0.3);
}
.glass-card.purple {
background: rgba(147, 51, 234, 0.1);
border: 1px solid rgba(147, 51, 234, 0.3);
}
.glass-card.green {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
}| 효과 유형 | 핵심 속성 | 권장 값 |
|---|---|---|
| 기본 블러 | backdrop-filter | blur(10px) |
| 강한 블러 | backdrop-filter | blur(20px) |
| 약한 블러 | backdrop-filter | blur(5px) |
| 투명도 | background | rgba(255, 255, 255, 0.1) |
애니메이션 효과
CSS 애니메이션을 활용하여 글래스 효과에 생동감을 추가한다. 블러 강도가 주기적으로 변하는 효과를 만들어보자.
@keyframes glassWave {
0%, 100% {
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.08);
}
50% {
backdrop-filter: blur(12px);
background: rgba(255, 255, 255, 0.12);
}
}
.glass-card.animated {
animation: glassWave 4s ease-in-out infinite;
}현대 웹 디자인에서 글래스모피즘은 단순한 시각적 효과를 넘어 사용자 경험을 향상시키는 중요한 디자인 패턴으로 자리잡았다. 적절한 투명도와 블러 효과의 조합은 콘텐츠의 계층 구조를 명확히 하면서도 시각적 깊이감을 제공한다.
CSS liquid glass 효과 구현은 backdrop-filter와 적절한 투명도 조절만으로도 충분히 인상적인 결과를 얻을 수 있다. 기본적인 블러 효과부터 고급 애니메이션까지 단계별로 발전시켜 나가면 전문적인 웹 디자인을 완성할 수 있다. 브라우저 호환성을 고려한 폴백 처리와 반응형 디자인을 함께 적용하여 모든 환경에서 일관된 사용자 경험을 제공하자. 이제 직접 코드를 작성해보면서 자신만의 독특한 글래스 효과를 만들어보자.
