처음 UI 디자인을 시작하였을 때 어려웠던 부분은 해상도였습니다. 1. PC 유저들의 해상도 파악PC 웹 디자인을 위해선 사람들이 가장 많이 사용하는 모니터 해상도를 알아야 합니다. Statcounter라는 사이트에서(게시물 하단에 링크 첨부) 전세계 적으로 많이 사용하는 해상도를 확인할 수 있습니다.
한국에선 1920x1080 해상도가 압도적으로 사용률이 많습니다. 2. 가로 해상도 (적응형? 반응형?)
네이버를 보시면 가로 1920px~1000px 해상도까지 고정된 레이아웃으로 대응이 됩니다, 전체 1920px 해상도로 디자인을 했지만 콘텐츠가 들어가는 영역은 1000px 안으로 레이아웃을 디자인을 했기 때문에 반응형이 아니더라도 대부분의 디바이스를 소화할 수 있습니다. 반응형이란? 반응형에도 두 가지 스타일이 존재합니다. 하나는 유연한 칼럼(Fluid Columns)을 가지고 있는 형태입니다. 아래 이미지를 보시면 해상도의 변화에 따라 그리드가 유연하게 변하는 것을 보실 수 있습니다. Fluid columns(Carbon Design System)다른 하나는 고정된 박스 크기 유지하되 해상도에 따라 위치만 달라지는 형태(Fixed Boxes)입니다. 아래 이미지를 보면 박스 크기는 변하지 않지만 위치와 개수만 변화되는 것을 볼 수 있습니다. Fixed Boxes(Carbon Design System)브레이크 포인트 브레이크 포인트란 반응형 웹에서 레이아웃이 변화되는 해상도 지점을 뜻합니다. 브레이크 포인트를 정하는 기준은 정하기 나름이지만 초반에는 머트리얼 가이드나 카본 디자인 시스템 같은 범용적인 가이드를 참고하시면 훨씬 수월합니다. 3. 해상도 높이
예시로 윈도우 구글 크롬 브라우저를 살펴보겠습니다. 이는 OS 별 / 브라우저 별 / 사용자 이용행태 별 차이가 있어 정확히 예측할 수 없지만 평균 930~980px 사이에서 디자인하시면 됩니다. 이상 위 내용은 제도 신입이였을 시절 고민했던 내용이였으며 그렇기 때문에 제 고민의 결과물을 나누고자 했는데 잘 전달이 되었는지 모르겠네요. 부족했던 글 읽어주셔서 감사드립니다. 아래는 참고 사이트입니다.
Desktop Screen Resolution Stats Republic Of Korea | Statcounter Global Stats This graph shows the stats of desktop screen resolutions in South Korea based on over 10 billion monthly page views. gs.statcounter.com https://www.designarcade.co/responsive-and-adaptive-designs-for-mobile-apps/ Responsive Vs. Adaptive - Which one is Best For Your Mobile App Design? In this post, we will compare responsive and adaptive designs for mobile apps. The ideal website for your business is one that runs smoothly on all types of mobiles and features a great UX and UI www.designarcade.co https://www.carbondesignsystem.com/guidelines/2x-grid/overview/ 2x Grid – Carbon Design System It’s fundamental to everything we design. The 2x Grid is the geometric foundation of all the visual elements of IBM Design, from typography to columns, boxes, icons, and illustrations. It provides structure and guidance for all creative decision-making. www.carbondesignsystem.com https://material.io/design Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. material.io |