오늘 주제는 이전 ‘sizzling’과 바로 전 호 ’rounding’에 이어서 ‘drop shadow(빛)’에 관해 이야기해 보려 합니다.

1. Shadow – Trend (?)
Drop Shadow_01

위의 로고들은 리뉴얼하면서 공통적으로 바뀐 부분이 있습니다.
바로 Shadow 입니다.
전체적으로 과거의 로고에 있던 ‘거뭇거뭇’한 것이 새 로고들에서는 보이지 않습니다.
(맨 마지막 오피스 로고에는 여전히 검은 것이 남아있지만, 채도가 좀 바뀌었죠.)
Shadow(drop, inner)가 – 검은색에서 어두운 유채색으로 바뀐 겁니다.
물론 명도차가 완화된 게 더 크지만, 주목할 부분은 shadow가 색상을 갖기 시작한 겁니다.
사실 이건 당연한 부분이기는 합니다.

 

그림자는 언제나 광원의 색을 따라갑니다.
위의 로고들처럼 주변에 다른 물체도 없고 광원에 대한 설명도 없으면 로고 자체의 색상을 따라가는 게
맞겠지요.

 

다음은 한 종이학 사이트에서 퍼온 사진들입니다. 종이학 주변의 그림자 색상들을 살펴보세요.

Drop Shadow_04

그림자는 네가지 소스에 의해 색상이 결정됩니다.
1. 빛의 색상
2. 오브젝트의 색상
3. 그림자가 얹혀지는 곳의 색상
4. 빛의 선명도 (그림자의 blurry 정도)
위 사진의 어떤 그림자도 검은색 drop shadow로 표현할 수 있는 건 없습니다.

 

간단한 예시 첨부합니다.

Drop Shadow_09

1은 일반적으로 쓰는 방식입니다. 검은색 25%입니다.
(배경과 묶여 쓰이지 않을 경우엔 블렌딩은 normal로 하셔야 합니다.)
2는 바탕 나무색을 조금 어둡게 해서 섀도우를 주었습니다.
경계 부분이 조금 쨍하지 않아 아쉬운 부분은 있지만, 1보다 바탕색에 잘 섞여 들어갑니다.
3은 2에서 아쉬웠던 경계선을 보강하기 위해, Outer Glow 를 5px 추가했습니다.
사방에 동일하게 표현되는 옵션이라 색상을 drop shadow보다 조금 밝게 했습니다.
각 모서리의 라운딩이 좀 더 뚜렷하게 보입니다.
2와 3은 사실 취향 차이일 수도 있습니다. 3의 경우는 윗면 경계가 뚜렷한 대신
상대적으로 아랫면의 경계가 잘 살지 않는듯한 느낌이 있습니다.

 

하지만, 2와 3을 보다가 1을 다시 보면 – 검은색 shadow가 어색해 보이지 않나요?
3을 좀 더 만져서, 이렇게도 해 볼 수 있습니다.

Drop Shadow_10

a는 위의 3과 같고, b 에서는 drop shadow 옵션에 curve를 사용해서, 안쪽이 좀 더 진하고, 멀리갈 수록 좀 더 옅게 퍼지도록 했습니다.
섀도우의 크키 자체는 b보다 커졌는데(12>18), 전체적으로 약하고 부드러워 보입니다.
a의 그림자는 사각형같은데, b는 그런 느낌이 적지요.

Drop Shadow_11

측면에서 본 모습을 과장해서 그려 보았습니다.
그림자의 양 끝이 약하니 모서리가 조금 말린 듯한 느낌이 생겨서 박스가 약간 글래머러스(?) 해집니다.
위 흰색 사각형 안의 ‘a”b’ 글자중에 ‘b’ 주변이 좀 솟아 보이지요?

정리 :
실무에서 이런 세세한 것까지 신경쓰며 작업하긴 사실 무리죠.
하지만 중요한 작업이나, 디테일을 신경쓰고 싶을 때 이런 부분까지 만져 주면 훨씬 더 괜찮은 작업물을 얻을 수 있습니다.
개인적으로는 포토샵의 ‘style’ 파일을 만들어서, 반복해서 사용하기를 권장합니다.

ps. 혹시 몰라서, style 사용법 간단히 적습니다. 설명은 없습니다.

Drop Shadow_12

 

2. Shadow – light

우선, 광원 정리가 잘된 예시만 보여드릴께요.
(참, 계속 GUI 기준으로 설명드리는 이유는, 웹보다 뚜렷이 보이기 때문입니다. 다른 이유는 없어요.)

Drop Shadow_13

facebook – 이번 주제 설정에 가장 많이 참고한 앱입니다.
디자이너가 바뀌었는지, 아주 예민하게 조율되었습니다.

 

Find my Friends – 애플에서 새로 시도한 광원 + 형태입니다.
Account 라고 쓰여있는 부분은 아주 평평하며, 그 곳을 기준으로 위와 아래의 곡률이 다릅니다.
리스트의 라운딩 박스도 바닥에 푹신하게 박힌 모양으로 디자인 되었습니다.
게다가 리스트도 약간 그라데이션이 들어가 있어서 푹신한 느낌을 강조하고 있습니다.
광원은 일반 앱들보다 상당히 위쪽에 바짝 놓여져 있습니다.
게다가 폰트색이나 기타 디테일들을 다 누런 색으로 맞춰서 마치 텅스텐 전구로 ‘머리맡에서’ 비추는 듯한 아날로그 느낌을 표현했습니다.

 

jamie olivier – 꽤 오래된 작업이긴 하지만, 상당히 흥미로운 거리감입니다.
명도차이와 shadow를 이용해서, 리스트가 바닥으로부터 상당히 높이 떠 있는 느낌을 줍니다.

 

piictu – 숫자불릿과 하단탭바의 over-shadow를 제외하면 그림자의 길이나 색상정리가 상당히 잘 되어
있습니다.

 

path – 제가 요즘 사랑에 빠져있는 앱입니다.
저 “+” 버튼 섀도우는 추후에 수정되리라 믿습니다.
저 베이지색 바탕에 살짝 깔려있는 질감이나, 시계의 디테일함이 환상입니다.
실제로 사용해보면, 사소한 부분의 모션/트랜지션도 허투루 다룬 부분이 없습니다.

 

3. 정리

제가 ‘빛/그림자’라고 말씀드린 내용은 사실, ‘디테일들이 얼마나 논리적인가’ 로 바꿔 말할 수도
있겠습니다.
아니면 단순히, Drop Shadow의 옵션을 최대한 활용하자 라는 말일 수도 있습니다.

1. 디자인은 꾸미는 것보다 규칙을 창조하는 것이 더 중요한 직업입니다.
2. 사소한 부분이라고 상투적으로 작업하면 멋진 걸 만들어낼 수 없습니다.

감사합니다.

by 김병수

 

본 포스팅의 내용은 개인의 의견이며, Right Brain Communications 의 의견과는 다를 수 있습니다.
[catlist name=”Design Tip” numberposts=5 excerpt=”yes” pagination=”yes” excerpt_size=”0″ title_only=”yes“]