๐ŸŽจ ์ปฌ๋Ÿฌ ์กฐํ•ฉ ๋ฐฉ๋ฒ•๊ณผ ์ƒ‰์ฑ„ ์‹ฌ๋ฆฌ: ๋ธŒ๋žœ๋“œ ์ƒ‰์ƒ ์„ ํƒ์˜ ๋ชจ๋“  ๊ฒƒ

 



✨ ๋“ค์–ด๊ฐ€๋ฉฐ

“๋””์ž์ธ์€ ์ปฌ๋Ÿฌ๋กœ ๋งํ•œ๋‹ค”๋Š” ๋ง์ด ์žˆ์„ ์ •๋„๋กœ,

 ์ƒ‰์ƒ์€ ์‹œ๊ฐ์ ์ธ ์ฒซ์ธ์ƒ์„ ์ขŒ์šฐํ•˜๋Š” ๊ฐ€์žฅ ๊ฐ•๋ ฅํ•œ ์š”์†Œ์ž…๋‹ˆ๋‹ค. 

ํŠนํžˆ ๋ธŒ๋žœ๋”ฉ ๋””์ž์ธ์—์„œ์˜ ์ปฌ๋Ÿฌ๋Š” ๋‹จ์ˆœํ•œ ๋ฏธ์  ์„ ํƒ์ด ์•„๋‹Œ,

 ๊ฐ์ •·์‹ ๋ขฐ·๊ธฐ์–ต์— ์˜ํ–ฅ์„ ๋ฏธ์น˜๋Š” ์ „๋žต์ ์ธ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค.

์ด ๊ธ€์—์„œ๋Š” ๋ธŒ๋žœ๋“œ์˜ ์ƒ‰์ƒ์„ ์„ ํƒํ•  ๋•Œ ๋ฐ˜๋“œ์‹œ ์•Œ์•„์•ผ ํ•  ์ƒ‰์ฑ„ ์‹ฌ๋ฆฌ,

 ๊ทธ๋ฆฌ๊ณ  ์‹ค์ „ ์ปฌ๋Ÿฌ ์กฐํ•ฉ ๋ฐฉ๋ฒ•์„ ๊ตฌ์ฒด์ ์ธ ์˜ˆ์‹œ์™€ ํ•จ๊ป˜ ์†Œ๊ฐœํ•ฉ๋‹ˆ๋‹ค.




๐Ÿง  ์ƒ‰์ฑ„ ์‹ฌ๋ฆฌ๋ž€?

์ƒ‰์ƒ์ด ๊ฐ์ •์— ๋ฏธ์น˜๋Š” ์˜ํ–ฅ

์‚ฌ๋žŒ๋“ค์€ ์ƒ‰์„ ๋ณผ ๋•Œ ๋ฌด์˜์‹์ ์œผ๋กœ ํŠน์ •ํ•œ ๊ฐ์ •์„ ๋А๋‚๋‹ˆ๋‹ค. 

์ด๊ฒƒ์ด **์ƒ‰์ฑ„ ์‹ฌ๋ฆฌ(Color Psychology)**์ž…๋‹ˆ๋‹ค.

๋Œ€ํ‘œ์ ์ธ ์ƒ‰์ƒ๋ณ„ ๊ฐ์ • ์ด๋ฏธ์ง€:



