Glassmorphism in Flutter

🎨 What I Designed

https://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/01/31.dart

flutter_ui_lab/lib/2025/01/31.dart at main · suojae/flutter_ui_lab

---

🔎  How I Made It

사용한 주요 위젯: ClipRect, BackdropFilter, ImageFilter

 

What is ClipRect?

https://stackoverflow.com/questions/70255171/clip-objects-drawn-outside-of-canvas

ClipRect는 자식위젯(child)을 사각형 형태로 클리핑하는 역할을 한다. 화면 전체에 위젯이 있더라도 ClipRect를 사용하면 일부영역만 표시할 수 있다. 이 때 주의할점은 레이아웃 자체에는 영향을 주지 않기 때문에 클리핑된 바깥부분은 보이지 않지만 실제로 공간을 그대로 차지하게 된다.

 

ClipRect로 주의할 점은 GPU에서 추가적인 클리핑 연산이 들어가기 때문에 과도하게 사용되면 성능 저하가 발생한다. 따라서 꼭 필요할 때만 사용해야한다. 실제로 공식문서에는 불필요한 클리핑을 없애서 성능개선한 사례를 소개중인데 , 2018년 5월 기준으로 Flutter 갤러리 앱의 평균 프레임 래스터화 시간이 약 35ms였는데, 이는 60fps의 부드러운 렌더링을 위한 16ms를 초과하는 수치였다. 불필요한 클립 관련 작업을 제거함으로써, 프레임당 35ms에서 17.5ms로 거의 2배의 속도 향상을 이루었다고 나와있다.

 

 

What is BackdropFilter?

BackdropFilter는 Flutter에서 특정 위젯의 배경을 흐리게 처리하거나 그래픽 필터를 적용할 때사용하는 위젯이다. 이때 주의할 것은 BackdropFilter 가 적용된 위젯 뒤에 있는것들은 흐려지지만 BackdropFilter 안의 Child는 흐려지지 않는다. 위코드를 보면 BackdropFilter 안에 Child로 Center(Text()) 위젯이 있지만

 

위와 같이 Child부분은 그대로 유지되고 뒷배경만 blur효과가 적용되는 것을 확인할 수 있다.

 

What is ImageFilter?

ImageFilter는 Flutter에서 그래픽 필터를 적용하는 API이다. 주요 필터로는 두가지 - 블러효과와 행렬 변환 - 가 있다. 

 

https://medium.com/skylar-salernos-tech-blog/image-convolution-filters-explained-c878f1056e78

왜 행렬변환과 블러효과가 같이있는거지 라는 의구심이 들어 찾아봤는데 블러 효과를 적용하는 방식이 굉장이 흥미로웠다. 블러효과의 기본원리는 주변 픽셀을 섞어서 평균값을 만든다. 

 

블러 효과를 한 줄 요약하자면 다음과 같다.

 

📌 블러 효과 = 원래 픽셀 값 × 블러 커널 → 픽셀 값이 주변과 섞이면서 평탄화되는 효과

 

 

내부 코드를 뜯어보면 blur메서드는 가우시안 블러 방식을 적용한다고 주석이 달려있다. 그럼 가우시안 블러란 무엇일까? 앞서 특정행렬을 곱한다고 했는데 똑같은 수가 있는 행렬을 곱하는 것이 아닌 "가우스 분포" 기반으로 수가 분포된 행렬값을 본래 픽셀 행렬에 곱해서 좀더 부드럽고 자연스러운 blur처리방법이다.

https://velog.io/@wyjung0731/Gaussian-Filter

 

 

두 행렬을 비교하면 알 수 있듯이 왼쪽 행렬은 일정값을 곱해 blur처리를, 오른쪽은 가우스 분포에 따른 값 행렬을 곱해 blur 처리를 하게된다. 원래 중심 픽셀값이 가장 크고 주변부로 점진적으로 감소하는 방식으로 가우시안 블러는 sigmaX와 sigmaY에 따라 픽셀을 X축(가로)과 Y축(세로) 방향으로 확산시킨다. (즉 행렬값이 sigmaX와 sigmaY에 따라 서서히 떨어지며 흐릿한 강도가 강해진다.)

 

이미지를 보면 sigmaX = 100, sigmaY = 0 (왼쪽)에서는 가로 방향으로 줄무늬가 생기고, sigmaX = 0, sigmaY = 100 (오른쪽)에서는 세로 방향으로 줄무늬가 생기는 것을 확인할 수 있다. 이를 이해하기 쉽게 표현하자면

 

블러는 이미지의 픽셀을 퍼뜨리는 것과 같다. 

• 붓을 좌우로만 문지르면? 👉 위아래 방향은 칠해지지 않아서 줄무늬가 생김.
• 붓을 위아래로만 문지르면? 👉 좌우 방향이 칠해지지 않아서 줄무늬가 생김.

💡 블러도 똑같다

• sigmaX = 100, sigmaY = 0 → 가로 방향으로만 퍼짐 
• sigmaX = 0, sigmaY = 100 → 세로 방향으로만 퍼짐 

 

그래서 이걸 플러터 개발자가 알면 어떤게 좋을까? 

 

 

사용자가 확대한만큼 Sigma값을 가중시켰더니 재밌는 효과를 구현할 수 있다! (가성비..최고..! 😭)  나중에 이걸로 차라리 전체뷰에 시그마값을 넣고 사용자가 터치하는부분만 시그마를 0으로 넣어서 유리창의 김을 닦는 애니메이션을 줄 수 있겠다는 생각이 들었다.

---

글래스모피즘 구현은 막상 코드자체는 단순하지만 그 안의 원리는 굉장히 "수학"의 영역임을 알 수 있었다. 나중에 이 지식가지고 재밌는 효과나 애니메이션을 넣어보고 싶다 ㅎ 🤓