π₯ UI λμμΈ κ°μ΄λ λ§λ€κΈ° #2._Color
Posting : 07.25.2022
Designer : κΉμΈμ
#UXUI #λμμΈκ°μ΄λ #color
#2. UI λμμΈ κ°μ΄λ λ§λ€κΈ°_Color λ€μ΄λ°κ³Ό μ»¬λ¬ μμ€ν μ νκΈ°
[BX λμμ΄λκ³Ό ν¨κ» λΈλλ 컬λ¬λ₯Ό μ¬μ‘°μ + λΈλλμ κ±Έλ§λ μ»¬λ¬ μμ€ν μ¬μ‘°μ ]
컬λ¬λ μ νμ λΈλλκ²½νκ³Ό μΌκ΄λ μ¬μ©μ±μλ ν° μν₯μ λ―ΈμΉκΈ° λλ¬Έμ μμ£Ό μ€μν κ·μΉ μμμ΄λ€. μ»¬λ¬ κ°μ΄λκ° μ 리λμ§ μμ κ²½μ°, λμμ΄λκ° λ§μμλ‘ μν©μ λ°λ₯Έ μ»¬λ¬ hexκ°κ³Ό ν¬λͺ λκ° λ¬λΌμ§κ² λλ€. κ²°κ΅, UI μ€νμΌμ΄ λ¬λΌμ§κ³ μ¬μ©μμ μΌκ΄λ κ²½νμ κΉ¨μ§ κ²μ΄λ€. μ΄λ° μν©μμ κ°λ°μλ νμ μ΄ μ΄λ ΅λ€κ³ λλ κ²μ΄κ³ , μ μ§λ³΄μλ κ²°κ³Όμ μΌλ‘ μ΄λ €μμ§λ€. λΏλ§ μλλΌ μ¬μ©μ λν μ»¬λ¬ μΈμ§κ° μ΄λ €μμ Έ μ¬μ©μ±μ΄ λ¨μ΄μ§κ²λλ κ²°κ³Όλ₯Ό λΆλ¬μ€κ² λλ€.
μμ κ°μ μ΄μ λ‘ λμμΈ κ°μ΄λλ₯Ό μμ νλ©΄μ λλ²μ§Έλ‘ μ 리νκ³ μ νλ κ²μ΄ 컬λ¬μλ€.
μν΄(νλ‘λνΈ μλΉμ€) ν λ΄μμλ νλ‘λνΈμ ννμ΄μ§ 리λ΄μΌμ μλκ³ μλ μν©μ΄λΌ μ΄μμ΄λ©΄ 리λ΄μΌμ μ§ννλ©΄μ 컬λ¬λ₯Ό ν¨κ» μ‘λ κ²μ΄ μ’κ² λ€κ³ κ²°λ‘ μ λ΄λ Έλ€.
01. λΈλλ 컬λ¬μ λ§λ UI μ»¬λ¬ μ¬μ‘°μ
κΈ°μ‘΄ νλ‘λνΈ μλΉμ€μμλ λΈλλ 컬λ¬(400 β #6FA4FF)λ₯Ό UI 컬λ¬μμ primary colorλ‘ μ¬μ©νκ³ μμλ€. λΈλλ 무λμ ν¨κ» κ²°μ λ§μΆκΈ° μν΄μλ white background, CTA λ²νΌμμ ν°νΈλ₯Ό white λ‘ ν΄μΌνλ μν©μ΄μκΈ°μ νμ¬μ λΈλλ 컬λ¬λ₯Ό UI primary colorλ‘ μ°κΈ°μλ λͺ λλλΉκ° W3C AA λ±κΈμ μ΄μ§ μμ¬μ λ€. κ·Έλμ ν΄λΉ μ¬νμ BX λμμ΄λμ μμνμ¬ λΈλλ 무λμ λν μΌλΌμΈμ λ§μΆμ΄ 컬λ¬λ₯Ό μ¬μ‘°μ νκ³ μ νμλ€.
BX λμμ΄λκ° λ§λ BI guide-color variation
λΈλλ 컬λ¬λ‘ μ ν΄μ§ μμμμ λΈλλ λμμ΄λκ° color variation μ μ§ννλ©΄ ν΄λΉ μμ μ€μμ UIμ μ ν©νμ§ νμΈν΄λ³΄κ³ λ€μ μμνμ¬ μμ μ‘°μ νλ©° μ»¬λ¬ νλ νΈλ₯Ό μμ±νλ€.
[UI primary color κ²°μ ]
BX λμμ΄λμ μμν κ²°κ³Ό, νΈμ§λ¬Όμ΄λ μΈμλ¬Ό λ±μμ μ¬μ©ν λ λΈλλ 컬λ¬λ₯Ό λ°κΎΈκΈ°μλ λΈλλ μ΄λ―Έμ§μ λλμμ²΄κ° λ³νλ μ°λ €κ° μμλ€. κ·Έλμ μΉ μ κ·Όμ± κΈ°μ€(AA)μ λ§κ³ , λΈλλ 컬λ¬μλ μ μ°¨μ΄κ° λ§μ΄ λμ§ μλ 컬λ¬λ₯Ό λ°λ‘ λ§λ€κ² λμλ€. ν΄λΉ 컬λ¬λ₯Ό color variationμ λ£μ΄ (500 β #5592FC) μΌλ‘ μ§ννκΈ°λ‘ κ²°μ νκ³ , UI primary 컬λ¬λ‘ μ νλ€.
primary color μ secondary color, gradient color
μ κ·Όμ± κΈ°μ€μ figma pluginμ΄λ adobeμΈ λ€μν μ¬μ΄νΈμμ μ 곡νκ³ μλ€.
- Adobe color μ κ·Όμ± λꡬ
- Colorable
- Figma plugin
νμμ μ»¬λ¬ κ°μ΄λμ λͺ μλμ΄μλ λ°©λ²
[Primary color κ° κΌ λΈλλ 컬λ¬μ¬μΌ νλκ°?]
λΈλλ 무λ보λλ§ BX λμμ΄λμ μΌλΌμΈλμλ€λ©΄, κ·Έ 무λ보λμ λ§λλ‘ μ§ννλ©΄ λλ€. λΈλλ κ²½νμ΄ μΌκ΄λλ©΄ λλ€. λΈλλ 컬λ¬κ° λ²νΌμ΄λ κΈμμ μ°μ΄κΈ° μ΄λ ΅λ€λ©΄ κ·Έλν½ μ»¬λ¬λ‘ λ°λ‘ μ§μ νμ¬ λ°°κ²½μ΄λ μμ΄μ½μ ν΅ν΄μ μΆ©λΆν λλμ λΌ μ μλ€. μ΄ λ, λ²νΌμ΄λ ν μ€νΈμ μ¬μ©μ±μ ν΄μΉμ§ μλλ‘ μΆ©λΆν λμ‘°κ° μ΄λ€μ§ μ μλ 컬λ¬λ₯Ό λ°λ‘ λ§λ€μ΄ 무λ보λμ λ§λλ‘ μ»¬λ¬ μμ€ν μ ꡬμ±νλ©΄ λλ€.
λ¬Όλ‘ μ΄λ μ£Ό λ©μΈ νλ‘λνΈμ λ¬λΌμ§κΈ°λ νλλ°, μ€μν κ²μ μ£Ό λ©μΈ νλ‘λνΈμ μ£Όλ λΈλλ κ²½νμ΄ μ£Όκ³ μ νλ κ²μ μ λ°μ μΌλ‘ κ³ λ €νμ¬ μ»¬λ¬λ₯Ό μ νλ κ²μ΄ μ’λ€.
02. UI color Class Name
Class Name(μ»¬λ¬ ν ν°)μ λμμ΄λμ κ°λ°μλ€μ΄ 컬λ¬λ₯Ό μ¬μ©ν λ, μλ‘ μν΅νκΈ° νΈνλλ‘ ν΄μ£Όλ©°, μμ€ν μ κ΄λ¦¬νκ³ μ μ§λ³΄μνκΈ°μ μ©μ΄νκΈ° λλ¬Έμ κ°λ°μλ€κ³ ν¨κ» μμνμ¬ κ²°μ νλ©΄ μ’λ€.
μμ¬ μ»¬λ¬ ClassNameμ μλ―Έλ‘ μ μ±ννμλ€. blueλ‘ λꡬλ μκΈ°μ¬μ΄ μλ©μ μ¬μ©νμκ³ , κ·Έ λ€μλ κ°λ°μλ€κ³Ό λμμ΄λλ€μ΄ ν΄λΉ 컬λ¬μ μ¬μ©μ©λλ₯Ό μ§κ΄μ μΌλ‘ νλμ νμ νκΈ° μ½λλ‘ μ¬μ©μ©λλ₯Ό ClassNameμκ·Έλλ‘ μ μ©νμλ€.
μ»¬λ¬ μλ―Έλ‘ μ μ©
03. Layout Color, Status Color
[Layout Color]
Layout Colorλ Neutral Color λΌκ³ λ νλ€. UI μ»¬λ¬ μΈμ ν°νΈ, μ , λ©΄ λ± λ μ΄μμμμ μ°μ΄λ 컬λ¬μ΄λ€. Neutral μ΄λΌλ μλ―Έκ° λ¬΄μ±μμ΄λΌλ μλ―Έλ μμΌλ μ΅κ·Όμλ λ€μν μλ―Έλ‘ λΆλ €μ μλ―Έμ νΌλμ΄ μ¬ μλ μλ€κ³ μκ°λμ΄ Layout ColorλΌκ³ μ΄λ¦μ μ§μ νμλ€. Layout Colorλ UI 컬λ¬μ κ±Έλ§κ² μμκ°μ μ§μ νκ³ , ν΄λΉ μμκ°μ λ§μΆ° μ¬λ¬ μ»΄ν¬λνΈλ€μ μνκ°, νμ΄ν¬μ IAμ μ μ°νκ² μ μ©ν μ μλ variation 컬λ¬λ₯Ό λ§λ λ€.
[Class Name]
ClassName(ν κ·Όκ°)μ λ€μ μ«μλ₯Ό λΆμΈλ€. μλ―Έλ‘ μ μ¬μ©νμ§ μμλ μ΄μ λ μλ λ€μν μ»΄ν¬λνΈμ μ¬μ©νκΈ° λλ¬Έμ μ«μλ§ λΆμ¬λ₯Ό νμλ€. λ€λ§, blackμμ ν°νΈμ μ μ μμ£Ό μ¬μ©νλ 컬λ¬λ€μ΄ μλ€λ©΄ κ°μ΄λμ μ¬μ©μ©λλ₯Ό λͺ μν΄λλ κ²μ΄ μ’λ€. disabled, μ , ν°νΈμ λ°λ‘ μ¬μ©νλ colorλ€μ λͺ μλ₯Ό νμ¬ μΌκ΄λ Layout Colorλ₯Ό μ¬μ©ν μ μκ² νκΈ° μν¨μ΄λ€.
ν°νΈμ κ²½μ°μ λμμ΄λλ€μ΄ ν¬λͺ λλ‘ μ§ννλ κ²½μ°κ° μμ΄ ν΄λΉ ν¬λͺ λλ₯Ό ν΄λΉ 컬λ¬μ ClassName λλΆλΆμ λΆμ¬ λμμ΄λλ€μ΄ μ¬μ©νκΈ°μλ νΈλ¦¬ν μ μλλ‘ μ§ννμλ€. μ΄ λΆλΆμ νλ§λ€ μλ‘ μ΄λ»κ² μν΅νλλμ λ¬Έμ μ΄κΈ° λλ¬Έμ λ Όμν΄μ μ νκΈ° λλ¦μ΄λ€.
[μ¬μ©μ©λλ³λ‘ λΆλ¦¬νμ¬ μμ€ν κ΄λ¦¬]
Layout Color μλ κ·Έλ μ΄κ³μ΄μ μμμ΄ μ£Όλ‘ μ°μ΄λλ°, νλ‘λνΈμ λμμΈ μν©μ λ°λΌμ λ€λ₯Έ λΈλμ νμν κ²½μ°κ° μ‘΄μ¬νλ€. νμμ κ²½μ°, νλ‘λνΈκ° ννμ΄μ§μ μ¬μ©μκ° μμ νλ μλΉμ€ λμμΈ νκ²½μ΄ λ¬λΌ μμΈμ μΌλ‘ μ°μ΄κ² λλ black color κ° μμλ€. μμΈμ μΌλ‘ μ°μ΄λ 컬λ¬λ€μ κ²½μ°, λ°λ‘ λ³κ°μ Class Name μ λΆμ¬νμ¬ μμ€ν μ ꡬμΆνμλ€.
λ³κ°μ blackμΌλ‘ ꡬλΆνμ¬ Class Name λΆμ¬, Layout Color μ Studio Black color
[Status Color]
Status Color λ UI Color μ ꡬλΆλμ΄ μμ€ν μ μνλ μ§νμ λν μ 보λ₯Ό μ¬μ©μμκ² μλ €μ£Όλ μν μ νλ€. Status Colorλ λͺ¨λ μ¬μ©μμ λ©νλͺ¨λΈμ κΈ°λ°μΌλ‘ νμ¬ μμμ μ§μ νλ κ²μ΄ μ’λ€.
λΈλλ 컬λ¬μ κ²ΉμΉμ§ μλλ‘ μ€μ μ νλ κ²μ΄ μ’κ³ , λͺ ννκ² κ΅¬λΆμ§μ΄μ μ€μ νλ κ²μ΄ μ’λ€. λΈλλ 컬λ¬κ° status color μ κ²ΉμΉλ κ²½μ°, ν΄λΉ λΈλλ 컬λ¬μ λͺ νν ꡬλΆνμ¬ λ©νλͺ¨λΈμ ν΄μΉμ§ μλ μ μμ ν΄λΉ 컬λ¬λ₯Ό λ체ν μ μλ 컬λ¬λ₯Ό μ°Ύκ³ , μ¬μ©μ²λ₯Ό λͺ νν ꡬλΆνλ κ²μ΄ μ’λ€.
status color
04. μΈν°λμ νλ μ»¬λ¬ κ·μΉ μ νκΈ°
μ¬μ©μκ° μλΉμ€λ₯Ό μ¬μ©νλ©΄μ μΈν°λμ ν λ, νΌλλ°±μ μ λ¬νκΈ° μν΄ μ»¬λ¬κ° μ¬μ©λλ€. μ΄ λ, ν΄λΉ μ‘μ κ³Ό μΈν°λ΄λμ 컬λ¬μ κ·μΉμ μ νλ©΄ μ¬μ©μμκ² μΌκ΄λ κ²½νμ μ€ μ μλ€.
μΈν°λμ 컬λ¬λ λ²νΌμ΄λ μμ΄μ½μ μ£Όλ‘ νμ©μ΄ λλ©°, Layout Color μ Primary color μ€μμ μ¬μ©λκΈ° λλ¬Έμ semantic color λ‘ λ°λ‘ λ μ΄λΈνμ¬ μ§μ ν μλ μλ€. νμλ μΈν°λμ 컬λ¬μ μ¬μ©μ©λλ₯Ό Class Name μ λΆμ¬νλ κ²λ§μΌλ‘λ νλ‘λνΈμμ μ°μ΄κΈ°μ μΆ©λΆνκΈ°μ, λ°λ‘ κ°μ΄λμλ§ μ 리λ₯Ό νμλ€.
μ£Όλ‘ primary colorμμ ν¬λͺ λμ λν κΈ°μ€μ λλμ΄ μΈν°λμ κ°μ μ§μ μ νμλ€.
μΈν°λμ ν¬λͺ λ κ·μΉ
μ€μ μ μ©ν κ°
λ§λ¬΄λ¦¬νλ©°
컬λ¬λ₯Ό μ νλ©΄μ λ§μ κ²λ€μ 곡λΆνκ³ , μ’λ 체κ³μ μ΄κ³ μμ§ λͺ»νλ μΈμΈν λΆλΆλ€κΉμ§λ 컬λ¬λ₯Ό μ§μ ν μ μκ² λ κ² κ°λ€. μ§νμ νλ€λ³΄λ μλΉμ€ μ λ°μ μΌλ‘ κ³ μ³μΌλ λΆλΆλ€λ 보μ΄κ³ , λ€μ μ‘°μ ν΄μΌλ λΆλΆλ€μ΄ λ§μ΄ 보μ΄κ² λμλ€.
μμΌλ‘ κ°λ°μμ ν¨κ» μλΉμ€λ₯Ό μ΄μνλ©΄μ νμν ClassName μ μ¬μ©μ²μ λ§κ² μ ꡬλΆνκ³ κ΄λ¦¬νλ λ°©λ²μ λν΄μ λ κ³ λν ν΄λκ°μ§ μμκΉ μκ°νλ€.
λ€μμλ μμ΄μ½ SVG μ μ©κΈ°λ₯Ό κΈλ‘ λ€λ£¨κ³ μ νλ€.
λ€μμλ μμ΄μ½ SVG μ μ©κΈ°λ₯Ό κΈλ‘ λ€λ£¨κ³ μ νλ€.
μ°Έμ‘°λ§ν¬