디자인 시스템 만들기-3 브레이크포인트
Foundation - Breakpoint(브레이크 포인트) 정하기
들어가며
디자인을 할 때 여러 해상도를 대응해야 하는 것은 필수적이다.
특히나 요즘에는 너무나도 다양한 기기들이 나오다 보니 하나의 서비스를 만들 때 모바일 앱이 아닌 이상
데스크톱, 태블릿, 모바일 그리고 이 디바이스에서도 다양한 해상도를 대응해야만 한다.(갤럭시 플립, 폴더..너네 뭐냐...!)
그래서 디자인 시스템 Foundation 영역에 들어갈 브레이크 포인트를 설정하는 데 있어서도 많은 고민과 리서치가 필요했다. 결과적으로 총 4개의 브레이크 포인트를 지정하였고 이 브레이크 포인트를 어떻게 설정하게 되었는지 과정을 적어본다.
1. 글로벌 기업의 디자인 시스템 리서치
정석(?)으로 알려진 Google의 Material 디자인 시스템, MUI 디자인 시스템 그리고 기타 브랜드의 디자인 시스템을 찾아 공통적인 영역을 도출하였다.
구글의 머터리얼 디자인 시스템
구글 머터리얼 디자인 시스템을 보면 굉장히 다양한 해상도를 대응하는 것을 볼 수 있다. 총 13개로 브레이크 포인트를 나누고 5 ~ 6가지로 기기를 구별하였다.
MUI 같은 경우에는 총 4가지로 브레이크 포인트를 나누었고 Carbon은 5개로 나누었다.
이 세 가지에서 공통적인 부분은 모바일 사이즈는 600px 이하로 잡았다는 것이고 나머지 부분들은 각자의 서비스에 맞춰서 나누어 값들이 다양했다.
넓은 범위로서의 공통점은 700px, 1200px, 1600px이하 영역에서 브레이크 포인트를 잡았다는 것이다.
2. 가장 많이 사용하는 해상도 찾기
디자이너라면 모두가 즐겨찾기 하나쯤은 해두었을 해상도 통계 사이트를 활용했다.
https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide#monthly-202102-202202-bar
우리 서비스는 글로벌 서비스로 타겟층이 광범위 하기에 필터를 월드로 잡고 가장 많이 사용되는 화면,
그리고 그 다음으로는 세세하게 나아가 PC, Tablet, Mobile에서 가장 많이 사용되고 있는 해상도를 추렸다.
익숙하지 않은 해상도인데 최상위에 랭킹 된 화면들은 어떤 기기인지 검색하여 적어두었다.
가장 많이 사용하는 기기의 사이즈는 1920X1080 그리고 그 뒤를 이어 1366X768, 360X640 사이즈였다.
데스크톱: 1920X1080, 1336X768, 1536X864,1440X900
태블릿: 768X1024, 1280X800, 800X1280, 601X962
모바일: 360X640, 414X896, 360X800, 360X780
데스크톱은 역시나 1920px 사이즈가 가장 많았고 가장 작은 사이즈는 1336px이었다.
모바일의 경우도 모바일 디자인을 할 때 대표 사이즈로 많이 활용되는 안드로이드 360px 사이즈가 가장 많았다. 태블릿에서는 601px 사이즈가 특이했는데 601px 사이즈는 갤럭시 노트 사이즈였다.
구글 머터리얼 디자인에서 600px부터 스몰 태블릿으로 보고 대응을 했는데 사람들이 많이 사용하는 태블릿 순위권 안에 601px이 있음을 반영한 것이 아닐까 하고 유추할 수 있었다.
이렇게 보면 구글 머터리얼 디자인은 599px까지를 모바일로 보고 대응하는데 충분히 599까지는 모바일의 여러 기기를 대응할 수 있고, 잘게 쪼개 놓은 스몰 태블릿 라지 태블릿 기준 안에 사람들이 사용하고 있는 순위 건 해상도를 다 담을 수 있었다.(엄지 척)
3. 결론
정말 정석적으로 한다면 위에 리서치한 내용을 바탕으로 5~6가지 정도의 브레이크 포인트를 나눌 수 있었지만 실제 이 모든 기기를 다 대응하기에는 무리가 있기에 최대한 여러 해상도를 담으면서도 사이즈 바레이션을 줄일 수 있도록 4개의 브레이크 포인트를 설정하였다.
Mobile 0~599px
Small Tablet 600px ~ 1023px
Large Tablet 1024px ~ 1439px
Desktop 1440px ~ 1920px
최대한 사람들이 많이 사용하는 기기에서 최상의 컨디션으로 서비스를 보여줄 수 있도록 브레이크 포인트를 설정하였고 글로벌 기업들의 브레이크 포인트와의 교집합을 맞추기 위해 노력했다.
브레이크 포인트와 그리드 가이드 작업을 함께 작업해야 하기 때문에 브레이크 영역에서도 대표 기기 사이즈를 어떤 것으로 잡을 것일지, 그에 따라 그리드 규칙은 어떻게 적용할 것인지로 브레이크 포인트 값을 세네 번은 족히 바꾸며 고민했다. 내가 지금 정리해 놓은 브레이크 포인트는 서비스의 타깃이 한국이 아니기 때문에 한국을 타깃으로 하는 서비스라면 분명히 위의 수치가 아닌 다른 결과값으로 브레이크 포인트를 설정해야 한다.
이 글은 처음 브레이크 포인트를 잡아야 할 때 어떠한 방식으로 접근하면 좋을지에 대해 도움을 줄 수 있는 글이라고 생각한다. 내가 브레이크 포인트를 설정해야 했을 때 막막했던 기분을 분명 누군가는 똑같이 느끼고 있을 것이다. 내가 한 방식이 정답은 아니고 분명 더 좋은 방법들이 있겠지만 이 글에서 전하고 싶은 것은 많은 리서치와 데이터를 바탕으로 브레이크포인트를 서비스에 맞게 설정하자는 것이다.
우리는 단순히 내가 가진 기기에서만 보기 좋은 서비스를 만드는 것이 아닌 여러 기기를 사용하고 있을 다수의 유저들을 대상으로 서비스를 만드는 것이니까.!
p.s. 다음 디자인시스템만들기 편에서는 그리드 설정에 대해 이야기합니다
