[머터리얼디자인] elevation & shadow

 

안드로이드 앱 디자인 작업을 하다가

앱바, 팝업모달, 카드 등 UI 요소들의 섀도우효과를 어떻게 줘야 하나 고민이 생겼다.

 

기존에는 그냥 내 맘대로 섀도우를 입혔는데

높이가 다른 아이들의 섀도우까지 같으면 안될 것 같다는 생각이 들었다.

 

그래서 급히 구글의 머터리얼 디자인 가이드를 찾아보았다.

 

 

---

머터리얼 디자인 가이드

 

1. 머터리얼 디자인 elevation 페이지

 

2. 머터리얼 디자인 shadow 페이지

 

 

 

---

 

 

안드로이드 개발자 공식 사이트

developer.android.com/

 

1. elevation : developer.android.com/training/material/shadows-clipping?hl=ko#Elevation

 

하지만 머터리얼 디자인을 읽어봐도

디자인 요소의 높이(뎁스)별 그림자 효과 specs들을 찾을 수가 없었다.

그래서 추가적으로 검색해서 찾아봤다.

 

 

 

 

---

 

추가 공부

 

1) 머티리얼 디자인 - 뎁스, 서피스, elevation

 

 

2) 높이에 따른 섀도우 효과

출처 : https://www.binaryhermit.com/material-design-elevation-and-shadows/

 

뎁스별 섀도우 효과를 찾았지만,,

신나서 바로 적용하려고 시도했지만,,,

위의 경우에서는 탑섀도우 바텀섀도우를 나눠서 주기 때문에 피그마에서는 적용이 힘들다ㅠ

 

 

 

---

작업할 때 디자인시스템을 만들어놓고 작업하는게 훨씬 효율적일 것 같다

이미 디자인 된 페이지가 있지만,,,

이후에 더 추가될 화면들을 생각하면 지금이라도 빨리 디자인시스템을 구축하는 게 장기적으로는 훨씬 좋을 듯