brunch

매거진 UX 관찰과 공부

라이킷 793 댓글 42

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Henry Lee Jan 26. 2017

모바일 기본 단위 DP, PT

안드로이드, IOS 디자인 작업환경

개발에 앞서 초기 스토리 보드의 수를 선정하는 것은 중요한 일입니다. 이유는 당연히 시간과 돈이겠지요. :) 처음으로 모바일 디자인을 시작하시는 분들이 가장 많이 하시는 오류 중 하나가 해상도 대응입니다. 디자이너들은 대학 생활 동안 px, mm 의 단위와 친하게 지냈기 때문에 실제 모바일 환경에서 어떤 단위를 쓰는지 모르는 경우가 많기 때문이죠.. 또한 실제 픽셀 크기와 기본 단위는 알고 있어도, 단위 개념에 대한 이해도가 부족하여, 다른 해상도에 대한 대응을 어떻게 해야 될지 모르는 경우가 아주 많습니다. 그래서 결국 가이드라인이 제대로 되지 않을 수밖에 없게 되죠.

포토샵과 일러스트로 작업만 하던 시대에서 스케치라는 편리한 프로그램으로 전환되는 과정에서 많은 분들이 기본 해상도 개념을 제대로 숙지하지 않은 채 디자인하시는 분들이 많습니다. :( 과거 포토샵과 일러스트로 작업 시에 일일이 계산기 뚜드려가면서 작업해본 경험이 있으시다면... 해상도에 관한 지식은 풍부하실 것이라고 믿습니다. 그래서 오늘 글은 화면 해상도에 관한 기본적인 개념과 더불어 해상도 대응법에 대해서 설명하고자 합니다. 초보자들을 위한 글이에요 :)

먼저 기본 단위부터 설명해드리겠습니다.

안드로이드의 기본 단위는 DP(density independent pixels)이며, IOS의 기본 단위는 PT (point)입니다. 두 가지 모두 좌표 개념과 유사합니다. 그래서 가이드라인을 제작할 때 물체 사이의 간격과 절대 크기, 마진 등을 이 단위들로 표기해야 합니다.

