π λͺ©μ°¨
μ΄λλΉ XDλ UI/UX λμμ΄λλ€μκ² νμμ μΈ λκ΅¬λ‘ μ리 μ‘μμ΄μ. μΉμ¬μ΄νΈμ λͺ¨λ°μΌ μ± λμμΈμ μ§κ΄μ μΌλ‘ μ μνκ³ , μΈν°λν°λΈν νλ‘ν νμ κΉμ§ μ½κ² λ§λ€ μ μλ κ°λ ₯ν κΈ°λ₯μ κ°μΆκ³ μμ΄μ.
νΉν νμ μ΄ μ€μν νλ λμμΈ νκ²½μμ, μ΄λλΉ XDλ λμμΈ νμΌμ μ€μκ°μΌλ‘ 곡μ νκ³ νΌλλ°±μ λ°μ μ μλ κΈ°λ₯μ΄ κ°λ ₯ν μ₯μ μ΄μμ.
μ΄λλΉ XDμ κΈ°λ³Έ κ°λ κ³Ό νΉμ§ ποΈ
μ΄λλΉ XDλ UI/UX λμμΈμ μν κ°λ ₯ν ν΄μ΄μμ. μ¬μ©μκ° μ§κ΄μ μΌλ‘ μΈν°νμ΄μ€λ₯Ό μ€κ³νκ³ , μΈν°λμ μ μΆκ°νλ©°, μμ½κ² λμμΈμ 곡μ ν μ μλλ‘ λμμ€μ.
μ£Όμ νΉμ§μ μ΄ν΄λ³΄λ©΄, μ²«μ§Έλ‘ λ²‘ν° κΈ°λ° λμμΈ λꡬλΌλ μ μ΄μμ. ν¬ν μ΅μ΄λ μΌλ¬μ€νΈλ μ΄ν°μ²λΌ ν½μ λ¨μ λμμΈμ΄ μλλΌ, λ²‘ν° κ·Έλν½μ μ¬μ©ν΄ ν΄μλμ κ΄κ³μμ΄ μ λͺ ν λμμΈμ μ μν μ μμ΄μ.
λμ§Έ, λ€μν λλ°μ΄μ€λ₯Ό μν μνΈλ³΄λ κΈ°λ₯μ΄ μ§μλΌμ. μΉ, λͺ¨λ°μΌ, νλΈλ¦Ώ λ± λ€μν νλ©΄ ν¬κΈ°μ λ§μΆ° λμμΈμ ν μ μκ³ , λ°μν ν¬κΈ° μ‘°μ λ κ°λ₯ν΄μ.
π μ΄λλΉ XDμ μ£Όμ κΈ°λ₯ μ 리 β¨
κΈ°λ₯ | μ€λͺ |
---|---|
λ²‘ν° κΈ°λ° λμμΈ | κ³ ν΄μλμμλ μ λͺ ν UI/UX μ μ |
νλ‘ν νμ΄ν | λμμΈμ μ λλ©μ΄μ κ³Ό μΈν°λμ μΆκ° |
μ€μκ° νμ | νμκ³Ό μ€μκ° νΌλλ°± λ° μμ κ°λ₯ |
νλ¬κ·ΈμΈ μ§μ | νΌκ·Έλ§, μ€μΌμΉ λ± λ€λ₯Έ ν΄κ³Ό μ°λ κ°λ₯ |
ν¨μ¨μ μΈ λμμΈ μμ€ν κ΅¬μΆ ποΈ
λμμΈ μμ€ν μ UI/UX λμμΈμμ νμ μμμμ. μ΄λλΉ XDμμλ μΌκ΄λ λμμΈμ μ μ§νκ³ ν¨μ¨μ μΌλ‘ κ΄λ¦¬ν μ μλλ‘ λ€μν κΈ°λ₯μ μ 곡ν΄μ.
λμμΈ μμ€ν μ ꡬμΆνλ©΄ νμ κ° νμ μ΄ μνν΄μ§κ³ , νλ‘μ νΈμ μΌκ΄μ±μ΄ μ μ§λΌμ. μ€νμΌ κ°μ΄λ, μ»΄ν¬λνΈ λΌμ΄λΈλ¬λ¦¬, μμ λ° νμ΄ν¬κ·ΈλνΌ μ€μ λ±μ 체κ³μ μΌλ‘ κ΄λ¦¬ν μ μμ΄μ.
μ΄λλΉ XDμμ λμμΈ μμ€ν μ ꡬμΆνλ €λ©΄, μ»΄ν¬λνΈ κΈ°λ₯μ νμ©νλ©΄ μ’μμ. λ²νΌ, μμ΄μ½, μ λ ₯ νλ κ°μ UI μμλ₯Ό μ»΄ν¬λνΈλ‘ μ μ₯νλ©΄, μ¬λ¬ νλ©΄μμ λμΌν μ€νμΌμ μ½κ² μ μ©ν μ μμ΄μ.
π¨ μ΄λλΉ XDμ λμμΈ μμ€ν ν΅μ¬ μμ π‘
μμ | μ€λͺ |
---|---|
μ»΄ν¬λνΈ | λ°λ³΅λλ UI μμλ₯Ό μ μ₯νκ³ μ¬μ¬μ© |
μ€νμΌ κ°μ΄λ | μμ, νμ΄ν¬κ·ΈλνΌ, UI μμ μ μ |
λμμΈ ν ν° | μμ, ν°νΈ ν¬κΈ° λ±μ κ°μ λ³μλ‘ κ΄λ¦¬ |
λΌμ΄λΈλ¬λ¦¬ 곡μ | νμλ€κ³Ό κ³΅ν΅ UI μμ° κ³΅μ |
νλ‘ν νμ΄νκ³Ό μ λλ©μ΄μ κΈ°λ₯ π¬
μ΄λλΉ XDμ κ°μ₯ κ°λ ₯ν κΈ°λ₯ μ€ νλκ° λ°λ‘ νλ‘ν νμ΄νμ΄μμ. νλ‘ν νμ΄νμ νμ©νλ©΄ μ€μ μ¬μ©μκ° κ²½νν μΈν°νμ΄μ€λ₯Ό 미리 ν μ€νΈνκ³ , μΈν°λμ μ μΆκ°νμ¬ λ³΄λ€ μμν λμμΈμ λ§λ€ μ μμ΄μ.
νλ‘ν νμ΄νμ λ§λ€κΈ° μν΄μ 'νλ‘ν νμ ' λͺ¨λλ‘ μ νν ν, μνΈλ³΄λλ₯Ό μ°κ²°νλ©΄ λΌμ. λ²νΌμ ν΄λ¦νμ λ λ€λ₯Έ νλ©΄μΌλ‘ μ΄λνκ±°λ, νΉμ μμμ μ λλ©μ΄μ μ μ μ©ν μ μμ΄μ.
νΉν μ΄λλΉ XDμ ‘μλ μ λλ©μ΄νΈ’ κΈ°λ₯μ μμ°μ€λ¬μ΄ νλ©΄ μ νμ κ°λ₯νκ² ν΄μ€μ. μλ₯Ό λ€μ΄, μ΄λ―Έμ§κ° νλλκ±°λ μμΉκ° λΆλλ½κ² μ΄λνλ ν¨κ³Όλ₯Ό μ½κ² μ μ©ν μ μμ΄μ.
π νλ‘ν νμ΄ν κΈ°λ₯ λΉκ΅ν π
κΈ°λ₯ | μ€λͺ |
---|---|
νλ©΄ μ ν | λ²νΌ ν΄λ¦ μ λ€μ νλ©΄μΌλ‘ μ΄λ |
μλ μ λλ©μ΄νΈ | μ€λΈμ νΈ ν¬κΈ°, μμΉ, λΆν¬λͺ λ λ³κ²½ μ λλ©μ΄μ |
μ€λ²λ μ΄ | νμ μ΄λ λͺ¨λ¬ μ°½μ νλ©΄ μμ νμ |
λ§μ°μ€ λ° ν°μΉ μ μ€μ² | λλκ·Έ, μ€μμ΄ν, ν κΈ°λ₯ ꡬν |
곡μ λ° νΌλλ°± κ΄λ¦¬ λ°©λ² π¬
μ΄λλΉ XDλ νμ μ μ΅μ νλ κΈ°λ₯μ μ 곡ν΄μ. λμμΈ νμΌμ μ€μκ°μΌλ‘ 곡μ νκ³ , νμμ΄λ ν΄λΌμ΄μΈνΈμκ² νΌλλ°±μ λ°μ μ μμ΄μ.
νλ‘ν νμ μ 곡μ νλ €λ©΄ ‘κ³΅μ ’ νμμ λ§ν¬λ₯Ό μμ±νλ©΄ λΌμ. νΉμ μ¬μ©μμκ²λ§ μ κ·Ό κΆνμ λΆμ¬ν μλ μκ³ , λ§ν¬λ₯Ό ν΅ν΄ λꡬλ νμΈν μ μλλ‘ μ€μ ν μλ μμ΄μ.
νΌλλ°±μ λ°μ λλ μ΄λλΉ XDμ 'λκΈ' κΈ°λ₯μ νμ©νλ©΄ νΈλ¦¬ν΄μ. λμμΈ νλ©΄μμ νΉμ μμλ₯Ό ν΄λ¦νλ©΄ λ°λ‘ μ½λ©νΈλ₯Ό λ¨κΈΈ μ μμ΄μ λΉ λ₯΄κ² μμ ν μ μμ΄μ.
π’ μ΄λλΉ XD νμ κΈ°λ₯ λΉκ΅ π
κΈ°λ₯ | μ€λͺ |
---|---|
곡μ λ§ν¬ μμ± | μΉμμ λ°λ‘ λμμΈ λ―Έλ¦¬λ³΄κΈ° κ°λ₯ |
λκΈ κΈ°λ₯ | λμμΈ μμ μ§μ νΌλλ°± μμ± κ°λ₯ |
λ²μ κ΄λ¦¬ | λμμΈ λ³κ²½ μ¬νμ κΈ°λ‘νκ³ λ³΅μ κ°λ₯ |
λμμΈ μ¬μ 곡μ | κ°λ°μκ° νμν μ½λ λ° μ€νμΌ μ 보 μ 곡 |
μ΄λλΉ XDμ λ€λ₯Έ ν΄ μ°λνκΈ° π
μ΄λλΉ XDλ λ¨λ μΌλ‘λ κ°λ ₯νμ§λ§, λ€λ₯Έ λμμΈ λ° κ°λ° ν΄κ³Ό μ°λνλ©΄ λμ± ν¨μ¨μ μΌλ‘ μ¬μ©ν μ μμ΄μ. νΉν νΌκ·Έλ§, μ€μΌμΉ, ν¬ν μ΅, μ νλ¦° λ±κ³Ό μ°λνλ©΄ λ€μν κΈ°λ₯μ νμ©ν μ μμ£ .
μλ₯Ό λ€μ΄, ν¬ν μ΅μ΄λ μΌλ¬μ€νΈλ μ΄ν°μμ μ μν λμμΈ μμλ₯Ό μ΄λλΉ XDλ‘ κ°μ Έμ UIλ₯Ό ꡬμ±ν μ μμ΄μ. λν μ νλ¦°(Zeplin) κ°μ κ°λ° νμ ν΄κ³Ό μ°κ²°νλ©΄, κ°λ°μμκ² λμμΈ κ°μ΄λλ₯Ό μ½κ² μ 곡ν μ μμ΄μ.
μ΄λλΉ XDμ νλ¬κ·ΈμΈ κΈ°λ₯λ κ°λ ₯ν΄μ. λ€μν νλ¬κ·ΈμΈμ μ€μΉνλ©΄ μν¬νλ‘μ°λ₯Ό λμ± μ΅μ νν μ μμ΄μ. μλ₯Ό λ€μ΄, μ λλ©μ΄μ μ μΆκ°νκ±°λ, μ€μκ° λ°μ΄ν° μ°λ κΈ°λ₯μ μ¬μ©ν μλ μλ΅λλ€.
π μ΄λλΉ XDμ μ°λ κ°λ₯ν μ£Όμ ν΄ π
ν΄ | μ°λ κΈ°λ₯ |
---|---|
ν¬ν μ΅ (Photoshop) | PSD νμΌμ XDμμ λ°λ‘ νΈμ§ κ°λ₯ |
μΌλ¬μ€νΈλ μ΄ν° (Illustrator) | λ²‘ν° κ·Έλν½μ XDλ‘ κ°μ Έμ UI λμμΈ νμ© |
νΌκ·Έλ§ (Figma) | XD νμΌμ νΌκ·Έλ§λ‘ λ³ννμ¬ νμ κ°λ₯ |
μ νλ¦° (Zeplin) | κ°λ°μμκ² λμμΈ μ€ν 곡μ |
μ νν° μ΄ννΈ (After Effects) | XDμμ λ§λ λμμΈμ λͺ¨μ κ·Έλν½μΌλ‘ λ³ν |
μ΄λλΉ XD μ€λ¬΄ νμ© ν π‘
μ΄λλΉ XDλ₯Ό μ€λ¬΄μμ λμ± ν¨μ¨μ μΌλ‘ μ¬μ©νλ €λ©΄ λͺ κ°μ§ κΏνμ μκ³ μμ΄μΌ ν΄μ. νΉν λ°λ³΅λλ μμ μ μ€μ΄κ³ , λμμΈ νμ§μ μ μ§νλ κ²μ΄ μ€μνμ£ .
첫 λ²μ§Έ νμ ‘λ¦¬νΌνΈ 그리λ(Repeat Grid)’ κΈ°λ₯μ μ κ·Ή νμ©νλ κ±°μμ. μΉ΄λν UIλ 리μ€νΈ κ°μ μμλ₯Ό λ°λ³΅ν λ νλνλ 볡μ¬ν νμ μμ΄ λΉ λ₯΄κ² μ λ ¬ν μ μμ΄μ.
λ λ²μ§Έλ ‘μ»΄ν¬λνΈ’ κΈ°λ₯μ΄μμ. λ²νΌμ΄λ μμ΄μ½ κ°μ μμλ₯Ό μ»΄ν¬λνΈλ‘ λ§λ€λ©΄, λͺ¨λ νλ©΄μμ μΌκ΄ μμ μ΄ κ°λ₯ν΄μ μ μ§λ³΄μκ° ν¨μ¬ μ¬μμ Έμ.
λ§μ§λ§μΌλ‘, ν€λ³΄λ λ¨μΆν€λ₯Ό μ΅νλλ©΄ μμ μλλ₯Ό λν ν₯μμν¬ μ μμ΄μ. μμ£Ό μ¬μ©νλ κΈ°λ₯μ λ¨μΆν€λ₯Ό νμ©ν΄μ λΉ λ₯΄κ² μμ νλ κ² ν΅μ¬μ΄λλλ€! β¨οΈ
π μ΄λλΉ XD μ€λ¬΄ κΏν μ 리 π―
ν | μ€λͺ |
---|---|
리νΌνΈ 그리λ νμ© | 리μ€νΈ UIλ₯Ό λΉ λ₯΄κ² μμ±νκ³ μ λ ¬ |
μ»΄ν¬λνΈ μ¬μ© | κ³΅ν΅ μμλ₯Ό ν λ²μ μμ κ°λ₯ |
λ¨μΆν€ μ΅νκΈ° | μμ μλλ₯Ό λμ΄κ³ λ°λ³΅ μμ μ€μ΄κΈ° |
νλ‘ν νμ ν μ€νΈ | λμμΈμ μ¬μ©μ μ μ₯μμ 미리 κ²ν |
νλ¬κ·ΈμΈ νμ© | μμ΄μ½, λ°μ΄ν° μλ μ λ ₯ λ± κΈ°λ₯ νμ₯ |
μ΄λλΉ XD κ΄λ ¨ μμ£Ό 묻λ μ§λ¬Έ (FAQ) β
Q1. μ΄λλΉ XDλ 무λ£λ‘ μ¬μ©ν μ μλμ?
A1. λ€, μ΄λλΉ XDλ κΈ°λ³Έ κΈ°λ₯μ΄ ν¬ν¨λ λ¬΄λ£ λ²μ μ΄ μ 곡λΌμ. νμ§λ§ ν νμ κΈ°λ₯κ³Ό μΌλΆ κ³ κΈ κΈ°λ₯μ μ λ£ νλμμλ§ μ¬μ©ν μ μμ΄μ.
Q2. νΌκ·Έλ§(Figma)μ μ΄λλΉ XDμ μ°¨μ΄μ μ 무μμΈκ°μ?
A2. νΌκ·Έλ§λ ν΄λΌμ°λ κΈ°λ°μΌλ‘ μ¬λ¬ λͺ μ΄ λμμ μμ ν μ μλ νμ κΈ°λ₯μ΄ κ°μ μ΄κ³ , μ΄λλΉ XDλ μ΄λλΉ μνκ³(ν¬ν μ΅, μΌλ¬μ€νΈλ μ΄ν° λ±)μμ μ°λμ΄ λ°μ΄λμ.
Q3. μ΄λλΉ XDμμ λ§λ λμμΈμ HTML/CSSλ‘ λ³νν μ μλμ?
A3. μ§μ HTML/CSSλ‘ λ³ννλ κΈ°λ₯μ μμ§λ§, νλ¬κ·ΈμΈμ΄λ μ νλ¦°(Zeplin), μ λλΉ(Anima) κ°μ ν΄μ νμ©νλ©΄ κ°λ°μκ° μμ½κ² μ½λλ‘ λ³νν μ μμ΄μ.
Q4. μ΄λλΉ XDμμ ν¬ν μ΅(PSD) νμΌμ λΆλ¬μ¬ μ μλμ?
A4. λ€, μ΄λλΉ XDμμ ν¬ν μ΅ νμΌμ μ§μ κ°μ Έμ¬ μ μμ΄μ. κ°μ Έμ¨ νμλ XDμμ νΈμ§μ΄ κ°λ₯νμ§λ§, μΌλΆ κ³ κΈ ν¨κ³Όλ μ§μλμ§ μμ μ μμ΄μ.
Q5. μ΄λλΉ XDμμ λ§λ νλ‘ν νμ μ λͺ¨λ°μΌμμ λ³Ό μ μλμ?
A5. λ€, 곡μ λ§ν¬λ₯Ό μμ±νλ©΄ λͺ¨λ°μΌ λΈλΌμ°μ μμ λ°λ‘ νμΈν μ μκ³ , 'Adobe XD μ±'μ μ€μΉνλ©΄ λ μννκ² ν μ€νΈν μ μμ΄μ.
Q6. μ΄λλΉ XD λ¨μΆν€λ₯Ό μ΄λμμ νμΈν μ μλμ?
A6. XD λ΄μμ Ctrl + Shift + ? (Windows) λλ Cmd + Shift + ? (Mac)λ₯Ό λλ₯΄λ©΄ μ 체 λ¨μΆν€ λͺ©λ‘μ νμΈν μ μμ΄μ.
Q7. μ΄λλΉ XDμμ νλ¬κ·ΈμΈμ μ΄λ»κ² μ€μΉνλμ?
A7. μ΄λλΉ XDμμ ‘νλ¬κ·ΈμΈ’ νμ μ΄κ³ μνλ νλ¬κ·ΈμΈμ κ²μν ν ‘μ€μΉ’ λ²νΌμ λλ₯΄λ©΄ λ°λ‘ μΆκ°ν μ μμ΄μ.
Q8. μ΄λλΉ XD νμΌμ νΌκ·Έλ§(Figma)λ‘ λ³νν μ μλμ?
A8. λ€, XD νμΌμ SVG λλ PNGλ‘ λ΄λ³΄λ΄μ νΌκ·Έλ§μ κ°μ Έμ¬ μ μκ³ , μΌλΆ μλνν° νλ¬κ·ΈμΈμ νμ©νλ©΄ μ§μ λ³νλ κ°λ₯ν΄μ.