테마

어두운 배경으로 보는 화면을 따로 만들기로 하면 화면 수가 두 배가 됩니다. 만들 때만 두 배가 아니라 그 뒤의 모든 변경이 두 번씩 일어납니다. 버튼 높이를 2픽셀 줄이는 일도 두 벌에서 각각 해야 합니다.

페이지덱에 다크 모드 요청이 들어왔을 때 민서가 먼저 낸 것은 시안이 아니라 계산이었습니다. 화면 스물넷을 두 벌로 그리면 앞으로 모든 수정이 두 배가 된다는 것이었습니다. 태오 쪽도 색 값이 화면 코드에 직접 박혀 있어서 밝은지 어두운지를 가르는 조건문이 화면마다 필요했습니다.

테마는 그 두 배를 만들지 않는 구조입니다. 부품은 색을 고르지 않고 이름만 부르게 해 두고, 그 이름에 물리는 값 묶음을 한 벌씩 갈아 끼웁니다.

부품이 부르는 이름은 그대로 두고 이름에 연결된 값만 바꿉니다. 정해 둘 것은 다섯 가지입니다.

1. 이름을 값이 아니라 역할로 붙입니다. 회색의 가장 진한 단계를 가리키는 이름은 글로벌 토큰이고, 본문 글자라는 쓰임새를 가리키는 이름은 알리아스 토큰입니다. 테마가 갈아 끼우는 것은 뒤쪽입니다.
2. 부품은 역할 이름만 부릅니다. 버튼 안에 진한 회색을 직접 적어 두면 그 버튼은 어느 테마에서도 같은 색으로 남습니다.
3. 테마 하나는 역할 이름과 값을 짝지은 표 한 벌입니다.
4. 테마마다 명도 대비를 다시 잽니다. 밝은 테마에서 4.6 대 1로 통과한 조합이 어두운 테마의 같은 자리에서 3.2 대 1로 떨어지는 일이 흔합니다.
5. 색만으로 끝나지 않습니다. 밝은 배경에서 깊이를 만들던 그림자는 어두운 배경에서 보이지 않아, 어두운 테마에서는 테두리나 배경 단계 차이로 대신합니다.

어느 테마를 쓸지는 기본값으로 기기 설정을 따라가게 두고, 사용자가 직접 고른 값이 있으면 그것을 기억합니다.

"부품에서 진한 회색을 직접 부르고 있어요. 본문 글자라는 이름으로 바꿔야 테마가 갈아 끼워집니다."

역할 이름을 쓰지 않으면 이 구조가 작동하지 않는다는 지적입니다.

"어두운 테마에서 이 조합은 대비가 3.2 대 1이에요. 밝은 쪽에서 통과한 값을 그대로 쓸 수 없습니다."

테마마다 검사를 다시 해야 한다는 뜻입니다.

"테마를 세 개로 늘리면 검사도 세 벌이 됩니다."

테마를 늘리는 비용이 어디서 나오는지 짚은 말입니다.

민서와 태오는 화면에 쓰이던 값들을 역할 이름 마흔두 개로 정리했습니다. 그 뒤 다크 모드를 더하는 일은 표 한 벌을 쓰고 대비를 다시 재는 일로 끝났습니다.

반년 뒤에 글자와 배경의 차이를 더 키운 테마를 요청받았을 때도 같은 순서로 처리했습니다. 표 한 벌을 더 만들고 검사를 한 번 더 돌렸습니다.