2026년 모바일 시안, 몇 px로 잡아야 하나요?

 

안녕하세요 찐망고 입니다.

 

이전글이 3년전 글이라 다시 써보는 모바일 디자인 단위 설명 포스팅!

모바일 디자인을 위한 해상도와 DPI 이해하기: 안드로이드와 iOS의 차이점

 

이전글의 내용을 짧게 말하면 모바일 디자인 시안은 1배율로 잡는게 맞고,

실무에서는 iOS는 보통 375×812 또는 393×852, Android는 360×780 정도를 많이 기준으로 본다.

다만 정답 해상도가 1개가 있는건 아니고,

현재는 특정기기 해상도보다 반응형 기준 뷰포트를 잡는 방식이 더 중요하다.

 

화면 밀도(DPI/PPI)는 물리적인 화면 1인치 안에 픽셀이 몇개나 들어있는지를 나타내는 밀도 단위이다.

숫자가 높을수록 픽셀이 아주 작고 촘촘하게 박혀 있어서 화면이 선명하고

안드로이드 기준 160dpi가 1배율의 시작이다. (아이폰은 163ppi)

DPI에 따라 결정되는 DPR(Device Pixel Ratio)은 확대배수라고 생각하면 쉬운데

기기가 우리 화면은 밀도가 높으니까 1dp를 2배, 3배로 결정하는 비율을 말한다.

 

dp(Density-independent Pixel)라는 단위는 물리적인 화면크기는 달라도,

우리 눈에 보이는 크기는 똑같게 만들기 위한 단위라고 생각하면 되는데

복잡한 계산보다는 원리를 중심으로 정리해보자면

스마트폰은 기기마다 화면의 밀도(Resolution)가 다르다

만약 100px 크기의 버튼을 만든다면

어떤 기기에서는 크게 보이고 어떤 기기에서는 더 작게 보일 수 있다.

고해상도 기기는 아주 작은 픽셀을 촘촘하게 많이 넣기 때문인데

기기마다 버튼 크기가 제각각이면 사용자도 불편하고 디자인적으로 좋지 않다

픽셀밀도 저해상도/고해상도 픽셀 비교

 

이를 해결하기 위해 등장한것이 dp인데 dp는 실제 물리적인 픽셀 숫자가 아니라,

이정도 크기로 보여라 라고 약속한 논리적 단위이다.

안드로이드에서는 160dpi(1인치당 160개 픽셀이 들어가는 밀도)를 기준(1px)로 잡고

1dp = 1px (160dpi기준) 

가장 표준이 되는 화면에서 1dp는 1px과 같다.

화면 밀도가 2배 높은 폰(320dpi)에서는 시스템이 알아서 1dp를 2px로 그려준다

밀도가 3배 높으면 3px로 그려준다

 

1배율에서 1dp는 곧 1px이고 1px 기준으로 작업하면

수치를 복잡하게 계산할 필요없이 바로 dp단위로 넘겨 줄 수 있다

1px 시안 하나만 있으면 Zeplin이나 Figma같은 프로그램에서

각 기기 배율(2x, 3x등)에 맞춰 값을 자동으로 변환 해준다

요즘 디자인툴은 백터기반이라 1px로 작업해도 고해상도 이미지로 뽑아낼 때 깨지지 않는다

 

안드로이드에 dp가 있다면 iOS에는 pt(point)가 있다.

이름만 다를 뿐 화면 밀도에 상관없이 동일한 크기를 보여주기 위한 단위라는 목적은 같다.

• Android: 160dpi 기준, 1dp = 1px
• iOS: 163ppi 기준, 1pt = 1px

 

결론

• iOS 기본 기준: 375×812
• iOS Pro 계열 참고: 393×852
• Android 기본 기준: 360×780
• 더 보수적으로 최소 폭을 보려면: 360폭 기준 유지

 

 

해상도 이해를 위한 비유 하나 더 

포토샵 A4 작업으로 설명해보는 해상도

 

포토샵에서 A4사이즈로 프린트한다고 가정할 때 72dpi와 300dpi로 새창을 연다.

출력물에 똑같은 동그라미 사이즈가 나와야 한다고 할 때

똑같은 픽셀크기의 동그라미로는 300dpi해상도에서 훨씬 작게 보인다.

결국 더 많은 픽셀을 써서 큰원을 그려야 출력물엔 같은 사이즈의 동그리마가 나온다.

 

모바일에서도 똑같이 일어난다고 가정하면!

A4용지 = 스마트폰의 물리적인 화면크기

해상도(72 vs 300) = 스마트폰의 밀도(DPI/PPI)

원(Circle) = 우리가 디자인 하는 버튼이나 아이콘

 

스마트폰마다 픽셀 밀도가 다르니, 픽셀 개수로 디자인 하면 기기마다 크기가 제각각이 된다.

그래서 우리는 프린트된 실제 크기를 기준으로 삼는 dp나 pt라는 단위를 사용하는 것!

 

 

 

아래 링크는

여러 디바이스 화면에서 동시에 테스트 할 수 있게 해주는

개발자용 브라우저/테스트 도구 사이트이다. 

나는 밀도 확인해보려고 가끔 들어가봄

Devices in Blisk: mobiles, tablets, laptops, and desktops