UI디자인, 드롭 쉐도우 사용 가이드

피그마를 활용한 아름다운 드롭 쉐도우 사용에 대한 가이드

한윤석 (두블링 DOBLING, UI/UX 디자이너)

현재 1년차 주니어에서 미래 프로 디자이너를 꿈꾸는 사람으로써 같은 상황의 모든 신입, 주니어, 초보, 입문, 예비 디자이너들을 위해 매주 제가 경험한 디자인 인사이트를 업로드 합니다.

피그마에서 UI디자인을 진행할 때 엘리먼트에 그림자를 주게 되는때, 이때 가장 아름다운 그림자를 주는 방법에 대한 가이드를 공유하고자 합니다. 여러분은 그림자를 어떻게 주고 계신가요?

드롭 쉐도우 사용 가이드

피그마를 활용해 드롭 쉐도우 잘 넣기

드롭 쉐도우의 중요성

부드러운 드롭 쉐도우는 시각적 계층 구조를 개선하며 보다 직관적이고 매력적인 사용자 경험을 제공하는 현실감을 조성하기 때문에 UI 설계에 매우 중요합니다.

그림자 값 사용 가이드

드롭 그림자를 부드럽게 유지하려면 X축 및 Y축 위치, 흐림 및 확산과 같은 값을 올바르게 설정해야 합니다. 다음과 같은 원칙을 사용하면 좋습니다.

색상 사용 가이드

다크모드에서 하얀 그림자를 사용하는 것은 절대 금물입니다. 반면에 원색의 드롭 쉐도우는 두껍지 않을 때 잘 보입니다.

드롭 쉐도우 관련 플러그인

더 좋은 도움이 필요하다면, Beautiful Shadows나 Smoth Shadow와 같은 플러그인을 사용해보세요.