파운데이션

결정 모델

이 시스템은 원시 값 → 시맨틱 역할 → 컴포넌트 규약 한 방향으로 써요. 원시 값은 재료가 되고, 시맨틱 역할은 테마가 바뀌어도 지켜야 할 의도를 담고, 컴포넌트는 그 역할을 재사용할 수 있는 동작으로 만들어요. 제품 UI라면 보통 시맨틱이나 컴포넌트 단계부터 시작하면 돼요.

1. 화면에 필요한 관계나 의미를 먼저 정하세요.
2. 여기에 맞는 시맨틱 토큰이나 글자·간격 레시피를 고르세요.
3. 컴포넌트 규약을 그대로 쓰고, 의도적으로 예외를 둘 때만 --tr-* 훅을 덮어쓰세요.

핵심 원칙

• 값보다 의미 먼저: 팔레트 단계 대신 surface, text, primary 같은 상태 역할을 골라요.
• 장식보다 위계 먼저: 색으로 강조하기 전에 글자 역할과 간격으로 읽는 순서를 잡아요.
• 간격으로 관계 드러내기: 좁은 간격은 세부 정보를 묶고, 넓은 간격은 컴포넌트·작업·섹션을 나눠요.
• 동작은 컴포넌트가 담당: 파운데이션은 공통 결정을 제공하고, 상호작용과 접근성은 컴포넌트가 맡아요.

실무 화면에 적용하기

네 가지 학습 경로

1. 핵심 시각 요소: 색상과 테마, 타이포그래피, 간격
2. 레이아웃과 상호작용: 반응형 레이아웃, 형태와 경계, 컨트롤과 상태
3. 깊이와 동작: 레이어와 고도, 모션, 접근성
4. 구현과 정체성: Tailwind 참고를 사용한 뒤 승인된 로고와 앱 아이콘을 선택하세요.