그림자

Shadow

빛의 양, 색, 방향에 따라 다르게 나타나는 그림자의 특성을 이용해 평면 화면에 공간을 표현할 수 있습니다. 일상에서 경험하는 그림자에 자연스러움을 느끼기 때문에 GUI를 설계할 때 자연의 특성을 모사해 오브젝트를 표현합니다.

기본

GUI에서는 정면 상단에서 내려 쪼이는 백색광을 사용하는 편입니다. 광원의 개수가 많을수록 다루기 어려워지기 때문에 1,2개의 광원으로 부드러운 그림자를 표현합니다. 2개의 광원을 이용할 때는 물체의 높이를 표현하기 위한 Key Light, 물체의 외곽선을 표현하기 위한 Ambient Light를 합성해서 물체를 표현합니다.

오브젝트가 배치되는 영역에 따라 2개의 그림자를 겹치지 않고 다른 방식으로 그림자를 표현할 수도 있습니다. 1개의 그림자를 넓은 범위로 blur 처리해 그림자를 표현하거나 번지는 Ambient Light 대신 Inner Shadow 방식으로 외곽선을 표현할 수 있습니다.

그림자의 색

채도가 없는 회색 그림자를 상상하기 쉽지만 자연에서 볼 수 있는 그림자는 물체 고유색의 영향을 받아 약간의 채도가 있습니다. 무채색 물체의 그림자라 하더라도 중첩된 공기의 색이 푸른 계열이기 때문에 푸른 그림자가 더 편하게 느껴집니다. 

빛이 닿지 않은 영역이기 때문에 오브젝트의 색보다 채도가 높거나  명도가 밝을 수 없습니다.

색이 있는 배경

물체 고유의 색뿐만 아니라 배경의 색에도 영향을 받습니다. multiply를 이용해 그림자를 단정하게 표현할 수도 있으며 color burn을 이용해 그림자와 다른 요소들의 이질감을 줄일 수 있습니다.

이미지의 그림자

이미지 톤을 모두 표현할 수는 없기 때문에 회색톤 그림자를 사용하는 편입니다. 색이 있는 배경의 그림자처럼 이미지 고유의 톤에 맞춰 그림자에 채도를 부여해 이미지와의 연관성을 더 높일 수도 있습니다.