λλ 2021λ 1μλΆν° 6μκΉμ§ μ½ 5κ°μκ°μ κ΅λΉμ§μ UI/UX λμμΈ & νΌλΈλ¦¬μ κ΅λΉμ§μ κ³Όμ μ μκ°νκ³ , μ½ 2κ°μκ°μ μ·¨μ μ€λΉ λμ μλ 7μλΆν° μΉ νΌλΈλ¦¬μ λ‘ μλ‘μ΄ μ§μ₯μμ μΌμ νλ μ€μ΄λ€. μμ§ 1λ μ΄ μ± λμ§ μμ μμ μ μ νΌλΈλ¦¬μ μ§λ§, νΉμλ μ΄ κΈμ΄ 1λ μ μ λμ²λΌ μλ‘μ΄ μΌμ μ€λΉνλ μ¬λλ€μκ² λμμ΄ λ μλ μμ§ μμκΉ? νλ λ§μμ κΈ°λ‘μ ν΄λ³΄κΈ°λ‘ νλ€.
π¬ μ¬μ€ κ΅λΉμ§μ κ°μλ₯Ό λ€μΌλ©΄μ λ€μ΄λ² λΈλ‘κ·Έμ μ λ§ κΌΌκΌΌν κΈ°λ‘νλ κΈμ΄ 6κ° μ λ μκΈ°λ νλ°, νΉμ κ·Έ κΈλ κΆκΈνμ λΆλ€μ λΉλ°λκΈ λ¨κ²¨μ£Όμλ©΄ μ£Όμ μ λ¬λ릴κ²μ! (μ λ€μ΄λ² λΈλ‘κ·Έκ° μ νμ§ κ±Έλ¦¬λ©΄μ λ ΈμΆμ΄ μ μλμ΄ μ 보μ λ¬μ΄ μ μλλλΌκ΅¬μ. )
λ€μ΄λ² λΈλ‘κ·Έμλ μλ μ λ΄μΌλ°°μμΉ΄λλ‘ μ·¨μ μ±κ³΅ν¨ν€μ§μ ν¨κ» μ§νν κ΅λΉμ§μ UI/UX λμμΈ & νΌλΈλ¦¬μ κ°μμ λν νκΈ°κ° κΈ°λ‘λμ΄ μμ΅λλ€. μ΄λ²μ μλ‘ μ°λ κΈμ κ³Όμ μλ£ ν 1λ μ΄ λ€ λμ΄κ°λ μμ μμ μ°μ¬μ§ κΈμ΄λΌ μ μκ°μ λ³νλ μ‘°κΈ μμλ κ² κ°μμ.
κ³Όμ μλ£ μ€, μλ£ νμ μμν νκΈ°λ μ°Έκ³ νμκ³ μΆμΌμλ©΄ μ μμ κΈλ 보μ λ μ’μκ² κ°κ³ , λ μ 리λ κ΄μ μΌλ‘ μ°μ¬μ§ κΈμ΄ κΆκΈνμλ©΄ μ΄ κΈλ§ 보μ λ μ’μ κ² κ°μ΅λλ€.
λμ λ°±κ·ΈλΌμ΄λμ UIUX λμμΈ & μΉνΌλΈλ¦¬μ κ³Όμ μκ° κ³κΈ°
λλ ITμλ μ ν 무κ΄νλ©° μΉλμμΈ, μΉνΌλΈλ¦¬μ±κ³Όλ μ ν 무κ΄ν μλΉμ€μ μμ μ½ 4λ κ° κ·Όλ¬΄λ₯Ό νκ³ , λ΄ λ―Έλλ μμΌλ‘λ μλΉμ€μ§μμ μΌμ νκ² λ μ΄λͺ μ΄λΌκ³ μκ°νλ€. λ€λ₯Έ μΌμ μκ°ν΄λ³Έ μ λ μμκ³ , μλΉμ€μ§μ΄ λμ μ²μ§μ΄λΌκ³ μκ°νλ€. μ€μ λ‘ λ΄κ° ν΄μλ μΌμ λμ κ½€ μ λ§μκ³ , μ νκ³ μμμΌλ©°, λλ£λ€κ³Ό μμ¬λ€μ νκ°λ μ’μλ€.
μλ‘μ΄ μ§μ μ λν ν₯λ―Έλ κ°μμ€λ½κ² μ겨λ¬λ€. 2020λ 1μ, μ λ½μ¬νμ κ³ννλ©° νμ¬μμ ν΄μ¬λ₯Ό νλ€. ννμ΄λ©΄ μ½λ‘λκ° μμλμ΄ μμ½ν λΉνκΈ°μ μμλ₯Ό μ·¨μν΄μΌλ§ νκ³ , κ·Έ λλΆν° λμ λ°©ν©μ΄ μμλμλ€. λμ μ²μ§μ΄λΌ μκ°νλ μΌμλ κΆνκΈ°κ° μμ μ¦μμ΄λΌ λ€μ λμκ°κ³ μΆμ§ μμλ€. μ°μ°ν "μΉνμ΄μ§λ₯Ό λ§λ€μ μλ€"λ HTMLκ³Ό CSSλ₯Ό μκ²λλ©° λ°°μλ³΄κ³ μΆλ€λ μκ°μ νμκ³ , μ΄λμ λ°°μμΌ νλμ§ μ°Ύμ보기 μμνλ€.
μμΈλ‘ μ§μ μ₯λ²½μ΄ λμ§ μμ λΉμ 곡μλ€λ λ§μ΄ λ°°μ°λ μΉλμμΈκ³Ό μΉνΌλΈλ¦¬μ± κ΅λΉμ§μ κ³Όμ μ μκ² λμκ³ , κ΅κ°μμ μ§μμ λ°μΌλ©° 곡λΆλ ν μ μλ€λ μ μ λλ € νμμ μ°ΎμΌλ¬ λ€λ λ€. λλΆλΆ κ³Όμ μ΄ 5~6κ°μμΌλ‘ κΈΈμλλ°, νμ μκ° μ μ μ€νλ₯΄νμ½λ©ν΄λ½ μ΄λΌλ μ½λ© μ¨λΌμΈ κ΅μ‘κΈ°κ΄μμ μ§ννλ 짧μ λ¬΄λ£ μ½λ© κ°μλ₯Ό λ£κ³ μ¬λ―Έλ₯Ό λκ»΄λ΄€κΈ° λλ¬Έμ μΆ©λΆν ν₯λ―Έλ₯Ό λλ μ μμκ±°λΌ μκ°νλ€. κ·Έλ κ² λλ νμμ μκ°μ μ²μ νλ κ²μΌλ‘ μλ‘μ΄ κ³΅λΆλ₯Ό μμνμλ€.
UI/UX λμμΈ & νΌλΈλ¦¬μ± κ³Όμ
λ΄κ° μκ°νλ μ§μ νλ ¨ κ³Όμ μ μ νν λͺ μΉμ <UI/UX λμμΈ & νΌλΈλ¦¬μ > μ΄λ€.
νμ μλ΄μ λ°μΌλ©΄μ μκ²λμλλ°, κ΅λΉμ§μμ μΉλμμΈ, νΌλΈλ¦¬μ± κ³Όμ μ λλΆλΆμ΄ λμμΈλ³΄λ€λ νΌλΈλ¦¬μ±μ μ΄μ μ΄ λ§μΆ°μ Έ μλ κ² κ°μλ€. μλ΄λ°μλ 4κ΅°λ°μ νμ λͺ¨λ λμμΈ μμ μ νλ ν¬ν μ΅κ³Ό μΌλ¬μ€νΈλ₯Ό λ°°μ°λ λΉμ€λ³΄λ€λ μ½λ© μμ μ νλ HTML, CSS, JQuery λ±μ λ°°μ°λ λΉμ€μ΄ ν¨μ¬ μ»Έλ€. λλ λμμΈλ³΄λ€λ μ½λ©μ λ λ§μ΄ νλ κ³Όμ μ μ νΈν΄ λΆλ§μ΄ μμμ§λ§, λμμΈ μμ μ λ λ§μ΄ νκΈ°λ₯Ό μνλ μκ°μλ€μ΄ μ€μ λ‘ νμκ³Ό κ°μ¬λμκ² μ»΄νλ μΈμ κ±ΈκΈ°λ νμλ€.
μΉλμμΈ, μΉνΌλΈλ¦¬μ±, UI/UX λμμΈ λ±μ κ΅λΉμ§μ κ°μ μκ°μ μκ°νκ³ μλ€λ©΄ λ΄κ° λμμΈμ λ κ΄μ¬μ΄ λ§μμ§, μ½λ©μ λ κ΄μ¬μ΄ λ§μμ§λ₯Ό μ§μ΄λ³Ό νμκ° μλ€. λλ νμ€ν λμμΈλ³΄λ€ μ½λ©μ λ κ΄μ¬μ΄ λ§λ€λ κ²μ μκ³ μκ°μ μ²μ νκ³ , μΌμ νκ³ μλ μ§κΈλ μμ λμμΈ μμ μ μ λ§ μ΄λ ΅λ€λ κ²μ λ§€λ² λλΌκ³ μλ€. μ½λ©μ μ΄λ»κ² ν΄μλ ꡬνμ νλ©΄ λλ건λ°, λμμΈμ μ λ§ λ΅μ΄ μμΌλκΉ.
λΉμ 곡μ, κ΅λΉμ§μ μμ μΌλ‘ μ·¨μ μ΄ κ°λ₯ν κΉ?
μ΄μ λ§ μΉλμμΈκ³Ό μΉνΌλΈλ¦¬μ±μ λ°°μ°λ €λ μ¬λλ€μ΄ κ°μ₯ λ§μ΄ νλ μ§λ¬ΈμΈ κ² κ°λ€. λλ μμ μ λ£κΈ° μ μ μΈν°λ·μΌλ‘ μ λ§ λ§μ΄ μ°Ύμλ³΄κ³ , μλ¬Έμ κ°μ‘μλ€. μ λ§ μ무κ²λ λͺ¨λ₯΄λλ°, 5κ°μ λ°°μ λ€κ³ μ·¨μ μ΄ λ κΉ?
κ²°λ‘ λΆν° λ§νμλ©΄ λ³ΈμΈμ΄ λ Έλ ₯νλ€λ©΄ λΉμ°ν κ°λ₯νλ€. λ€λ§ 5-6κ°μμ΄ μ·¨μ μ μν΄ νμν 곡λΆλ₯Ό νλλ° κ·Έλ¦¬ κΈ΄ μκ°μ μλκΈ° λλ¬Έμ μμ μ΄ λλκ³ λμλ, μ£Όλ§μλ, ννν κ΄μ¬μ 보μ΄κ³ 곡λΆλ₯Ό ν΄μΌλ§ νλ€λ κ²μ΄λ€. λμ κ²½μ°μλ μμΉ¨ 9μλΆν° 6μκΉμ§ ν루 8μκ° μμ μ λ£κ³ , μμ μ΄ λλ νμλ κ³Όμ λ₯Ό νλ€. κ³Όμ λ₯Ό νκ³ λλ©΄ μ¬μ€ κ·Έ λ λ°°μ΄ μμ λ΄μ©μ 볡μ΅ν μκ°λ μμλ€. λ¦κ²κΉμ§ κ³Όμ λ₯Ό νκ³ λλ©΄ λ€μ λ λ€μ μμΉ¨ μΌμ°λΆν° μμ μ λ£κ³ , κ³Όμ λ₯Ό νκ³ , κ·Έ κ³Όμ μ λͺ κ°μλμ λ°λ³΅νλ€. λ¬Όλ‘ μ£Όλ§μλ μκ°μ λ΄μ΄ 곡λΆλ₯Ό νλ€. κ·Έλ κ² νμ§ μμΌλ©΄ μ²μ μ νλ μ΄ λΆμΌμ μμ μ λ°λΌκ° μκ° μμλ€. κ°μ΄ μμ μ λ£λ λ€λ₯Έ νμλ€λ λ§μ°¬κ°μ§μλ€.
μ€μν κ²μ κ²°κ΅ λ΄κ° μΌλ§λ ν₯λ―Έλ₯Ό κ°μ§κ³ λκΈ°μκ² κ³΅λΆλ₯Ό ν μ μλλμΈκ² κ°λ€. λλ μ½λ©μ νλ κ²μ΄ μ λ§ μ¬λ―Έμμκ³ , 곡λΆνλ κ³Όμ μμ λΏλ―ν¨μ λκΌκΈ° λλ¬Έμ λκΉμ§ μ¬λ―Έμκ² κ³΅λΆλ₯Ό ν μ μμλ κ² κ°λ€.
κ΅λΉμ§μ μμ , κ°μ¬κ° μ€μνλ€λλ°?
κ΅λΉμ§μ μμ μ κ΄ν μ 보λ₯Ό μ°Ύμ보면μ κ°μ₯ κ±±μ μ λ§μ΄ ν λΆλΆμ΄ κ°μ¬μ λν κ²μ΄μλ€. κ°μ¬μ λ°λΌ μμ μ ν리ν°κ° λ¬λΌμ§λ€λ νκΈ°λ₯Ό μ λ§ λ§μ΄ λ΄€κ³ , κ΅λΉ μμ μ λ€μ λ°μλ μ λλ‘ κ°λ₯΄μ³μ£Όλ νμμμ λ¨κ³Ό κ³Όμ μ λ€μ΄λΌ, μ νλΈ κ°μλ₯Ό λ΄λΌ, μΈκ°μ 보λκ² λ«λ€, λΌλ μμ μ‘°μΈκ³Ό κΈλ€λ μΈν°λ·κ³Ό μ€νμ±ν λ°©μ κ΅μ₯ν λ§μμλ€. μ€μ λ‘ κ°μ¬κ° λ무 μ΄μν΄ μ€λ ν¬κΈ°νκ³ λμλ€λ νκΈ°λ λͺ λ² λ΄μ κ°μ μ μ²μ νκ³ λ κ±±μ μ μ λ§ λ§μ΄ νμλ€. κ°μ¬μ λν μ 보λ μμ μ λ£κΈ° μ μλ μ μκ° μμκΈ° λλ¬Έμ μ¨μ ν λ΄ μ΄μ λ§‘κ²¨μΌ νλ건κ°? λΌκ³ μκ°λ νμλ€. νλ§λλ‘ μ λ§ λ³΅λΆλ³΅μ΄μλ κ²μ΄λ€.
κ·Έλ° κ±±μ κ³Όλ λ¬λ¦¬ λ΄κ° λ§λ¬λ κ°μ¬λμ λ λΆ λͺ¨λ λ무 μ κ°λ₯΄μ³ μ£Όμ ¨λ€. 보ν΅μ κ°μ¬λ ν λΆκ»μ κ³Όμ λ΄λ΄ μ²μλΆν° λκΉμ§ κ°λ₯΄μ³ μ£Όμλ κ² κ°μλ°, μ°λ¦¬λ κ°μ¬λ κ°μΈ μ¬μ μΌλ‘ 첫 νλ¬ μ λλ λ€λ₯Έ κ°μ¬λμ΄ μμ μ μ§ννμ ¨λ€. 첫 κ°μ¬λμ΄ λ무 μ΄μ μ μΌλ‘ μμ μ νμ μ, κ΅λΉμ§μ κ°μ¬μ λν κ±±μ μ κ±°μ§λ§μ²λΌ μ¬λΌμ‘μλ€. 첫 κ°μ¬λμ΄ λ무 μ’μμ ν λ¬μ―€ μ§λ ν λ€λ₯Έ κ°μ¬λμΌλ‘ κ΅μ²΄κ° λλ©΄μ μκ°μλ€ μ¬μ΄μ νΌλκ³Ό λΉκ΅λ‘ κ°μ¬λκ³Ό μ°λ¦¬λ€ μ¬μ΄μ νΈλ¬λΈμ΄ μκΈ°λ νμ§λ§, μ§κΈ μκ°ν΄λ³΄λ©΄ λ λΆ λͺ¨λ μ κ°λ₯΄μ³μ£Όμ ¨λ κ²μ νλ¦Όμμλ€. κ²°λ‘ μ μΌλ‘ μ΄μ©λ©΄ μμ μ μ§ννλ κ°μ¬κ° μ΄λ»κ² μμ μ μ§νν κ²μΈμ§λ μ΄μ 맑길 μ λ°μ μλ κ² κ°κΈ°λ νλ°, μ€μν κ²μ κ·Έ μμ λ°©μμ λ¬Έμ κ° μλ€λ©΄ μΆ©λΆν μλ‘ μκΈ°λ₯Ό ν΄λ³Ό μ μλ€λ κ²μ΄λ€.
λλ²μ§Έλ‘ μ€μ κ°μ¬λκ³Ό μκ°μλ€ μ¬μ΄μ νΈλ¬λΈμ΄ μμλ μ΄μ μ€ νλλ μλ‘μ΄ κ°μ¬λμ μμ μ§λκ° μ°λ¦¬κ° λ°λΌκ°κΈ°μλ λ무 λΉ¨λλ€λ κ²μ΄μλ€. λΏλ§ μλλΌ νμλ€κ³Ό μμ¬μν΅λ μ λμ§ μμ λΉμ μκ°μλ€ μ¬μ΄μμ λΆλ§μ΄ μμ²λκ² λ§μμλ€. (μ¬μ§μ΄ μ½λ‘λ λλ¬Έμ λΉλλ©΄μΌλ‘ μ¨λΌμΈ μμ μ νλ λλΌ μ€μκ°μΌλ‘ κ°μΈμ μΈ μν΅μ΄ λ§€μ° μ΄λ €μ λ€.) κ·Έ λ μ°λ¦¬λ κ°μ¬λ₯Ό μλͺ» λ§λ¬λ€λ©°, μ€λ ν¬κΈ°λ₯Ό νλ €λ μκ°μλ λͺ λͺ μμλ€. κ²°κ΅μ μ΄λλ‘λ μλκ² λ€μΆμ΄ μ°λ¦¬κ° μκ°ν λ¬Έμ μ λ€μ κ°μ¬μ μ§μ μ΄μΌκΈ°λ₯Ό νκ³ ννμ λ΄μ μμ μ λ°©ν₯κ³Ό μ§λλ₯Ό μ‘°μ¨νκΈ°λ νμλ€.
μμ μ λ£λλ° μμ΄ κ°μ¬κ° μ€μν κ²μ λΆλͺ λ§μ§λ§, κ΅λΉμ§μ κ΅μ‘μ΄λΌκ³ ν΄μ λͺ¨λ κ°μ¬κ° μ΄μνκ±°λ μμ μ λμΆ©νμ§λ μλλ€λ κ²μ΄λ€. λ§μ½ μ΄λ―Έ μμ μ λ£λ μ€μΈλ° κ°μ¬κ° μ λ§ μ΄μν κ² κ°λ€λ©΄ μκ°μλ€λΌλ¦¬ μ견μ μ’ ν©νμ¬ νμμ΄λ κ°μ¬μκ² μ§μ μ΄μΌκΈ°λ₯Ό ν΄λ³΄λ κ²λ νλμ λ°©λ²μΈ κ² κ°λ€. μκ°μλ€μ μ μ₯μμ μ°λ¦¬κ° κ΅κ°μμ μ§μν΄μ£Όλ μ¬μ μΌλ‘ κ°μλ₯Ό λ£λ κ²μ λ§μ§λ§ μ΄ κ°μλ₯Ό μ·¨λ―Έλ μ₯λμΌλ‘ λ£λ κ²λ μλκ³ , μ΄ μμ μ ν΅ν΄ λ―Έλμ μ§μ μ μ°Ύλ κ³Όμ μ΄ λ ν λ° κ°μ¬κ° λμΆ©νλ€κ³ λμΆ© 곡λΆν΄ μν΄λ³Ό μλ μμ§ μμκ°.
μ½ 5κ°μμ λΉλλ©΄ μ€μκ° μμ (μ¨λΌμΈ μμ νκΈ°)
μμ¦μλ λ€μ λλ©΄μμ μ΄ κ°λ₯ν΄μ‘λμ§ μ λͺ¨λ₯΄κ² μ§λ§, λ΄κ° μμ μ λ€μλ μλ μ΄μλ νμμ λκ° λ μ΄ μλ§ μΌμ£ΌμΌλ λμ§ μμλ κ² κ°λ€. μ½λ‘λλ‘ μΈν΄ λλ©΄ μμ μ΄ μ΄λ €μμ Έ 5κ°μ λ΄λ΄ Zoomμ ν΅ν μ€μκ° μμ μ μ§ννμλ€. κ°μ¬λμ νμ νμμμ μμ μ μ§ννκ³ , νμμμ μμ μ λ£κ³ μΆμΌλ©΄ μΈμ μ νμ λ§μΆ° νμμ κ° μλ μμμ§λ§ λ€λ€ κ±°λ¦¬κ° λ©κ³ , μμΉ¨ μΌμ°λΆν° μμ μ΄ μλ€ λ³΄λ νμμΌλ‘ μΆμνλ μΈμμ λ§μ§ μμλ€.
λΉλλ©΄μΌλ‘ μμ μ νλ©΄ λλ©΄ μμ λ³΄λ€ λμΉλ κ²μ΄ ν¨μ¬ λ§μ§ μμκΉ κ±±μ μ νμκ³ , μΌλ₯Έ μ€νλΌμΈ μμ μ΄ κ°λ₯ν΄μ§κΈ°λ₯Ό κΈ°λ€λ¦¬λ©° 첫 λͺ λ¬κ° μμ μ λ€μμλ€. νμ§λ§ λΉλλ©΄ μμ λ μμΈλ‘ νΈν μ μ΄ λ§μ μ μ°¨ μ μν΄ λκ°λ κ² κ°λ€. λΉλλ©΄ μμ μ κ°μ₯ ν° μ₯μ μ΄ ν΅νμ μκ°μ ν μ νμ§ μμλ λλ©°, μ μ¬ λΉμ©μ μ μ½ν μ μλ€λ μ μ΄μλ€. ν΅ν μκ°μ μκ»΄ μ’ λ λ§μ 곡λΆλ₯Ό ν μ μλ€λ μ κ³Ό μ·¨μ€μ μ μ₯μμλ λ§€μΌ μ¬λ¨ΉκΈ° λΆλ΄μ€λ¬μΈ μ μλ μ μ¬ μμ¬ λΉμ©μ λμ΄μ€ μ μλ€λ κ²μ΄λ€.
λ§μ§λ§ 1-2λ¬ κ°λμ κ°μΈ ν¬νΈν΄λ¦¬μ€λ₯Ό λ§λλλ° μ§μ€νλλ°, μ€μ ν΅ν΄ νλ©΄ μ νμ νλ©° κ°μ¬λκ³Ό μΌλμΌλ‘ ν¬νΈν΄λ¦¬μ€μ λν νΌλλ°±μ λ°μΌλ©° μμ μ΄ μ§νλμλ€. κ°μΈ μκ°μ μμ¨μ±μ΄ λμ μΌλ§λ μ§μ€μ νκ³ , μμ μ νλλμ λ°λΌ κ²°κ³Όλ¬Όμ΄ λ¬λκΈ° λλ¬Έμ μκ° νμ©κ³Ό μ§μ€λ ₯μ΄ μ€μνλλ°, μ΄ λ λ³ΈμΈμ νλ¨μ λ°λΌ νμμ κ°μ μμ μ νλ νμλ λͺλͺ μμλ€. μ€μ ν΅ν΄ νΌλλ°±μ΄ μ€κ°λ©΄ λ€λ₯Έ νμλ€λ λ€ κ°μ΄ 곡μ κ° λμ΄ μ²μμλ μ‘°κΈ λΆλ΄μ€λ¬μ΄ μ μ μμμ§λ§ λμ€μλ λ€λ₯Έ μ¬λλ€μ κ²°κ³Όλ¬Όλ ν¨κ» 곡μ ν μ μμ΄ μ₯μ μ΄ λ κ² κ°κΈ°λ νλ€. λ΄ μμ λΏλ§ μλλΌ λ€λ₯Έ μ¬λμ μμ λ¬Όμ 보λ κ²λ 곡λΆκ° λλ€κ³ μκ°νκΈ° λλ¬Έμ΄λ€. λ€λ§ κ°μ¬μ νμ λͺ¨λ λ μ κ·Ήμ μΌλ‘ μμ μ μ°Έμ¬ν΄μΌλ§ λλ©΄ μμ λ§νΌμ κ²°κ³Όλ¬Όμ μ»μ μ μλ€λ λ¨μ μ΄ μκΈ°λ νλ€.
μ΅κ·Όμ μ½λ© λΆνΈμΊ νλΌκ³ ν΄μ μμΉ¨λΆν° μ λ κΉμ§ 곡λΆλ₯Ό νλ μμ μ λΉλλ©΄μΌλ‘ μ§ννλ κ³Όμ μ λͺ λ² λ³Έ κ² κ°μλ°, κ°μ¬μ νμ λͺ¨λ μ κ·Ήμ μΌλ‘ μμ μ μ΄λμ΄μ£Όκ³ μ°Έμ¬νλ€λ©΄ μ΄μ©λ©΄ λλ©΄ μμ λ§νΌμ μ±κ³Όλ₯Ό λμ΄μ€λλ°λ μλ¬΄λ° λ¬Έμ λ μμ§ μμκΉ μκ°μ΄ λ€μλ€.
λΉμ 곡μκ° μΉ νΌλΈλ¦¬μ± κ³Όμ μ λ£κΈ° μ κ³ λ―Όν΄μΌ ν κ²λ€
1. λμμΈκ³Ό νΌλΈλ¦¬μ±, μ΄λ€ κ²μ λ μ΄μ μ λ§μΆ°μΌ ν κΉ?
λ΄κ° μ²μ κ΅λΉμ§μ μμ λ±λ‘μ μν΄ νμμ μ°Ύμλ€λλ©° κ°μ₯ μ€μνκ² κ³ λ €νλ λΆλΆμ νμμ 컀리νλΌμ΄μλ€. 컀리νλΌμ ν¬ν μ΅κ³Ό μΌλ¬μ€νΈ λ±μ λμμΈ μμ κ³Ό HTMLκ³Ό CSS, JQueryλ JavaScriptμ μμ λΉμ€μ΄ μ΄λ μ λ λλμ§λ₯Ό νμ νμΈνμλ€. μ§κΈμμ μκ°ν΄λ³΄λ λλΆλΆμ νμλ€μ΄ λμμΈλ³΄λ€λ νΌλΈλ¦¬μ±μ λ λ§μ λΉμ€μ λκ³ μμ μ μ§ννκΈ° λλ¬Έμ μ λ§ 'λμμΈ'λ§ νκ³ μΆλ€λ©΄ μ΄λ° κ΅λΉμ§μ κ³Όμ μ΄ κ³Όμ° λμμ΄ λ κΉ? λΌλ μκ°μ΄ λ λ€.
μμ¦μλ μΉλμμ΄λλ HTMLκ³Ό CSS μ λλ λ€λ£° μ€ μλ μ¬λμ΄ λ§μ λμμ΄λλ μ½λ©μ ν΄μΌνλ μλλΌκ³ λ νμ§λ§ μ²μ μμνλ λΉμ 곡μκ° 'ν¬ν μ΅'κ³Ό 'μΌλ¬μ€νΈ'λ₯Ό λ°°μ°κ³ μΆμ΄ νμμ λ±λ‘νλλ°, λμμΈ ν΄μ ν λ¬ κ°λ λ§λ³΄κΈ°λ§ νλ€κ° HTMLλ‘ λμ΄κ°λ€λ©΄ μμ μ ν₯λ―Έλ₯Ό λ κ°μ§ μ μμκΉ? λκ΅°λ€λ κ·Έλ κ² λμμΈ μμ μ΄ λλλ©΄ λ μ΄μ ν¬ν μ΅κ³Ό μΌλ¬μ€νΈλ λ€λ£¨μ§ μμ κ°λ₯μ±μ΄ ν¬λ€. λ¬Όλ‘ μ»€λ¦¬νλΌμ λ°λΌκ°λ€ HTMLμ μκ°λ³΄λ€ λ§μ ν₯λ―Έκ° μκΈ΄λ€λ©΄ λ€νμ΄κ² μ§λ§. λ΄κ° μ λ§ λ°°μ°κ³ μΆκ³ , μμΌλ‘ μ§μ μ νμ ν λ λ μΉμ€λμ΄μΌ ν λΆλΆμ΄ λμμΈμΈμ§, νΌλΈλ¦¬μ±μΈμ§λ₯Ό μ μκ°ν΄λ³΄κ³ κ²°μ ν΄μΌ ν κ² κ°λ€.
μ€μ λ‘ λ΄κ° μλ΄μ λ°κ³ λ±λ‘μ ν νμμ μλ΄μ¬λ λμμΈκ³Ό νΌλΈλ¦¬μ±μ λΉμ¨μ΄ 50:50μ΄λΌκ³ μκ°νμ§λ§, μ€μ μμ μ 20:80 μ λμλ κ² κ°λ€. μ¦, μλ΄μ¬μ μμ μκ°μ μ€μ μμ μ νλ κ°μ¬μ μμ μ§νμ κ°μ§ μλ€λ κ²μ΄λ€. λ§λΆμ¬ μ°λ¦¬ μμ μ λ€μλ μ½ 14λͺ κ°λμ μκ°μλ€μ΄ λͺ¨λ λ€λ₯Έ μλ΄μ¬μ μλ΄μ λ°μκ³ , μλ΄μ¬λ§λ€ κ°μ λ€λ₯Έ μκΈ°λ₯Ό νμλ€. λμμΈ μμ μ λ μ°μ μνλ μ¬λμκ²λ μ΄ μμ μ μΆμ²νκ³ , νΌλΈλ¦¬μ± μμ μ λ μ νΈνλ μ¬λμκ²λ μ΄ μμ μ μΆμ²νλ€. μ¬μ§μ΄λ νλ‘ νΈμλ κ°λ°μ κ³Όμ μ λ€μΌλ¬ μ¨ μ¬λμκ²λ κ°μ μμ μ μΆμ²νμλ€.
λμ κ°μΈμ μΈ μκ°μ΄μ§λ§ λΉμ νμμ μ€νλμ΄ μλ κ°μμ μ€νλ μμ μΈ κ°μλ₯Ό κΈ°λ°μΌλ‘ μκ°μμ λͺ¨μ§ν΄μΌ νκΈ° λλ¬Έμ μλ΄μ¬λ€μκ²λ, μκ°μμκ²λ μ νμ§κ° 그리 λ§μ§ μμκ² μλκΉ. μ΄μ°¨νΌ κ°μλ₯Ό μ§μ μκ°ν΄λ³΄λ©΄ λΉμ·ν κ°μλ λΉμ·ν 컀리νλΌμ κ°μ§κ³ μκ³ , κ²°κ΅ κ°λ₯΄μΉλ λ΄μ©μ λΉμ·νλ€. νμ μ μ₯μμλ λ λ§μ μκ°μμ ν보ν΄μΌ νκΈ° λλ¬Έμ μ°μ κ°μ§κ³ μλ κ°μλΆν° μΆμ²νκ³ λ³΄λ κ²μ΄λ€.
κ·Έλ¦¬κ³ λ νκ°μ§ λ§λΆμ΄μλ©΄, κ΅λΉμ§μ μμ μ λμμΈ, νΌλΈλ¦¬μ± κ³Όμ μ΄λ€ κ²μ λ£λ μ°μ μ κΈ°μ΄λΆν° νκΈ° λλ¬Έμ λ΄κ° λμμΈμ κ·Έλ€μ§ κ³ λ €νκ³ μμ§ μλ€λ©΄ κ΅λΉμ§μ κ³Όμ μ΄ μ ν©νκ² κ°μ§λ§ λμμΈ ν΄μ μ λ¬Έκ°μ²λΌ λ€λ£¨κ³ μΆλ€λ©΄ λ€λ₯Έ κ³Όμ μ μμ보λμ§ λ°λ‘ 곡λΆλ₯Ό λ ν΄μΌνλ€κ³ μκ°νλ€. λ΄κ° μλ ν μΉλμμΈμλ§ μ§μ€λ κ΅λΉμ§μ μμ μ λ³΄μ§ λͺ»νλ κ² κ°λ€. (νμ§λ§ λμ κ°μ μμ μ λ€μλ μκ°μ μ€μ νΌλΈλ¦¬μ± μνκ³ μΉλμμ΄λλ‘ μ·¨μ ν λΆλ μμΌλ, μΉλμμ΄λλ‘ μ·¨μ μ΄ μμ λΆκ°λ₯ν μ΄μΌκΈ°λ μλ κ² κ°λ€.)
κ²°λ‘ μ λ³ΈμΈμ΄ λμμΈμ μ§μ€νκ³ μΆμμ§, νΌλΈλ¦¬μ±μ μ§μ€νκ³ μΆμμ§λ₯Ό μκ°ν΄λ³΄μλ κ²μ΄λ€.
2. νμ μλ΄μ μ΅λν λ§μ΄ λ°μ보μ.
λμ κ°μΈμ μΈ μκ°μΌλ‘ νμ μλ΄μ μ΅λν λ§μ΄ λ°μ보λ κ²μ μΆμ²νλ€.
λλ μ²μμ μΉλμμΈκ³Ό μΉνΌλΈλ¦¬μ±μ λν΄ μ ν λͺ¨λ₯΄λ μνλ‘ μΈν°λ·μ λͺ λ² κ²μλ§ ν΄λ³΄κ³ νμ μλ΄μ λ°μΌλ¬ λ€λ λλ°, μλ΄μ λ°μΌλ©΄μ λ°°μ°λ κ²λ€μ΄ κ½€ λ§μλ€. μμνλ HTMLκ³Ό CSS, JavaScriptμ μμ£Ό κΈ°λ³Έμ μΈ μ§μμ νμ μλ΄μ¬λ‘λΆν° μ΅λνκ³ , κ·Έλ° λ΄μ©μ λ°λ³΅ν΄μ λ£λ€λ³΄λ μμ°μ€λ 곡λΆλ λμλ€. κ·Έ μΈμλ νμλΌλ¦¬λ μλ‘ κ²¬μ νλ λΆμκΈ°λ μμ΄ λ€λ₯Έ νμ μλ΄λ°κ³ μλ€κ³ νλ©΄ μμν TMIλ λͺ κ° κ±΄μ§μ μλ€. λ°νμ λ§μ΄ νμμΌ λ§μ‘±λκ° λμμ§λ κ²μ΄λ€.
κΈΈλ©΄ λ°λ μ λ€λκ² λ νμμ΄κ³ , μ§μ μ΄ λλ€λ©΄ λͺ λ μ νκ² λ μ§λ λͺ¨λ₯΄λ μΌμΈλ° νμ μλ΄ λͺ λ² λ°μΌλ¬ κ°λ κ²μ μ΄λ €μ΄ μΌμ΄ μλν λ μλ΄μ λ§μ΄ λ°μ보기λ₯Ό μΆμ²νλ€. λͺ κ΅°λ° μλ΄ ν νμμ μ νν λ λΉκ΅ν μ¬νμ΄ ν¬μ§ μλ€λ©΄ κ°κΉμ΄ κ³³μΌλ‘ λ±λ‘νλ κ²λ μΆμ²νλ€. μμΉ¨λΆν° μ λ κΉμ§ μμ μ λ€μ΄μΌ νκΈ° λλ¬Έμ ν΅ν μκ°κ³Ό 체λ ₯κ΄λ¦¬κ° κ΅μ₯ν μ€μνκΈ° λλ¬Έμ΄λ€. νΉλ³ν νμκ° μλ€λ©΄ μ κ·Όμ±μ΄ μ©μ΄ν κ³³μ μ ννλ κ²μ΄ μμΌλ‘ λͺ κ°μμ 곡λΆμ λμμ΄ λ κ²μ νλ¦Όμλ€.
3. κ°κ°κΉμ§ μκ°μ΄ λ¨λλ€λ©΄ HTML, CSS μμ΅μ νμ.
λ§μ§λ§μΌλ‘ νμμ λ±λ‘ν ν κ°κ°κΉμ§ μκ°μ΄ λ¨λλ€λ©΄ HTMLκ³Ό CSS κΈ°μ΄ κ°μλ₯Ό κΌ λ€μ΄λ³΄κΈ°λ₯Ό μΆμ²νλ€.
λλ μ½λ‘λλ‘ μΈν΄ μμ κ°κ°μ΄ μκΎΈλ§ λ―Έλ€μ Έμ λ¨λ μκ°λμ μμ΅μ μ‘°κΈ νμλ€. μμ μ μ λ°λΌκ° μ μμκΉ, κ±±μ μ΄ λμ΄ μμν μμ΅μ΄κΈ°λ νλ€. κ²°κ³Όμ μΌλ‘λ μμ΅μ νκ³ μμ μ λ€μ κ²μ΄ λ무 λΏλ―νκ³ , λ§μ‘±μ€λ¬μμ λμ²λΌ λΉμ 곡μκ° κ΅λΉμ§μμΌλ‘ μΉλμμΈ, μΉνΌλΈλ¦¬μ± μμ μ λ£λλ€κ³ νλ©΄ λ¨λ μκ°μ μμ£Ό κ°λ¨νκ²λΌλ μμ΅μ νκΈ°λ₯Ό μΆμ²νκ³€ νλ€.
λλ μ€νλ₯΄νμ½λ©ν΄λ½μμ μ΄λ²€νΈμ±μΌλ‘ μ§ννλ 짧μ λ¬΄λ£ νΉκ°κ³Ό μνμ½λ©μ μΉκΈ°μ΄ κ°μλ₯Ό λ€μλλ°, μ²μμλ μμνλ μ©μ΄λ ν λ² λ£κ³ 곡λΆν΄λ³΄λ μ€μ νμ μμ μμλ ν¨μ¬ μ΄ν΄κ° μ λμ΄ λ§μ λμμ΄ λμλ€. λλ μ΄ν΄λ ₯μ΄ λλ¦¬κ³ , μ΄ν΄λμ§ μλ λΆλΆμ΄ μμΌλ©΄ λ€μ μ§λλ₯Ό μ λκ°μ§ λͺ»νλ νΈμ΄λΌ λ³Έ κ°μ μ μ μμ΅μΌλ‘ μ»λ κ²λ€μ΄ μ λ§ λ§μλ€. κ°μ΄ μμ μ λ£λ λ€λ₯Έ μκ°μλ€μ΄ ν€λ§€κ³ μμλ, μ λ°λΌκ°λ λλ₯Ό 보며 μλνλ μ λ λ§μλ€.
μμ΅μ ν μκ°μ΄ μμ΄ κ°μκ° μμλλ€λ©΄ 볡μ΅μ μμ΅λ³΄λ€ λ μ€μνλ€κ³ λ§ν΄μ£Όκ³ μΆλ€.
β μκ°λ³΄λ€ κΈμ΄ κΈΈμ΄μ Έ λμ μ§μ€λ ₯μ νκ³λ₯Ό λκ»΄ κΈμ λ κ°λ‘ λλκΉ νλ€κ° νλ²μ μ°κΈ°λ‘ νλ€. κΈμ λ·λΆλΆμΌλ‘ κ°μλ‘ μ‘°κΈ λμ‘ν΄μ§ κ² κ°μ κΈ°λΆμ΄ λ€μ΄ μ°μ°νκΈ΄ νμ§λ§, νΉμλ μ΄ κΈμ 보λ, κ³Όκ±°μ λμ κ°μ΄ μλ‘μ΄ λΆμΌλ‘ μ΄μ§μ μ€λΉνλ λκ΅°κ°μκ² λμμ΄ λμμΌλ©΄ νλ λ°λμΌλ‘ κΈμ μΌλ€. λ¬Όλ‘ κΈ°λ‘ν΄λλ κ±Έ μ’μνλ λμ κ°μΈμ μΈ κΈ°λ‘μ₯μ΄κΈ°λ νλ€.
λ€μ κΈμ μΈμ μ°κ² λ μ§ λͺ¨λ₯΄κ² μ§λ§, λ€μ κΈμμλ κ΅λΉμ§μ νμ μλ΄νκΈ°μ λΉμ 곡μκ° μΉ νΌλΈλ¦¬μ λ‘ μ·¨μ μ ν λ / μ·¨μ μ νμ λμ κ³ λ―Όκ³Ό λμ μκ°, κ·Έλ¦¬κ³ κ·Έ μΈμλ λΈλ‘κ·Έμ κΈ°λ‘νκ³ μΆμλ μ΄μΌκΈ°λ€λ νλμ© μ¨λ³ΌκΉ νλ€.
π¬ νΉμ κΆκΈνμ λΆλΆμ΄ μλ€λ©΄ μΈμ λ λκΈ μ£Όμλ©΄ μ κ° μλ νμμλ λ΅λ³ λ릴κ²μ!