안드로이드를 만들며 2 — 라이트 모드에서 사라진 삼각형 꼭지

들어가며

버튼에서 펼쳐지는 목록 위에 작은 삼각형 꼭지를 붙였습니다. 어느 버튼에서 열린 목록인지 알려 주는 표시였는데, 다크 모드에서는 보이고 라이트 모드에서는 사라졌습니다.

삼각형의 elevation을 높여 봤습니다. raised(4), floating(10), drawer(20)를 차례로 적용했지만 경계는 드러나지 않았습니다.

Material의 그림자 모델은 위쪽 광원을 가정합니다. 그림자는 주로 도형의 아래와 옆으로 번집니다. 이번 꼭지는 위를 향하고 있었고 밑변은 목록 판과 붙어 있었습니다.

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

높이를 20까지 올려도 꼭지 위쪽의 경계는 드러나지 않았고, 밑변의 그림자는 판에 가려졌습니다.

다크에서는 같은 꼭지가 보이는 이유를 확인했습니다.

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

다크의 lifted는 surface보다 밝습니다. 그림자가 약해도 면의 색 차이로 꼭지를 구분할 수 있었습니다.

라이트에서는 두 토큰이 모두 #FFFFFF입니다. 면의 색이 같고 그림자도 필요한 위치에 드러나지 않으니, 꼭지의 경계를 따로 그려야 했습니다.

꼭지를 채운 뒤 두 빗변에 윤곽선을 추가했습니다.

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

밑변은 목록 판과 이어지는 부분이므로 그리지 않았습니다. 밑변까지 선을 넣으면 삼각형이 판과 분리되어 보였습니다.

선의 색은 outlineLifted 토큰으로 정했습니다. 라이트에서는 경계를 표시하고, 이미 면의 차이로 구분되는 다크에서는 투명하게 둡니다. 그리는 코드에 if (isDark)를 추가하지 않고 토큰이 테마별 값을 제공하게 했습니다.

꼭지에 선이 필요하다고 해서 목록 판 전체에도 테두리를 두르지는 않았습니다. 흰 판의 둘레를 중성색 선으로 감싸면 기존에 그림자로 표현하던 화면과 인상이 달라집니다.

기존 테두리는 주로 현재 조작하는 부분을 잠시 강조할 때 썼습니다. 그래서 이 선은 꼭지에만 남겼습니다.

위치도 함께 확인했습니다. 카드 모서리가 18dp로 둥글 때 꼭지를 너무 가까이 두면 밑변 일부가 모서리 곡선과 겹칩니다. 꼭지는 곡률이 시작되는 부분보다 안쪽에 두어 판과 자연스럽게 이어지도록 했습니다.