모바일 가이드라인에서 픽셀을 단위를 쓰지 않는 이유는 픽셀의 밀도가 점점 더 좋아지기 때문입니다. 쉽게 말해 스마트폰 해상도가 점점 더 좋아지기 때문이죠. 같은 크기의 스마트폰이더라도 표현하는 픽셀의 밀도가 다르기 때문입니다. 이러한 문제를 해결하기 위해 단위들이 만들어진 것이라 이해하시면 됩니다. 픽셀 밀도에 관한 자세한 설명은 영상을 통해 확인해보시길 바랍니다. (https://vimeo.com/169809377)

위 그림과 같이 같은 크기지만 픽셀의 밀도가 다르기 때문에 고정단위를 사용하게 된 것입니다.

그래서 현재 스케치에서 제공하는 아트 보드의 사이즈를 보시면

아이폰 7은 375x667px 안드로이드는 360x640px로 표기되어 있습니다. 개인적인 바람으로는 pt와 dp로 표기되면 어땠을까 하는 생각이 드네요. 스케치 프로그램의 특징상 벡터 기반이기에 실제 픽셀 사이즈로 작업할 필요가 없습니다. 이것이 스케치의 최대의 장점이라고 할 수 있겠죠. 다시 본론으로 들어가, 아래 그림을 확인해보시면 갤럭시 s5, s6의 화면 비율과 크기가 적혀있습니다. 이 사이트를 확인하시면 다양한 디바이스의 크기를 확인하실 수 있습니다. (https://material.io/devices/)

360 x 640 dp 동일 // 1080 x 1920 px 1440 x 2560px

여기서 살펴보실 점은 기종이 업그레이드되었지만 360x640dp 가 같다는 점과 픽셀이 1080x1920px / 1440x2560px과 같이 증가함을 확인해보실 수 있을 겁니다. 조금 감이 잡히시나요? 같은 dp이지만는 조금 더 선명하게 표현하도록 픽셀의 개수가 많은 것이죠. 즉, dp는 픽셀 단위로 변환될 범용적 단위입니다. 그렇기에 작업환경은 동일하지만 픽셀의 밀도가 다르기에 1x, 2x, 3x, 4x와 같이 에셋들을 구분하여 내보내 주는 것입니다. 쉽게 말해 360x640 dp로 작업하신 후 아이콘과 이미지들을 고 픽셀에서도 선명하게 보이도록 큰 사이즈로 만들어주는 것이지요.(픽셀의 밀도를 채워주기 위해 큰 사이즈로 제작하는 것입니다.) 그리고 제조사에서 이를 고려하여 친절하게 배수로 픽셀 밀도를 증가시키기 때문에 작업환경에는 크게 어려움이 없습니다.

1x 를 제작하신 후에 에셋들을 export 시켜주시면 됩니다.

이미지를 사용하실 때에도 마찬가지입니다. 아래 그림을 확인해보시죠.

고정 사이즈의 이미지를 사용한다면 왼쪽과 같은 오류가 발생하겠지요?

하지만 여기서 모든 이미지를 에셋화하여 내보내실 필요는 없습니다. 세로 폭을 고정 디피로 설정하고 이미지를 앱단에서 리사이징 하는 방법이 있기 때문이죠. 하지만 이 방법의 주의하실 점은 저성능의 스마트폰일 경우 앱 성능을 저하시키거나 픽셀이 뭉개지는 요인이 됩니다.

위 내용이 이해 가신다면 아주 기본적인 개념을 이해하신 겁니다. 짝짝 :) 하지만 모바일 기기들이 모두 동일한 비율과 크기의 dp와 pt로 나오진 않습니다. 그래서 이제 머리를 쓰게 되는 것이죠... 최대한 노가다 작업을 줄이기 위해서. 특히나 와이드 화면으로 즐기라는... 광고와 함께 기존과 다른 비율로 나온 스마트폰이 출시되면 고민거리가 하나 늘게 되는 것이죠. 물론 사용자가 많지 않다면 스토리보드에서 배제되는 경우가 대부분입니다. 그래서 가변 영역을 사용하는 디자인이 등장하게 되는 것이죠. 디자인을 하실 때 좌우 정렬 후에 좌우 마진을 설정해 놓으신다면 가운데 영역이 자연스럽게 가변 영역이 됩니다. 또 다른 방법은 퍼센트로 작업하는 방법이 있습니다. 비율로 디자인하기 때문에 이 방법 또한 다른 해상도를 가진 스마트폰에 대응하는 방법입니다. 다만 디자인에 따라 적절한 방법을 선택해야겠지요. (+01/30 추가내용 가변영역 설정 부분을 잘해주신다면 개발자분들이 매우 좋아하실 겁니다. 추가적으로 안드로이드에서 match_parent는 꽉찬화면, 높이가 가변적으로 변하는 것은 wrap_content 입니다.)

이제 아이폰을 살펴보겠습니다. 위에서 설명드린 바와 같이 IOS의 기본단위는 PT입니다. 물론 스토리 보드를 늘려서 가이드라인을 제작한다면 모든 해상도에 대응을 할 수 있겠지만, 디자이너와 개발자 모두 일이 많아지죠. 그렇기에 최저의 스토리보드를 사용하면서 타 해상도에 어떻게 대응을 하는지에 대해 이해하셔야 합니다. 특히 아이폰은 변태 해상도이기 때문에 머리를 잘만 굴리시면 해상도 대응을 편히 할 수 있습니다.

아이폰3, 4에서 5로 업그레이드될 때 물리적인 세로 길이가 증가했기 때문에 사실 디자인하는 데에는 큰 무리가 없었습니다. 하지만 6가 나오고 6+가 나오면서 해상도 대응을 위해 디자인을 신경 쓸 필요가 있습니다. 여백이 생기기 때문이죠. 해상도를 살펴보겠습니다. 링크를 확인하시면 아이폰 버전별로 구체적인 PT와 Pixel를 확인할 수 있습니다. (https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions) 링크를 잘 살펴보신다면 다운 샘플링 와 업샘플링도 확인하실 수 있을 겁니다. 이 부분은 아이폰에서 실시간으로 다운 샘플링과 업샘플링을 통해 화면을 강제로 변환시키는 것입니다.

기존 아이폰 7 pt를 3배 늘린 크기는 1125 × 2001입니다. 아이폰 7+는 1242 × 2208 이죠. 눈치가 빠르신 분들이라면 이해하실 겁니다. 아이폰 7 사이즈로 작업을 하신 후에 생기는 여백만큼의 공간을 처리해주시면 됩니다. 하지만 여기서 주의하실 점은 PT사이즈 자체가 다르기 때문에 7을 기준으로 아이콘 작업을 하실 시에 7+에서 작게 보일 수 있다는 것입니다. 그렇기에 7을 기준으로 작업을 하되 7+에서 작게 보이지 않게끔 작업하신다면, 많은 수고를 들이지 않은 채 해상도 대응을 하실 수 있을 겁니다. 또한 이미지 사용 시에는 7+에 맞는 크기를 작업하시는 게 문제가 없겠죠. 여기서 추가로 덧붙인다면, 풀 이미지를 사용하실 때 2208 보단 1920 사이즈를 사용하시는 것이 더 낫습니다. 이론상으론 2208 사이즈를 만드는 것이지만, 아이폰 자체에서 어차피 1920으로 다운 샘플링을 하기 때문이죠. 크게 차이는 없지만 이미지 파일의 용량을 조금이나마 더 줄이고자 하신다면 이렇게 사용하시면 됩니다.

그래도 스토리보드를 새로 만드는 것만큼 깔끔한 디자인은 사실 없습니다. 하핫 :)

