패널 가장자리가 무거워 보이면 먼저 그 어두운 부분이 윤곽인지, 접촉 그림자인지, 표면 전체의 명도인지 구분한다. 한꺼번에 조정하면 그림자를 줄이면서 형태까지 흐려질 수 있다.
나는 윤곽을 먼저 잡고 거리와 재질을 결정한다. 같은 ring의 폭에서 시작해 깊이, 표면과 투명도를 더하며 비교하려는 관계만 바꾼다.
이 글은 원문을 재구성하고 확장했다. 표본의 수치는 해당 조건의 값이며 모든 화면에 적용하는 규격이 아니다. 시리즈의 맥락과 도구는 다음 글에서 확인할 수 있다: 총론.
윤곽과 깊이
같은 윤곽을 더 가늘게
패널의 시작점은 한눈에 보이되 가장자리가 딱딱한 틀처럼 느껴지지는 않기를 바란다. 이 시편은 흐림 없는 바깥 그림자로 ring을 그리고 별도의 그림자로 깊이를 표현한다. Ring의 폭과 불투명도를 독립적으로 조절하면 레이아웃 공간을 차지하지 않고도 또렷한 외형을 남길 수 있다.
먼저 폭만 바꿔 가늘어진 윤곽의 무게를 본다. 첫 도해는 spread를 1 px에서 0.5 px로 줄인다. 어두운 색, 12% 불투명도, 바탕색과 크기는 고정하고 깊이 그림자도 넣지 않았다. 여기서 hairline은 같은 ring을 가늘게 만든다는 뜻이며 선을 하나 더 그린 것이 아니다.
가늘게 만든 뒤, 선명도를 결정하기
가늘어진 윤곽이 잘 보이지 않으면 다음으로 불투명도를 조정한다. 두 번째 도해는 0.5 px를 고정하고 12%와 18%만 비교한다. 형태, 채움, 그림자는 그대로다. 오른쪽은 같은 폭에서 윤곽이 더 선명하다.
이 불투명 표면은 여전히 0.5 px, 12%의 무채색 어두운 ring을 출발점으로 삼는다. 18%는 보정 효과를 보는 예시다. 큰 패널, 흰 선택 면, 유리는 배경이 서로 달라 각각 경계의 강도를 판단해야 한다. 선폭을 절반으로 줄였다고 불투명도에 고정된 배수를 곱할 필요는 없다.
0.5 px도 어디에 쓰는지에 따라 다르다. border-width는 장치 픽셀에 맞춰 정렬되지만, box-shadow의 소수 spread는 픽셀을 부분적으로 덮어 표현될 수 있다. 둘을 같은 그리기 방식으로 보면 안 된다. 이 시편의 WebKit 1× 검사에서는 0.25 px ring의 직선 가장자리가 식별할 수 있게 그려지지 않았고, 0.5 px도 좌우 무게가 고르지 않은 경우가 있었다. 가늘게 다듬은 뒤에도 원래 크기와 픽셀 밀도, 확대·축소를 함께 확인해야 한다.
윤곽을 따라 명암 나누기
윤곽의 무게는 형태를 따라 달라질 수도 있다. 앞의 ring은 전체 둘레가 같은 농도였지만, 여기서는 가장자리 대비(edge contrast)를 형태에 따라 분배한다. 어떤 부분은 조금 물러나고 다른 부분은 또렷하게 마무리된다. 나는 이 차이를 좁은 가장자리에 남겨 두고 중앙 표면은 조용하게 유지하는 편을 좋아한다.
이 시편의 경계 폭은 0.5 px로 고정했다. 왼쪽은 전체 둘레에 12% 불투명도를 쓰고, 오른쪽은 6%에서 18% 사이로 분포시켰다. 표면 채움과 크기, 뒤쪽 도형은 같다. 밝은 면에는 어두운 윤곽을 써서 왼쪽 위는 연하게, 오른쪽 아래는 조금 무겁게 만들었다. 변화는 직선과 모서리를 함께 따라간다.
여기서는 마스크 합성(mask compositing)으로 중앙을 비우고 바깥의 좁은 고리만 남겨 그 안에 그라데이션을 그렸다. 앞의 ring처럼 외형을 정하는 역할은 유지하고, 명암 분포는 그라데이션에 맡긴 것이다. 뒤쪽의 비스듬한 회색 띠는 표면을 똑같이 비쳐 보인다. 가장자리를 바꾸면서 카드 전체까지 어둡게 덮지는 않았다.
어두운 시편에는 밝은 윤곽을 쓰고 명암의 방향도 뒤집었다. 왼쪽 위는 조금 밝고 오른쪽 아래로 갈수록 연해져 빛이 들어오는 방향을 일관되게 암시한다. 나는 바탕면과 함께 보면서 형태를 설명할 정도로만 윤곽을 남기고, 전체 둘레에 같은 무게의 밝은 선을 쌓지 않는다.
고정된 콘텐츠 면은 균일하고 연한 ring으로도 외형을 안정시킬 수 있다. 방향에 따른 변화는 재질을 암시할 필요가 있는 소수의 떠 있는 면에 더 어울린다. 모든 카드가 같은 모서리를 강조하면 가장자리가 콘텐츠의 주의를 빼앗는다.
윤곽은 형태를, 부드러운 그림자는 거리를
Ring이 외형을 잡았으니 깊이 그림자(depth shadow)는 조금 물러나도 된다. 여기에는 두 층을 더했다. 가까운 그림자는 1 px 이동, 2 px 흐림에 −1 px spread로 폭을 좁혔다. 먼 그림자는 3 px 이동, 8 px 흐림에 −3 px spread로 범위를 제한했다. 불투명도는 각각 4%와 2%다.
가까운 그림자는 접촉을 설명하고, 먼 그림자는 어두운 부분을 바탕면으로 부드럽게 돌려보낸다. 이 감쇠(falloff)는 ring과 함께 봐야 한다. 아래쪽이 짙은 선으로 뭉치면 대개 가까운 그림자의 무게나 범위를 조정해야 한다. 전체 둘레가 회색으로 흐려지면 먼 그림자가 너무 넓게 퍼졌는지 확인한다. 나는 표면이 바탕에 붙어 있고 가장자리 바깥은 금방 깨끗해지는 편을 선호한다.
불투명 표면에는 안쪽 빛(inner light)을 기본으로 두르지 않는다. 흰색에 가까운 패널은 이미 충분히 밝고, 조금 어두운 트랙에 흰빛까지 얹으면 딱딱한 밝은 선이 드러나기 쉽다. 먼저 윤곽과 바탕색, 그림자로 층을 만들고, 밝은 가장자리는 재질을 설명해야 하는 부분에 남긴다.
어두운 표면은 먼저 명도로 구분하기
어두운 면으로 바꿀 때는 먼저 위쪽 표면을 조금 밝힌다. 도해의 바탕면은 #171717, 카드는 #242424이며 여기에 0.5 px, 12%의 흰 ring을 더했다. 검은 깊이 그림자는 아래에 따로 놓았다. 표면의 차이가 먼저 카드를 드러내고 가는 선이 윤곽을 보완한다.
표면과 재질
비슷한 흰색에도 각자의 역할을
표면의 위계(surface hierarchy)는 명도의 역할부터 나눌 수 있다. 이 밝은 시편의 캔버스는 #F7F7F7, 외곽 셸은 거의 중성인 #F1F1F2, 콘텐츠 면은 #FCFCFC이며 흰색은 일부 조작 면에 남겨 두었다. 색 편향은 아주 적다. 차이는 드러나는 면적과 함께 봐야 한다. 좁은 회색 고리와 넓은 회색 바탕의 무게는 같지 않다.
글자는 여전히 주종이 명확해야 한다. 이름과 숫자, 현재 선택 항목은 어두운 색으로 안정시키고 설명은 한 단계 뒤로 물린다. 나는 표면이 조용하길 바라지만, 정보를 읽을 때까지 눈을 가늘게 뜨고 찾게 하고 싶지는 않다.
그라데이션을 평면으로 부드럽게 되돌리기
표면에 약간의 명암 변화가 필요할 때는 그라데이션이 어떻게 시작하고 바탕색으로 돌아가는지 본다. 이징 그라데이션(eased gradient)은 공간 안에서 변화하는 속도를 조정한다. 평면에 가까워질 때는 천천히, 중간에서는 더 빠르게 변해 시작과 끝을 쉽게 알아차리지 못하게 한다. 화면 자체는 정지해 있다.
이 비교는 같은 무채색을 사용한다. 최대 불투명도는 모두 16%, 변화 범위는 패널의 20%에서 80% 사이다. 왼쪽은 일정한 속도로 0까지 줄이고 오른쪽은 이징 분포를 쓴다. 양쪽 모두 색상 정지점 33개를 쓰며 불투명도의 적분값도 같다. 명암의 분포만 바꾸었고 전체 무게까지 함께 줄이지는 않았다.
도해의 선형 그라데이션은 평면에 닿는 순간 변화 속도가 갑자기 멈춘다. 이징 분포는 그 근처에서 점차 느려진다. 어두운 비교에서도 같은 관계를 유지해 약한 밝기가 짙은 회색으로 천천히 돌아가게 했다.
여기서는 중간 색상 정지점으로 매끄러운 함수를 근사했다. 실제 CSS는 여전히 인접한 정지점 사이를 선형 보간한다. 16%는 차이를 관찰하기 위한 시편의 값이다. 깨끗한 흰 인터페이스에 넣을 때는 면적에 따라 무게를 낮추고, 좁은 마스크의 페이드나 재질 전환에 한정한다. 이 비교는 감쇠가 평면에 닿는 부분을 설명하며, 정지점 수를 모든 밴딩 문제의 해결책으로 보지는 않는다.
유리에는 구체적인 자리를
나는 약간의 유리 느낌을 떠 있는 도구 모음에 남겼다. 불투명도 72%의 흰색에 가까운 채움, 10 px 배경 흐림(backdrop blur)에 선명한 전경 글자와 아이콘을 더했다. 도구 모음이 컨테이너의 아래 가장자리를 가로질러야 아래 명암이 비쳐 보인다. 주된 데이터 행을 피해서 놓으면 재질에도 실제 경계가 생긴다.
유리는 0.5 px, 6%의 무채색 어두운 ring으로 윤곽을 잡고 안쪽에는 부드러운 미광만 남긴다. 아래의 연한 그림자 세 층은 접촉부에서 24 px 흐림의 바깥까지 이어져 떠 있는 느낌을 넓게 퍼뜨린다. 투명한 표면은 이미 배경의 명암을 빌리므로 불투명 요소보다 ring을 연하게 하고 짙은 경계를 더하지 않는다.
나는 실제로 가로지르는 배경에서 확인한다. 온통 흰 바탕에서는 윤곽만 남을 수 있고 아래가 너무 복잡하면 글자를 방해할 수 있다. 이 시편은 투과와 흐림만 표현하며 실제 굴절을 흉내 내지는 않는다.
실제 화면으로 돌아오면 윤곽을 알아볼 수 있는지, 그림자가 거리를 설명하는지, 재질이 내용을 방해하지 않는지 순서대로 본다. 조정 대상을 분명히 해야 세밀하게 다듬을 이유도 생긴다. 반 픽셀과 불투명도는 배경마다 다시 판단할 출발점이다.