기기_별_해상도_차이로_인해_UI_문제_발생

💥 기기 별 해상도 차이로 인해 UI 문제 발생

문제 정의

현재 mdpi, hdpi 등 해상도가 낮은 기기와 xhdpi 등의 해상도가 높은 기기에서 UI가 다르게 보이는 문제가 발생했다. 아래 사진에 낮은 기기의 해상도에서는 여러 버튼이 겹쳐서 보이는 문제가 발생했고, 해상도가 높은 기기에서도 메인 배경 이미지와 지도 버튼이 겹치는 문제가 발생했다.

weight가 무시되는 문제

처음 Home Screen을 구현했을 때 (빨간 영역 : 파란 영역 = 1 : 2) 로 구현했었다. 또한 파란 영역 내에서도 높이 비율을 (지도 : (나의 도감 + 카메라) = 1 : 1 ) 로 지정했었다.

위 비율로 구현하고 임시 버튼을 사용했을 땐 아무런 문제가 발생하지 않았으나 벡터 이미지를 버튼 배경으로 사용한 후 비율을 유지하기 위해 aspectRatio 를 사용하고 나서 문제가 발생하기 시작했다.

• weight 비율 (파란색 영역 : 빨간색 영역 = 1 : 2) ↓↓↓↓↓

• 기존의 weight 를 유지한 채 aspectRatio 를 사용하고 난 후의 비율 ↓↓↓↓↓

기존의 1 : 2 비율로 유지되던 파란색 영역과 빨간색 영역이 갑자기 바뀌어 버렸다.

이미지의 비율을 유지한 채로 fillMaxWidth() 를 적용하면서 기존 weight 의 영역을 벗어나게 되버린 것이다.

문제 해결 방법

이 문제를 해결하기 위한 첫 번째 방법으로는 벡터 이미지의 비율을 무시하고 ContentScale.FillBounds 를 사용하여 weight 영역 만큼 강제로 늘리는 방법이다.

하지만 이 방법은 이미지를 강제로 늘렸기에 이미지가 매우 부자연스러워 보이는 두 번째 문제가 발생했다.

이 방법을 해결하기 위하여 여러 방법을 시도했지만 전부 실패했다.

결과적으로는 근본적으로 피그마 디자인을 수정하기로 결정했다.

안드로이드 UI/UX를 디자인 할 때, 360x640 를 기준으로 디자인해야 한다.

참고 : https://brunch.co.kr/@artpen/6

즉, 360 x 640 (1배수) 단위에서 각 각 배율을 넣어본다면 아래와 같아진다.

1 : 360 x 640

1.5 : 540 x 960

2 : 720 x 1280

3 : 1080 x 1920

4 : 1440 * 2560

즉, 우리가 알고있는 해상도가 되는 것이다.

위 1배수 단위로 디자인하고 난 후 비율 (weight)를 적용한다면 여러 해상도에서도 동일한 비율로 컴포넌트가 표시될 것이다.

문제 해결 진행

피그마 기존 디자인을 아기자기한 360x640 비율로 재 디자인한 후 각 각의 이미지 벡터 파일을 적용하니 제대로 보이게 되었다.

각 각의 컴포넌트 높이 비율은 (파란색 : 보라색 : 연두색 = 1 : 1 : 1.7)로 정하였다.

결과

여전히 해상도가 낮은 기기에서 아래 버튼 부분이 잘리긴 하지만 이전보다는 훨씬 나아졌다.