Android ui guide px 적용 방법

UX 인사이트

[바이널엑스] GUI 디자이너가 알아야 할 GUI 가이드라인 문서 작업의 기본 원칙

본문의 GUI Guideline에 대한 정의와 내용은 Google사의 Android OS를 기반으로 정리하였으며, 각 회사 및 제조사별로 다른 부분이 있음을 미리 알려드립니다.

GUI 실무에서 꼭 알아야 하는 부분 중 하나가 바로 가이드라인 문서 작업인데요. 이번 포스팅에서 GUI 가이드라인이 실무에서 어떤 역할을 하는지, 가이드라인 작업에 앞서 알아야할 것들이 무엇인지 간략하게나마 알려드리려고 합니다.

1. GUI 가이드라인의 개념 및 목적

산업디자인에서 디자인을 실물로 구현할 때 필요한 ‘3D모델링, 인쇄’ 등의 과정이 있듯이GUI디자인도 실제로 디자인을 구현해주는 ‘개발’ 과정이 필요합니다. GUI Guideline은 UX/UI기획, GUI디자인이 완료된 화면을 토대로 해당 프로젝트의 실물 개발에 필요한 이미지 리소스, 텍스트 크기, 기타 컴포넌트의 속성 및 위치 등을 정리한 문서를 말합니다.

간단히 말해 디자인을 개발하기 위한 설명서, 즉 개발자와 디자인 실무자를 연결해주는 일종의 협업 도구라고 설명 드릴 수 있습니다. GUI 가이드라인은 회사마다, 클라이언트마다 조금씩 다른 포맷으로 작성되는데, 보는 방법이나 표기 방법이 조금씩 다를지라도 결국엔 개발자가 쉽고 원활히 알아볼 수 있도록 문서를 작성하는 것이 중요합니다.

개발자와의 ‘Communication’ 도구

UX기획이 기발하고, UI구조가 참신하고, GUI그래픽 스타일이 출중하더라도 소비자의 손에 닿기 전 마지막 과정은 개발구현입니다. 개발자에게 정확한 가이드라인을 제공해주지 않는다면 디자이너의 의도가 제대로 전달되지 않을테고, 의도가 제대로 전달 되지 않으면 좋은 품질의 결과물을 보장할 수 없습니다. 디자인이 구현되는 마지막 과정인 개발을 원활하고, 정확하게 하기 위해 개발자와의 커뮤니케이션 수단인 가이드라인의 역할은 매우 중요합니다.

2. GUI 가이드라인에서 표현해야 하는 것들

디자인이 완료된 화면 상에 있는 모든 요소들(크기, 위치, 파일명 등) 및 버튼과 같은 컴포넌트를 터치했을 시 발생하는 피드백, 화면전환 효과 등 눈에 보이지 않는 요소들까지 문서 상에 모두 표기해야 합니다. 이 부분은 가이드라인 작업뿐만 아니라 GUI디자인 작업을 할 때도 고려되어야 하는 부분인데요, 입력 피드백이나 화면 전환 효과에 특별한 모션/트랜지션이 들어가는 경우에는 개발자에게 모션 샘플 및 가이드를 따로 제공해주기도 합니다.

위에 설명 드린 것처럼 화면 구조상 보이지 않는 터치피드백, 모션 등 가이드라인 상에 포함되어야 하는 내용들은 디자인 작업을 할 때에도 고려하면서 작업을 진행하는 것이 좋습니다.

3. GUI 가이드라인에서 사용하는 수치

PX / DP(DIP) / PT / SP

기본적으로 Android용 Guideline에서 크기, 간격등의 수치를 표현할 때 DIP라는 유닛을 사용합니다. PX단위가 아닌 DP단위로 표기하는 이유는, 해상도의 파편화가 심하기 때문인데, DP단위로 해상도 확장성이 있는 GUI가이드라인 문서 작업이 가능하기 때문입니다.

단일 해상도를 위한 가이드라인이거나, 특별한 경우가 아니라면 PX 단위는 가급적 사용하지 않는 것이 좋습니다. 텍스트의 경우는 DP, PT로 표기하며, 크기가 사용자의 설정에 따라 가변 되는 경우에는 SP로 표기합니다.

3-1. 픽셀 (Pixel)

<이미지 출처 : http://uxd.so/h/wp-content/uploads/2012/12/device-pixels.png>

디스플레이로 표현되는 모든 그래픽은 픽셀(Pixel)

픽셀(Pixel)은 디스플레이(Display)로 구현되는 디자인을 제작할 때, 가장 기본이 되는 단위로, 여러 개의 픽셀이 모여 그래픽을 형상화하게 됩니다. 디스플레이 상에서 표현되는 모든 그래픽은 픽셀로 이루어져 있다고 생각하시면 됩니다.

