디자인 시스템 세우기 2 — 같은 크기라던 배지의 주석을 확인해 보니
24.dp를 따로 적어 둔 두 배지를 공통 상수로 묶다가, 32.dp 버튼에 28.dp와 같다는 주석을 발견했습니다. 화면을 확인하니 실제 크기는 같았고 주석이 오래된 상태였습니다.
들어가며
물타기 계산기의 결과 카드와 이력 목록에는 아이콘만 담은 작은 배지가 있습니다. 같은 크기로 보여야 하는 두 배지에 각각 24.dp를 적고, 서로 같아야 한다는 주석을 붙여 뒀습니다.
주석으로 맞추던 두 배지
// ResultCard.kt
Box(modifier = Modifier.size(24.dp)) // KindBadge 와 같은 크기
// HistoryRow.kt
Box(modifier = Modifier.size(24.dp)) // IconBadge 와 같은 크기둘 다 24.dp였지만 한쪽을 26.dp로 바꾸면 다른 쪽 파일도 찾아가야 했습니다. 주석을 읽고 매번 맞추는 일이어서, 함께 쓸 상수로 묶기로 했습니다.
두 배지가 함께 쓸 상수
Badges.kt에 값을 한 번만 두고 두 구현에서 참조하게 했습니다.
internal val KindBadgeIconOnlySize = 24.dp처음에는 KindBadgeIconSize라고 부르려 했습니다. 그런데 이 이름은 안쪽 아이콘의 크기로 읽혔습니다. 정하려는 값은 아이콘만 표시하는 배지의 상자 한 변이어서 IconOnlySize로 고쳤습니다. 화면 크기는 그대로입니다.
기존 디자인 토큰을 쓸 수도 있는지 살폈습니다. 아이콘 크기 단계는 12 · 16 · 20 · 26이라 24가 없었습니다. 간격 토큰에는 24인 Spacing.s3가 있었지만, 간격을 바꿀 때 배지 크기까지 바뀌어야 할 이유는 없었습니다. 이 두 배지가 함께 사용할 값은 컴포넌트의 상수로 남겼습니다.
32.dp 옆에 적힌 “28dp와 같은 크기”
비슷한 주석을 더 찾다가 종목 관리 화면의 삭제 버튼을 봤습니다.
// StockManageScreen.kt
Modifier.size(32.dp) // IconBadgeSize와 맞춤IconBadgeSize는 28.dp였습니다. 주변 주석에도 왼쪽 종목 아이콘과 같은 28dp라고 적혀 있었습니다. 여기서 바로 상수 이름으로 바꾸면 버튼이 32에서 28로 줄어듭니다. 앞서 두 개의 24를 묶은 작업과 달리 실제 화면을 먼저 확인해야 했습니다.
그날 따로 화면을 띄워 확인하니 왼쪽 배지도 호출부에서 size(32.dp)를 받고 있었습니다. 화면에서는 이미 양쪽이 32.dp로 같았습니다. 잘못 남아 있던 것은 “28dp와 맞췄다”는 주석이었습니다.
28과 32를 비교해 보기도 했습니다. 종목 이름 아래에 ‘기록 n건’이 붙는 두 줄짜리 행에서는 28이 작아 보였고, 32가 글자 높이와 맞았습니다. 다른 화면의 한 줄 옆 배지는 28을 유지할 이유가 있어서 공통 IconBadgeSize 자체를 바꾸지는 않았습니다.
종목 행 양 끝에서만 쓸 상수를 만들었습니다.
private val StockRowBadgeSize = 32.dp왼쪽 IconBadge와 오른쪽 DeleteButton에서 이 값을 쓰게 하고, 28dp라는 주석도 고쳤습니다. 화면 크기는 이쪽도 그대로였습니다.
마치며
같은 크기로 유지할 배지들은 상수를 함께 쓰게 했습니다. 다만 어떤 크기를 함께 써야 하는지는 화면에서 확인한 뒤 정했습니다. 주석만 믿고 28로 맞췄다면 이미 잘 보이던 버튼을 줄일 뻔했습니다.