Twinkle Blog
모든 글
Design System · 2분 읽기

디자인 시스템 세우기 2 — 저쪽과 같은 크기라는 주석은 아무것도 묶지 않습니다

두 배지가 각자 24.dp 리터럴을 들고 '저쪽과 같은 크기'라는 주석으로만 묶여 있었어요. 같은 꼴을 찾다가, 주석이 같다고 말하는 채로 값이 이미 갈라진 것을 봤습니다.

#design-system#compose#네이밍#토큰
Heejeong KimTwinkle AI Labs

지난 글에서는 색 표가 여섯 벌이 되어 그중 하나가 몰래 달라진 이야기를 했어요. light-dark() 한 줄로 표를 한 벌로 만든 것이 결론이었죠.

이번 글은 같은 병을 치수에서 본 이야기입니다. 그런데 이번엔 값을 묶어주던 게 CSS 블록도 아니었어요. 그냥 주석 한 줄이었습니다.

결과 카드의 IconBadge와 이력의 KindBadge(iconOnly)가 같은 크기여야 했어요. 코드는 이렇게 생겼습니다.

// ResultCard.kt
Box(modifier = Modifier.size(24.dp))   // KindBadge 와 같은 크기

// HistoryRow.kt
Box(modifier = Modifier.size(24.dp))   // IconBadge 와 같은 크기

값은 맞았어요. 그런데 묶여 있지는 않았습니다.

주석은 읽는 사람에게만 말합니다

한쪽을 26으로 고치면 다른 쪽은 24로 남아요. 컴파일러는 아무 말도 안 합니다. 그리고 한쪽을 고치는 사람은 대개 다른 쪽을 읽지 않아요.

주석의 문제는 틀릴 수 있다는 게 아니에요. 주석은 강제하는 힘이 없다는 겁니다. “같아야 한다”는 사실이 사람의 기억에만 얹혀 있는 거죠.

이름은 다릅니다. 컴파일러가 따라가요. 한 번 고치면 둘이 같이 움직입니다.

// Badges.kt
internal val KindBadgeIconOnlySize = 24.dp

이제 두 자리가 이 이름을 가리킵니다.

같은 꼴을 찾다가 이미 어긋난 것을 봤어요

// 저쪽과 같은이라는 주석을 전부 찾아봤습니다. 그러다 이걸 봤어요.

// StockManageScreen.kt
IconButton(modifier = Modifier.size(32.dp))   // IconBadgeSize 와 맞춤

IconBadgeSize는 28입니다.

위쪽의 주석 둘은 “같은 크기(28dp)“라고 말하고 있었어요. 주석이 “같다”고 말하는 채로 값은 이미 갈라져 있었습니다.

언제 갈라졌는지는 모릅니다. 아무도 몰라요. 그게 요점이에요.

어긋난 것은 따로 갑니다

여기서 한 가지를 참아야 했어요.

값이 같은 동안에는 이름 하나로 묶어도 화면이 안 바뀝니다. 안전한 리팩토링이에요.

그런데 값이 이미 다르면 이름을 가리키게 하는 순간 화면이 바뀝니다. 32였던 버튼이 28이 되거나, 28이었던 배지가 32가 돼요.

그러니 이건 리팩토링이 아니라 디자인 변경입니다. 띄워보고 어느 쪽이 맞는지 정한 뒤에 가야 해요. 커밋도 따로 갑니다.

그런데 사다리 토큰을 가리키지는 않았어요

여기서 유혹이 하나 더 있었습니다. “토큰이 있는데 왜 새 상수를 만들지?”

우리 아이콘 사다리는 이래요.

12 · 16 · 20 · 26

24가 없습니다. 그리고 간격 사다리에는 Spacing.s3가 24로 있어요.

그래서 Spacing.s3를 가리키고 싶어집니다. 값이 맞으니까요.

안 했어요. 배지 한 변이 간격 한 칸과 같은 숫자인 것은 우연이거든요.

간격이 바뀐다고 배지가 따라 바뀔 이유가 없습니다. 우연을 묶으면 나중에 간격 사다리를 손볼 때 배지가 같이 움직여요. 그리고 그때 왜 움직였는지 아무도 모릅니다.

컴포넌트의 광학 치수는 그 파일의 이름 붙은 상수로 둡니다.

토큰은 “같은 이유로 같아야 하는 것”을 묶는 도구예요. “지금 숫자가 같은 것”을 묶는 도구가 아닙니다.

이름은 읽히는 대로 짓습니다

처음에 KindBadgeIconSize라고 지었다가 바꿨어요.

  • KindBadgeIconSize → “배지 안 아이콘의 크기”로 읽힙니다
  • KindBadgeIconOnlySize → “아이콘만 남긴 모드의 상자 한 변”

우리가 묶으려던 건 후자였어요. 앞의 이름을 그대로 뒀으면 다음 사람이 아이콘 크기를 고치려다 상자를 고쳤을 겁니다.

고치고 나서 적어 둔 것

  • // 저쪽과 같은이라는 주석을 보면 이름 하나로 바꿉니다.
  • 값이 같은 동안은 안전한 리팩토링이고, 이미 어긋났으면 디자인 변경이에요. 따로 갑니다.
  • 숫자가 같다고 묶지 않습니다. 같은 이유로 같아야 하는 것만 묶어요.
  • 이름은 읽히는 대로 짓습니다.

같아야 하는 것은 주석에 적을 게 아니라 한 곳에 두고 가리킬 것이었어요. 지난 글과 정확히 같은 법입니다. 거기서는 색이었고 여기서는 치수일 뿐이에요.

이번에 확인한 것

두 편에 걸쳐 한 벌로 두는 법을 이야기했어요. 색으로 한 번, 치수로 한 번요.

마지막 편에서는 그렇게 자란 시스템 전체를 소개할게요. 이름이 어디서 왔는지, 사다리가 몇 칸인지, 그리고 되돌린 결정 셋에 대한 이야기입니다.

👉 3 — Aurora Ledger - CSS 주석 한 줄에서 태어난 디자인 시스템