Web Design Pro (Modern Design Engineering)

웹 디자인의 심미성을 넘어, 시스템 설계, 성능 최적화, 접근성, 그리고 게임 특화 UX를 통합한 전문가 레벨의 기술셋.

1. Design Systems & Tokens (디자인 시스템 & 토큰)

디자인 결정을 데이터로 관리하여 디자인과 코드 간의 간극을 없앤다.

토큰 계층 구조

• Primitive Tokens (Raw): 기초적인 값 (예: blue-500: #3B82F6)
• Semantic Tokens (Meaning): 역할과 맥락 부여 (예: action-primary: var(--blue-500))
• Component Tokens (Specific): 특정 컴포넌트 전용 (예: btn-bg: var(--action-primary))

구현 가이드

• CSS Custom Properties: 브라우저 네이티브 토큰으로 실시간 테마 변경 가능.
• Tokens Studio (Figma): 디자인 소스에서 직접 JSON/CSS 추출.
• 자동화: 토큰 변경 시 Style Dictionary 등을 통해 빌드 타임에 각 플랫폼에 배포.