Screen Compatibility

Posted by Eun JongHyeok on February 13, 2021
  1. 개요
    1. 다른 화면 크기
    2. 다른 픽셀 밀도
    3. display cutout
    4. Test
    5. Reference

개요

안드로이드 기기는 매우 다양한 화면 크기와 다양한 픽셀 밀도를 가지고 있습니다. 또한 일부 기기는 다른 일반적인 기기와 모양이 조금 다르기도 합니다. 그렇기 때문에 화면을 디자인 할 때 모든 기기에서 만족스러운 모양이 나오게 하는 것은 힘듭니다.

따라서 이와 관련된 개발자 문서를 정리해봅니다. 자세한 내용은 참조에서 개발자 문서를 확인하면 좋을 것입니다.

다른 화면 크기

디자인을 다양한 화면 크기에 적용하는 방법으로 레이아웃을 유연하게 구성하는 방법이 있습니다.

ConstraintLayout은 유연한 레이아웃을 구성하기 좋은 레이아웃입니다. 다른 뷰들과의 공간적 제약, 관계 등을 이용하여 구성하므로 화면의 크기가 달라지더라도 관계에 의해 배치되게됩니다. 개인적으로 ConstraintLayout은 다른 레이아웃에 비해 어렵게 느껴지지만 익숙해지면 보다 깔끔한 레이아웃을 구현하는데 도움을 줄 것이라 생각합니다. ConstraintLayout에 대한 정리는 따로 하겠습니다.

또한 하드 코딩 레이아웃 크기를 사용하지 않는 것이 있습니다. 만일 뷰의 크기를 300dpx300dp 이런 식으로 지정한다면 크기가 다른 화면에서는 짤리거나 어색하게 배치될 수 있기 때문입니다.

다른 방법으로는 대체 레이아웃을 만드는 방법이 있습니다. 화면 크기에 따라 레이아웃을 다르게 배치하는 방법입니다.

  1. 기본 레이아웃을 열고 툴바에서 Orientation for Preview 를 클릭합니다.
    Capture1
  2. 드롭다운 목록에서 Create Landscape Variant와 같은 추천 변형을 클릭하여 만들거나 Create Other를 클릭합니다.
    Capture2
  3. Create Other를 선택한 경우 Select Resource Directory가 나타납니다. 여기에서 왼쪽의 화면 한정자를 선택하여 Chosen qualifiers 목록에 추가합니다. 한정자를 추가했으면 OK를 클릭합니다.
    Capture3

qualifiers, 다양한 한정자들로 레이아웃을 나누어 작성할 수 있습니다. 그리고 동일한 구성요소는 프래그먼트로 UI Component를 모듈화하여 중복되지 않도록 합니다.

다른 픽셀 밀도

레이아웃을 구성할 때 주로 px보다는 dp를 많이 보셨을 것입니다. dp는 밀도 돌립형 필셀이라는 의미로 다양한 밀도에서 동일한 크기의 뷰를 그려주기 위해 필요합니다. 당연히 같은 화면 크기라도 어떤 기기에서는 고화질로 더 많은 픽셀로 이루어져 있기 때문에 px을 기준으로 디자인할 경우 픽셀 밀도에 띠라 다른 결과가 나오기 마련입니다.

dp 계산법

1dp는 160dpi라는 기준 밀도에서 1픽셀과 동일한 가상의 픽셀 단위입니다.

px = dp * (dpi / 160)

다른 dpi에서의 계산은 다음과 같이 할 수 있습니다.

Capture3

역으로 Pixel2라는 기기에서 가로 dp를 계산은 다음과 같이 작성할 수 있습니다.

dp = px * (160 / dpi)
411.428... = 1080 * (160 / 420)

밀도한정자를 통해서 밀도가 다른 레이아웃에 다른 dp 값을 적용시킬 수 있습니다.

개발자 문서에 나와있는 밀도 한정자에 대한 표입니다.

밀도 한정자 설명
ldpi 저밀도(ldpi)의 화면(~120dpi)에 대한 리소스입니다.
mdpi 중밀도(mdpi)의 화면(~160dpi)에 대한 리소스입니다. (이것이 기준 밀도입니다.)
hdpi 고밀도(hdpi)의 화면(~240dpi)에 대한 리소스입니다.
xhdpi 초고밀도(xhdpi)의 화면(~320dpi)에 대한 리소스입니다.
xxhdpi 초초고밀도(xxhdpi)의 화면(~480dpi)에 대한 리소스입니다.
xxxhdpi 초초초고밀도(xxxhdpi) 사용(~640dpi)에 대한 리소스입니다.
nodpi 모든 밀도에 대한 리소스입니다. 이들은 밀도 독립적 리소스입니다. 이 한정자 태그가 지정된 리소스의 경우 현재 화면의 밀도에 관계없이 시스템에서 리소스 크기를 조정하지 않습니다.
tvdpi mdpi와 hdpi 사이의 화면(약 213dpi)에 대한 리소스입니다. 이 값은 ‘기본’ 밀도 그룹으로 간주되지 않습니다. 대개의 경우 텔레비전용이며 앱에서는 대부분 필요하지 않습니다. 앱은 대부분 mdpi 및 hdpi 리소스를 제공하는 것으로 충분하며 시스템에서 필요에 따라 확장합니다. tvdpi 리소스를 제공해야 한다고 생각되는 경우 1.33*mdpi로 크기를 지정합니다. 예를 들어 mdpi 화면의 100px x 100px 이미지가 tvdpi에서는 133px x 133px입니다.

display cutout

컷아웃은 흔히 알고있는 애플의 노치 디스플레이처럼 액정이 직사각형이 아니라 일부가 홈이 파여있는 기기에서 해당 영역을 어떻게 처리하는지에 대한 것입니다. 이에 대해서는 따로 설명하도록 하겠습니다.

Test

가상 에뮬레이터를 이용하거나 Firebase Test Lab를 이용하도록 합니다.

Reference

https://developer.android.com/guide/practices/screens_support

Screen
dp
← Previous Post Next Post →