๐จ ์ปฌ๋ฌ ์กฐํฉ ๋ฐฉ๋ฒ๊ณผ ์์ฑ ์ฌ๋ฆฌ: ๋ธ๋๋ ์์ ์ ํ์ ๋ชจ๋ ๊ฒ

✨ ๋ค์ด๊ฐ๋ฉฐ
“๋์์ธ์ ์ปฌ๋ฌ๋ก ๋งํ๋ค”๋ ๋ง์ด ์์ ์ ๋๋ก,
์์์ ์๊ฐ์ ์ธ ์ฒซ์ธ์์ ์ข์ฐํ๋ ๊ฐ์ฅ ๊ฐ๋ ฅํ ์์์ ๋๋ค.
ํนํ ๋ธ๋๋ฉ ๋์์ธ์์์ ์ปฌ๋ฌ๋ ๋จ์ํ ๋ฏธ์ ์ ํ์ด ์๋,
๊ฐ์ ·์ ๋ขฐ·๊ธฐ์ต์ ์ํฅ์ ๋ฏธ์น๋ ์ ๋ต์ ์ธ ๋๊ตฌ์ ๋๋ค.
์ด ๊ธ์์๋ ๋ธ๋๋์ ์์์ ์ ํํ ๋ ๋ฐ๋์ ์์์ผ ํ ์์ฑ ์ฌ๋ฆฌ,
๊ทธ๋ฆฌ๊ณ ์ค์ ์ปฌ๋ฌ ์กฐํฉ ๋ฐฉ๋ฒ์ ๊ตฌ์ฒด์ ์ธ ์์์ ํจ๊ป ์๊ฐํฉ๋๋ค.
๐ง ์์ฑ ์ฌ๋ฆฌ๋?
์์์ด ๊ฐ์ ์ ๋ฏธ์น๋ ์ํฅ
์ฌ๋๋ค์ ์์ ๋ณผ ๋ ๋ฌด์์์ ์ผ๋ก ํน์ ํ ๊ฐ์ ์ ๋๋๋๋ค.
์ด๊ฒ์ด **์์ฑ ์ฌ๋ฆฌ(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.co, Color Hunt, Adobe Color
๐ง ์ปฌ๋ฌ ๊ฐ์ด๋ ๋ง๋ค๊ธฐ ๊ฟํ
์ปฌ๋ฌ ์์คํ ์ ์ ํ๋ค๋ฉด, ์คํ์ผ ๊ฐ์ด๋ ๋ฌธ์์ ํฌํจ์์ผ์ผ ํฉ๋๋ค.
Primary Color | ๋ธ๋๋์ ์ฃผ์์ (๋ก๊ณ , ํ์ดํ์ ์ฌ์ฉ) |
Secondary Color | UI ์์, ๋ฐฐ๊ฒฝ, ๊ตฌ๋ถ์ ๋ฑ์ ํ์ฉ |
Accent Color | ๋ฒํผ, CTA, ๊ฐ์กฐ ํ ์คํธ์ ์ฌ์ฉ |
Neutral Colors | ํ์/ํฐ์/๊ฒ์ ๊ณ์ด - ํ ์คํธ๋ ๋ฐฐ๊ฒฝ์ ์ฌ์ฉ |
๋ชจ๋ ์์์ HEX / RGB / CMYK ๊ฐ์ ํฌํจํ์ฌ ๋ฌธ์ํํ๊ณ ,
์๋ชป๋ ์กฐํฉ ์์๋ ํจ๊ป ๋ฃ๋ ๊ฒ์ด ์ข์ต๋๋ค.
✅ ๋ง๋ฌด๋ฆฌ: ์์์ ๋ธ๋๋์ ๊ฐ์ ์ธ์ด๋ค
์ปฌ๋ฌ๋ ๋ธ๋๋์ ๊ฐ์ , ์ ์ฒด์ฑ, ๋ถ์๊ธฐ๋ฅผ ํ๋์ ์ ๋ฌํ๋ ๋น์ธ์ด์ ์ธ์ด์
๋๋ค.
๋ฌด์์ ‘์์ ์’์ด ์๋, ๋ชฉํ ๊ณ ๊ฐ๊ณผ์ ์ฐ๊ฒฐ๊ณ ๋ฆฌ๋ฅผ ๊ณ ๋ คํ ์์ ์ ๋ต์ด ํ์ํฉ๋๋ค.
๋ค์ ๋ธ๋๋ฉ ์์ ์์ ์ด๋ค ์์ ์ธ์ง ๊ณ ๋ฏผ๋๋ค๋ฉด, ๋ธ๋๋ ํค์๋์ ํ๊ฒ ๊ณ ๊ฐ์ ๊ฐ์ ํ๋ฆ๋ถํฐ ๋จผ์ ๋ ์ฌ๋ ค ๋ณด์ธ์.
๋๊ธ
๋๊ธ ์ฐ๊ธฐ
์์ค,ํ๋ณด์ฑ ๋๊ธ์ ์ญ์ ๋ฉ๋๋ค