지난 글에서는 비워둔 타이포 슬롯이 Roboto로 채워지던 이야기를 했어요. 코드에서는 “없음”으로 보였는데 화면에서는 남의 글꼴이 서 있던 경우였죠.

이번 글도 화면에서만 보이는 문제인데, 방향이 반대예요. 이번엔 분명히 그렸는데 화면에서 사라진 것입니다.

셀렉트를 펼치면 목록이 뜨고, 그 목록이 어느 버튼에서 나왔는지 가리키려고 위쪽에 작은 삼각형 꼭지를 달았어요. 말풍선 꼬리 같은 거예요.

다크에서는 잘 보였습니다. 그런데 라이트에서 사라졌어요.

삼각형에 elevation을 얹었습니다. 안 보였어요. 값을 키웠습니다. 그래도 안 보였어요. 토큰 사다리를 한 칸씩 올려봤습니다. raised(4) → floating(10) → drawer(20). 아무 일도 일어나지 않았어요.

그림자는 위에서 내려오는 빛을 흉내 냅니다

Material의 그림자 모델은 광원이 위에 있다고 가정해요. 그래서 떠 있는 물건의 그늘은 아래와 옆으로 번집니다.

여기까지는 다들 아는 이야기인데, 이게 삼각형에 무슨 뜻인지가 문제였어요.

      ▲          ← 이 꼭짓점의 윗면에는
     ╱ ╲            그늘이 질 자리가 없습니다
    ╱   ╲
   ─────────    ← 밑변은 판과 만나 있어서 그늘이 가려집니다

위를 향한 삼각형의 윗면에는 그늘이 지지 않습니다. 빛이 정면으로 내려오니까요. 그리고 밑변 쪽은 판과 붙어 있어서 그늘이 보일 자리가 아니에요.

그러니까 이 도형은 elevation으로 세울 수 있는 종류의 도형이 아니었습니다. 값의 문제가 아니라 방향의 문제라서, 토큰을 아무리 올려도 이 자리만은 못 살려요.

라이트는 다크에서 멀쩡한 것이 사라지는 테마예요

같은 작업에서 하나 더 배웠어요. 왜 다크에서는 보였을까요?

토큰	라이트	다크
`surface`	`#FFFFFF`	`#1B1526`
`lifted`	`#FFFFFF`	`#2C233A`

다크에서는 lifted가 판보다 밝습니다. 그래서 떠 있는 것이 그늘 없이도 제 색만으로 떠올라요. 그늘은 거들 뿐이죠.

라이트에서는 lifted와 surface가 둘 다 순백입니다. 그늘 하나가 경계를 통째로 지고 있었어요. 그늘이 안 지면 경계가 없습니다.

“옅게는 다크를 보고 하는 말”이라고 적어둔 법이 색에만 해당하는 줄 알았는데, 그늘에도 그대로 맞더라고요. 같은 값이 같은 인상은 아니었습니다.

그늘로 못 세우면 선으로 세웁니다. 꼭지를 채운 뒤 두 빗변만 그어요.

      ╱╲        ← 이 둘만 긋습니다
     ╱  ╲
    ╱____╲      ← 밑변은 판과 만나는 자리라 긋지 않아요

밑변을 같이 그으면 삼각형이 판 위에 얹힌 스티커처럼 보입니다. 안 그으면 판에서 자라난 것처럼 붙어요.

그 선의 색도 토큰(outlineLifted)이고, 다크에서는 투명입니다. 다크는 애초에 이 선이 필요 없으니까요.

여기서 참기 어려운 유혹이 하나 있어요. 그리는 자리에서 if (isDark)를 쓰는 겁니다. 그 순간 같은 표가 두 벌이 돼요. 토큰이 테마를 알고, 그리는 쪽은 토큰만 부릅니다.

흰 판 위의 중성색 실선은 “떠 있음”이 아니라 그냥 회색 테예요. 화면이 카드가 아니라 표(表)가 됩니다.

우리 법의 테두리 예외는 “지금 손이 가 있는 곳”인데, 그건 잠깐 켜지는 강조지 상시 윤곽이 아니에요.

꼭지의 선은 그 예외가 아니라 “그늘이 물리적으로 불가능한 자리”의 대체재입니다. 예외를 넓히지 않도록 이유를 분명히 적어뒀어요.

카드 모서리가 18dp로 둥근데 꼭지를 모서리 가까이 두면, 꼭지의 밑변 한쪽이 곡선 위에 얹힙니다. 그러면 붙은 꼭지가 아니라 낙서로 보여요.

다크로 개발하면 라이트는 나중에 한 번 보는 화면이 됩니다. 그런데 사라지는 쪽은 늘 라이트예요. 그러니 꼭 화면으로 봅니다.

여기까지 두 편은 화면에서 조용히 틀어진 것들이었어요. 다음 글은 문장이 조용히 틀어진 이야기입니다. 그것도 한 언어가 아니라 열한 언어가 똑같이요.