우리도 그 유리 효과인지 뭔지 해봅시다 거

이번에 애플이 iOS 26을 발표하면서 리퀴드 글래스인가 뭐시기인가를 도입한다고 했는데… 우리 쿡이는 19 20 21 22 23 24 25를 못 세나요? 왜 갑자기 26으로 건너뛰었음? 우리 쿡쪽이는 수학공부를 안 했나? 

 

각설하고 우리도 그 리퀴드 글래스인지 뭔지 하는 그 효과 좀 내 보자. 근데 애플처럼 깔쌈하게 나올거라는 장담은 못 드림. 잊지 마십시오. 이 블로그 주인장은 뉴비입니다. 애플처럼 진짜 깔쌈한 유리 효과를 내고 싶으시면 여기 말고 다른 블로그를 가십시오.

---

일단 유리 하면 투명하다. 아무것도 안 묻은 새삥 유리는 투명한데… 문제가 하나 있다. 이걸 그대로 CSS에 도입하게 되면, 배경에 뭐가 있을 경우 콘텐츠가 안 보일 위험이 있다. 정확히는 사용자가 콘텐츠에 집중을 못 할 위험이 크고, 내용을 알아먹는것도 빡세다. 그래서 보통은 뒤에 블러를 준다. 왜 예전에 모달창 설명 할때도 모달창을 열 동안 배경에 블러를 줬죠? 그거 비슷합니다.

 

 

일단 오늘도 참고한 사이트가 있는데 

https://www.vibeaz.co.kr/content/apple-liquid-glass-css-effect/

순수 CSS로 애플 Liquid Glass 효과 구현 방법

여기다. 

 

See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.

그리고 참고한 결과가 이거. 코드가 생각보다 간단하기 때문에 놓칠 염려도 없다.

 

.glass {
  width: 290px;
  height: 240px;
  padding: 5px;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 4px 20px rgba(255, 255, 255, 0.3);
  border: rgba(255, 255, 255, 0.8);
}

여기서 위에 네 줄은 무시해도 된다. 아래 네 줄이 리퀴드 글래스 효과를 낼 때 필요한 요소들이다. 엥? 블러는 뭔가요? 일단 저 코드펜은 배경이 그라데이션이라 체감이 안 되겠지만 배경에 사진이 있다면 어떻게 될까?

 

이게 블러 한거고

 

이게 블러 뺀 거다. 배경을 일부러 어두운 톤으로 골라서 오른쪽 박스만 영향권에 걸쳐있긴 한데, 아래보다 위쪽 사진의 내용이 좀 더 확 들어온다. 그죠? 그래서 블러를 준 게 아닐까 생각한다. 배경은 내가 직접 만든거니까 저작권 걱정 ㄴㄴ요.

 

그럼 이 리퀴드 글래스가 겹치면 어떻게 되냐고? 

투명도가 적용되어 있는거긴 한데 알파가 0이 아니니까 겹치면 그만큼 하얀색이 진해지겠죠.

 

glass 클래스랑 애프터만 지정해두고 HTML 요소에 클래스만 주면 적용하는 건 쉽다. 저건 textarea다.

 

당연한 얘기지만 색도 바꿀 수 있다. 근데 좀 미미하긴 하다.

 

스크롤바도 원한다면 바꿀 수는 있는데 그렇게 되면 스크롤바가 잘 안 보여서 권하지는 않는다.