엘리베이션

화면은 원래 평면입니다. 그래서 두 요소가 겹쳐 있을 때 어느 쪽이 위인지 알려 줄 방법이 없었습니다. 누르면 메뉴가 펼쳐지는데 그 메뉴가 아래 내용을 잠깐 가리고 있는 것인지 아니면 아래 내용을 밀어내고 자리를 차지한 것인지, 화면만 봐서는 구분이 되지 않았습니다.

이게 문제가 되는 건 사용자가 다음 동작을 고를 때입니다. 지금 뜬 창이 화면 전체를 붙잡고 있어서 이걸 닫아야만 다음 일을 할 수 있는지, 아니면 그냥 정보를 알려 주는 것이라 무시하고 뒤쪽을 계속 써도 되는지를 알아야 손이 움직입니다.

페이지덱에서도 같은 일이 있었습니다. 민서가 만든 시안에서 문서 공유 창과 그 아래 문서 목록이 똑같이 흰 배경에 얇은 선 하나씩이었는데, 사용자 테스트에서 사람들이 공유 창 뒤의 목록을 계속 클릭했습니다. 창이 떠 있다는 사실을 인식하지 못한 겁니다.

엘리베이션은 이 물음에 눈으로 답하는 규칙입니다. 현실에서 물건이 떠 있으면 아래에 그림자가 지는데, 그 성질을 그대로 빌려 와 요소마다 높이를 정하고 높이에 맞는 그림자를 붙입니다. 그러면 사용자는 설명 없이도 무엇이 앞이고 무엇이 뒤인지 압니다.

높이 값을 먼저 정하고, 그 값마다 쓸 그림자를 한 벌로 묶어 둡니다. 개별 요소마다 그림자를 그때그때 고르는 게 아니라 단계표를 만들어 두고 거기서 꺼내 씁니다.

단계는 보통 넷에서 여섯 개입니다.

1. 0단계 — 그림자가 없고 배경에 붙어 있는 요소입니다. 본문 영역, 표, 구분선이 여기 있습니다.
2. 1단계 — 아주 얕게 뜬 요소입니다. 카드나 목록 항목처럼 배경과 구분은 되지만 떠 있다는 느낌까지는 주지 않는 자리에 씁니다.
3. 3단계 — 눌러서 열리는 것들입니다. 드롭다운 메뉴, 자동 완성 목록, 말풍선 안내가 여기 해당합니다.
4. 5단계 이상 — 화면 전체를 붙잡는 것들입니다. 모달 창, 화면 아래에서 올라오는 시트가 여기 있습니다.

각 단계의 그림자는 세 가지 값으로 만듭니다. 아래로 얼마나 내려갈지, 얼마나 번질지, 얼마나 진할지입니다. 1단계가 아래로 1픽셀에 번짐 2픽셀에 검정 8퍼센트라면 5단계는 아래로 12픽셀에 번짐 24픽셀에 검정 16퍼센트쯤 됩니다. 높이 올라갈수록 그림자가 아래로 더 내려가고 더 넓게 퍼지면서 옅어지는데, 실제로 조명 아래에서 물건을 들어 올렸을 때 생기는 변화와 같습니다.

값보다 중요한 건 단계 사이가 눈에 띄게 벌어져 있는지입니다. 1단계와 3단계의 그림자가 거의 같아 보이면 두 단계를 둔 의미가 없습니다. 대비가 어중간하면 구분이 아니라 얼룩으로 읽히는 것과 같은 문제입니다.

겹침 순서도 함께 정합니다. 그림자만으로는 두 요소가 실제로 겹쳤을 때 어느 쪽이 위에 그려질지가 정해지지 않아서, 단계마다 쌓는 순서를 숫자로 붙여 둡니다. 모달 위에 드롭다운이 잘못 깔려 메뉴가 안 보이는 사고는 대개 이 순서를 안 정해 둬서 생깁니다.

떠 있다는 사실 자체가 정보인 자리에 씁니다. 대표적인 것이 넷입니다.