์ƒ‰์ƒ์˜๋ฏธ์‚ฌ์šฉ ์˜ˆ์‹œ
๐Ÿ”ต ํŒŒ๋ž‘ (Blue)์‹ ๋ขฐ, ์•ˆ์ •, ์ „๋ฌธ์„ฑ์€ํ–‰, IT, ์˜๋ฃŒ ๋ธŒ๋žœ๋“œ
๐Ÿ”ด ๋นจ๊ฐ• (Red)์—ด์ •, ๊ฒฝ๊ณ , ๊ธด์žฅ๊ฐ์Šคํฌ์ธ , ํŒจ์…˜, ์„ธ์ผ ๋ฐฐ๋„ˆ
๐ŸŸข ์ดˆ๋ก (Green)์ž์—ฐ, ์„ฑ์žฅ, ๊ฑด๊ฐ•์นœํ™˜๊ฒฝ, ์œ ๊ธฐ๋†, ํ”ผํŠธ๋‹ˆ์Šค
๐ŸŸก ๋…ธ๋ž‘ (Yellow)ํ™œ๊ธฐ, ๋‚™์ฒœ, ์ฃผ์˜์–ด๋ฆฐ์ด ๋ธŒ๋žœ๋“œ, ๊ฒฝ๊ณ  ๋ผ๋ฒจ
๐ŸŸฃ ๋ณด๋ผ (Purple)๊ณ ๊ธ‰, ์‹ ๋น„, ์ฐฝ์˜๋ทฐํ‹ฐ, ์˜ˆ์ˆ , ๋ช…ํ’ˆ ๋ธŒ๋žœ๋“œ
⚪️ ํฐ์ƒ‰ (White)์ˆœ์ˆ˜, ๋ฏธ๋‹ˆ๋ฉ€, ๊นจ๋—ํ•จ์˜๋ฃŒ, ๋ฏธ์šฉ, ํ”„๋ฆฌ๋ฏธ์—„ ์ œํ’ˆ
⚫️ ๊ฒ€์ • (Black)๊ณ ๊ธ‰, ์„ธ๋ จ๋จ, ๊ฐ•๋ ฌํ•จํŒจ์…˜, ๋Ÿญ์…”๋ฆฌ, ํ…Œํฌ

๋ธŒ๋žœ๋“œ์˜ ๋ฉ”์‹œ์ง€์™€ ๊ฐ์ •์— ๊ฐ€์žฅ ์ž˜ ๋ถ€ํ•ฉํ•˜๋Š” ์ƒ‰์„ ์„ ํƒํ•ด์•ผ, ์†Œ๋น„์ž์™€์˜ ์ •์„œ์  ์—ฐ๊ฒฐ์ด ๋งŒ๋“ค์–ด์ง‘๋‹ˆ๋‹ค.




๐ŸŽฏ ๋ธŒ๋žœ๋“œ ์ปฌ๋Ÿฌ ์„ ํƒ ์‹œ ๊ณ ๋ ค์‚ฌํ•ญ


๋ธŒ๋žœ๋“œ์˜ ์ฃผ ์ปฌ๋Ÿฌ(Primary Color)๋Š” ๋‹จ์ง€ ์˜ˆ์œ ์ƒ‰์ด ์•„๋‹ˆ๋ผ, 

์•„๋ž˜์™€ ๊ฐ™์€ ์š”์†Œ๋ฅผ ๊ณ ๋ คํ•ด ๊ฒฐ์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค:


1. ๋ธŒ๋žœ๋“œ ํ‚ค์›Œ๋“œ์™€ ์ผ์น˜ํ•˜๋Š”๊ฐ€?

์•ž์„  1ํŽธ์—์„œ ์†Œ๊ฐœํ•œ ๋ธŒ๋žœ๋“œ ํ‚ค์›Œ๋“œ(์˜ˆ: ์นœ๊ทผํ•จ, ์ „๋ฌธ์„ฑ, ์—๋„ˆ์ง€ ๋“ฑ)์™€ 

์ปฌ๋Ÿฌ๊ฐ€ ์„œ๋กœ ์–ด๊ธ‹๋‚˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

์˜ˆ: “์ „๋ฌธ์ ์ธ ๊ธˆ์œต ์„œ๋น„์Šค” ๋ธŒ๋žœ๋“œ์— ๋…ธ๋ž‘์ด๋‚˜ ํ•‘ํฌ ๊ณ„์—ด์€ ๋ถ€์ ์ ˆํ•  ์ˆ˜ ์žˆ์Œ


