Google AdSense (text)

hidden logo stop

Moving

거지 같은 이글루스 광고노출 정책이 싫어서,
새 보금자리(http://blog.leocat.kr/)로 이사감.

화면 해상도와 브라우저 창 크기 관계 Computer & Program

점점 모니터는 커지고 있다. 인치수도 늘어나고, 해상도도 늘어나고.. 과연 사람들은 어떤 해상도의 모니터를 가지고 있고, 어떤 크기로 브라우저 창을 열어서 사용할까?? 최대화를 많이 사용할까??

최근에 회사에서 가로 해상도 1280px에 대해 논의가 있었던 것 같다. 가로 사이즈 1024가 보편적이지만, 모니터나 화면 해상도가 커진만큼 1280도 괜찮지 않을까?? 라는 생각이었다. 하지만 내 경험에 비추어 본다면 "아직은 글쎄.."다. 나 같은 경우는 화면이 커지고 와이드형으로 바뀌면서, 창을 반반씩 (또는 살짝 겹치게) 2개를 열어 사용하는 습관이 생겼다. (물론, 이건 나처럼 특이한 행동을 많이 하는 경우지만 말이다.)

자.. 과연 사람들은 큰 해상도를 가지고 얼마나 브라우저 창을 크게해서 볼까?? 가로 1280 이상 사이즈로 보는 사람들이 많을까?? 있다면 얼마나 될까??


1. 데이터 수집

우선, 사이트의 일부 영역에 대해서 화면 해상도와 창 크기 정보를 수집했다. Javascript로 화면 해상도와 브라우저의 창 크기를 구했다. 브라우저 창 크기는 툴바, 스크롤바 등을 제외하고 실제 페이지가 화면에 보이는 영역만을 잡았다. (Device and Viewport Size In Javascript)
화면 해상도 (screen)
가로 : window.screen.width,
세로 : window.screen.height

브라우저 창 크기 (viewport)
가로 : document.body.clientWidth,
세로 : document.body.clientHeight

그리고 가로 해상도를 편의상 해상도라고 부르기도 하였고, 단위는 픽셀(px)이다. 스냅샷이나 설명에 "screen"이라 되어 있는 것이 화면 해상도이고, "viewport"라고 된 것이 창 크기이다.



2. 데이터 해석

결과를 비교해 보기 위해 Screen Resolution ≠ Browser Window | CSS-Tricks와 비슷하게 만들어봤다. 애초에 실험을 하지 않고 이 사이트의 내용을 인용해도 됐지만, 우리와는 다른 사용자 그룹일 수 있기 때문에 실험을 했다.

300개의 샘플을 뽑아서 html div 태그로 네모 상자를 겹쳐서 그렸다. 그리고 div의 color를 rgba(0, 0, 0, 0.004)로 설정해서, 많이 겹치는 부분은 검게 보이고 겹치지 않는 부분은 밝게 보이도록 했다. rgba의 마지막 인수는 opacity 또는 alpha 값으로 투명도를 나타낸다. 브라우저도 색깔을 표현하는데 한계가 있기 때문에 너무 작은 숫자는 반투명이 아니라 완전 투명으로 표현하게 된다. 예를 들어, rgba(0, 0, 0, 0.004)는 밝은 회색갈은 반투명이지만, rgba(0, 0, 0, 0.003)은 투명이다. 때문에 0.004를 사용했는데, 그래서 어쩔 수 없이 샘플 300개를 뽑을 수 밖에 없었다. 샘플이 많아지면 겹쳐지는 부분이 많아서 모두 검게 보이기 때문에 TㅅT

이건 화면 해상도를 나타낸다. 대부분 해상도는 OS에서 비슷하게 지원하기 때문에 경계가 또렷한게 특징이다. 가로가 1280, 1366, 1920 등의 부분에 경계가 보인다.


이건 브라우저 창 크기를 나타낸 것이고, 사용자 마다 조금씩 다르기 때문에 경계가 또렷하지 않다. 그리고 한눈에 보기에도 화면 해상도 보다 크기가 작다.


그리고 이건 화면 해상도와 창 크기를 겹쳐서 비교한 것이다. 화면 해상도는 빨간색으로, 창 크기는 파란색으로 표시했다. 둘이 많이 겹치는 부분은 검게 보이고, 일부만 겹치는 부분은 보라색으로 보인다. 세로방향과 가로방향에 차이가 있다. 가로방향은 보라색이 보이지만, 세로방향은 보라색이 없다. 아래에서 다시 설명하겠지만, 해상도가 작은 경우는 창을 최대화(또는 최대화에 근접한 크기)로 보는 경우가 많으나 해상도가 큰 경우는 최대화하지 않는 경우가 많아서 인듯 싶다.
그리고 대부분 가로가 더 길지만 세로가 더 긴 해상도가 살짝씩 보이는데, 이건 모바일 화면으로 추정된다. 브라우저나 OS 정보를 수집하지 않아서 확실하지는 않다.



수치로 표현해 보자. 각 영역별로 얼마나 많은 사용빈도를 보일까?? (이제부터는 가로 사이즈만을 얘기하겠다.)

분포를 살펴보면 창 크기가 화면 해상도 보다 전체적으로 살짝 낮은 것을 볼 수 있다. 박스 안에 있는 검은 선이 중위값으로, 중위값은 각 값을 정렬해서 늘어놨을 때 가운데에 있는 값을 의미한다. 다르게 얘기하면 이 값 보다 큰 해상도의 수와 작은 해상도의 수가 같다고 볼 수 있다.
그리고 빨간선은 1200, 파란선은 1280을 나타낸다. 박스 아랫선이 하위 25%, 위의 선은 상위 25%를 뜻한다. 해상도(screen)의 경우는 하위 25%의 값이 (파란선) 1280으로, 전체 중 75%(또는 그 이상)는 1280 이상 해상도를 사용한다는 것을 알 수 있다. (80.94%였다.)

해상도를 많이 사용하는 크기별로 영역을 나눠서 확인해 보자.

해상도해상도(누적)창 크기창 크기(누적)
2000-0.87%0.87%0.27%0.27%
1600-199934.74%35.61%18.33%18.60%
1400-15996.33%41.94%10.71%29.31%
1280-139939.00%80.94%15.01%44.32%
1200-12790.99%81.93%23.01%67.33%
1000-119912.07%94.00%15.83%83.16%
800-9992.39%96.39%11.47%94.63%
0-7993.61%100.00%5.37%100.00%

해상도 1600 이상 큰 모니터를 사용하는 사람이 35%를 넘을 정도로 많았다. 1280을 넘는 해상도는 80.9%를 넘을 정도로 대부분을 차지했다. 반면 창 크기는 1280 이상은 44.3%이고, 1200 이상으로 사용하는 사람은 67.3%로 해상도 사이즈에는 좀 미치지 못 했다. (그래도 2/3 정도니 과반수를 넘는 큰 수치이기는 하다.) 창을 최대화하면 좌우의 창틀과 스크롤바 등을 제외하면 1280 해상도인 경우 1200-1279 사이가 될 것 같다. 창 크기가 이 범위에 사용자가 많은 것은 최대화로 사용하는 것으로 볼 수 있을 것 같다.

최대화와 관련해서 좀 더 자세히 보기 위해 해상도 별로 사용하는 창 크기를 확인했다.

각 범위를 보면 대부분 창의 크기를 크게 사용하는 것을 볼 수 있다. 해상도 1000-1199 사이의 사용자는 1000-1199 사이의 창 크기를 많이 사용하고, 해상도 1400-1599 사이의 사용자도 1400-1599 사이의 창크기를 가장 많이 사용한다.

그렇다면 전체 해상도 대비 얼마나 크게 보는걸까?? 화면 해상도와 창 크기의 가로 길이 차이를 확인해봤다.

0-
799
800-
999
1000-
1199
1200-
1279
1280-
1399
1400-
1599
1600-
1999
2000-
-167.77%23.22%2.06%4.53%1.38%2.23%0.48%0.50
17-225.46%43.94%65.99%65.44%69.29%64.13%56.02%22.87
23-491.92%14.95%14.69%8.75%8.25%7.61%5.33%2.78
50-990.38%1.65%2.65%3.47%2.93%2.10%1.30%0.62
100-19912.23%2.21%2.56%3.62%3.62%3.48%1.50%0.38
200-72.23%14.03%12.04%14.19%14.54%20.45%35.36%72.86

조금 놀랐다. 정말 대부분의 [해상도 - 창 크기]값이 17-22 사이였다. 이건 브라우저의 창틀과 스크롤바 정도 밖에 되지 않는다. (브라우저나 OS 마다 스크롤바의 두께가 다르다.) 따라서 대부분이 창을 최대화(또는 거의 근접한 크기)로 사용한다는 것을 알 수 있었다.
대부분 모든 해상도 영역에서 22픽셀 이하로 차이나는 경우가 거의 70%이며, 50픽셀 이하는 80%가 넘는다. 하지만, 1600-1999 영역을 보면 200 이상 차이가 나는 경우가 많아진 것이 보이는데, 해상도가 커질수록 최대화를 하지 않는 것으로 생각된다. 최대화를 해도 좌우에 흰 공백만 보인다면 의미가 없는 경우가 많기 때문이지 않을까 싶다.



3. 결론
해상도와 브라우저 창 사용 관련해서 몇가지 살펴봤는데, 그 내용을 정리해 보면..
  • 가로 1280 이상 해상도를 사용하는 사용자가 80.94%로 대다수를 차지한다.
  • 1600 이상 해상도 사용자는 35.61%이고, 그 중 1920 이상 해상도를 사용하는 사용자는 20.06%로 고해상도를 사용하는 사용자도 많았다.
  • 1280 이상 창크기(스크롤, 창틀 등을 제외하고 화면에 보이는 영역)를 사용하는 사용자는 44.76%였다.
  • 1200 이상 창 크기를 사용하는 사용자는 68%로 상당히 많은 점유를 보였다.
  • 사용자의 75%를 커버하기 위해서는 창 크기가 1060 이하, 80%를 커버하기 위해서는 1003 이하이어야 한다.
  • 브라우저 창을 최대화(또는 거의 근접한 크기)로 많이 사용하지만, 큰 해상도를 사용하는 경우는 최대화를 하지 않는 비율이 높아진다.
  • 해상도의 가로 사이즈 보다 세로 사이즈가 더 큰 사용자는 5.69%이고, 핸드폰과 같은 모바일 화면으로 추정된다.



이 결과는 사용자의 성향이나 관심, 서비스 종류에 따라 달라질 수 있다.
그리고 개인적인 생각으로는 어떤 해상도를 많이 사용하니 이 해상도로 UI를 만들자 보다는 reponsive web을 사용해서 각 사이즈별로 디자인을 따로 하는 것이 좋지 않을까 싶다. 모바일 유입이 많다면 특히 더..

간만에 재밌는걸 봤네.. 남들 다 아는 어줍잖은 내용이지만 이런 일이 종종 있었으면 좋겠다. 그런데 최대화 비율 말고 좀 더 재밌는 내용을 뽑을 수는 없을까?? 데이터를 좀 더 뚫어져라 쳐다봐야겠다.

덧글

댓글 입력 영역

Google AdSense (text/image)