작은 팀을 위한 주말 디자인 시스템 만들기
1. 최소 구성부터 정하기
작은 팀의 출발점은 반복되는 디자인 결정을 한곳에 모으는 일입니다.
- 디자인 토큰: 색상·간격·모서리 반경·글자 크기 등 공통으로 사용할 값을 정의합니다.
- 타이포그래피와 간격 스케일: 제목·본문·라벨의 크기와 두께, 화면의 여백 규칙을 정합니다.
- 간격은 4·8·16·24·32·48·64px처럼 제한된 값으로 구성해 선택을 줄입니다.
- 핵심 컴포넌트: 자주 사용하는 버튼·폼·카드부터 같은 기준을 적용합니다.
2. CSS 변수로 연결하기
`tokens.css`에 값을 모으고, 컴포넌트가 그 값을 참조하도록 만듭니다.
- 원시 토큰은 `--blue-500`처럼 실제 값을 정의합니다.
- 역할별 토큰은 `--color-primary`처럼 사용 목적을 정하고 원시 토큰을 참조합니다.
- 이 둘을 분리하면 다크 모드를 추가할 때 역할별 연결을 바꾸는 방식으로 대응할 수 있습니다.
- 초기에는 CSS 파일로 시작하고, 여러 플랫폼에 토큰을 배포할 필요가 생기면 도구 확장을 검토합니다.
3. 버튼 → 폼 → 카드 순서로 만들기
앞서 정한 기준을 다음 컴포넌트에 이어 적용합니다.
- 버튼: 기본·호버·포커스·비활성화·로딩 상태를 정리하며 색상, 간격, 모서리와 포커스 표시의 기준을 잡습니다.
- 폼: 입력 필드·라벨·오류·도움말에 같은 기준을 적용해 입력 경험을 일관되게 만듭니다.
- 카드: 버튼과 폼을 담는 컨테이너를 만들며 배경색과 그림자 규칙을 정합니다.
4. 주말 작업을 참조 페이지로 마무리하기
실제 CSS를 불러오는 `design-system.html`을 만들면 구현 결과가 곧 문서가 됩니다.
- 토요일: 오전에는 토큰과 스케일을 정의하고, 오후에는 버튼의 상태를 구현합니다.
- 일요일: 오전에는 폼, 오후에는 카드와 참조 페이지를 만듭니다.
- 색상 견본, 실제 크기의 글자, 간격 스케일, 컴포넌트 상태를 한곳에 보여줍니다.
- 참조 페이지는 다음 화면을 만들 때 이미 정한 값을 확인하고 재사용하는 기준으로 활용합니다.
