그림자 · 고도

정의

그림자(shadow)는 요소 뒤에 드리우는 흐릿한 자국으로, 그 요소가 화면 위로 얼마나 떠 있는지를 눈에 보이게 만드는 장치입니다. 이 떠 있는 정도를 고도(elevation)라 부릅니다. 그림자가 작고 진하며 요소에 딱 붙어 있으면 표면에 얕게 놓인 것처럼 보이고, 그림자가 크고 부드럽게 번져 넓게 퍼지면 화면에서 훨씬 위로 들려 올라온 것처럼 보입니다. 현실에서 물체가 높이 떠 있을수록 그림자가 크고 흐려지는 원리를 그대로 옮긴 것이라, 우리는 별다른 설명 없이도 그림자만 보고 무엇이 위에 있는지 직감으로 알아챕니다.

왜 중요한가

그림자는 단순한 장식이 아니라 화면의 z축 위계, 즉 무엇이 앞이고 무엇이 뒤인지를 말해 주는 신호입니다. 모달이나 팝오버처럼 다른 내용 위에 얹혀 사용자의 주의를 끌어야 하는 요소일수록 그림자를 크게 주어 확실히 떠 보이게 합니다. 반대로 배경에 가만히 놓인 카드는 그림자를 옅게 주거나 아예 빼서 차분하게 가라앉힙니다. 이렇게 고도의 차이를 두면 사용자는 지금 화면에서 어떤 요소가 활성 상태이고 어디에 집중해야 하는지 자연스럽게 이해합니다. 그림자는 또한 요소가 지금 눌리거나 떠오르는 것 같은 움직임을 은근히 표현하는 데도 쓰여, 버튼에 마우스를 올리면 그림자가 커지며 살짝 들리는 느낌을 줄 수 있습니다. 다만 그림자는 절제가 생명입니다. 모든 요소에 짙은 그림자를 남발하면 화면이 무겁고 지저분해져, 오히려 위계가 사라지고 어수선한 인상만 남습니다.

흔한 실수

• 모든 요소에 그림자를 넣는 것입니다. 카드, 버튼, 입력창까지 죄다 떠 있으면 무엇이 정말 위에 있는지 구분되지 않아 위계가 무너집니다. 그림자는 강조하고 싶은 요소에만 아껴 써야 힘을 발휘합니다.
• 그림자를 너무 진하고 딱딱하게 주는 것입니다. 검은색에 가깝고 번짐이 거의 없는 그림자는 요소 주위에 어두운 테두리처럼 보여 값싸고 촌스러운 인상을 남깁니다. 실제 빛처럼 옅고 부드럽게 번지도록 잡아야 자연스럽습니다.
• 떠 있는 정도와 그림자의 크기가 서로 어긋나게 주는 것입니다. 배경에 붙어 있어야 할 카드에 모달급의 큰 그림자를 주면, 사용자는 그 카드가 왜 이렇게 떠 보이는지 혼란스러워합니다. 요소의 실제 역할에 맞는 크기의 그림자를 골라야 합니다.

실무 팁

• 그림자를 곧 고도로 생각하고, 단계를 미리 2~3개만 정해 두세요. 예를 들어 얕음은 카드, 중간은 드롭다운, 높음은 모달처럼 역할별로 짝지어 두면 화면마다 일관된 깊이감이 유지되고 무엇이 위에 뜬 요소인지 한눈에 읽힙니다.
• 그림자 색은 순수한 검정보다 요소의 배경색을 살짝 어둡게 한 색을 쓰세요. 여기에 투명도를 낮게 주고 번짐을 넉넉히 잡으면 훨씬 은은하고 고급스러워 보입니다. 진한 그림자 하나보다 옅은 그림자를 여러 겹 쌓는 편이 더 자연스러운 깊이를 만듭니다.
• 그림자만으로 경계를 표현하기 어려운 밝은 배경에서는 아주 옅은 테두리를 함께 더해 요소의 윤곽을 살짝 보완하면 안정감이 커집니다.

관련 개념