값을 이름 붙이고, 필요한 자리에서 계산하기
CSS 변수는 디자인 토큰을 공유하고 calc()는 고정 여백과 유동 폭을 한 선언 안에서 맞춘다.
| 설계 항목 | 변수로 둘 값 | calc로 계산할 값 | 검토 기준 |
|---|---|---|---|
| Color | 브랜드와 상태 색 | 색 계산보다 토큰 참조 | 의미별 색 이름이 있는가 |
| Spacing | 반복 간격 단위 | container 폭에서 여백 제외 | 간격이 컴포넌트마다 일관적인가 |
| Size | sidebar, header 높이 | 남은 화면 높이 계산 | 고정 크기가 모바일을 깨지 않는가 |
| Theme | light/dark 토큰 | 동일 수식에 다른 값 주입 | 테마 전환 시 모든 값이 바뀌는가 |
| Component | 지역 변수로 변형 관리 | 부모 폭 기준 계산 | 전역 토큰 오염이 없는가 |
값에 이름을 붙이면 의도가 남고, calc로 계산하면 화면 폭 변화에도 같은 의도를 유지할 수 있다.