3-2. DPI

DPI = Pixel 밀집도

Dots Per Inch 즉, 1인치에 들어가는 Dots의 양을 뜻합니다. DPI값이 높을수록 더 많은 Pixel을 사용하여 세밀하고 정교한 그래픽의 표현이 가능합니다.

실제 작업하면서 모니터로 보는 리소스 크기(상단)와 DPI가 다른 디바이스에서 보는 물리적으로 동일한 크기(하단)에서의 밀도를 비교한 화면입니다. 보시다시피 DPI가 높을수록 물리적으로 동일한 크기에 픽셀이 더 많이 표현되므로 세밀한 표현을 할 수 있습니다.

3-3. DP(DIP)

DP(DIP) = 눈에 보이는 물리적 절대 크기, Pixel의 그룹단위

Density Independent Pixel, DP(DIP)는 하나의 단위로 각기 다른 DPI를 가진 디바이스들을 커버하기 위해 Android에서 제공한 유닛입니다. DPI에 따라서 1dp에 표현되는 픽셀 수가 달라지기 때문에DIP/DPI에 관한 내용은 GUI에 관심이 있으시다면 잘 알아두시는 게 좋습니다.

DIP를 추출하는 계산법은 DIP=Pixel / (DPI/160) 으로, 현재 작업하고 있는Target Screen의 DPI를 알아야 DIP를 추출해 낼 수 있습니다.

물론 디자인 작업 전에도 해상도 및 DPI/DIP확인은 필수겠죠? 위 그림을 보시면 mdpi가 Pixel과 수치상 1:1 비율이므로 mdpi를 기준으로 해상도를 생각하시면 쉽습니다. 예를 들어 현재 작업중인화면이 FHD(xxhdpi)라 하면 1dp는 mdpi 대비 3배많은 픽셀을 가진다고 생각하면 이해하기 편하실 겁니다.

DP는 같은 값일 때 DPI가 달라도 물리적인 크기가 거의 동일하게 보입니다.

즉, DPI가 높고 낮음에 따라 물리적으로 동일한 크기에 픽셀이 더 많고 적을 수 있습니다.

조금 복잡하죠? 위 수치개념은 실무에서 계속 사용하니 꼭 알아두셔야 합니다. 이처럼 복잡한 DIP개념을 사용하는 이유는 바로 ‘해상도 확장성’ 때문인데요, 하나의 가이드라인으로 여러 가지의 해상도에 대한 대응이 가능하기 때문입니다. DIP단위를 사용하여 여러 해상도에 대응 가능한 GUI 가이드라인 문서를 개발자에게 제공해주고, 리소스만 DPI별로 제공하는 방식으로 작업되고 있습니다.

<이미지 출처 : http://www.postype.com/files/attach/post/2013/12/09/dd8de78c8760c6ceb4a95f51f321b0d4.png>

DIP를 사용할 때도 여러 해상도에 쉽게 대응하기 위해서는 짝수DIP를 사용하는 것이 좋습니다.

위 표를 보시게 되면, hdpi의 경우 홀수dp일 때, 픽셀 환산 시 소수점이 나오게 됩니다.

보통 mdpi부터 xxhdpi까지 해상도별 Asset을 만들어 줘야 하는데 소수점이 나오게 되면, 컴포넌트 위치가 틀어지거나 리소스 이미지가 깨져 보일 수 있으므로 짝수 dp를 사용하여 디자인 및 Guideline 작업을 하시는 게 좋습니다.

4. 마치며

간략하게 GUI 가이드라인의 역할과 Android GUI 가이드라인에서 사용하는 수치들에 대한 내용을 말씀 드렸는데요. GUI 가이드라인 작업뿐만 아니라 디자인 작업을 진행할 시에도 조금이나마 도움이 되었으면 좋겠습니다.

<참고사이트>

http://developer.android.com/

http://hankim.me/

http://www.kmshack.kr/

홈 스케치 #3 앱 UI 디자인의 시작, OS 별 해상도 및 안드로이드 DP 단위 – 스케치 강좌

스케치 강좌 세 번째입니다. 이번에는 앱 UI 디자인을 하기 위해서 알아야 할 가장 기본적인 것을 알아볼 거예요. OS 별 아트 보드 규격입니다. 아이폰 앱, 안드로이드 앱 디자인을 하려면 사이즈 규격부터 알아야겠죠? 같은 아이폰끼리도 iPhone 8인지 iPhone XS 인지에 따라 사이즈가 다릅니다.

안드로이드 디자인 시에 가장 중요한 DP 단위의 개념도 영상을 통해 알아봅시다.

*스케치 툴은 Mac OS에서 사용이 가능합니다.

