πŸŽ¨λΈŒλžœλ“œ 컬러 νŒ”λ ˆνŠΈ ꡬ성 κ°€μ΄λ“œ

업쒅·이미지별 λΈŒλžœλ“œ 메인·보쑰 색상 ꡬ성 방법 μ•ˆλ‚΄

λΈŒλžœλ“œ 컬러 ꡬ성 λΉ„μœ¨ 원칙

μ—­ν• λΉ„μ€‘μš©λ„
메인 컬러 (1색)60%λ°°κ²½, 헀더, μ£Όμš” UI
보쑰 컬러 (1~2색)30%μ„Ήμ…˜ λ°°κ²½, μΉ΄λ“œ, ν…Œλ‘λ¦¬
κ°•μ‘° 컬러 (1색)10%CTA λ²„νŠΌ, 링크, 뱃지

λΈŒλžœλ“œ 컬러 νŒ”λ ˆνŠΈλ₯Ό κ΅¬μ„±ν•˜λŠ” 방법

λΈŒλžœλ“œ μ»¬λŸ¬λŠ” λ‹¨μˆœνžˆ 예쁜 색을 κ³ λ₯΄λŠ” 것이 μ•„λ‹™λ‹ˆλ‹€. νƒ€κ²Ÿ 고객의 심리적 λ°˜μ‘, μ—…μ’… κ΄€λ‘€, κ²½μŸμ‚¬μ™€μ˜ 차별화, λ‹€μ–‘ν•œ λ§€μ²΄μ—μ„œμ˜ μž¬ν˜„ κ°€λŠ₯성을 λͺ¨λ‘ κ³ λ €ν•΄μ•Ό ν•©λ‹ˆλ‹€. 60-30-10 법칙은 메인 컬러 60%, 보쑰 컬러 30%, κ°•μ‘° 컬러 10% λΉ„μœ¨λ‘œ μ‚¬μš©ν•˜λŠ” νŒ”λ ˆνŠΈ ꡬ성 μ›μΉ™μž…λ‹ˆλ‹€.

메인 μ»¬λŸ¬λŠ” λΈŒλžœλ“œ μ •μ²΄μ„±μ˜ ν•΅μ‹¬μœΌλ‘œ, λ‘œκ³ Β·ν—€λ”Β·μ£Όμš” UI에 μΌκ΄€λ˜κ²Œ μ‚¬μš©ν•©λ‹ˆλ‹€. 보쑰 μ»¬λŸ¬λŠ” 메인 μ»¬λŸ¬μ™€ μ‘°ν™”λ₯Ό μ΄λ£¨λ©΄μ„œ μ‹œκ°μ  닀양성을 μ œκ³΅ν•©λ‹ˆλ‹€. κ°•μ‘° μ»¬λŸ¬λŠ” CTA λ²„νŠΌμ΄λ‚˜ μ€‘μš” 링크처럼 μ‚¬μš©μž 행동을 μœ λ„ν•˜λŠ” μš”μ†Œμ—λ§Œ μ œν•œμ μœΌλ‘œ μ‚¬μš©ν•΄μ•Ό νš¨κ³Όκ°€ κ·ΉλŒ€ν™”λ©λ‹ˆλ‹€.

컬러 νŒ”λ ˆνŠΈ ν™•μž₯ν•˜κΈ°

메인 컬러 1개λ₯Ό κ²°μ •ν–ˆλ‹€λ©΄, λͺ…도(tint)와 채도(shade)λ₯Ό μ‘°μ ˆν•΄ 5~9단계 μŠ€μΌ€μΌμ„ λ§Œλ“€μ–΄ λ””μžμΈ μ‹œμŠ€ν…œμ— ν™œμš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. Tailwind CSS의 컬러 μŠ€μΌ€μΌ λ°©μ‹μ²˜λŸΌ 50~900 λ‹¨κ³„λ‘œ μ²΄κ³„ν™”ν•˜λ©΄ κ°œλ°œμžμ™€μ˜ ν˜‘μ—…μ΄ μ‰¬μ›Œμ§‘λ‹ˆλ‹€.

자주 λ¬»λŠ” 질문

λΈŒλžœλ“œ μ»¬λŸ¬λŠ” λͺ‡ κ°œκ°€ μ λ‹Ήν•œκ°€μš”?

메인 1개, 보쑰 1~2개, κ°•μ‘° 1개둜 총 3~4색이 μ λ‹Ήν•©λ‹ˆλ‹€. 색이 λ§Žμ„μˆ˜λ‘ λΈŒλžœλ“œ 정체성이 흐렀질 수 μžˆμŠ΅λ‹ˆλ‹€.

μ–΄λ–€ 업쒅에 μ–΄λ–€ 색이 λ§žλ‚˜μš”?

κΈˆμœ΅Β·λ²•λ₯ μ€ νŒŒλž‘Β·λ„€μ΄λΉ„, ν—¬μŠ€μΌ€μ–΄λŠ” 초둝·청둝, μ‹ν’ˆμ€ λΉ¨κ°•Β·μ£Όν™©, λŸ­μ…”λ¦¬λŠ” κΈˆμƒ‰Β·κ²€μ •μ΄ μ „ν†΅μ μœΌλ‘œ μ‚¬μš©λ©λ‹ˆλ‹€.

λΈŒλžœλ“œ 컬러 κ²°μ •μ˜ κ°€μž₯ μ€‘μš”ν•œ 기쀀은?

νƒ€κ²Ÿ 고객 심리, μ—…μ’… κ΄€λ‘€, κ²½μŸμ‚¬ 차별화, λ‹€μ–‘ν•œ λ§€μ²΄μ—μ„œμ˜ μž¬ν˜„ κ°€λŠ₯μ„±(CMYKΒ·RGBΒ·Pantone)을 μ’…ν•© κ³ λ €ν•΄μ•Ό ν•©λ‹ˆλ‹€.