CSS를 활용한 디자인 시스템
Source: Dev.to
Quick Summary
웹사이트에 디자인 시스템을 적용하려고 할 때, 인기 있는 프레임워크나 라이브러리를 사용하지 않고 순수 CSS만으로 진행한다면 여기서 필요한 정보를 얻을 수 있습니다.
Essentials
- Colors → 색상
- Typography → 타이포그래피
- Iconography → 아이콘
- Spaces → 공간
- Components → 컴포넌트
- Patterns / images / logos → 패턴 / 이미지 / 로고
이 연습을 위해 오픈‑소스 디자인 시스템을 사용할 수 있습니다. IBM의 Carbon은 잘 설계되고 문서화된 시스템 중 하나입니다.
Design Tokens
디자인 토큰은 디자인 시스템의 기반입니다. 색상, 간격, 타이포그래피와 같은 값들의 진실된 출처 역할을 합니다. 개요는 Material Design Tokens documentation을 참고하세요.
모든 것을 디자인 토큰 아래에 스코프하고 예외와 단일 사용을 최소화하는 것이 중요합니다; 그렇지 않으면 “디자인 시스템‑시스템”이 될 위험이 있습니다.
Defining Tokens in CSS
CSS에서는 디자인 토큰을 보통 :root 의사 클래스에 커스텀 프로퍼티(변수)로 정의합니다:
:root {
/* Colors */
--color-bg: #FFF;
--text-primary: #161616;
--text-secondary: #525252;
/* Typography */
--font-family-heading: "Helvetica Neue", Arial, sans-serif;
--font-weight-heading: 700;
--font-size-heading-1: 2.5rem;
--line-height-heading-1: 1.2;
--letter-spacing-heading-1: 0.02em;
/* Add other tokens (spacing, borders, etc.) here */
}토큰이 정의되면 스타일 전반에 걸쳐 허용되는 유일한 값이 됩니다. 일관성을 유지하려면 값을 하드코딩하는 것을 피해야 합니다.
Applying Tokens
필요한 곳 어디에서든 커스텀 프로퍼티를 참조합니다. 예를 들어, 일반적인 헤딩 스타일은 다음과 같이 작성할 수 있습니다:
/* Common properties of headings */
h1, h2, h3, h4 {
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
}
/* Specific typography for h1 */
h1 {
font-size: var(--font-size-heading-1);
line-height: var(--line-height-heading-1);
letter-spacing: var(--letter-spacing-heading-1);
}마찬가지로 다른 의미론적 요소(a, img, p 등)의 기본 스타일도 토큰을 사용해 설정합니다. 이 접근법은 추가 유틸리티 클래스 없이 대부분의 원자 컴포넌트를 디자인 시스템에 맞게 스타일링합니다.
Conclusion
이 기본 내용은 순수 CSS로 디자인 시스템을 구축하고 사용하는 방법을 보여줍니다. 향후 기사에서는 더 깊은 적용과 모범 사례를 다룰 예정입니다.