πŸ“±κΈ°κΈ°λ³„ ν™”λ©΄ 해상도 κ°€μ΄λ“œ

λ””λ°”μ΄μŠ€ μΉ΄ν…Œκ³ λ¦¬λ₯Ό μ„ νƒν•˜λ©΄ 논리 해상도, 물리 해상도, DPI, DPR을 ν•œλˆˆμ— ν™•μΈν•©λ‹ˆλ‹€.

λ””λ°”μ΄μŠ€λ…Όλ¦¬ px물리 pxDPRPPI

논리 ν”½μ…€ vs 물리 ν”½μ…€

CSS와 λ””μžμΈ νˆ΄μ—μ„œ μ‚¬μš©ν•˜λŠ” 픽셀은 논리 ν”½μ…€(CSS px)μž…λ‹ˆλ‹€. λ ˆν‹°λ‚˜λ‚˜ 고해상도 λ””μŠ€ν”Œλ ˆμ΄μ—μ„œλŠ” 화면에 μ‹€μ œλ‘œ 더 λ§Žμ€ 물리 픽셀을 μ‚¬μš©ν•΄ 더 μ„ λͺ…ν•œ 이미지λ₯Ό ν‘œμ‹œν•©λ‹ˆλ‹€. λ””λ°”μ΄μŠ€ ν”½μ…€ λΉ„μœ¨(DPR)이 2xλ©΄ 1 CSS pxλ‹Ή 4개의 물리 ν”½μ…€(2Γ—2)이 μ‚¬μš©λ©λ‹ˆλ‹€.

λ””μžμΈ μž‘μ—… κΈ°μ€€ 해상도

Figma, Sketch λ“± λ””μžμΈ νˆ΄μ—μ„œλŠ” 1x(논리 ν”½μ…€) κΈ°μ€€μœΌλ‘œ μž‘μ—…ν•©λ‹ˆλ‹€. 내보내기 μ‹œ 2x(λ ˆν‹°λ‚˜), 3x(μŠˆνΌλ ˆν‹°λ‚˜) μ˜΅μ…˜μœΌλ‘œ 내보내면 고해상도 κΈ°κΈ°μ—μ„œλ„ μ„ λͺ…ν•˜κ²Œ ν‘œμ‹œλ©λ‹ˆλ‹€. λͺ¨λ°”일 λ””μžμΈμ€ 375px λ˜λŠ” 390px λ„ˆλΉ„λ₯Ό κΈ°μ€€μœΌλ‘œ ν•˜λŠ” 것이 μΌλ°˜μ μž…λ‹ˆλ‹€.

λ°˜μ‘ν˜• λ””μžμΈ 브레이크포인트 μ°Έκ³ 

λͺ¨λ°”일: 375~430px, νƒœλΈ”λ¦Ώ: 768~1024px, λ°μŠ€ν¬νƒ‘: 1280px 이상이 일반적인 κΈ°μ€€μž…λ‹ˆλ‹€. μ‹€μ œ λ””λ°”μ΄μŠ€ 논리 해상도λ₯Ό μ°Έκ³ ν•΄ 브레이크포인트λ₯Ό μ„€μ •ν•˜λ©΄ 더 μ •ν™•ν•œ λ°˜μ‘ν˜• λ ˆμ΄μ•„μ›ƒμ„ ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€.

자주 λ¬»λŠ” 질문

이미지λ₯Ό μ–΄λ–€ ν•΄μƒλ„λ‘œ μ œκ³΅ν•΄μ•Ό ν•˜λ‚˜μš”?

DPR 3x κΈ°κΈ°λ₯Ό μ§€μ›ν•˜λ €λ©΄ 이미지λ₯Ό ν‘œμ‹œ 크기의 3배둜 μ œκ³΅ν•΄μ•Ό ν•©λ‹ˆλ‹€. srcset 속성을 μ‚¬μš©ν•΄ 1x, 2x, 3x 이미지λ₯Ό 각각 μ œκ³΅ν•˜λ©΄ 기기에 λ§žλŠ” 해상도λ₯Ό μžλ™μœΌλ‘œ λ‘œλ“œν•©λ‹ˆλ‹€.

PPI와 DPI의 μ°¨μ΄λŠ” λ¬΄μ—‡μΈκ°€μš”?

PPI(Pixels Per Inch)λŠ” ν™”λ©΄μ˜ ν”½μ…€ 밀도이고, DPI(Dots Per Inch)λŠ” μ›λž˜ 인쇄 μš©μ–΄μž…λ‹ˆλ‹€. ν™”λ©΄ 해상도λ₯Ό 이야기할 λ•ŒλŠ” PPIκ°€ μ •ν™•ν•œ ν‘œν˜„μ΄μ§€λ§Œ, μ‹€λ¬΄μ—μ„œλŠ” ν˜Όμš©ν•΄μ„œ 쓰이기도 ν•©λ‹ˆλ‹€.