MaterialWidget을 활용한 기존 Bouncing Button 개선안

🎨 What I Designed

직접 구현안 버튼 바운싱 효과와 토스앱에 구현된 버튼 효과 비교

 

https://github.com/suojae/flutter_ui_lab/blob/main/lib/2025/02/10.dart

flutter_ui_lab/lib/2025/02/10.dart at main · suojae/flutter_ui_lab

---

🔎  How I Made It

BoxShadow를 이용한 Shadow 효과

이전 게시글에서 Bouncing 효과를 ShadowBox로 구현했었다. 하지만 이 방식은 마치 그림을 덧칠하듯이 Material 시스템과 따로 노는 방식이었다. (Material은 Z축을 통해 입체감 제공) 실제 위젯이 떠있는게 아닌 떠있는 듯한 입체감을 주기위해 Box 주변 (via BoxDecoration) 에 그림자 효과를 주어 같은 평면에 있음에도 입체감이 있는듯 눈속임을 하는 방식이었다.

 

Why PhysicalModel Class

하지만 PhysiclaModel 의 elavation 값을 조절하게 되면 눈속임이 아닌 실제로 떠 있는 위젯을 GPU가 그려낸다. Elevation 값이 증가할수록, 물리적 레이어가 "렌더링 표면(Rendering Surface)"에서 위로 떠오른다고 공식문서에서 설명하고 있다. 즉 Physical model 은  이전에 한 평면에서 눈속임으로 입체감을 주었던 것과 다르게 Z축을 기반으로한 실제 떠있는 위젯이 렌더링되며 이에 따라 기본구현된 그림자 효과가 만들어지는 것이다.

 

물론 모든 위젯에서 PhysicalModel을 쓸 순 없다. Material 시스템에서 AppBar, FloatingActionButton, Card, BottomAppBar 등의 위젯들은 Elavation 속성을 가지고 있는데 이러한 위젯에서만 사용할 수 있다.

 

 

따라서 위젯에서 그림자를 통해 입체감을 표현할 때 

1. 본인은 구글 플러터 개발자보다 더 자연스럽게 입체감을 구현할 자신이 있다. -> BoxShadow 위젯 사용

2. 입체감을 나만의 방식으로 커스터마이징 하고 싶다 -> BoxShadow 위젯 사용

3. 성능이 너무 중요하다. UI가 너무 헤비해서 입체감에 리소스를 허비하고 싶지 않다. ->  BoxShadow 위젯 사용 

3. 이외의 경우는 PhysicalModel 을 사용해서 구글 플러터팀이 구현해준 입체감을 활용하자! :)

---

 

25.01.10 수정 - PhysicalModel 대신 Material 위젯을 쓰자

✅ Material 위젯은 Flutter의 Material Design 시스템과 완벽하게 호환된다.
✅ Elevation 값만 설정하면 자동으로 그림자가 적용되며, 추가적인 shadowColor 설정이 필요 없다.
✅ Ink 효과(InkWell, InkSplash)를 통해 터치 피드백을 자연스럽게 적용할 수 있다.
✅ Material 3 (useMaterial3: true)에서는 다크 모드에서 Surface Tint가 자동 적용되어 더 자연스러운 입체감을 제공한다. (Physical model엔 이런 효과 없음)

 

 

==> PhysicalModel은 Material을 사용할 수 없는 곳에서 "보조적인 역할"로 쓰이는 것이 적절하다

==> Material이 적용될 수 있는 경우라면, Material 위젯을 사용하는 것이 더 간결하고 자연스러운 UI를 만들 수 있는 방법이다.