추가로 이미지 파일의 용량을 줄여주는 사이트 (https://tinypng.com) 저는 이 곳을 이용합니다. 이미지 제작 후에 꼭 용량을 줄여주세요~. 아니면 앱이 무거워지고.. 느려지고.. 합니다.

정리하자면, 스케치에서 제공하는 아트 보드로 작업하는 것이 가장 편리하고 쉽고 좋습니다. 다만, 해상도 대응을 위해서 일일이 아크 보드에 맞춰서 작업할 필요는 없습니다. 가변 영역과 비율을 사용하는 디자인을 조금만 잘 활용하시면 일의 수고를 많이 줄일 수 있다는 이야기입니다~ :) 여기서 픽셀 밀도에 대한 이해도가 높아야 기본 단위로 디자인한 후 에셋과 이미지를 넘길 때 생기는 오류를 줄일 수 있습니다.

추가적으로 아이폰은 3x까지 에셋을 뽑아내지만 안드로이드는 4x까지 뽑아냅니다. 그리고 삼성의 스마트폰의 경우 계속해서 픽셀의 밀도를 높이며 해상도를 증진시키고 있구요. 이유는 뭘까요? 사실 3x까지의 픽셀만 하더라도 사람이 인지하는 최대 범위인데도 불구하고 말이죠. 이유는 바로 VR 때문이 아닐까 생각됩니다. 스마트폰을 통해 VR를 보는 장치의 경우는 순전히 스마트폰 자체의 픽셀을 사용하기 때문에 어지러움증이 발생합니다. VR에서의 사람이 인지하는 픽셀범위는 평면 상의 인지범위보다 크기때문입니다.

이번 글은 정말 모바일 디자인을 하기 위한 초석이라고 생각할 수 있을 것 같습니다. 최대한 쉽게 설명하려 해보았는데 어떻게 전달될지는 잘 모르겠습니다. 저도 처음 시작할 땐 여기저기 블로그 뒤져가며 공부했었으니까요. 잘 정리된 글이 있는데도 불구하고, 용어에 대한 지식이 부족하여 이해 못한 적도 많았구요.

이해가 되지 않거나 실제 작업에 어려운 부분이 있으시면 언제든지 메일이나 댓글 남겨주세요 :)

명절 잘보내시고 새해 복 많이 받으세요 ^^

+2017. 03.26 추가내용

디바이스 픽셀과 기본단위에 대한 이해를 돕고자 관련 내용을 조금 더 추가하겠습니다. (sketch를 기준으로)

ios 를 디자인한다고 했을 때 기본적으로 sketch에서 제공하는 사이즈는 375x667입니다. 그러나 이 사이즈는 실제 아이폰7의 픽셀이 아닙니다. 아이폰7의 실제 픽셀은 1334x750 입니다. 하지만 375x667 사이즈로 작업하는 이유는 1x 의 사이즈로 작업하기 위해서입니다. 1x의 1px = 1pt , 1dp 이기 때문입니다. 아래 그림을 통해 설명을 추가하겠습니다.

그림의 단위를 자세히 살펴보시기 바랍니다. 왼쪽은 스케치에서 제공하는 기본 사이즈입니다. 물론 1x 입니다. 그리고 오른쪽은 실제 사이즈이며 2x입니다. 파란색 사각형을 먼저 살펴보시면, px은 다르나 pt는 동일함을 발견하실 수 있을 겁니다. pt는 디바이스 마다 다른 해상도에 대한 오류를 줄이기 위해 만들어진 단위 입니다. 즉 1x, 2x, 3x 로 늘어났을 때 px의 크기만 늘어났을 뿐이지 pt는 늘어나지 않습니다. 그렇기 때문에 모바일 디바이스의 해상도가 증가하더라도 이전 디바이스와 pt 값이 같다면, 늘어난 배수만큼 아이콘이나 이미지들만 증가시켜주시면 되는것입니다. 즉, 해상도 대응 원하시는 디바이스가 몇 배수인지 확인한 후 export (내보내기) 해주시면 됩니다. 다만 위의 글에서 설명했듯이 아이폰+사이즈들은 3x를 사용합니다. 하지만 1x에서의 pt값이 아이폰7과 다릅니다(가로세로가 조금씩큽니다.) 그렇기에 아이폰7사이즈로 작업하신 아이콘들이 단순히 3x로 export(내보내기) 했을 때 아이폰+에서 보여지는 아이콘은 작게 보이게됩니다. 그래서 여기서는 개개인의 디자이너들의 팁들이 작용하게 되는 것입니다. 아이폰7사이즈를 기준으로 하되 +에서 작게 보이지 않게끔 디자인하는 것이지요.

1x로 제작한 아이콘을 2x로 익스폴트 시키는 이유, 이해되기실 바랍니다.

여기서 만약 작업환경이 1x에서 이미지를 사용한다면 어떨까요? 벡터기반의 아이콘은 몇배수로 늘리던 깨지지 않습니다. 문제는 이미지이지요. 만약 저 스케치 아이콘이 이미지였다면 분명이 해상도가 떨어지게 될 것입니다. 그렇기에 1x로 작업은 하시되 최소 3x의 사이즈의 이미지를 가지고 작업을 하셔야됩니다. 그리고 각각의 배수의 이미지를 따로 저장하시면 좋구요. 물론 개발단계에서 한이미지로 고정사이즈인 pt 나 dp로 지정한다면 한이미지로도 충분히 가능합니다. 이 설명은 위의 글을 다시 한번 읽어보시길 바랍니다.