λ 벨 3,4κΈ°κ°λμ μ°μνν ν¬μ½μ€μ λͺ¨μλ©΄μ λ 벨μΈν°λ·°λ₯Ό νΈλ¦¬νκ² μ§ννκΈ° μν "λ 벨λ‘κ·Έ" νλ‘μ νΈ κΈ°κ°μ΄ 10/21μ λ§μ§λ§ λμ΄ λ¬λ€. μ¬μ€ λ ν νλ‘μ νΈλ₯Ό μ§νν μλ μμ§λ§ λλΆλΆ ν¬λ£¨λ€μ λμμ£Όκ³ μ·¨μ λ₯Ό μν μ€λΉλ₯Ό νλ¬ λ λ λͺ¨μμΈ λ― μΆμλ€.
λλ μ½κ° μμ¬μ΄ λ¨μμμ΄ λ©°μΉ μ λλ λ ν¬μν λ― μΆλ€. λ 벨λ‘κ·Έλ 첫 κ³΅κ° μ΄ν μ°μνν ν¬μ½μ€ ν¬λ£¨μ κ±°μ μ μ²΄κ° λ 벨 μΈν°λ·°μ μ¬μ©ν μλΉμ€μ΄κΈ°λ νκ³ , 5κΈ° λλ μ¬μ©ν κ² κ°λ€λ μ΄μΌκΈ°λ₯Ό κ΅μ₯ν λ§μ΄ λ€μκΈ° λλ¬Έμ κ·Έ κΈ°λλ₯Ό μ€μ λ‘ λ§λ€κ³ μΆμ μμ¬μ΄λ€.
λ¨Όμ μλμμ, μμ¬μ΄ λΆλΆλΆν° μ΄μΌκΈ°λ₯Ό νκ³ μΆλ€.
μ§κΈ μμ μμ κ°μ₯ μμ¬μ΄ λΆλΆμ μλμ κ°λ€.
λ "μ¬μ©μ κ²½ν κ°μ " vs "κΈ°λ₯ μΆκ°" μμ μ΄λ€ ν λ‘ μ νλ©° κ²°κ΅ νμ λ 리μμ€μ λ¬Έμ λ‘ ν μͺ½μ (λλΆλΆμ κ²½μ° "μ¬μ©μ κ²½ν κ°μ "μ΄μλ€.) μ΄λ μ λ ν¬κΈ°νλ€λ κ².
μ΄μ μμΌ κΉ¨λ«κ² λ κ²λ€μ΄ μλλ° λ¨μ κΈ°κ°λμ μ΄κ±Έ λμ νλ€λ©΄, μ΄ λ¬Έμ λ₯Ό ν΄κ²°ν μ μμκ±°λΌλ μκ°μ΄ λ€μλ€. κ²°κ΅ μ λ¬Έμ λ₯Ό ν΄κ²°ν μ μλ λ°©λ²μ νλλΏμ΄λΌλ μκ°μ΄ λ€μλ€.
"μ¬μ©μ κ²½ν κ°μ "μ λλ 리μμ€λ₯Ό μ€μΈλ€!
λλ μ¬κΈ°μ λν ν΄κ²°μ± μ "λμμΈ μμ€ν " μμ μ°Ύμ μ μμ κ² κ°μλ€.
λ 벨λ‘κ·Έμμλ μλ‘μ΄ κΈ°λ₯μ μΆκ°νκ³ , κ·Έμ λ§λ νλ©΄μ λ§λ€κΈ° μν΄μλ "figma"λ₯Ό ν΅ν΄ μμ μμ ν μλ‘μ΄ νμ΄μ§λ₯Ό κ·Έλ €μΌνλ€.
μ²μμλ λ νΌμ figmaλ₯Ό μμ±ν΄μ κ·Έλλ§ λ¬Έμ κ° μμμ§λ§, μΆκ°μ μΈ κΈ°λ₯μΈ "μΈν°λ·° μ§λ¬Έ κ²μ"μ΄ μΆκ°λλ©°, κ·Έμ νμν νλ©΄μ μκ°μ΄ λ¨λ λ°±μλκ° κ·Έλ¦¬κ² λμλ€.
μλ‘μ΄ νλ©΄μ λ€μ μ΄μ§μ μ΄μμΌλ©°, κΈ°μ‘΄μ μ»΄ν¬λνΈλ₯Ό μ¬μ¬μ©νκΈ°μλ μ λ§€ν΄ λλΆλΆμ μ»΄ν¬λνΈλ₯Ό μλ‘ μμ±νκ² λμλ€.
μ΄λ¬ν νλ‘μΈμ€λ μ΄ μΈ κ°μ§ λ¬Έμ μ μ κ°μ§κ³ μμλ€.
μ¬μ©μμκ² μΌκ΄μ μΈ κ²½νμ μ 곡νμ§ λͺ»ν μ μλ€.
μλ‘μ΄ κΈ°λ₯μ λ§λ νλ©΄μ μ μνλλ° κΈ°μ‘΄μ 리μμ€λ₯Ό μ¬μ¬μ©νκΈ° νλ€μ΄ μ€λ μκ°μ΄ κ±Έλ¦°λ€.
μλ‘μ΄ κΈ°λ₯μ μΆκ°νλλ° κ±Έλ¦¬λ μκ°μ΄ λΉμ°ν κΈΈμ΄μ§λ, λ μμ κ°μ ν λ‘ (μ¬μ©μ± vs κΈ°λ₯ μΆκ°)μ νλ©° μκ°μ λΊκΈ°λ μ μνμ λ€μ΄κ°κ²λλ€.
λ§μ½ μ λλ‘λ "λμμΈ μμ€ν "μ΄ μ‘΄μ¬νλ€λ©΄ μ΄λ»κ² λ°λμμμ§λ₯Ό μλμμ μ΄ν΄λ³΄μ!
μμλ‘ κ΅¬κΈμ "Material Design"μ figmaλ₯Ό κ°μ Έμ λ΄€λ€.
μ¬κΈ°μλ Buttons
, Icons
, Lists
, Menu
λ±λ±
ꡬκΈμ λμμΈ μμΉκ³Ό UX μ λ΅ μ μν΄ κ²°ν©λ UI Componentλ€μ΄ λͺ¨μ¬μλ€.
μ΄ "Material Design"μ UI μ»΄ν¬λνΈλ€μ νμ©νλ©΄ κ°λ°μλ€μ μ΄λ¬ν μ»΄ν¬λνΈλ₯Ό λ€μν μ‘°ν©μΌλ‘ μ¬μ¬μ©νμ¬ μ€λ μκ°μ λ€μ΄μ§ μκ³ λ¨μν λ κ³ λΈλ‘μ μλ―μ΄ νλ©΄μ κ·Έλ €λΌ μ μλ€.
μ¬κΈ°μλ UI Component λ§ κ°μ§κ³ μμ§λ§ λμμΈ μμ€ν μ μ’ μ’ μ€νμΌ κ°μ΄λλ‘ λμμΈ μ 보λ₯Ό ν¬ν¨νλ€. UI Component μ 체μμ μ¬μ©λλ μμ, νμ΄ν¬κ·ΈλνΌ λ° μ€νμΌ, νμ€, μμΉ λ° μ΄λ€ μ λλ©μ΄μ μ΄ μ΄λ»κ² ꡬνλκ³ , μ΄λμ μ¬μ©νλκ² λ§λμ§κΉμ§ μμ£Ό μμΈν μ 보λ€μ ν¬ν¨ν μ μλ€.
μ΄λ κ² λλ€λ©΄ μμμ λ°κ²¬ν λ¬Έμ μ μΈ κ°μ§κ° λͺ¨λ ν΄κ²°λ κ²μ΄λΌκ³ λ΄€λ€.
μλ‘μ΄ νλ©΄μ 그리λλ° κ±Έλ¦¬λ 리μμ€κ° λ§€μ° μλ€λ©΄, κΈ°λ₯ μΆκ°λ₯Ό νλ μλλ λΉ¨λΌμ§ κ²μ΄λ©°, UXλ₯Ό κ°μ νλλ° μ°λ μκ°λ λΉμ°ν λ§μμ§ κ²μ΄λ€.
λν μΌκ΄λ UI Componentλ₯Ό μ¬μ¬μ©ν΄μ νλ©΄μ κ·Έλ¦¬κ² λλ, μΌκ΄μ±μ΄ κΉ¨μ§λ λ¬Έμ λ λ§μ§ μμ κ²μ΄λ€.
λλ κ·Έλμ λ¨μ κΈ°κ°λμ λ 벨λ‘κ·Έμ λμμΈ μμ€ν
μ λ§λ€κΈ°λ‘ νλ€.
λμμΈ μμ€ν
μ ν΅ν΄μλΌλ©΄, μ΄μ κ³Όλ λΉκ΅λ ν μ μλ μ μ μκ°λ§μΌλ‘ μλ‘μ΄ κΈ°λ₯μ κ°λ°νκ±°λ νλ‘μ νΈ μ μ§λ³΄μλ₯Ό ν μ μμ κ²μ΄κ³ , 곧 μ·¨μ
μ νκ² λλ©΄ μ¨μ ν νλ‘μ νΈμλ§ μ§μ€ν μ μλ μ°λ¦¬μκ² μλ§λ€λ μκ°μ΄ λ€μλ€.
μλ§ λ€μ μ£Ό λμ λ 벨λ‘κ·Έμ λ§λ λμμΈ μμ€ν
μ λ§λ€μ΄ ν¬μ€ν
μ νμ§ μμκΉ μΆλ€.
μ무λλ λ€μ μ£Όλ μμ£Ό μ¬λ―Έμλ ν μ£Όκ° λ κ² κ°λ€!
λΌκ³ νμ§λ§.. νμλ€κ³Όμ λ Όμ λμ λμ νμ§ μκΈ°λ‘ νλ€.. γ γ