웹 디자인 규칙
웹 디자이너가 필수로 알고있어야 할 디자인 규칙
안녕하세요, JEFF입니다
지난번 글에 대해 많은 관심을 주셔서 너무 감사드립니다.
덕분에 글 쓰는 재미와 용기가 조금 붙었습니다!ㅎ
앞으로도 많은 글로 보답하겠습니다.
지난번 시리즈에 이어
이번에는 컴포넌트화를 위해 더컴퍼스에서 사용하는 규칙에 대해 말씀드리겠습니다.
반응형 웹 : Break Point
하나의 사이트를 만들더라도 요즘은 당연하게 타블렛, 스마트폰을 고려하지 않을 수 없게 되었습니다.
하지만 각 기기 간에 해상도 차이와 종류가 너무나도 많이 나기 때문에,
모든 사이즈의 해상도를 고려하여 디자인 베리에이션을 치는 것은 사실상 불가능 한 일입니다.
그렇기 때문에 반응형 웹을 디자인 할 때에는 아래의 사항을 고려하면서 디자인 하는 것이 좋습니다.
<고려사항>
1. 해상도 점유율을 통계적인 수치로 검사하여 가장 보편적으로 잘 보일 수 있는 해상도를 선택하여 제작하고, 점유율이 극단적으로 적은 해상도는 제외한다.
2. 웹사이트 프론트 개발을 진행할 시에는 미디어 쿼리를 활용하여 각각의 브레이크 포인트를 설정한다.
3. 디자인 작업 시에는 모바일, 태블릿, 데스크탑의 경우로 나누어 작업하며, 각 시안의 결과물은 해당 범위 내에서 충분히 대응 가능하도록 디자인 한다.
- 아래 링크는 웹 트래픽 분석 웹사이트인 스탯카운터 링크 입니다. 전 세계 스크린 점유율을 알 수 있습니다.
더컴퍼스의 경우 전 세계 데스크톱 유저의 90% 이상을 수용할 수 있는 사이즈인 1366px * 768px 사이즈로 정의하여 제작합니다.
(수용 : 대응이 가능한 / 예를 들어 1366px은 1920px에 대응 가능하지만, 그보다 작은 1280px에는 대응할 수 없다.)
태블릿 해상도 width 범위는 1024px ~ 600px 이고
(1024px 이상은 사실상 데스크톱의 범위로 볼 수 있기에 제외하였습니다.)
스마트폰 해상도 width 범위는 599px ~ 360px 이므로
각 브레이크 포인트를 아래와 같이 정의합니다.
Breakpoint
Wide Desktop
1920px ~ 1366px (Breakpoint : 1366px)
Small Desktop
1365px ~ 1024px (Breakpoint : 1365px)
Wide Tablet
1023px ~ 840px ( Breakpoint : 1023px)
Small Tablet
839px ~ 600px ( Breakpoint : 600px)
Mobile
599px ~ 360px (Breakpoint : 360px)
360px ~ 0px은 제작하지 않는다.
(320px 사이즈의 폰은 단종되었습니다.)
최대한 사람들이 많이 사용하는 기기에서 최상의 컨디션을 보여주는 것이 중요합니다.
전 세계적으로 데스크톱 보다 모바일의 접근성이 높아지기 때문에, 웹사이트는 Mobile First로 제작하는 것이 많은 디바이스를 대응하는데 더 좋습니다.
반면, 서비스가 웹에 최적화되어있을 경우에는 반응형디자인으로 제작하는 것이 선호되죠.
많은 리서치와 데이터를 바탕으로 서비스에 맞는 브레이크포인트를 설정해야 합니다.
그리드시스템
그리드 시스템(Grid System)은 레이아웃을 구성할 때 규칙성을 주며, 이를 사용하면 제작을 쉽고 빠르게 할 수 있습니다. 그리드 시스템은 균일한 요소와 간격을 사용하여 일관된 UI를 사용자에게 부여하고, 그래픽 요소의 체계적인 배열을 도와줍니다. 그리드 시스템의 기준을 정하면 디자이너간 협업이 용이하고, 특히 반응형 웹을 디자인할 때 용이하게 사용할 수 있습니다.
디바이스 별 권장 그리드
웹 그리드 시스템은 크게 Column, Margin, Gutter로 나뉘어지며 이 세개의 비율을 조절 함으로써 사이트 컨셉에 맞는 그리드를 구성할 수 있습니다.
Margins(여백)은 컨텐츠 영역 양 끝의 공간입니다. 여백의 넓이는 고정값이며 여백 값이 클수록 큰 스크린에 적합합니다.
실제로 어떠한 컨텐츠를 포함하는 영역을 Columns(칼럼)이라고 합니다. 칼럼의 넓이는 고정된 값이며, 1개 이상의 칼럼이 모여 컨텐츠의 영역을 결정합니다. 하나의 칼럼 안에는 반드시 양 옆에 여백, 즉 Gutter를 동반합니다.
Gutters(거터)는 칼럼과 칼럼 사이의 공간입니다. 거터의 넓이 역시 고정값이며, 컨텐츠를 배치할 때 Division 역할을 합니다. 거터 역시 고정 값으로 제공하며, 넓은 거터는 큰 스크린에 적합합니다. 칼럼사이에 공백을 더 많이 생성하기 때문입니다.
더컴퍼스는 해상도 별 그리드를 다음과 같이 정의합니다.
Wide Desktop
1920px ~ 1366px
Column : 12
Gutters : md/24px
Small Desktop
1365px ~ 1024px
Column : 12
Gutters : md/24px
Wide Tablet
1023px ~ 840px
Column : 12
Gutters : sm/16px
Margins : md/24px
Small Tablet
839px ~ 600px
Column : 12
Gutters : sm/16px
Margins : md/24px
Mobile
599px ~ 360px
Column : 12
Gutters : xs/8px
Margins : sm/16px
칼럼 수, 거터 및 마진은 유연한 값이며 동일할 필요는 없습니다.
간격 시스템
간격 시스템 없이 디자인을 할 경우 디자이너 간 협업에 있어 효율성이 떨어집니다. 그래서 우리는 기본 단위를 4배수에 기반한 6가지 단위로 규정하여 사용하는 것을 권장합니다. 여기서 간격이란 margin, padding과 같은 요소와 요소간의 거리를 말합니다.
더컴퍼스는 간격 시스템을 다음과 같이 정의합니다.
xxs/4px
xs/8px
sm/16px
md/24px
lg/36px
xl/48px
xxl/60px
더컴퍼스 웹페이지 및 작업물들은 모두 해당 가이드를 맞춰서 작업하였습니다.
참고를 위해 사이트 링크 남깁니다!
감사합니다.