1. 카드 — 목록의 항목 하나하나를 따로 집을 수 있는 덩어리로 보이게 합니다. 레이아웃에서 칸을 나누는 것만으로는 부족할 때 얕은 그림자를 더합니다.
2. 열리는 메뉴 — 드롭다운과 자동 완성 목록입니다. 아래 내용을 밀어내지 않고 잠깐 덮는다는 뜻을 그림자가 전합니다.
3. 모달 창 — 여기서는 그림자에 더해 뒤쪽 화면을 어둡게 덮습니다. 뒤를 못 쓴다는 것까지 알려야 하기 때문입니다.
4. 화면에 고정된 요소 — 스크롤해도 따라오는 상단 바나 오른쪽 아래 버튼입니다. 평소에는 그림자가 없다가 내용이 그 아래로 지나가기 시작하면 그림자가 생기게 만드는 경우가 많습니다.

한 가지 함정은 어두운 배경입니다. 검은 배경 위에서는 검은 그림자가 거의 보이지 않아서 단계가 통째로 무너집니다. 그래서 어두운 화면에서는 그림자 대신 요소의 배경을 한 단계씩 밝게 해 높이를 표현합니다. 높이 올라갈수록 밝아지는 규칙이라 방향은 같습니다.

컬러와 마찬가지로 값은 한 곳에 모아 두고 화면마다 다시 고르지 않습니다. 단계표가 없으면 사람마다 그림자를 눈대중으로 넣게 되고, 같은 제품 안에서 카드 그림자가 화면마다 달라집니다.

"이 카드 엘리베이션 한 단계 올려 주세요. 지금은 배경에 붙어 보여요."

그림자를 더 줘서 떠 있게 보이게 해 달라는 요청입니다.

"토스트가 모달 뒤로 들어가요. 엘리베이션 순서 다시 봐야 할 것 같아요."

겹침 순서가 잘못돼서 위에 떠야 할 알림이 가려졌다는 뜻입니다.

"다크 모드에서는 엘리베이션을 그림자 말고 밝기로 가져갑시다."

어두운 배경에서 그림자가 안 보이니 표현 방식을 바꾸자는 제안입니다.

페이지덱에서 이 말이 가장 자주 나오는 자리는 디자인 시스템 점검입니다. 민서가 제품 화면을 훑다가 같은 성격의 요소인데 그림자가 다른 것들을 모읍니다. 문서 카드와 템플릿 카드가 둘 다 목록 항목인데 한쪽만 그림자가 두 배로 진하면 사용자는 템플릿 쪽이 더 중요한 것이라고 읽습니다.

태오와의 대화에서는 값이 아니라 단계 이름을 그대로 씁니다. 민서가 "이건 3단계요" 라고 말하면 태오는 정해진 그림자 값을 가져다 붙이면 되고, 나중에 값을 손볼 때도 한 자리만 고치면 됩니다.

그림자를 장식으로 보는 경우가 가장 많습니다. 화면이 밋밋해 보일 때 그림자를 넣으면 확실히 나아 보이니 자연스러운 오해입니다. 하지만 그림자는 높이를 알리는 신호라서, 떠 있지 않은 것에 그림자를 붙이면 사용자에게 없는 사실을 알려 주는 셈이 됩니다. 본문 영역과 카드와 모달에 전부 그림자가 붙어 있으면 세 가지가 같은 층에 있는 것처럼 보이고, 정작 모달이 떴을 때 그게 화면을 붙잡고 있다는 신호가 사라집니다.

그림자를 진하게 할수록 잘 보인다고 생각하는 것도 흔합니다. 시각적 위계를 그림자로 만들려는 시도인데, 짙은 그림자는 요소를 띄우는 게 아니라 테두리를 지저분하게 만듭니다. 화면에서 무언가를 도드라지게 하고 싶으면 크기나 색으로 차이를 벌리는 쪽이 먼저입니다. 그림자를 한 단계씩 올려 가며 해결하려 들면 결국 모든 요소가 최고 단계를 쓰게 됩니다.