Design-Token

Design Token은 색상, 타이포그래피, 간격, 그림자 같은 디자인 결정을 이름 있는 변수로 추상화한 것이다. 컴포넌트가 직접 헥스코드를 박지 않고 토큰을 참조하면, 브랜드 변경이나 다크모드 구현이 토큰 수정 하나로 전체에 반영된다. 토큰 계층 구조, 실제 구현 방법, 그리고 Design System과의 관계를 설명한다.

타이포그래피는 텍스트가 어떻게 보이는지를 결정한다. 폰트 크기, 행간, 자간, 굵기를 체계 없이 쓰면 화면마다 느낌이 달라지고 위계가 흐려진다. 타이포그래피 스케일로 크기 체계를 정하고, 가독성 좋은 line-height를 설정하고, 웹에서 반응형 타이포그래피를 구현하는 방법을 설명한다.

간격이 일관되지 않으면 화면이 어수선해 보인다. 8pt 그리드 시스템은 모든 간격을 8의 배수로 정의해 시각적 일관성을 만든다. 간격이 정보 구조를 표현하는 방식, 컴포넌트 내부와 외부 간격의 차이, 그리고 레이아웃 컴포넌트로 간격을 관리하는 방법을 설명한다.