지난 두 편에서는 한 벌로 두는 법을 이야기했어요. 색은 light-dark() 한 줄로, 치수는 주석이 아니라 이름 하나로요.

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

먼저 시작이 좀 특이했어요. 디자인 시스템은 보통 “만들자”고 마음먹고 만들잖아요. 이건 그렇게 시작하지 않았습니다.

2026년 8월 9일, 물타기 계산기의 목업을 다시 짜던 커밋에 주석 한 줄이 있었어요.

/* Visual refresh · Aurora Ledger */

그때 목업에는 스킨이 여러 벌 있었고, 그중 보라 한 벌의 이름이었습니다. 그리고 2주 뒤에 그 이름이 모든 제품의 기준이 됐어요.

이름을 나중에 해석했어요

유래가 적힌 적이 없어서, 8월 23일에 이름을 뜯어 읽어봤습니다. 정한 사람이 다른 이유를 기억하면 그쪽이 맞아요. 아래는 해석입니다.

Aurora — 오로라

이 시스템의 얼굴은 세 가지예요.

• “보라 → 밝은 보라”로 흐르는 그라데이션
• 남보라를 머금은 밤하늘 중성색 (Dusk)
• 별하늘 장식

밤하늘의 빛 이름이 그 얼굴에 맞더라고요. 그리고 모토인 “Shine by Yourself — 스스로 빛난다”와 같은 방향을 봅니다.

Ledger — 장부

첫 제품이 물타기 계산기예요. 종목을 줄줄이 적는 매매 장부죠. 이 시스템이 “숫자를 읽는 화면”을 위한 것이라는 뜻으로 붙었습니다.

지금도 코드와 문서가 종목 줄을 “장부 줄”이라고 불러요.

줄여 부르지 않습니다

같은 이름 Aurora를 음악 쪽에서도 쓰고 있어요. 그러니 “Aurora를 입는다”가 어느 쪽인지는 문맥으로만 갈립니다.

그래서 디자인 시스템은 “Aurora Ledger” 한 벌로 불러요. 앱의 코드 식별자도 같은 이유로 Aurora*가 아니라 Twinkle*입니다(TwinkleTheme).

토큰을 두 층으로 짭니다

1층  원색 사다리 (--aurora-*)   ← 화면은 이 이름을 부르지 않습니다
2층  의미 토큰   (--bg, --text, --accent …)  ← 화면은 오직 이것만

덕분에 라이트/다크는 2층만 갈아 끼우면 되고, 원색이 화면에 새지 않아요.

화면 코드에 #7040D9가 한 번이라도 적히면 그 자리는 테마를 따라가지 못합니다. 그리고 그런 자리는 한 번 생기면 잘 안 없어져요.

사다리들

값의 정본은 저장소의 원칙 문서에 있습니다. 여기엔 사다리의 모양만 옮길게요.

불투명도 — 여섯 칸

“옅은 면”만 라이트 8% · 다크 12%로 갈립니다. “옅게”는 다크를 보고 하는 말이기 때문이에요. 같은 값을 주면 흰 바탕에서 장식이 먼저 사라지거든요.

간격 — 8pt

2 · 4 · 6 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48

글자 — 열 칸

11 · 12 · 14 · 16 · 20 · 24 · 28 · 32 · 36 · 40

그 위 세 칸(48 · 60 · 72)은 첫 화면 전용이에요. 히어로와 큰 숫자만 오르고 본문으로 안 내려옵니다.

굵기는 가진 넷(400 · 500 · 600 · 700)만 씁니다. 안 실은 굵기(550 · 650)를 부르면 브라우저가 흉내 내거나 이웃 칸으로 스냅해요. “중간쯤”이라고 적어둔 자리가 실제로는 아무 데도 중간이 아니게 됩니다.

모양

알약(999)은 배지·버튼처럼 한 줄이 통째로 둥근 것에만 씁니다. 카드는 여기 오지 않아요.

움직임 — 곡선 둘

곡선은 둘입니다.

• 들어오고 움직이는 것 — cubic-bezier(.25, 1, .5, 1)
• 나가는 것 — cubic-bezier(.4, 0, 1, 1)

이름을 easeIn/easeOut으로 짓지 않았어요. CSS에서 그 말은 뜻이 뒤집혀 있어서(ease-out이 감속) 반드시 한 번은 잘못 읽히거든요. 쓰임으로 부릅니다.

