UI 브리핑 : 5화 - UI 스케일링과 윈도우 배율
UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑 정리
이 내용은 UI 디자인 연구소 - 단톡방에서 진행된 일일 브리핑의 내용을 정리한 것입니다.
자, 오늘은 좀 쉬어가는 개념으로. 게임 UI 스케일링에대한 이야기를 좀 해보곘습니다. 사실 쉬어간다곤하지만 이 역시도 일반 UI 디자인에 연관된 내용이 많은 개념입니다. 일단은 UI 스케일링 자체가 쉬운 개념이 아니니까. 그나마 익숙한 게임을 통해서 얘길 드려볼게요.
스타크래프트2.라는 게임은 다들 아실겁니다. 그러나 이 게임이 각각 다른 크기의 화면에서 플레이된다면 어떻게될까요? 동일한 게임을 일반적인 24~27인치 화면에서 플레이하는것. 그리고 40인치 이상의화면에서 플레이하는건 전혀 다른 결과를 가져옵니다. 이건 말그대로 해상도의문제라기보다는. 화면 크기의 문제입니다. 동일한 크기의화면을. 더 큰 물리적 해상도에서 보여줄때. 전체를 뻥튀기할수밖에없는지. 아니면 UI크기를 줄여서 보여줄 수 있는지에따라 - 이런 문제가 발생한다는거죠.
화면 크기에 연관없이 UI가 작은 비율을 유지했을 때는 어떤 문제가 생길까요? 아마도 제대로 읽을 수가 없게 되겠죠. 이것이 화면 크기와, UI 스케일링이 중요한 이유입니다.
3d게임의경우. 이미 렌더링될 화면이 밖에있고. UI만 화면에 상대적으로 크기를 보여주는 경우가 많습니다. UI만 화면에 상대적으로 크기를 보여주는 경우가 많습니다. 이걸 기술적으로 도해해보면 - 컨텐츠들은 이미 회색 배경에 전체가 그려져있고. 파란색 뷰포트 (보여지는 영역) 부분의 크기를. 해상도 크기에 맞게 늘려주는게 일반적인 게임 UI 스케일링의 개념입니다. 여기에 UI영역의 분홍 레이어도 같이 커지는거죠.
다만 이렇게하면 두가지문제가 발생하는데.
위의 스타크래프트의 사례처럼. 전체가 뻥튀기되어서 큰 화면에서는 UI영역이 너무 커서. /개별 요소들의 비례가 너무 큼직해서, 사용이 불편해지게됩니다. 마치 폰게임을 27인치 화면으로 늘려서 게임하는게 그다지 - 편리하지 않다고 느끼는것과 마찬가지죠. 말그대로 해상도.가아니라. '물리적크기에'맞는 최적의 UI 크기라는게 존재합니다.
반대로 이 경우는 UI 크기는 거의 동일한데. 화면이 커지게되면서 - 배율이 작아서. 화면상에선 거의 확인이 불가능한 수준의 UI가 된거죠.
이 화면은 1920x1080. 우리가 알고있는 24~27인치 화면에 적합한 -스펠포스3라는 게임의 UI 스케일링된화면입니다.
그리고 이건 4K. 40인치 이상의 화면에 적절하게 조절한 화면이죠. 아마 물리적으로 보셨을땐. 뭐야. 그냥 UI 크기가좀 달라진거같은데. 정도로 생각이드실텐데 실제 물리적 기기에서 확인을 하시면 확연히 차이가납니다.
위에서 말씀드렸던것과같이. 해상도 기준이아니라. '물리적 화면 크기'에따라 적당한 최적의 해상도가있다는것이죠. 그리고 그걸 가능하게 만드는것이 UI 스케일링입니다
UI 스케일링에 대한 정리글
https://brunch.co.kr/@clay1987/124
최근에 여러 게임 UI를 분석해보면서 .4k / 40인치 이상의 해상도에서 - 어떤 방법으로UI스케일링을 지원하는지 그걸 좀 확인해봤었습니다.
UI 스케일링을 제대로 지원하는 - 스펠포스 3의 사례
https://brunch.co.kr/@clay1987/125
2018년 기준으로. UI 스케일과 폰트스케일을 모두 지원하는 게임도있는반면 - 꽤나 최신게임임에도 불구하고 - 해상도에 맞춰서 자동으로 - 정해진 규격만을 지원하는 게임도 있었습니다.
해상도에 맞춘 자동 스케일링만을 지원하는 워해머 40k : dow3의 사례
https://brunch.co.kr/@clay1987/126
혹은 정말 단순하게. 단순 퍼센티지만으로 - 중간 단위의 스케일링을 지원하지않는 게임도있었죠.
해상도 기준 - 배수의 3개 옵션만 제공 (100. 150. 200%) - 문명 6 의 사례
https://brunch.co.kr/@clay1987/127
혹은 문명처럼 전체 해상도 대비 배수개념으로가되. 숫자표기가없이. 단순 감각으로 UI 크기를 맞춰야하는 경우도 있었습니다.
UI 스케일링은 지원하되, 폰트 스케일링은 불가능한 - 컴패니 오브 히어로즈 2의 사례
https://brunch.co.kr/@clay1987/128
꽤 여러 게임들을 확인해보았지만. UI 스케일링을 지원하지 않는 게임들도 많았고. AAA급 이상의 게임들이 아니면 - 지원자체를 고려하지않거나. 심지어 윈도우 자체의 배율에 -따라가게만든 경우도 많더군요.
여기서 일단 정리를 하면
1. ui 스케일링은 화면 크기의 상승에 따라, 점차 꼭 필요한 개념이 되어가고있다. 게임의 영역에선 더욱더 그렇다.
2. 최신게임들 중에서도 UI 스케일링을 지원하지 않는 게임들이 많다. 또한 해당 해상도는 윈도우 자체 해상도 배율에 영향을 받는다.
3. 지원이되는 게임이라해도 회사마다 , 타이틀마다 방법이 제각각이다.
사실 두가지 내용이 스케일링에 크게 영향을 주긴 합니다. spellforce 3라는 게임에서 지원하는 케이스가 그나마 베스트에 가까웠습니다.
UI라는건. '창의 크기나 이미지같이- 큰 규격을 담고있는 요소와. 텍스트. 라는 두가지 요소로 크게 나눌수있을듯합니다. spellforce 3라는 게임에서도 두가지 방법을 지원했고. 거기에 대한 실제 UI 스케일링을 최적화한 실험을 진행해봤습니다.
UI 스케일은 - 폰트를 포함한 크기라서. 이게 커지게되면. 폰트스케일은 - UI 스케일에 따라가는 경향이 있었습니다. 그러니까 - 결국 최적의화면을 찾기위해서는.일단
1. UI스케일을 조절해보고
2. 이후 가장 작은 텍스트도 화면에서 편하게 읽을 수 있는가.의 기준이 됩니다.
이후에 선택지가 나뉘는것이.
A - UI 스케일을 키우면 - 텍스트 기본크기도 커지니까. 그냥 텍스트 크기는 냅두고 - UI 스케일로만 키우면되지않는가.
B - UI 스케일은 가장 작게 냅두고 - 텍스트 크기만 읽을 수 있게 키우면 되는거 아닌가.
이런 선택지가 나오는데. 사실 둘다 틀립니다.
텍스트 크기수정 없이 - UI 크기만을 키운 경우
텍스트를 인식할 수 있을 정도로 UI 크기만을 키우면 - UI 틀들이 너무 커져서. UI들끼리 부딛히는 사태가 일어나게됩니다. 겹치게되는거죠.
UI 크기 수정 없이 - 텍스트 크기만을 키운 경우
그렇다고 텍스트 크기만 키우는게 맞느냐하면 그것도 아닙니다. 커다란 화면에서는 UI가 너무 작아져서- 개별 요소를 좌우를 둘러봐야 확인할 수준이 됩니다. 개별 아이콘들은 작아서 잘 보이지도 않죠. 결국 적정한 UI 크기를 잡고. 텍스트가 상대적으로 작은 상태에서 - 텍스트 배율을 수정해줘야하는 것이 맞다는거죠.
자, 그럼 지금까지는 게임에대한 스케일을 이야기했는데. 중간에 잠시 윈도우 기본 OS 배율에대한 얘길 드렸었죠? PC OS를 기반으로 해서 - 게임엔진을 기반으로 만들어지는 게임 UI들만해도 이렇게 복잡한데. 과연 우리가 사용하는 웹페이지 / PC 서비스는 어떨까요?
PC화면에서 카카오톡을쓰시는 분들이라면 이미 알고계실만한 내용입니다만- 윈도우 8~10기준으로. 디스플레이- 배율이라는 개념이 존재합니다. 그리고 여기에따라서 실제 모든 프로그램들의 크기가 변하게되죠. 다만 27인치정도까지의 화면에서는 크게 문제가없던 프로그램들이. 40인치가 넘어가는 화면에서는 카카오톡의 크기 부분이 너무 커다랗게나오거나. 심지어 포토샵의 경우도 비례가 너무 커서. UI 스케일링이 필요해지는 때가 옵니다. 다만 아직까지 대부분의 PC 프로그램들은 UI 스케일링을 대비하지않고있고. 대부분의경우 윈도우 자체 배율 해상도를 따라가게됩니다.
또한 웹서비스의경우. 여전히 모바일퍼스트.란 개념이 있긴합니다. 그러나 PC기준으로 만들어지는 디자인들이많고. 모바일에서는 비례가 너무 크거나. 비율이 맞지않는경우가 존재하죠. 그래서 보통 사용자분들은 웹브라우저의 돋보기 / 배율 기능을 사용해서 비율을 맞추게됩니다.
기에서 의문이존재하죠. 과연 내가 만든 디자인. 우리회사의 서비스는 어느정도 크기의 해상도에 최적화 되어있을까. 그리고 실제 어떤 사용자들이 보통 어느정도 해상도에서 사용하고있을까요?
제가 '화면 해상도'의 기준을 정확히 말씀드리지 않은 상태로. 네이버 서비스의 웹페이지를 보여드릴건데. 과연 어느것이 최적화된 화면일지 한번 생각해보세요
이 화면은 100% - 웹브라우저 배율이고
이 화면은75% 배율입니다. 어느것이 최적화된 화면일까요?일반적으로는 100%의 것을 고르실텐데... 그러나 이것도 함정이있습니다. 이것도 윈도우 150% 해상도를 기준으로 찍어진 - 웹브라우저 100 % 배율과, 75 % 배율의 해상도라는거죠. 웹브라우저도 PC 프로그램이다보니- 윈도우 배율에 영향을 받는다는겁니다.
해상도 4k 기준으로. 100% 윈도우.OS 배율을 사용했을때. 100% / 75% - 브라우저 배율의 화면은 다음과같습니다.
4k 해상도에 43인치 화면에서는 - 윈도우 OS의 해상도 100%를 지정한 경우. 화면의 글씨 크기가 너무 작아서 내용이 보이질 않습니다.
윈도우 OS의 해상도 150%를 지정한 경우. 사용에 쾌적한 수준의 글씨 크기를 확인할 수 있죠.
여기서 우리가알수있는건. 게임에서의 사례도 그랬지만. 해상도 자체는 '존재하지않는 허상'같은 개념이란겁니다. 해당 사용자들이 실제 어떤 화면 크기로 보고있는지. 완벽한 100%란건 존재하지않고. 해상도 대비 스케일링이란것도 존재할수가 없습니다. 왜냐하면 hd. 1920.1080 해상도 기준으로 - 50인치가 넘는 디스플레이도 존재하거든요.
우리가 사용하는 폰은 이미 4k 해상도에 가까워졌지만. 크기자체는 타블렛보다 디스플레이가 작죠? 크게 PC와 폰으로 나눠서 - 해상도를 생각하고 디자인을 해오셨다면. 비례가 큰. PC와. TV 등으로 가게되면서 - 정말 머리가 아프실겁니다. 게다가 해상도는 게속 커지고있는 상태라서. 4k가 아니라 8k TV들도 나오고있고. 4k 모니터들의 보급률도 올라가고있죠. 과연 그런 환경에서 우리가 만든 디자인은 '어떻게' 보일것인가. 그리고 다른 컨텐츠들. 웹사이트들. PC 프로그램들은 어떤식으로 -여기에 대응하고있는가-를 생각해볼만한 때라고 봅니다.
그리고 기존의 해상도 개념이 아니라. 물리적 기기 기반으로. 실제 국내 / 해외 사용자들의 대부분이 사용하는 모니터 해상도가 아니라. '크기'와 OS 배율은 어느정도인지. 내가 사용하고있는 PC의 화면크기와 배율은 어느정도인지. 상세하게는 - 24인치 화면과. 27인치의 화면 크기에서도. 미세하지만 - 1920x1080 해상도가아니라. 화면 크기에 맞는 최적의 비율이 존재할겁니다. 3인치 차이가 나니까요
사실 제가 파고들어가보려는것도 이런 영역들이구요. 그것에대해 대략적으로 답을 내놓은것이 - 윈도우 OS의 배율.인거고. 스케일링인거지만. 사실 세세한 모니터 크기 차이에 따른. 텍스트 크기차이나. UI 크기를. 50%단위로 제공하는 OS 특성상. 우리가 보고있는 화면은 최적의 화면이 아닐 가능성이 높습니다.
그렇기에 기업마다 만들어내는 디자이너들의 결과물의 비례가 다른것이고. 그들도 이런 수준까지 연구하고 파악하고 디자인을 하는건 아닐테니까요. 네이버도 최근 모바일 기준의 해상도에맞는 - 레이아웃과. 폰트크기에 대해 - 네이버 콜로키움 2018에서 발표를 했던 내용이 있었죠. 다만 해당 해상도 / 기기 크기가 바뀌게되면 - 그 기준점은 또다시 수정되어야할겁니다.
네이버의 모바일 레이아웃에 최적의 타이포그래피에 대한 연구
https://tv.naver.com/v/4700462
그러나 최적화된 비례라는 건. 기기 크기가 바뀌었을 때 - 최적화가 깨진다는 것과 마찬가지입니다. 그렇기에 새로운 해상도의 기기규격이 등장하면, 또다시 많은 고민이 필요하겠죠.
폴더블 디스플레이의 등장
https://www.youtube.com/watch?v=McNtCEbqRWY
오늘은 게임 - > PC OS, 브라우저 배율까지. 내용이 좀 길었네요.
오늘 이야기를 정리하면
1. 우리가 사용하는 웹서비스, 게임 컨텐츠 모두 OS 배율에 영향을 받는다.
2. 웹서비스는 여기에 다시 웹브라우저의 영향을 추가적으로 받는다.
3. UI 스케일링은 추후에 모든 영역에서 필요해지는 개념이며. UI 스케일과 폰트 스케일로 나뉘넥된다.
4. 스스로 사용하고있는 윈도우 / OS 환경은 '나에게 익숙할 뿐' - 실제 다른 사람들이 사용하는 환경과 다를 가능성이 높다.
5. 해상도를 기준으로 한 완벽한 해상도란 존재하지않는다. 디자이너들은 기기 화면을 기준으로 - 최적의 비례와 비율을 찾아야한다.
기존에 제가 이야기드렸던 UI 디자인의 핵심에 한가지 기반이 더 추가되는 셈이군요.
그리드 최소단위 / 도형적 레이아웃 / 기기 디스플레이 대비 최적 스케일.
아마도 다음시간에는 이런 해상도 부분에 있어서 - 실제 픽셀 기준의 웹디자인 가능 영역. 그리고 비례.부분에있어서. 컨텐츠 좌우여백과. 4:3 / 16:9 비례에 대한 - 현실적인 고민. 반응형웹과 4:3 / 16:9 지원에대한 얘길 해보게될것 같습니다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
