# 🎨 [LEVEL 9] μŠ€νƒ€μΌ κ±°λ²„λ„ŒμŠ€: λ””μžμΈ μ‹œμŠ€ν…œ κ΅¬μΆ•ν•˜κΈ° ## 1. CSS-in-JS vs Utility-First - `Styled-components`: μ»΄ν¬λ„ŒνŠΈ μ€‘μ‹¬μ˜ μŠ€νƒ€μΌλ§. 가독성이 μ’‹λ‹€. - `Tailwind CSS`: 클래슀 기반의 λΉ λ₯Έ 개발. 생산성이 λ―Έμ³€λ‹€. - **μ€‘κΈ‰μ˜ 선택**: νŒ€μ˜ 규λͺ¨μ™€ ν”„λ‘œμ νŠΈ 성격에 λ§žλŠ” 도ꡬλ₯Ό μ œμ•ˆν•  쀄 μ•Œμ•„μ•Ό ν•œλ‹€. ## 2. Design Tokens: λ§ˆλ²•μ˜ λ³€μˆ˜ - `#FF5733` 이라고 직접 μ“°μ§€ 마라. - `theme.primary` 라고 λ³€μˆ˜(Token)λ₯Ό 써라. - 회μž₯λ‹˜μ΄ "빨간색 λ‹€ νŒŒλž€μƒ‰μœΌλ‘œ λ°”κΏ”!" 라고 ν•  λ•Œ 1초 λ§Œμ— 끝낼 수 μžˆλ‹€. ## 3. λ°˜μ‘ν˜• λ””μžμΈ (Responsive) - λͺ¨λ°”일 μš°μ„ (Mobile First)으둜 μƒκ°ν•˜λΌ. - μž‘μ€ ν™”λ©΄μ—μ„œ λ¨Όμ € 짜고 큰 ν™”λ©΄μœΌλ‘œ λ„“ν˜€κ°€λŠ” 것이 λ…Όλ¦¬μ μœΌλ‘œ 훨씬 κ°„κ²°ν•˜λ‹€.