UI 스터디 : 윈도우 OS - 그리드와 레이아웃 분석
윈도우10, 해상도 배율에 따른 그리드 단위분석
윈도우 10 OS는 모바일과 PC 기기. 그리고 터치 기기와 마우스 기반 기기 모두를 지원하는 기기다. 그렇다보니 해상도 설정에 대한 부분이 조금 괴랄하다. 그래서 오늘은 - 윈도우 10 OS의 그리드에 대한 기본분석을 진행해보기로했다.
해상도 설정상에서 4K 기준, 양 극단인 100%와 350%를 잡고 해상도의 그리드를 분석해보았다.
주의
이 문서는 그리드 최소단위라는 개념에 기반해 분석을 진행하는 글이다. 만약 본인이 그리드 최소단위의 개념을 알지못하는 경우, 이해가 어려울 수 있으니. 다음 문서를 먼저 읽어보기를 권한다.
https://brunch.co.kr/@clay1987/136
4k 해상도 (3840 x 2160) 기준
해상도 레이아웃 100%로 설정시
바탕화면 레이아웃
아이콘 최대 배치갯수
가로 갯수 : 51
세로 갯수 : 21
특이사항
아이콘 하나의 단위가 정사각형이 아니라 직사각형에 가까운 형태다. 이 부분을 다시 나눠서, 간격만큼 확인을 해보니, 정사각형으로 했을 때에는 미묘하게 그리드가 엇나가게된다.
1) 파란색으로 했을 떄 - 동일한 단위가 다섯개 정도 들어가게된다. 그러나 이 경우 위로 길쭉한 직사각형이 만들어진다.
2) 초록색, 정사각형으로 배치했을 때에는 미묘하게 간격을 넘어서버린다.
3) 기존의 1/4 크기의 작은 보라색으로 나누었을 때에는 거의 정확하게 맞아떨어지는듯 한데. 이 경우도 가로 / 세로 비율이 9 : 10이다. 다만 이 경우 그리드 크기가 너무 작아서 - 다른 시스템을 분석하기에 용이하지않은 기준점이 된다. 그래서 최소단위를 파란색으로 잡기로했다.
1) 최소단위 타일의 가로 / 세로비율 = 13 : 15
2) 아이콘 영역은 3줄을 사용한다
3) 텍스트는 각 1줄을 사용하며, 글씨가 2줄인경우 ...처리로 줄임표처리
좌우 간격은 따로 잡아주지않는데 반해서, 텍스트 하단의 영역은 1x를 정확히 떼어주고있다.
이걸 전체화면으로보면 이런 상태가 된다.
하단의 윈도우 메뉴와는 약 3x를 떼어준 상태고. 특이하게도 화면 가장 우측에도 1x를 떼어준 상태.
사실상 아이콘들을 저 회색의 그리드 상에 올려놓는 방식이라고 생각하면 된다.
하단 윈도우 메뉴는 약 2.5x 정도의 두께고, 아이콘들의 크기 역시 약 2.5x 정도다. 거의 정사각형에 가까운데. 사실 정확히는 직사각형이었다. 비율을 확인해보니 가로 : 세로 비율이 - 40 : 37이었다. 여기에 아이콘간 간격을 0.5x정도 떼어놨기 때문에. 직사각형처럼 보인다.
-
왜 굳이 가로, 세로 비율을 40: 37로 한것인지는 여전히 미지수다.
4k 해상도 (3840 x 2160) 기준
해상도 레이아웃 350%로 설정시
바탕화면 레이아웃
아이콘 최대 배치갯수
가로 갯수 : 14
세로 갯수 : 6
이번에 확인해본바, 최소단위의 - 가로 세로의 비율이 거의 정사각형이 되어있었다(?) 54 : 56의 비율이 나오는데. 이건 해상도가 높아지면서, 기존보다 오차가 좀더 좁아진거라고 봐야할 것 같다.
최소단위의 가로 : 세로 비율은 - 54 : 56
다만 기존의 100%해상도와 다른점은, 아이콘 영역에 3x 가 아닌 약 2.5x 정도를 사용한다는 점이었다.
하단 윈도우 메뉴는 약 2.5x 정도의 두께로 거의 동일했다. 아이콘들의 크기 역시 약 2.5x 정도다. 거의 정사각형에 가까운데. 사실 정확히는 직사각형이었다. 비율을 확인해보니 가로 : 세로 비율이 - 141 : 138이었다. 이 부분은 100% 해상도 와 비교해서 거의 동일한듯 보인다.
수학적으로 계산해봐도 (40 * 3.5 = 140)이므로. 거의 그대로 비율만 키웠다는걸 알 수 있다.
하단의 윈도우 메뉴와는 3x를 떼어준 상태고.
화면 가장 우측에는 상단 (0.3x)와는 다르게 0.5x 정도를 떼어준 상태. 상단과는 다르게, 우측의 경우는 아이콘 배치에 따라 남는 짜투리를 배치해놓은 것으로 추정된다.
의문점
기계적으로 생각했을 때. 100% 해상도와 350% 해상도의 차이는, 최소단위의 크기에만 변형이 있어야한다. 그러나 정작 확인해보니, 아이콘과 텍스트 영역의 크기 자체가 달라져있었다.
350% 해상도에서의 공간배분
- 아이콘 영역 : 2.5x
- 텍스트 영역 : 1줄당 1x / 최대 2x
- 하단 간격 : 1x
- 상단 간격 : 매우 좁음 (0.1x 정도)
100% 해상도에서의 공간배분
- 아이콘 영역 : 3x
- 텍스트 영역 : 1줄당 1x / 최대 2x
- 하단 간격 : 1x
- 상단 간격 : 좁음 (0.3x 정도)
상단 간격이야 뭐, 해상도가 달라졌으니까. 거기에맞춰서 좀 줄어들 수 있다고 치자. 다만 아이콘 영역 자체가 왜 3에서 2.5로 줄어들었는지가 의문이다. 심지어 최소단위가 배율 기반으로 그대로 늘은것도 아니었다.
100% 기준 : 가로 / 세로 = 13 : 15
350% 기준 : 가로 / 세로 = 55 : 55
(40 x 3.5 = 140 )
4k 해상도 (3840 x 2160) 기준
해상도 레이아웃 100%로 설정시
설정창 레이아웃
바탕화면과는 다르게, 설정창의 경우 최소단위도 금방 찾을 수 있었고. 규격도 얼추 들어맞았다. 가로 : 세로 비율을 1:1로 잡고 그리드를 전개했을 때, 대부분의 요소들이 그리드에 딱 맞물려 보였다.
최소단위는 정사각형 기준이었고, 좌측의 선택표기 (파란색)을 제외하고는, 거의 깔끔하게 맞아떨어졌다.
다만 우측의 텍스트들의 간격이 좀 애매한 경우가 있었다.
4k 해상도 (3840 x 2160) 기준
해상도 레이아웃 350%로 설정시
설정창 레이아웃
350%로 진행한 경우에도 마찬가지였다. 좌측 메뉴의 경우 아주 정확하게 간격이 일치했고. 우측의 경우 약간 자간마다 차이가 있는 경우가 있긴 했으나. 대부분의 경우 UI 요소들이 3~4칸 정도 이내에 들어간다는걸 알 수 있었다.
4k 해상도 (3840 x 2160) 기준
해상도 레이아웃 350%로 설정시
윈도우 기본 탐색기
기존의 350% 화면의 그리드 최소단위로 - 대부분의 UI 요소들이 딱 맞아떨어지는 결과가 나온다. 모두 최소단위에 몇배를 곱했느냐의 문제가 된다는걸 확인한 순간. 100%이던 350%이던 간에. 바탕화면만을 제외하고 다른 UI 요소들은 통일성이 있다는걸 유추해볼 수 있었다.
반면 - 100% / 350% 의 설정창 레이아웃에서 찾은 그리드를 다시 각 해상도의 바탕화면에 적용해보았지만. 해당 그리드는 바탕화면과 별로 상관이 없었다. 이로서 윈도우의 바탕화면 그리드는, 윈도우의 다른 UI들과는 별개로 - 개별취급하는게 맞다는걸 알 수 있었다.
결론
윈도우는 여러 해상도를 지원해야하다보니. 바탕화면의 최소단위가 혼자서 이상한 형태를 띠고있었다. 그에반해 다른 중요 화면들은 각 해상도의 최소단위에 맞게, 그리드를 명확히 그려내고있었다. 그렇기에 간격이 되는 최소단위 부분을 정확히 잡아내면. 다른 화면을 역분석하는 것도 매우 손쉬웠다.
결국 필자가 생각했던 그리드의 최소단위에 대한 내용은. 웹디자인 뿐아니라 PC OS에서도 동일하게 적용될 수 있었다. 또한 해당 내용은 해상도 배율이 적용되더라도 - 기본적인 코어가되는 최소단위만 알면. 여러 해상도에서도 동일하게 분석이 가능하다는 것을 알 수 있었다. 추후에 다양한 웹서비스들의 최소그리드 단위와,웹서비스들의 최소단위를 확인해보는것도. 꽤나 의미가 있는 작업일듯 하다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