2. ํƒ€๊ฒŸ ๊ณ ๊ฐ์ธต๊ณผ ์ž˜ ๋งž๋Š”๊ฐ€?

  • 10๋Œ€ ๋Œ€์ƒ ๋ธŒ๋žœ๋“œ → ๋ฐ๊ณ  ๋Œ€์กฐ์ ์ธ ์ปฌ๋Ÿฌ
  • 30~40๋Œ€ ๋Œ€์ƒ → ํ†ค ๋‹ค์šด๋œ ์‹ ๋ขฐ๊ฐ ์žˆ๋Š” ์ปฌ๋Ÿฌ
  • ๊ณ ๊ธ‰ ๋ธŒ๋žœ๋“œ → ๊ฒ€์ •, ๋ณด๋ผ, ๊ณจ๋“œ ๋“ฑ ๊ณ ์ฑ„๋„ ๋Œ€๋น„ ์กฐํ•ฉ


3. ๊ฒฝ์Ÿ์‚ฌ์™€ ์ฐจ๋ณ„ํ™”๋˜๋Š”๊ฐ€?


์‹œ์žฅ ๋‚ด ๊ฒฝ์Ÿ ๋ธŒ๋žœ๋“œ๊ฐ€ ์–ด๋–ค ์ƒ‰์ƒ์„ ์ฃผ๋กœ ์‚ฌ์šฉํ•˜๋Š”์ง€ ์กฐ์‚ฌํ•œ ๋’ค, 

๋„ˆ๋ฌด ๋น„์Šทํ•˜์ง€ ์•Š๋„๋ก ์กฐ์ •ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.




๐ŸŽจ ์‹ค์ „ ์ปฌ๋Ÿฌ ์กฐํ•ฉ ๋ฐฉ๋ฒ•


๋ธŒ๋žœ๋“œ๋Š” ๋ณดํ†ต ๊ธฐ๋ณธ์ƒ‰ + ๋ณด์กฐ์ƒ‰ + ๊ฐ•์กฐ์ƒ‰์œผ๋กœ ๊ตฌ์„ฑ๋œ ์ปฌ๋Ÿฌ ์‹œ์Šคํ…œ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
์ปฌ๋Ÿฌ ์กฐํ•ฉ์—๋Š” ์•„๋ž˜์™€ ๊ฐ™์€ ๊ธฐ๋ณธ ์›๋ฆฌ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค:


1. ์ƒ‰์ƒํ™˜ ๊ธฐ๋ฐ˜ ์กฐํ•ฉ๋ฒ•


๐ŸŽจ ์œ ์‚ฌ ์ƒ‰ ์กฐํ•ฉ (Analogous)

  • ์„œ๋กœ ์ธ์ ‘ํ•œ ์ƒ‰์ƒ ์‚ฌ์šฉ → ์•ˆ์ •๊ฐ, ํ†ต์ผ์„ฑ
  • ์˜ˆ: ๋ธ”๋ฃจ + ๋ธ”๋ฃจ๊ทธ๋ฆฐ + ๊ทธ๋ฆฐ


๐ŸŒˆ ๋ณด์ƒ‰ ์กฐํ•ฉ (Complementary)

  • ๋ฐ˜๋Œ€์ชฝ ์ƒ‰์ƒ ์‚ฌ์šฉ → ๊ฐ•ํ•œ ๋Œ€๋น„, ์—ญ๋™์  ๋А๋‚Œ
  • ์˜ˆ: ๋ธ”๋ฃจ + ์˜ค๋ Œ์ง€ / ๋ ˆ๋“œ + ๊ทธ๋ฆฐ


๐Ÿงฉ ์‚ผ๊ฐ ์กฐํ•ฉ (Triadic)

  • ์ƒ‰์ƒํ™˜์—์„œ 120๋„ ๊ฐ„๊ฒฉ → ๊ท ํ˜• ์žกํžŒ ์‹œ๊ฐ ์ž๊ทน
  • ์˜ˆ: ๋ ˆ๋“œ + ๋ธ”๋ฃจ + ์˜๋กœ์šฐ




