UI 디자인 스터디 : 해상도의 거짓말, UI 스케일링
우리가 알고있던 해상도의 개념은 허상에 불과하다
시작하기에 앞서서
모바일 디자인을 주로하다가. PC 웹디자인을 하게되는 UI 디자이너들의 경우. 가장 많이 헷갈리게되는게. 바로 '모바일에서의 비례와 PC 비례에서의 차이점입니다. 대부분 모바일의 해상도에 익숙해져있다보니. 디바이스 자체의 크기에 대한 차이를 체감하기가 어렵기 때문이죠. 그래서 가능하면 여러 레퍼런스 자료들을 보고 디자인을 하기를 추천하곤 합니다. 그러나 이 역시도 '기기의 화면크기'에 대한 감각이나. 정확한 비례적 분석이 없이는 성공하기가 힘듭니다.
그래서 확인해야하는 것들이. PC 자체의 해상도에 대한 부분인데. 대부분의 경우는 1920x 1080 해상도를 사용하니까. 당연한 것처럼 해당 해상도를 사용하게되는 경우가 많습니다. 그러나 정작 해상도라는게. '정말 믿을수 있는 것인지에 대해서는 의문을 갖는 사람이 많지 않죠. 이제부터 필자가 하게될 이야기는 - 4k 해상도를 사용하게되면서 발견한 내용에 대한 이야기입니다. 실제로 픽셀로 된 해상도라는게. 얼마나 허술하고, 깨어지기 쉬운 개념인지에 대한 이야기죠. 이 부분을 직접 체감할 수 있도록 4K와, UI 스케일링에 대한 이야기를 해보도록 하겠습니다.
4K 해상도란?
4K는 영어로 K가 네개있다는 의미로. 1,000을 영어로 1k라고 줄여서 말합니다. 즉 4k란 4천이란 의미이고. 픽셀상으로 해상도가 4천 픽셀에 해당하는 해상도를 4k라고 하는거죠. 4k해상도라고 했을때, 주로 4096 x 2160 해상도와 3840 x 2160. 두가지 해상도가 거론되곤 합니다. 그러나 이 두가지는 엄밀하게 4k와 UHD 해상도라고 해야 정확한 표현이 됩니다.
4096 x 2160 : 4천을 넘는 해상도 = 4K
3840 x 2160 : UHD
1k가 1080p니까. 4 곱해서 4320 픽셀이 되면 4k 아닌가? 하고 생각할 수도 있습니다. 하지만 4k 해상도는 우리가 생각하는 것보다 계산식이 좀 이상합니다. 그러니 이해하기 어려울 때에는 유튜브에 올라온 4k 영상들의 기준을 체크해보면 이 내용을 쉽게 확인할 수 있습니다.
720p = 1280 x 720 (HD)
1080p = 1920 x 1080 해상도 (1k / HD)
1440p = 2560 x 1440 해상도 (2k / QHD )
2160p = 3840 x 2160 해상도 (4k / UHD )
간단히 이렇게 정리하면 되겠네요.
UI 디자이너가 4K 해상도를 꼭 알아야되나요?
일단 답을 말해두자면. 당장 필수적인건 아니에요. 현재 전세계 PC 모니터 통계를 보면. 아직도 1336 x 768이 우세하고. 그 다음이 1920x 1080 해상도인것을 알 수 있죠. 당장은 4k 해상도 몰라도 디자인하는데 전혀 문제가 없고. 적어도 2~3년간은 이런 상황이 이어질 겁니다.
그럼 1920 x 1080 기준으로만 디자인하면 되니까. 알 바 없겠네? 라고 생각할 수도 있습니다. 하지만 대부분의 UI디자이너들은 - 모니터의 개념이 '픽셀수'보다 디바이스 크기에 있다는 점을 간과하는 경우가 많습니다. 지금 스마트폰 해상도가 2560x 1440 해상도를 넘어서고있다는걸 기억해보세요. 그렇다고 1920x 1080 해상도에서 스마트폰 크기가 기존의 2배로 커진건 아니잖아요?
전세계에서의 PC 모니터 해상도 기준 (2019년 1월)
http://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
1위 : 1366 x 768 / 26%
2위 : 1920 x 1080 / 20%
한국에서의 PC 모니터 해상도 기준 (2019년 1월)
http://gs.statcounter.com/screen-resolution-stats/desktop/south-korea
1위 : 1920 x 1080 / 39%
2위 : 기타 해상도 / 26%
이 통계에서 가장 재미있는건 - 점차 한국에서의 1920x 1080 해상도 비율이 많이 떨어지고 있다는 점입니다. 게다가 사실상 PC 모니터 해상도의 기준을 확인하는건. 통계의 맹점입니다. 해상도만 갖고서는 사용자들이 사용하고있는 모니터의 화면 크기를 알 수 없기 때문입니다.
4K? 해상도는 실제 화면크기와 상관이 없다
모바일 디바이스의 해상도가 높아지듯이. PC 모니터의 해상도도 계속 높아지고있습니다. 현재까지는 1920x 1080 해상도의 모니터가 가장 많이 사용되고있죠. 그러나 2560 x 1440 해상도의 모니터도 점차 사용률이 높아지고있고. 디자인 업계에서는 4k 해상도의 아이맥이나, 4k 모니터를 사용하는 경우도 흔해졌어요. 그러나 그건 어디까지나 '해상도'의 이야기이고. 디바이스 자체의 크기는 해상도와 전혀 상관이 없습니다.
똑같은 40인치 TV라도 해상도는 천차만별이다40인치 TV인데 1920x 1080 해상도인 경우가 있습니다. 망점이 다 보이고 해상도가 지저분해서 TV 보기가 어려운 수준이죠. 그럼 40~50인치에 2560x 1440 해상도면 어떨까요? 그것도 그럭저럭일 겁니다. 그런데 여기에 4k 해상도가 들어가면요? 모니터로 쓸만한 수준이 되지 않을까요? 실제로 일반적인 UI 디자인을 할 때에는 1920x 1080 해상도면 문제없이 사용이 가능하겠지만. 영화나 게임같은 컨텐츠 업계에서는 이야기가 많이 달라집니다. 오늘의 주제인 4k해상도에서의 UI 스케일링이라는 개념이 나오는것도 바로 이것 때문이죠.
점차 넓은 모니터에 대한 선호도가 높아지고있는게 현실입니다. 그렇기에 기존의 24인치~27인치 모니터에 대한 선호도에도 변화가 있을것이라는게 제 관점입니다. 그리고 그런 이유에서 더욱더 4k와 1080p 해상도간의 변환법. 비례적 차이를 알아두는게 중요할거라는게. 이번 이야기의 핵심이 되는 것이죠.
큰 화면에서 UI 스케일링은 왜 필요할까?
예를 들어 스타크래프트 2같은 경우 UI 스케일링을 제공하지 않는 게임입니다. 그렇다보니 1920x 1080 해상도의 화면을 40인치 이상의 화면에서도 그대로 확인해야하죠. 컨텐츠 화면과 UI 요소들이 서로 함께 동일한 비율로 뻥튀기가 되었기 때문입니다.
스타크래프트2의 화면은 40인치 화면에서 보기엔 비례가 너무 크다. 2018년도에 들어서는 여러 컨텐츠들이 4K화면을 지원하기 시작했습니다. 그러나 필자가 TV를 구매한 2017년도만 하더라도. 4k 해상도에 맞춘 컨텐츠들이 많지않았어요. 그래서 대부분의 영상 / 게임 컨텐츠들이 모두 1920x 1080 해상도나. 2560x1440해상도를 - 그대로 뻥튀기해서 늘려놓은 경우가 대부분이었죠. 실제로 기존의 컨텐츠들이 4K해상도에 대응하기 위한 방법은 크게 두가지가 있었습니다.
1. UI와 컨텐츠를 1080p 기준에서 동일한 배율로 모두 늘려준다.
2. UI는 그대로 두고, 컨텐츠가 보여지는 뷰포트 영역만을 늘린다.
대부분 3d 게임의 경우는 해결이 쉬웠습니다. 배경이 보여지는 뷰포트 크기만 조절해도 - 4k 해상도에 대한 대응엔 문제가 없었죠. 하지만 UI에 대해서만큼은 문제가 해결되기 어려웠습니다. 실제로 HD 버전으로 리마스터된 여러가지 게임들의 경우는. 1920x 1080 해상도의 크기에 UI 요소의 크기가 맞춰져있기 때문입니다. 여기에서 1080p 기준의 UI를 그대로 두자니, 텍스트 크기가 너무 작거나 UI가 인식하기 어려운 경우가 생겨났기 때문이죠.
데우스엑스 : 휴먼 레볼루션의 해상도 문제 사례. 글씨가 작아서 읽을 수가 없다.기존과 동일한 크기를 유지한다해서. 최적화가되는 것은 아닙니다. 필자가 최근에 겪은 사례중 하나인데. 한 게임에서는 40인치 화면에서 작은 UI 비례가 그대로 유지되어, 글씨를 읽을 수 없는 수준이 되었습니다. 화면에 상대적으로 스케일링이 적용되지 않았기 때문에 발생하는 문제입니다.
모든 UI는 화면 크기를 기준으로 최적화가 필요하다
일반적으로 1920x 1080 해상도에 맞춰진 화면은 전혀 문제가 안됩니다. 그러나 화면크기가 커진다면 - UI의 크기가 상대적으로 작아지고, 텍스트는 살짝 커져야만 합니다.
위의 스크린샷은 스펠포스 3라는 게임을 각각 27인치와 40인치 화면에 최적화시킨 UI 크기입니다. UI 요소들의 크기는 작게 변했지만, 배경과 건물, 유닛들의 크기에는 전혀 영향을 주지 않은 것을 알 수 있죠. 그러나 두개의 스크린샷이 각자 - 다른 크기의 화면에서 보여진다면 어떻게될까요?
놀랍게도 UI의 크기가 거의 동일해보이고. 배경과 건물, 유닛들의 크기는 상대적으로 더 커보이는걸 볼 수 있습니다. 화면의 상대적인 크기 차이 때문인데요. 이런 관점에서 볼 때. 1920 x 1080 해상도에 최적화된 사이트는. 2560 x 1440 해상도와, 3840 x 2160 해상도에서는 '매우 크거나, 매우 작아보이는' 이상한 화면처럼 보이게될거라는걸 알 수 있습니다.
지금은 게임 컨텐츠들이 이 흐름에 발맞추고있을 뿐이지만. 일반 PC 웹디자인들이 여기에 동참해야한다면 어떨까요? 4k에 대한 대비와, 크기 변환에 대한 공식. 대처법같은게 필요하지 않을까요? 필자가 생각한건 바로 이런 지점에서. 게임 UI들의 비례를 분석해볼 필요가 있다고 느끼게됐습니다. 세세한 표현법이 아니라. 비례와, 변환 공식 같은게 존재할테니까요.
결론 : 해상도보다, 실제 화면 크기를 확인해야한다
결국 우리가 생각하고있는 1920 x 1080의 해상도는 완벽한 것이 아닙니다. 어떤 크기의 화면에서 바라보게되는지에 따라서 - 완성도가 달라보일 수 밖에 없죠. 해상도가 커지고, 모니터 크기가 커질수록. UI 디자인의 배율은 뻥튀기되고, 텍스트는 작아져서 인식하기가 어려운 수준이 됩니다. 필자가 추후 게임 UI의 스케일링 테스트와, OS별 비례 분석을 해보려는 것도 이런 이유에서입니다.
필자가 4K에 40인치 이상의 화면을 사용하게된 계기는. 매우 단순한 이유에서였습니다. 그러나 이런 실험의 과정에서 해상도의 허상에서 벗어나게될 수 있었습니다. 또한 UI 스케일링의 중요성에 대해서도 확인을 하게 되었다는 점에서. 단순한 고생이라고 말하기는 어려울 것 같네요. 추후에는 실제 실험 / 그리드를 분석한 스크린샷들을 갖고. 이야기를 계속해서 진행해보도록 하겠습니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
