프로답게 UI 디자인 가이드 요청하기!

우리가 안드로이드 앱 개발을 할 때, 개발 협업에 있어 가장 중요한 부분 중 하나가 바로 "디자이너와의 협업" 입니다.

우리의 앱을 아주 멋지게 디자인해주시는 디자이너분들과 개발 협업을 하기 위해서 기본적인 개념을 알아둔다면, 더욱 효과적이고 서로 해피(Happy)한 협업을 할 수가 있겠죠?

 

디자이너 : 해상도 몇으로 작업해서 디자인 가이드 넘겨드리면 될까요?
개발자 : (몇으로 달라고 하지...?;;;; 고민...난감...)

위와 같은 경우를 겪어본 적이 있으신가요?

어떤 해상도 기준으로 달라고 해야 하는지 난 잘 모르겠고, 그냥 혼자 있고 싶고, 멍해졌던 적이 있으신가요?

 

이럴 때, 더 이상 고민하지 않고 프로답게! 디자인 가이드 요청을 하기 위해서

모바일 앱 UI 디자인 요청 시에 가장 중요한 요소인 "디자인 스펙(해상도 기준, DP단위)" 에 대해 알아보도록 하겠습니다.

 

 

 

DPI는 Dots Per Inch로 1인치에 몇 픽셀이 들어가는지에 대한 값입니다.

예를 들면, 160dpi면 1인치에 160x160개의 픽셀이 들어가는 것입니다.

 

 

갤럭시S부터 갤럭시S20까지

 

매년 새로운 스마트폰이 출시되면서 디바이스 해상도도 달라지고, 그에 따라 DPI가 달라지는데, 그에 맞게 동일한 비율로 보일 수 있도록 대응하기 위해 dp단위를 사용하는 것입니다.

 

우리가 여기서 가장 중요하게 알아야 될 핵심은! 안드로이드의 기준 DPI는 160dpi(mdpi) 입니다.

 

 

그렇기 때문에, mdpi인 경우 1px과 1dp가 동일하며, 현재까지 가장 높은 점유율을 차지하는 비율이 360x640 해상도 이기 때문에

 

우리는 mdpi기준의 360x640 사이즈로 작업을 요청하게 되는 것입니다!

 

다시 돌아와서, 그렇다면 현재 안드로이드 단말기의 해상도는 mdpi가 아닌데 도대체 왜? 360x640으로 해도 되는지에 대해 알아보도록 하겠습니다.

 

 

 

현재 xxxhdpi 해상도까지 나오게 되었는데, mdpi(1x )를 기준으로 각각 1.5배, 2배, 3배, 4배가 되는 것을 확인하실 수 있습니다.

그렇게 되면, 개발자에게 1dp는 디자이너 입장에서 1.5px, 2px, 3px, 4px이 되는 것이죠.

만약, 아이콘 이미지가 기존(mdpi)에 24x24px 이였다면, xhdpi에 맞게 작업해주려면 디자이너는 48x48px 사이즈로 작업을 해줘야 된다는 의미입니다.

 

 

 

하지만, 세상은 갈수록 좋아지고, 기술은 나날이 발전해가고 있습니다.

예전에는 픽셀마다 전부 대응하여 작업을 해주었다면, 현재는 Sketch(스케치) 나 Zeplin(제플린) 툴을 쓰게 되면서, Pixel 기반의 작업이 Vector 기반의 작업으로 자동 변환이 되기 때문에 디자이너들도 여러 해상도를 대응할 필요가 없어졌습니다.

Vector(벡터) 기반이기 때문에 기준이 되는 1배율 사이즈로 작업을 해주기만 하면 되는 것입니다. mdpi 기준으로 말이죠!

 

그러면, 개발자들은 1배율(mdpi)로 작업된 디자인을 보고선 dp단위로 작업을 하게 되면, 디자이너의 디자인과 알맞게 다양한 해상도에서도 동일한 비율로 보일 수 있는 앱을 개발할 수가 있게 되는 것입니다!

 

이제 우리는 디자이너의 질문에 프로답고, 명쾌하게 답을 할 수 있겠죠~?

 

디자이너 : 해상도 몇으로 작업해서 디자인 가이드 넘겨드리면 될까요?
개발자 : mdpi(또는 1x) 기준 360x640 사이즈로 부탁드립니다. ^^ (명쾌!)

마무리

앱 개발자에게는 디자이너와의 협업은 거의 필수적이라고 할 수 있고, 가장 중요한 단계라고 생각합니다.

그렇기 때문에, 성공적인 개발 협업을 위해 최소한의 앱 디자인 스펙 개념을 이해하고 있어야 원활한 커뮤니케이션이 가능하다고 생각하며,

같은 목표를 향해 나아가고 있는 협업자이자 팀이기 때문에, 개발자와 디자이너 역시 결국은 같은 한 팀이라는 사실이 가장 중요한 것 같습니다.

그러기 위해선, 서로의 분야에 대해 최소한의 개념과 이해정도는 알고 있는 것이 좋지 않을까요~? ^^

 

 

[참고] Android Developers Guides https://developer.android.com/training/multiscreen/screendensities?hl=ko