[UE5] DPI 스케일링?

 

DPI란 Dot per inch의 약자로 검색해보면 해상도 측정 단위라고 나올 것이다. 

 

1인치 안에 몇 개의 픽셀이 존재하는가를 뜻하는데 티스토리 로고를 캡쳐해서 확대해 보았다.

 

 

네모 모양의 픽셀들이 보일것이다. 1인치에 72개의 픽셀과1인치에 108개의 픽셀이 있는 것 중에 어떤 것이 더 선명하게 보일까? 정답은 1인치에 108개의 픽셀이다. 주어진 공간에 더 세밀하게 많은 픽셀이 있으면 더 선명하게 보인다. 

 

이때 1인치에 72개의 픽셀로 이루어지면 72dpi, 1인치에 108개의 픽셀로 이루어지면 108dpi라고 한다. 

 

이걸 설명한 이유는 언리얼에서 제공해주는 DPI 스케일링이 무엇인지 어디다 쓰는것인지 나도 매번 헷갈리고 까먹기 때문에 적어보려고 설명했다.

 

 

https://docs.unrealengine.com/5.0/ko/dpi-scaling-in-unreal-engine/

DPI 스케일링

 

 

윈도우에서 디스플레이를 검색하면 배율, 레이아웃등을 설정하는 곳이 나온다. 내 해상도는 1920 X 1080으로 권장된 해상도에 맞춰져 있고, 배율은 125% 로 사용하고 있다.

 

이 때 크롬을 켜면 

 

웹사이트의 UI가 이정도로 보인다. 그러면 권장보다 한 단계 낮은100%로 해보겠다.

 

 

 

 

미묘하게 UI들이 축소된 것이 보이는가?

 

비교를 위해 로그인 버튼 쪽을 나란히 두었다. 

 

 

이처럼 해상도에 따라서 배율을 조정해보면  아이콘, 텍스트 ,버튼 등의 적당한 크기가 필요하다는 사실을 느끼게 된다.

 

모바일게임으로 예를 들면, 게임을 할 때 모두가 같은 모바일을 사용하는게 아니라 유저마다 각각 다른 모바일을 사용하게 될 것이다. 우리는 각기 다른 해상도를 갖고 있는 모바일 환경에 유연하게 대처할 수 있어야 할텐데, 그 때 이 DPI 스케일 세팅으로 화면에 대응하는 UI를 제공할 수 있다.

 

 

 

UMG의 해상도를 조절해서 확인해보자.

 

캔버스 패널과 이미지를 하나 추가해놓고 오른쪽의 스트레치 가능한 아이콘이 보이는데 이걸 당겨보겠다. 참고로 현재 1280X720으로 세팅되어있다.

 

DPI 스케일은 0.67이다.

 

 

 

 

잡고 늘리면 해상도가 적혀있고 왼쪽 하단에 내가 현재 늘려놓은 해상도와 오른쪽 아래에 DPI Scale 값이 변화 하는 것이 보일 것이다. 

1920X1080 으로 늘려보면 DPI Scale이 1.0으로 나온다. 

 

이게 뭘까 도대체? DPI Scale이라고 적혀있는 곳 오른쪽 설정 아이콘을 누르거나 ProjectSettings - Engine - UserInterface를 보면 

커브가 있는 것을 찾을 수 있을 것이다.  커브를 보면 몇 개의 Key가 찍혀있고 그 Key를 눌러보면 Resolution 에 따른 scale이 세팅된 것을 볼 수 있다. 그래서 UMG에서 해상도를 늘렸을 때 Scale이 변하고 UI도 그 스케일만큼 커졌다 줄었다를 반복하게 되는 것이다. 

 

만약 모든 Resolution에 대해 scale 값이 1.0 으로 세팅되어 있다면 어떨까? 

 

 

 

 

DPI 커브에 scale 1.0으로 되어있는 Key만 남기고 모두 지워보았다. 

 

 

 

이전에 1980X1080일 때 DPI Scale이 1.0 이었다가 1280X720을 향해서 줄이는데도 DPI Scale이 전혀 변하지 않는 것이 보일 것이다. 덩달아 UI 사이즈에도 변화가 없다. 

 

 

즉, 각 해상도에 따라 적절한 비율을 세팅해주면 그 해상도에 맞춰 적절한 크기로 UI의 크기등을 바꿔주는 것이다. 

 

 

두 개의 확실한 변화를 보여주기 위해 다시 세팅을 돌려놓고, 캡쳐해보았다.

 

 

1280X720일 때의 UI 비율

 

 

 

1920X1080일 때의 UI 비율

 

모바일 게임의 경우에는 특히나 고려할 것이 많을테니 DPI 스케일을 잘 활용해보자.