πŸ’‘ UXUI/UI

[UI] λ””μžμ΄λ„ˆκ°€ μ•Œμ•„μ•Ό ν•  ν•„μˆ˜ λ‹¨μœ„: SP, DP, DPI, PPI, PX, PT

Zoeeey 2023. 12. 22. 15:16

λ””μžμ΄λ„ˆκ°€ μ•Œμ•„μ•Ό ν•  ν•„μˆ˜ λ‹¨μœ„: 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 ꡬ성 μš”μ†Œμ˜ 크기λ₯Ό μ„€μ •ν•  λ•Œ μ‚¬μš©ν•©λ‹ˆλ‹€.