디자인 시스템 세우기 3 — Aurora Ledger에서 바꾼 색과 강조의 기준

들어가며

물타기 계산기의 목업에서 쓰던 색과 크기를 다른 웹사이트와 앱에도 적용하기 시작했습니다. 이름은 Aurora Ledger입니다. 8월 9일 목업을 다시 만든 커밋에는 보라색 스킨을 가리키는 주석이 들어 있습니다.

/* Visual refresh · Aurora Ledger */

8월 24일에는 홈, 디자인 시스템 사이트, 블로그, 약관 사이트와 물타기 계산기에 이 기준을 적용하고 있었습니다. 처음 고른 색을 그대로 옮긴 것은 아닙니다. 배경을 회색으로 바꿨다가 되돌렸고, 숫자에 넣었던 그라데이션도 다른 자리로 옮겼습니다.

배경과 버튼에 같은 역할을 맡기지 않기

중성색에서 보라 기운을 없애 순수 회색으로 바꿔 본 적이 있습니다. 하지만 기존 화면의 인상이 너무 옅어져, 당시에는 채도가 낮은 남보라 계열로 되돌렸습니다. 배경에는 낮은 채도를 쓰고, 채도가 높은 보라는 주요 동작과 초점을 표시하는 데 남겼습니다.

그라데이션은 적용 위치를 바꿨습니다. 처음에는 큰 숫자에 쓰고 ‘다음’ 버튼에는 쓰지 않았는데, 숫자가 장식처럼 보였습니다. 계산 결과는 accent 단색으로 읽게 하고, 그라데이션은 키패드의 ‘다음/완료’와 빈 화면의 시작 버튼에 사용했습니다.

요소	정한 표현	판단한 이유
큰 결과 숫자	accent 단색	계산값 자체가 잘 읽혀야 함
키패드의 다음/완료	그라데이션	이어서 누를 동작을 표시
빈 상태의 시작 버튼	그라데이션	처음 할 일을 표시
전폭 저장 버튼	primary 단색	크기로 이미 충분히 드러남

한 화면에서 그라데이션을 쓰는 면은 하나로 제한했습니다. 저장 버튼까지 같은 효과를 더하면 어느 동작을 먼저 해야 하는지 분산된다고 판단했습니다.

오름과 내림까지 보라로 표시해 보니

오름과 내림을 모두 보라로 표시한 적도 있습니다. 색이 매번 바뀌는 대신 같은 색으로 결과를 보여주려던 선택이었습니다. 하지만 한 화면에서 오르내리는 값이 하나라면 방향을 바로 구분하는 쪽이 더 유용했습니다.

한국 시장에서 익숙한 오름 빨강, 내림 파랑으로 돌아갔습니다. 색만으로 뜻을 전달하지 않도록 ▲▼와 ‘낮아졌어요’ 같은 문구는 함께 뒀습니다.

오름에 쓰는 빨강과 삭제 경고의 빨강은 토큰을 나눴습니다. 등락 표시를 바꾼다고 삭제 버튼까지 달라지면 곤란했습니다.

화면은 색의 용도를 참조한다

웹의 색 토큰은 원색과 용도를 나타내는 이름으로 나눴습니다.

원색: --aurora-*
용도: --bg, --text, --accent …

화면에서는 #7040D9 같은 색상값 대신 --accent를 사용합니다. 화면에 직접 적은 색상값은 테마를 바꿔도 그대로 남지만, 용도별 토큰은 라이트·다크 정의에 맞춰 바뀝니다.

색 외의 공통 값도 단계별로 정리했습니다. 아래는 8월 24일 기준입니다.

구분	값	쓰임
불투명도	.88 · .70 · .50 · .35 · .20 · .08	`strong`, `soft`, `half`, `ring`, `tint`, `wash`
간격	2 · 4 · 6 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48	8pt 기준에 작은 간격을 더한 단계
기본 글자 크기	11 · 12 · 14 · 16 · 20 · 24 · 28 · 32 · 36 · 40	본문, 이름표, 제목, 숫자
모서리	11 · 14 · 18 · 24	입력칸, 안쪽 패널·키, 카드, 시트·모달
움직임 시간	150ms · 250ms · 350ms	`fast`, `base`, `slow`

옅은 배경은 같은 비율로 보이지 않아 라이트 8%, 다크 12%로 나눴습니다. 글자 크기 48·60·72는 첫 화면의 히어로와 큰 숫자에만 쓰고, 굵기는 포함한 폰트에 맞춰 400·500·600·700을 사용했습니다. 550·650처럼 따로 포함하지 않은 굵기는 지정하지 않았습니다. 알약 모양의 반지름 999는 배지와 버튼에 사용했습니다.

움직임 곡선은 들어오거나 이동할 때 cubic-bezier(.25, 1, .5, 1), 나갈 때 cubic-bezier(.4, 0, 1, 1)로 나눴습니다. 이름도 동작의 쓰임으로 구분했습니다. CSS의 ease-out은 감속을 뜻하므로 화면에서 ‘나가는 동작’과 혼동하지 않으려는 선택입니다.

마치며

웹에서는 CSS 변수, 앱에서는 Kotlin 토큰으로 이 값을 구현했습니다. 공통 기준을 정했어도 코드가 하나가 된 것은 아닙니다. 한쪽에서 값을 바꿀 때 다른 쪽에도 반영해야 합니다.

공통 단계에 없는 치수도 있습니다. 아이콘 단계는 12 · 16 · 20 · 26으로 두고, 특정 배지에 필요한 24.dp는 그 컴포넌트의 상수로 남겼습니다. 두 배지의 크기를 묶을 때 이 기준을 적용했습니다.

이름을 처음 붙인 이유는 기록에 없었습니다. 8월 23일에 돌아보며 Aurora는 보라 그라데이션과 별하늘 장식, Ledger는 종목과 숫자를 읽는 화면에 연결해 해석했습니다. ‘Shine by Yourself — 스스로 빛난다’라는 모토와도 어울렸습니다. 음악 프로젝트에도 Aurora라는 이름이 있어서 디자인 시스템은 전체 이름으로 부르고, 앱 식별자는 TwinkleTheme처럼 Twinkle*로 맞췄습니다.