λμμ΄λκ° μμμΌ ν νμ λ¨μ: SP, DP, DPI, PPI, PX, PT
λμμΈμ λ¨μν μκ°μ μλ¦λ€μμ λμ΄μ μ¬μ©μ κ²½νκ³Ό λ°μ νκ² μ°κ²°λμ΄ μμ΅λλ€. ν¨κ³Όμ μΈ λμμΈμ μν΄μλ λ€μν λ¨μμ κ°λ μ μ νν μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. μ΄ κΈμμλ SP, DP, DPI, PPI, PX, PTμ κ°μ ν΅μ¬ λ¨μλ€μ λν΄ μμλ³΄κ² μ΅λλ€.
1. SP (Scale Independent Pixels)
μλλ‘μ΄λ κ°λ°μμ μ¬μ©λλ κΈκΌ΄ ν¬κΈ° λ¨μμ λλ€. μ¬μ©μμ κΈ°κΈ° μ€μ μ λ°λΌ κΈκΌ΄ ν¬κΈ°κ° μ‘°μ λμ΄, μ κ·Όμ±κ³Ό μ¬μ©μ±μ λμ λλ€. SPλ νΉν μλλ‘μ΄λμ μ κ·Όμ± κΈ°λ₯κ³Ό λ°μ νκ² μ°κ΄λμ΄ μμ΅λλ€.
ex) μ¬μ©μμ μλ ₯ λ¬Έμ λ μ νΈμ λ°λΌ κΈκΌ΄ ν¬κΈ°λ₯Ό μ‘°μ ν λ μ μ©ν©λλ€.
2. DP (Density-independent Pixels)
νλ©΄μ λ°λμ μκ΄μμ΄ μΌκ΄λ ν¬κΈ°λ₯Ό μ 곡νλ μλλ‘μ΄λμ κ°μ ν½μ λ¨μμ λλ€. λ€μν νλ©΄ λ°λμμ μΌκ΄λ UIλ₯Ό μ 곡ν©λλ€. λν, DPλ μ€μ 물리μ λ¨μ(μΈμΉ)μ νλ©΄ ν΄μλλ₯Ό μ°κ²°νλ μ€μν μν μ ν©λλ€.
ex) λ²νΌ, μμ΄μ½ λ±μ μμκ° λ€μν κΈ°κΈ°μμλ μΌκ΄λ ν¬κΈ°λ‘ 보μ¬μ§κ² νλ λ° μ¬μ©λ©λλ€.
3. DPI (Dots Per Inch)
μΈμΉλΉ μ μ μλ₯Ό λνλ΄λ μΈμ λ° νλ©΄ ν΄μλμ λ¨μμ λλ€. μ΄λ―Έμ§μ μ λͺ λμ μΈμ νμ§μ κ²°μ νλ λ° μ€μν©λλ€.
ex) κ³ νμ§ μΈμλ¬Όμ μ μν λ μ΄ λ¨μλ₯Ό κ³ λ €νμ¬ λμμΈν©λλ€.
4. PPI (Pixels Per Inch)
μΈμΉλΉ ν½μ μλ₯Ό λνλ΄λ νλ©΄ ν΄μλμ λ¨μμ λλ€. νλ©΄μ μ λͺ λμ μμΈλλ₯Ό κ²°μ ν©λλ€. PPIλ νλ©΄μ νμ§κ³Ό μ λͺ λμ μ§μ μ μΈ μν₯μ λ―ΈμΉ©λλ€.
ex) κ³ ν΄μλ λμ€νλ μ΄λ₯Ό λμμΈν λ μ€μν κ³ λ € μ¬νμ λλ€.
** DPIμ PPIμ μ°¨μ΄μ μ λͺ νν μ΄ν΄ν΄μΌ ν©λλ€. DPIλ μ£Όλ‘ μΈμ 맀체μ μ¬μ©λλ©° PPIλ λμ§νΈ νλ©΄μ μ¬μ©λ©λλ€.
5. PX (Pixels)
λμ§νΈ μ΄λ―Έμ§λ₯Ό ꡬμ±νλ κΈ°λ³Έ λ¨μμ λλ€. λμ§νΈ λμμΈμμ κ°μ₯ κΈ°λ³Έμ μ΄κ³ μ€μν λ¨μμ΄λ©°, νλ©΄ ν΄μλμ μ§μ μ μΈ κ΄λ ¨μ κ°μ§ μ μμ΅λλ€.
ex) μΉμ¬μ΄νΈ λ μ΄μμ, μ΄λ―Έμ§ ν¬κΈ° μ€μ λ±μ μ¬μ©λ©λλ€.
6. PT (Points) in Printing
μΈμ λμμΈμμ μ¬μ©λλ κΈΈμ΄ λ¨μλ‘, 1ν¬μΈνΈλ 1/72μΈμΉμ λλ€. μΈμ λμμΈμμ μ νν ν¬κΈ°λ₯Ό μ 곡ν©λλ€.
ex) λͺ ν¨, μ λ¨μ§, μ± μ λμμΈ λ± μΈμλ¬Όμ κΈκΌ΄ ν¬κΈ°μ μμ λ°°μΉμ μ¬μ©λ©λλ€.
7. PT (Points) in iOS Development
iOS κ°λ°μμ PTλ νλ©΄μ 물리μ ν¬κΈ°μ μκ΄μμ΄ μΌκ΄λ ν¬κΈ°λ₯Ό μ 곡νλ λ¨μμ λλ€. μ΄λ μμ μΈκΈν μΈμ λμμΈμμμ PTμλ λ€λ₯Έ μλ―Έλ₯Ό κ°μ§λλ€. iOSμμ 1ν¬μΈνΈλ κΈ°λ³Έμ μΌλ‘ 1/72μΈμΉμ ν΄λΉνμ§λ§, νλ©΄ λ°λμ λ°λΌ ννλλ μ€μ ν½μ μκ° λ¬λΌμ§λλ€. λ€μν ν΄μλμ Apple κΈ°κΈ°μμ μΌκ΄λ μ¬μ©μ κ²½νμ μ 곡νκΈ° μν΄ νμμ μ λλ€. μλ₯Ό λ€μ΄, iPhoneμ Retina λμ€νλ μ΄μ μΌλ° λμ€νλ μ΄μμ κ°μ ν¬κΈ°μ μμλ₯Ό νννκΈ° μν΄ μ¬μ©λ©λλ€. Retina λμ€νλ μ΄μμλ 1ν¬μΈνΈκ° 2x λλ 3x ν½μ λ‘ ννλ μ μμ΅λλ€.
ex) μ±μ λ²νΌ, ν μ€νΈ, μ΄λ―Έμ§ λ± UI κ΅¬μ± μμμ ν¬κΈ°λ₯Ό μ€μ ν λ μ¬μ©ν©λλ€.
'π‘ UXUI > UI' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[UI] 2λ°°μ, 3λ°°μ μμ μ νλ μ΄μ : νΌκ·Έλ§μ ν¬ν μ΅ (1) | 2023.12.22 |
---|