웹 그리드 시스템

스터디

JiHae 2022. 5. 24. 19:15

# 그리드 시스템

정의

- 내용을 구성하는데 사용되는 일련의 교차하는 직선 또는 곡선으로 구성된 구조

- 그래픽 요소를 합리적이고 흡수하기 쉬운 방식으로 구성할 수 있는 뼈대 또는 프레임 워크 역할을 한다.

장점

- 정렬에 도움을 주고 정돈된 결과물을 얻을 수 있다.

- 일관적이고 규칙적인 배치로 통일성이나 일관성을 얻을 수 있다.

- 내부 협업하는 과정에 도움을 주며 기준(Rlue)으로 활용한다. (스타일 가이드 포함)

- 반응형 디자인 설계 시 해상도 대응이 용이해진다.

# 웹 그리드 시스템에 대한 이해

웹사이트에 적용되는 그리드 시스템을 이해하려면 디스플레이의 해상도를 알아야 한다. (앱에 일부 적용)

모바일 320(360) / 태블릿 640(768) / 테스크톱 1920(1280)

: 괄호안의 수치들은 최근에 두로 작업하는 해상도

소수점은 디자이너가 무조건 피해야 할 수치

보통 아이콘 작업 시 큰 아이콘 > 축소하여 작업

# 해상도에 따른 그리드 시스템

요즘 모바일은 360에 4컬럼 또는 6컬럼

# 8포인트 그리드

8pt 그리드를 적극적으로 활용한 대표적 디자인 = 구글의 머티리얼 디자인

--------------------------------------------------------------------------------------------------------------------------