2. ์‹ค์ „ ์ปฌ๋Ÿฌ ์‹œ์Šคํ…œ ๊ตฌ์„ฑ ์˜ˆ์‹œ


Case 1: ๋ทฐํ‹ฐ ๋ธŒ๋žœ๋“œ

  • ๊ธฐ๋ณธ์ƒ‰: ์—ฐํ•œ ๋กœ์ฆˆํ•‘ํฌ
  • ๋ณด์กฐ์ƒ‰: ์ง„ํ•œ ์™€์ธ์ƒ‰
  • ๊ฐ•์กฐ์ƒ‰: ๊ณจ๋“œ


Case 2: ์Šคํƒ€ํŠธ์—… SaaS ๊ธฐ์—…

  • ๊ธฐ๋ณธ์ƒ‰: ๋„ค์ด๋น„
  • ๋ณด์กฐ์ƒ‰: ๋ฐ์€ ๋ธ”๋ฃจ
  • ๊ฐ•์กฐ์ƒ‰: ๋ฏผํŠธ์ƒ‰ (๋ฒ„ํŠผ์šฉ)


Case 3: ์นœํ™˜๊ฒฝ ์‡ผํ•‘๋ชฐ

  • ๊ธฐ๋ณธ์ƒ‰: ์˜ฌ๋ฆฌ๋ธŒ ๊ทธ๋ฆฐ
  • ๋ณด์กฐ์ƒ‰: ๋ฒ ์ด์ง€
  • ๊ฐ•์กฐ์ƒ‰: ์ง™์€ ๊ฐˆ์ƒ‰




3. ๋ฐฐ๊ฒฝ & ํ…์ŠคํŠธ ๋Œ€๋น„ ํ™•์ธ


