UI 디자인에서 이상적인 그림자를 만드는 방법
현대 UI 디자인에서 그림자는 모든 곳에 자리하고 있다. fill, stroke 그리고 corner radius의 뒤를 잇는 UI 요소의 중요 부분 중 하나이다.
완전한 플랫 디자인(flat design)은 더 이상 트렌드가 아니다. 간단한 튜토리얼을 통해 카드, 버튼 또는 원하는 UI 컨트롤에 멋진 그림자를 만드는 방법에 대해 알아볼 것이다.
1. 그림자의 기본값(default)을 사용하지 마십시오.
Sketch, Figma 또는 Adobe XD 어떤 것을 사용해도 상관없다. 디자인 툴의 모든 기본 그림자는 지양하는 것이 좋다. 만약 당신의 컴포넌트가 깔끔하고 현대적으로 보이게 하려면 항상 모양을 수정해야 한다.
Defaults2. 그림자를 부드럽게 만들기
이상적인 그림자 대부분은 그라데이션이 고르고 부드럽다.
opacity를 10-30%로 낮추고, blur를 16px - 40px로 설정한다. 이렇게만 하더라도 기본값의 그림자보다 훨씬 개선된 모습을 확인할 수 있다.
3. Blur 효과가 있는 레이어로 그림자 생성
표준 그림자 스타일은 구현하기에는 쉽지만, 눈에 띄고 싶다면 그림자처럼 흐릿한 별도의 레이어를 겹쳐서 활용할 수 있다. 이 기술 덕분에 그림자의 위치와 크기를 더 섬세하게 제어할 수 있다.
이 기술은 개발자의 입장에서 좋아하지 않을 수 있지만, Figma를 이용하고 있다면 이 plugin을 통해 도움을 얻을 수 있다.
왼: 표준 그림자 스타일 / 오: 그림자 레이어를 겹쳐서 활용4. 그림자 색상을 더 자연스럽게 사용하기
100% 순회 색은 결코 좋은 선택이 아닐 수 있다.(순수 흑백 테마는 제외) 현대적인 그림자는 은은한 색을 가질 때가 많다. UI의 neutral color를 그림자에 추가하면 훨씬 좋아 보일 것이다.
5. Material Color를 그림자로 만들기
현실에 존재하는 일부 재료, 특히 반투명 재료들의 그림자는 재료의 색을 그대로 이어받는다. 이러한 톤을 그림자에서도 활용해 볼 수 있다. 신선해 보일 것이다.
6. 현실에서 영감 얻기.
위의 예시는 시작에 불과하다. 다른 물체와 재료가 조명과 어떻게 상호작용하는지, colors, blurs, angle 등 그림자를 드리우는 방법을 관찰해야 한다. 놀라운 결과는 영감의 불꽃으로 시작된다.
본문 번역
Thalion How to make Perfect Shadows in UI Design, prototypr.io, Jun 25, 2020