되돌린 결정 셋

되돌린 결정은 지우지 않아요. 지우면 다음 사람(대개 미래의 나)이 같은 자리를 두 번 팝니다.

하나 — 중성색을 순수 회색으로

한 번 걷어봤어요. 그리고 되돌렸습니다.

순수 회색 화면은 브랜드의 공기가 빠져 누가 만든 화면인지 말하지 못하더라고요.

그래서 남보라를 한 방울만 머금습니다. 흠뻑 물들이지는 않아요. 중성색의 채도는 낮게 눌러두고, 채도 있는 보라는 “지금 누를 것”과 “지금 손이 가 있는 곳”에만 세웁니다.

둘 — 등락색을 보라 하나로

오름/내림을 보라 하나로 통일해봤어요. 그리고 되돌렸습니다.

걷었던 이유는 “같은 자리의 색이 매번 바뀌면 이 색이 좋은 소식인지를 먼저 배워야 한다”였어요. 그런데 한 화면에서 오르내리는 값이 하나뿐이면 배울 것이 없더라고요.

지금은 한국 시장 문법을 따릅니다. 오름 빨강, 내림 파랑.

색이 방향을 말해도 말과 화살표는 그대로 둬요(▲▼ · “낮아졌어요”). 색맹인 분들께는 색이 없는 것과 같고, 그 문법은 나라마다 반대라 색 하나만 믿으면 영어로 열었을 때 거짓말이 되니까요.

그리고 등락색은 위험색과 다른 토큰입니다. 값이 오른 것과 되돌릴 수 없는 것은 색이 겹쳐도 뜻이 달라요. 한 토큰으로 묶으면 다음 사람이 “평단가가 올랐다”를 “위험하다”로 읽습니다.

셋 — 화려함의 방향이 뒤집혔어요

예전 법은 이랬습니다.

큰 숫자에 그라데이션. “다음” 버튼에는 금지.

이게 뒤집혔어요. 지금은 반대입니다.

그라데이션은 누를 것에만. 큰 숫자는 accent 단색.

글자에 그라데이션을 입히면 값이 장식으로 읽히더라고요. 화려함은 “읽을 것”이 아니라 “누를 것”의 신호였습니다.

다만 한 화면에 화려한 면은 하나예요. 키패드의 “다음/완료”와 빈 상태의 CTA에만 입힙니다.

전폭 저장 버튼은 단색 primary예요. 이미 충분히 크고, 거기까지 흐르게 하면 어느 쪽이 지금 할 일인지 흐려지거든요.

어디까지 입었나

웹 넷에 앱 하나입니다.

같은 사다리가 두 벌의 코드로 서 있다는 뜻이기도 해요. 웹에서는 CSS 변수, 앱에서는 Kotlin 토큰. 값은 하나고 부르는 이름만 다릅니다.

그리고 그 “부르는 이름만 다르다”를 지키는 게 생각보다 일이에요. 한쪽에 칸을 더하고 다른 쪽을 잊으면, 그때부터 두 벌은 서서히 다른 시스템이 되거든요. 이 시리즈의 앞 두 편이 바로 그 이야기였습니다.

고치고 나서 적어 둔 것

이름이 CSS 주석에서 태어난 게 우연 같지만, 돌아보면 그 순서가 맞았던 것 같아요.

“디자인 시스템을 만들자”로 시작하면 쓸 일 없는 칸부터 채우게 됩니다. 그런데 목업 한 장을 제대로 그리고 나서 “이 값들에 이름을 붙이자”로 가면, 사다리의 칸 수가 실제로 필요했던 만큼으로 정해져요.

아이콘 사다리가 12 · 16 · 20 · 26 네 칸뿐인 이유도 그래서입니다. 가운데에 24가 없는 게 이상해 보이지만, 아직 24짜리 아이콘이 필요한 적이 없었거든요. 빈 칸을 미리 채워두면 그건 사다리가 아니라 그냥 목록이 됩니다.

세 편을 한 줄로 줄이면 이래요.

한 벌은 한 번만 적고, 나머지는 전부 그 하나를 가리키게 한다.

색이든, 치수든, 시스템 전체든 같은 법이었습니다.