πŸ“ ν•˜λ‚˜μ˜ 도ꡬ ν‚€νŠΈλ‘œ
λͺ¨λ“  섀계 μž‘μ—…

UI 색상 μ‹œμŠ€ν…œ

단일 μ‹œλ“œ μƒ‰μƒμœΌλ‘œ μ™„μ „ν•œ λ””μžμΈ 토큰 νŒ”λ ˆνŠΈλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. Tailwind, CSS λ˜λŠ” SCSS둜 λ‚΄λ³΄λƒ…λ‹ˆλ‹€.

English δΈ­ζ–‡ ζ—₯本θͺž ν•œκ΅­μ–΄ EspaΓ±ol PortuguΓͺs FranΓ§ais Deutsch Ψ§Ω„ΨΉΨ±Ψ¨ΩŠΨ© ΰ€Ήΰ€Ώΰ€¨ΰ₯ΰ€¦ΰ₯€ ΰΉ„ΰΈ—ΰΈ’ TiαΊΏng Việt Bahasa Русский

πŸ“ UI 색상 μ‹œμŠ€ν…œ

UI 색상 μ‹œμŠ€ν…œ κ°€μ΄λ“œ

UI 색상 μ‹œμŠ€ν…œμ€ 단일 μ‹œλ“œ μƒ‰μƒμœΌλ‘œ κ΅¬μ„±λœ 색상 λ³€ν˜• μ„ΈνŠΈμž…λ‹ˆλ‹€. λ””μžμΈ 토큰, λ²„νŠΌ, λ°°κ²½ 및 ν…μŠ€νŠΈ 색상에 λŒ€ν•΄ μΌκ΄€λœ λͺ…μ•” λΉ„μœ¨μ„ μ œκ³΅ν•©λ‹ˆλ‹€.

μ‹œλ“œ 색상을 μ„ νƒν•˜κ³  μŠ€νƒ€μΌ(Tailwind λ˜λŠ” Material)을 μ„ νƒν•˜μ„Έμš”. 이 λ„κ΅¬λŠ” 밝은 색상(50)μ—μ„œ μ–΄λ‘μš΄ 색상(900)κΉŒμ§€ μ™„μ „ν•œ 10단계 νŒ”λ ˆνŠΈλ₯Ό μƒμ„±ν•˜λ―€λ‘œ λ””μžμΈ μ‹œμŠ€ν…œμ— μ ν•©ν•©λ‹ˆλ‹€.

Pro Tips

Frequently Asked Questions

Q: λ””μžμΈ ν† ν°μ΄λž€ λ¬΄μ—‡μž…λ‹ˆκΉŒ?
λ””μžμΈ ν† ν°μ΄λž€ λ¬΄μ—‡μž…λ‹ˆκΉŒ? λ””μžμΈ 토큰은 λ””μžμΈ μ‹œμŠ€ν…œ μ „μ²΄μ—μ„œ μΌκ΄€λ˜κ²Œ μ‚¬μš©λ˜λŠ” 색상과 같은 λ””μžμΈ 속성을 μ €μž₯ν•˜λŠ” λͺ…λͺ…λœ κ°’μž…λ‹ˆλ‹€.
Q: μ™œ 10가지 μ‰μ΄λ“œκ°€ ν•„μš”ν•œκ°€μš”?
μ™œ 10가지 μ‰μ΄λ“œκ°€ ν•„μš”ν•œκ°€μš”? UI μš”μ†Œλ§ˆλ‹€ λ‹€λ₯Έ λŒ€λΉ„ μˆ˜μ€€μ΄ ν•„μš”ν•©λ‹ˆλ‹€. 10단계 μŠ€μΌ€μΌμ€ λ°°κ²½, ν…Œλ‘λ¦¬, ν˜Έλ²„ μƒνƒœ 및 ν…μŠ€νŠΈμ— μœ μ—°μ„±μ„ μ œκ³΅ν•©λ‹ˆλ‹€.
Q: λ””μžμΈ 토큰 νŒ”λ ˆνŠΈλž€ λ¬΄μ—‡μΈκ°€μš”?
λ””μžμΈ 토큰 νŒ”λ ˆνŠΈλž€ λ¬΄μ—‡μΈκ°€μš”? λ””μžμΈ 토큰 νŒ”λ ˆνŠΈλŠ” 단일 λΈŒλžœλ“œ μƒ‰μƒμ—μ„œ μƒμ„±λœ 체계적인 색상 λ³€μˆ˜(κΈ°λ³Έ, 보쑰, ν‘œλ©΄, ν…μŠ€νŠΈ) μ„ΈνŠΈμž…λ‹ˆλ‹€. 전체 UIμ—μ„œ 일관성을 보μž₯ν•©λ‹ˆλ‹€.
Q: Tailwindκ°€ μ•„λ‹Œ λ‹€λ₯Έ λ””μžμΈ μ‹œμŠ€ν…œμœΌλ‘œ 내보낼 수 μžˆλ‚˜μš”?
Tailwindκ°€ μ•„λ‹Œ λ‹€λ₯Έ λ””μžμΈ μ‹œμŠ€ν…œμœΌλ‘œ 내보낼 수 μžˆλ‚˜μš”? 예, λ„κ΅¬λŠ” CSS 맞좀 속성, SCSS λ³€μˆ˜, Tailwind ꡬ성 ν˜•μ‹μœΌλ‘œ λ‚΄λ³΄λƒ…λ‹ˆλ‹€. μŠ€νƒκ³Ό μΌμΉ˜ν•˜λŠ” ν˜•μ‹μ„ λ³΅μ‚¬ν•©λ‹ˆλ‹€.
Q: 이 λ„κ΅¬λ‘œ 닀크 λͺ¨λ“œλ₯Ό μ–΄λ–»κ²Œ μ²˜λ¦¬ν•©λ‹ˆκΉŒ?
이 λ„κ΅¬λ‘œ 닀크 λͺ¨λ“œλ₯Ό μ–΄λ–»κ²Œ μ²˜λ¦¬ν•©λ‹ˆκΉŒ? λ¨Όμ € μ‘°λͺ… λͺ¨λ“œ νŒ”λ ˆνŠΈλ₯Ό μƒμ„±ν•œ λ‹€μŒ μ–΄λ‘μš΄ λͺ¨λ“œμ— λŒ€ν•΄ 채도 및 밝기 값을 쀄인 λ™μΌν•œ μ‹œλ“œ 색상을 μ‚¬μš©ν•©λ‹ˆλ‹€. λ§Žμ€ λ””μžμΈ μ‹œμŠ€ν…œμ€ ν‘œλ©΄κ³Ό ν…μŠ€νŠΈ 색상을 λ°˜μ „μ‹œν‚΅λ‹ˆλ‹€.