์•„๋ฌด๋ฆฌ ์ข‹์€ ์ƒ‰ ์กฐํ•ฉ์ด๋ผ๋„, ํ…์ŠคํŠธ๊ฐ€ ์ž˜ ์•ˆ ๋ณด์ด๋ฉด ๋ฌด์šฉ์ง€๋ฌผ์ž…๋‹ˆ๋‹ค.

  • ๋ช…๋„ ์ฐจ์ด๊ฐ€ ์ถฉ๋ถ„ํ•œ ๋ฐฐ๊ฒฝ/ํ…์ŠคํŠธ ์กฐํ•ฉ ์‚ฌ์šฉ
  • ์›น ์ ‘๊ทผ์„ฑ ๊ธฐ์ค€(WCAG 2.1)์—์„œ ์ตœ์†Œ ๋Œ€๋น„ ๋น„์œจ์€ 4.5:1 ๊ถŒ์žฅ
  • ๊ฒ€์ •(#000000) ํ…์ŠคํŠธ + ํฐ์ƒ‰(#FFFFFF) ๋ฐฐ๊ฒฝ์€ ๊ฐ€์žฅ ์•ˆ์ „ํ•จ
  • ๊ฐ•์กฐ ํ…์ŠคํŠธ๋Š” ์ปฌ๋Ÿฌ๋ณด๋‹จ ๊ตต๊ธฐ(Bold)๋‚˜ ๋ฐ‘์ค„์„ ํ•จ๊ป˜ ์‚ฌ์šฉ

✅ ๋„๊ตฌ ์ถ”์ฒœ: Coolors.coColor HuntAdobe Color




๐Ÿง  ์ปฌ๋Ÿฌ ๊ฐ€์ด๋“œ ๋งŒ๋“ค๊ธฐ ๊ฟ€ํŒ


์ปฌ๋Ÿฌ ์‹œ์Šคํ…œ์„ ์ •ํ–ˆ๋‹ค๋ฉด, ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ ๋ฌธ์„œ์— ํฌํ•จ์‹œ์ผœ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๊ตฌ๋ถ„๋‚ด์šฉ
Primary Color๋ธŒ๋žœ๋“œ์˜ ์ฃผ์ƒ‰์ƒ (๋กœ๊ณ , ํƒ€์ดํ‹€์— ์‚ฌ์šฉ)
Secondary ColorUI ์š”์†Œ, ๋ฐฐ๊ฒฝ, ๊ตฌ๋ถ„์„  ๋“ฑ์— ํ™œ์šฉ
Accent Color๋ฒ„ํŠผ, CTA, ๊ฐ•์กฐ ํ…์ŠคํŠธ์— ์‚ฌ์šฉ
Neutral ColorsํšŒ์ƒ‰/ํฐ์ƒ‰/๊ฒ€์ • ๊ณ„์—ด - ํ…์ŠคํŠธ๋‚˜ ๋ฐฐ๊ฒฝ์— ์‚ฌ์šฉ

๋ชจ๋“  ์ƒ‰์ƒ์€ HEX / RGB / CMYK ๊ฐ’์„ ํฌํ•จํ•˜์—ฌ ๋ฌธ์„œํ™”ํ•˜๊ณ , 

์ž˜๋ชป๋œ ์กฐํ•ฉ ์˜ˆ์‹œ๋„ ํ•จ๊ป˜ ๋„ฃ๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.




✅ ๋งˆ๋ฌด๋ฆฌ: ์ƒ‰์ƒ์€ ๋ธŒ๋žœ๋“œ์˜ ๊ฐ์ • ์–ธ์–ด๋‹ค


์ปฌ๋Ÿฌ๋Š” ๋ธŒ๋žœ๋“œ์˜ ๊ฐ์ •, ์ •์ฒด์„ฑ, ๋ถ„์œ„๊ธฐ๋ฅผ ํ•œ๋ˆˆ์— ์ „๋‹ฌํ•˜๋Š” ๋น„์–ธ์–ด์  ์–ธ์–ด์ž…๋‹ˆ๋‹ค.
๋ฌด์ž‘์ • ‘์˜ˆ์œ ์ƒ‰’์ด ์•„๋‹Œ, ๋ชฉํ‘œ ๊ณ ๊ฐ๊ณผ์˜ ์—ฐ๊ฒฐ๊ณ ๋ฆฌ๋ฅผ ๊ณ ๋ คํ•œ ์ƒ‰์ƒ ์ „๋žต์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

๋‹ค์Œ ๋ธŒ๋žœ๋”ฉ ์ž‘์—…์—์„œ ์–ด๋–ค ์ƒ‰์„ ์“ธ์ง€ ๊ณ ๋ฏผ๋œ๋‹ค๋ฉด, ๋ธŒ๋žœ๋“œ ํ‚ค์›Œ๋“œ์™€ ํƒ€๊ฒŸ ๊ณ ๊ฐ์˜ ๊ฐ์ • ํ๋ฆ„๋ถ€ํ„ฐ ๋จผ์ € ๋– ์˜ฌ๋ ค ๋ณด์„ธ์š”.

๋Œ“๊ธ€

์ด ๋ธ”๋กœ๊ทธ์˜ ์ธ๊ธฐ ๊ฒŒ์‹œ๋ฌผ

๐ŸŽฌ ๋„์„œ๊ด€ ์† ์ž‘์€ ์˜ํ™”๊ด€: ๋ฌด๋ฃŒ ์˜ํ™” ๋ณด๋Š” ๊ฟ€ํŒ!

⛽ ๊ธฐ๋ฆ„๊ฐ’ ์•„๋ผ๋Š” ์šด์ „์Šต๊ด€๊ณผ ์ฃผ์œ ๋น„ ์ ˆ์•ฝ ์•ฑ TOP 5

์›” 1๋งŒ์›๋Œ€ ํœด๋Œ€ํฐ ์š”๊ธˆ์ œ ๋น„๊ต ์ด์ •๋ฆฌ