UI 디자인의 그림자 표현 방법

UI 디자인의 그림자 Atlassian 이미지

 

UI 디자인에 그림자를 효과적으로 통합하면 인터페이스의 시각적 매력과 사용성을 크게 향상시킬 수 있습니다.

그림자의 유형

부드러운 그림자

버튼 및 입력 필드와 같이 미묘한 깊이를 표현하는 데 사용합니다.

강한 그림자

모달이나 드롭다운과 같이 높은 위치에 있는 요소에 사용합니다.

 

부드러운 그림자부터 강한 그림자까지 다양한 그림자 범위. Material Design 이미지.

 

내부(삽입) 그림자

눌린 버튼이나 움푹 들어간 패널과 같은 요소 내에 깊이감을 만들 때 사용합니다.

 

드롭 대 그림자 삽입

 

디자인 팁

Alexandr Gussev의 UI 그림자 스타일

 

그림자에 적합한 색상 선택
검은색이나 회색 그림자를 사용하는 대신 그림자를 드리우는 UI 요소의 색상과 일치하는 미묘한 색상 변화를 사용하세요. 이렇게 하면 보다 일관성 있는 모양을 만들 수 있습니다.

 

검정색 그림자를 사용하는 버튼(왼쪽)과 색상 일치 그림자가 있는 버튼(오른쪽) 비교. Nick Babich 이미지.

 

높이의 일관성 유지
그림자를 사용하여 어떤 요소가 다른 요소 위에 있는지를 나타내는 깊이감을 만들 수 있습니다. 일련의 높이 수준을 정의하고 이를 고수하세요. 예를 들어 버튼은 일반적으로 모달보다 높이가 낮습니다.

인터랙션 기반 그림자 사용
버튼과 같은 기능 요소에 그림자를 사용할 때는 사용자 상호 작용에 따라 그림자를 변경합니다. 예를 들어 버튼 위에 마우스를 올리거나 클릭하면 그림자 크기를 늘립니다. 그림자의 거리와 흐림 반경을 조정하여 다양한 상태를 시뮬레이션하고 상태 간의 부드러운 전환을 디자인하여 사용자 경험을 향상시킬 수 있습니다.

 

상호작용 시 그림자 변경하기 Vadim Gromov 이미지

 

사실적인 그림자 사용
광원 방향을 결정하고 디자인 전체에 걸쳐 그 방향을 고수하세요. 거친 그림자보다는 부드럽고 확산된 그림자를 사용하여 자연스러운 그림자를 모방할 수 있습니다.

그림자 레이어링
여러 개의 그림자를 레이어링하여 보다 역동적이고 사실적인 효과를 만들 수 있습니다. 예를 들어 부드럽고 큰 그림자를 사용하여 전체적인 높이를 높이고, 더 작고 어두운 그림자를 사용하여 가장자리를 더 선명하게 만들 수 있습니다.

성능 고려 사항
CSS 그림자를 사용할 때는 성능에 유의하세요. 그림자를 과도하게 사용하면 특히 저사양 기기에서 렌더링 속도가 느려질 수 있습니다.

 

출처:

https://uxplanet.org/shadows-in-ui-design-tips-tricks-6cce062896d3