핵심 요약

아트 보드 만드는 방법은 단축키 A를 누르면 됩니다. 우측에 OS 별 아트 보드 사이즈 프리셋들이 있습니다.

사실 아트 보드 만드는 것보다 더 중요한 개념이 있습니다. 안드로이드와 iOS 둘 다 px이라는 절댓값을 사용하지 않고 dp나 pt라는 상대값을 사용합니다. 이에 대한 개념을 이해하는 게 더 중요하겠죠?

우선, 안드로이드 DP 단위를 알아봅시다.

DPI는 Dots per inch로 1인치에 몇 픽셀이 들어가는지에 대한 값입니다. 예를 들어 10dpi 이면, 1인치에 10×10 100개의 픽셀이 들어가는 것입니다. 핸드폰 해상도에 따라 DPI가 달라지는데 그에 맞게 상대적으로 대응할 수 있도록 dp 단위를 사용하는 것입니다.

매년 새로운 스마트폰이 출시하면서 해상도도 달라지고, 스크린 사이즈와 비율도 달라지죠… 아주 고통스럽네요.

여기서 알아야 될 핵심은 안드로이드의 기준은 mdpi입니다. 160DPI가 MDPI입니다.

MDPI인 경우에는 우리에게 익숙한 1px이 1dp와 같습니다. 과거로 돌아가 갤럭시 s3에 맞는 디자인을 하는 경우에는 mdpi의 해상도를 지원했기 때문에 1px = 1dp를 기준으로 작업을 하는 거죠. 360×640 px로 말이죠.

그런데 이후에 기술이 발전하며 해상도가 엄청 좋아지기 시작했습니다.

가장 최근에는 640DPI = xxxdpi까지 오게 되었죠. 그럼 여기서도 1px=1dp가 성립할까요? Nope!

아니죠. 해상도가 높아졌기 때문에 mdpi에서 작업한 px에 좋아진 만큼 배수를 해줘야 해상도가 깨지지 않고 선명하게 나오게 됩니다.

계산법은 아래서 배워볼게요.

xhdpi(320dpi)로 해상도가 좋아진 스마트폰을 디자인하려면 mdpi 기준인 160dpi로 나누면 2라는 수치가 나오죠. 개발할 때 코드상으로 1dp는 디자이너 입장에서 2px이 되는 겁니다. 아이콘을 작업할 때 기존에 24x24px이었다면, xhdpi에 맞게 작업해주려면 48x48px로 작업을 해줘야 된다는 의미입니다.

가장 좋은 화질의 xxxhdpi에서 작업 시에도 마찬가지입니다. 640 나누기 160은 4입니다. 1dp = 4px이라는 의미예요. 아이콘의 기본 사이즈가 24×24였다면 96×96으로 작업을 해줘야 되는 겁니다. dp에 대한 개념을 이해하셨죠?

너무 걱정할 필요 없습니다. 스케치에서는 배율로 에셋을 출력해주는 기능이 있고, 벡터 기반이기 때문에 1배율로 작업하면 되는 거예요. mdpi 기준으로 말이죠. 아트 보드의 크기가 작다 보니 용량도 작아서 작업 속도와 파일 관리에 유리하죠.

지금까지 안드로이드에 대해 알아봤는데, 아이폰에도 비슷한 개념이 있습니다. dp 대신 pt라는 단위를 사용합니다. 이 역시 상대값이며 아이폰 종류에 따라 x2배 x3배 해줘야 되는 경우가 있습니다.

레티나 디스플레이라고 들어보셨죠? 모바일 웹을 작업할 때 360×640으로 작업했었다면, 레티나 디스플레이인 아이폰에서 화질에 문제없이 잘 보이려면 x2배! 720×1280에 맞는 이미지 작업을 해주면 됩니다.

실제 아이폰8의 규격은 375×667이죠. 그에 맞는 이미지를 제작하려면 750×1334로 작업해줘야 됩니다.

아주 고통스럽죠…? 처음 UI 디자인 쪽으로 접하시는 분이라면 이해하기 어려울 수 있습니다. 실제로 해당 개발 사이트와 관련 문서들을 찾아가며 공부하시는 게 더 정확하게 도움 될 거예요.

UI 디자인 쪽으로 일을 하시는 분들은 간과하면 안 되는 게 개발자들과의 협업을 피할 수 없습니다. 앱 디자인을 하기 위해서는 최소한 OS 별 가이드라인과 그에 맞는 상대값 단위를 이해하고 있어야 원활하게 진행이 가능하죠. 가끔 웹디자인부터 하시는 분들이 앱 디자인으로 넘어와서 어려워하는 부분인데, 사이즈와 가이드라인 정도는 아는 게 좋겠죠?

8,164