UIUX Design - 분기점과 그리드

조정미·2024년 7월 14일

UI/UX Design

UIUX Design

목록 보기

3/13

해상도에 따라 동작하는 웹사이트를 만들기 위해서는 분기점과 그리드를 잘 알아야 한다.

1. 분기점(Breakpoint)

디스플레이의 해상도에 따라 각각 다른 화면을 보여주기 위한 기준점이다.

한 웹사이트를 접속할 때 우리는 스마트폰, 태블릿, 데스크탑, 노트북 등의 다양한 디바이스로 방문하게 되는데 이때 웹사이트는 자동으로 디바이스 화묜 크기에 따라 그에 맞는 다른 디자인을 보여주게 된다.

그렇기 때문에 우린 사용자의 디바이스 화면 크기를 고려하여 디자인을 나눌 줄 알아야 한다. 그 기준이 바로 분기점인 것이다.

일반적인 분기점

보통 데스크탑, 태블릿, 모바일 이렇게 세 가지의 기준점을 세운다.

데스크탑 : width 1024px 이상
태블릿 : width 768px 이상 1024px 미만
모바일 : width 768px 이하

하지만 모바일도 최소 width를 정해주는 것이 좋다. 더 이상 작아지지 않는 자점이 있어야 레이아웃이 깨지는 것을 막을 수 있기 때문이다.

분기점 지정 시 생각하면 좋은 것

(1) 태블릿 해상도 대응
태블릿 사용자의 수가 데스크톱과 모바일에 비하면 매우 적기 때문에 생략하거나 태블릿 해상도 전체를 모바일 분기점으로 통합하는 경우가 많다. (디자인과 개발이 필요한 화면 세트가 1개씩 더 늘어나기 때문...)

하지만, 온라인 강의나 교육은 주로 태블릿을 사용하여 서비스를 이용하기 때문에 이 경우에는 태블릿 해상도를 신경써야 한다.

(2) 일반적이지 않은 다른 해상도를 원한다면...
앞서 말한 일반적인 분기점 외에 다른 분기점을 지정해도 상관 없기는 하지만 데스크탑, 태블릿, 모바일 각각에 해당되는 해상도는 잘 나눠주어야 한다.

그렇지 않으면 태블릿으로 접속했는데 데스크탑 디자인이 나오는 등의 잘못된 상황이 발생할 수 있기 때문이다.

이럴 때 사람들이 사용하는 기기의 해상도 통계 등을 참고하면 좀 더 근거가 있는 분기점을 설정할 수 있다.

웹 브라우저 점유율, 해상도, SNS 점유율 등의 통계를 제공하는 웹사이트

2. 그리드(Grid)

화면에 디자인 배치하는 가이드라인으로 일반적으로는 세로 방향의 기둥을 쭉 세우는대 가끔 가로 줄도 추가로 사용하는 경우가 종종 있다.

디자인을 배치할 기준선이 되어줄 가상의 선을 긋고 그 선에 맞춰서 레이아웃을 배치하는 것이다.

그리드를 사용하는 이유는?

원래 그리드는 편집 디자인 용어로 글과 그림들을 균형감 있게 배치하기 위해 사용되는데 강조와 적당한 간격 등을 만들어 가독성을 높이는 등 전체적인 완성도를 올리기 위해서다

즉, 우리가 적용하고 사용할 그리드의 개념은 종이 문서에서 디지털 문서(웹페이지)로 바뀌었을 뿐이고 이 또한 균형감, 완성도, 일관성을 위해서 사용한다.

그리드를 만드는 방법은?

일반적으로 세로 방향의 기둥을 몇 개 둘지 정하는 것이 우선시된다.

대부분 데스크탑 화묜을 기준으로 12개의 기둥을 사용하는데 이를 12 칼럼 그리드(12 Column Grid)라고 칭한다.

(16개를 사용하는 경우도 있으나, 12개 이상은 반응형 디자인 작어이 어렵고 개발도 복잡해짐!)

왜 12개?
12개는 짝수이면서 1, 2, 3, 4, 6, 8, 10, 12로 나누어 유연하게 배치할 수 있기 때문이다. 또한, 모바일 화면 디자인 시에는 기둥 4개를 배치하는데 이를 반응형으로 확장시킨다면 태블릿에선 2배인 8개, 데스크톱에선 3배인 12개로 늘어나게 되면서 자리를 잡게 되었다.

(이미지 출처 : 스파르타코딩클럽 내일배움캠프)