[Front-End] 그리드와 공백

그리드(Grid) 란?

그리드는 교차하는 수평선과 수직선으로 구성된다. ex) 지도 속 거리들 - 도시 레이아웃에 명확한 구조를 형성.

그리드 시스템은 디자인을 구성하는 데 도움이 되며 페이지의 요소를 적절하게 정렬하기 위한 일련의 지침을 제공한다.

그리드는 일관성을 촉진하여 디자인 전체에 적용할 반복 패턴을 구축할 수 있다.

→ 반복 사용을 통해 웹 사이트 사용에 대한 학습을 빠르게 할 수 있으므로 사용자가 콘텐츠를 명확하게 탐색하고 사용할 수 있다.

 

 

그리드 유형

원고 스타일 그리드(manuscript-style grid), 블록 그리드(block grid)와 같이 텍스트를 구조적으로 보이기 위한 그리드 유형이 있다.

웹 디자이너가 사용하는 가장 일반적인 그리드 유형은 열 그리드(column grid)이다.

열 그리드는 페이지를 콘텐츠 너비에 걸쳐 세로 단위로 분할한다.

 

 

그리드 구성

그리드는 열, 거터, 여백이라는 세 가지 주요 구성 요소로 구성된다.

열(Column) :  페이지 너비에 걸쳐있는 수직의 부분들. 웹 디자인에서는 일반적으로 12개 또는 16개의 열로 구성된 레이아웃을 볼 수 있지만 3개의 열만 있을 수 있다. 열 수를 정의하는 것은 디자인, 장치, 화면 크기에 따라 적절한 것이 다르다.

거터(Gutter) : 각 열 사이의 음수 공간. 거터는 열들이 함께 실행되지 않도록 하므로 열 기반 그리드를 사용하는 목적이 무효화된다.

여백(Margin) : 열 기반 그리드의 왼쪽과 오른쪽에 나타남. 디자인의 콘텐츠가 브라우저 창의 가장자리와 일치하지 않도록 해준다. 여백은 그리드, 브라우저 창 또는 장치의 너비에 따라 달라질 수 있다. 대형 디스플레이의 경우 여백이 매우 눈에 띄고, 작은 화면에서는 여백이 거터와 동일한 너비를 가질 수 있다.

 

 

그리드 열

열(Columns)은 페이지 너비에 걸쳐있는 수직 컨테이너이다.

서로 종속될 수 있고, 단락의 연속과 같은 관련성 있는 콘텐츠를 구성하는데 사용된다.

또한 서로 독립적일 수 있고, 사이드 바와 같은 관련없는 콘텐츠의 레이아웃을 구성하는 데 사용된다.  

그리드 내에서 콘텐츠는 여러 열에 걸쳐있을 수 있다. → 웹 사이트 전체가 동일한 열 레이아웃을 유지할 필요가 없다는 것을 의미.

내용이 격자의 전체 너비, 격자의 절반, 격자의 작은 부분에 걸쳐있는 것과 같은 다양한 레이아웃 옵션을 선택하여 사용할 수 있다.

열은 거터(두 열 사이의 공간 또는 간격)로 구분된다. → 다음 열을 사용하지 않는 한 내용물이 거터로 넘칠 수 없다.

열을 사용하여 콘텐츠를 푸시하거나 오프셋할 수도 있다. 12열 그리드를 사용하는 동안 페이지의 오른쪽 4열에만 콘텐츠를 표시하고 싶다면 콘텐츠를 8열만큼 쉽게 오프셋하여 콘텐츠가 오른쪽 4열로 푸시되도록 할 수 있다.

 

그리드 행

행(Rows)은 그리드의 수평선이다.

행은 일반적으로 웹 디자인에서 콘텐츠를 그룹화하고 더 많은 공백을 허용하기 위해 다른 콘텐츠의 순서를 변경하는 데 사용된다.

행을 사용하여 사용되지 않은 나머지 열이 있는 영역에서 콘텐츠를 강제로 이동할 수 있다. 

→ 12개의 기둥 그리드를 사용하고 하나의 요소가 7개의 기둥에 걸쳐 있기를 원한다면 왼쪽이나 오른쪽에 채워지지 않은 열이 5개 있다. 문서에 추가된 모든 새 콘텐츠는 이 미사용 공간을 채우려고 할 것이다. 그러나 7개 열에 걸쳐있는 구성 요소 주위에 행 요소를 배치하면, 새 콘텐츠를 구성 요소 아래에서 시작하며 나머지 5개 열은 비워둘 수 있다.

 

그리드 거터

거터(Gutters)는 열 사이의 음수 공간을 구성한다.

가로로 정렬된 요소 사이에 자연스러운 구분을 제공하고 콘텐츠 행을 세로로 구분하는 데 도움이 된다.

거터는 각 열을 구분하는 모든 간격에 대해 하나씩 있기 때문에 항상 총 열 수보다 하나 적다. 

거터 너비에 대한 정해진 표준은 없는데 열을 시각적으로 구분하면서도 열 너비보다 훨씬 얇은 크기를 고르는 것이 좋다.

거터 공간이 너무 좁으면 한 요소가 끝나고 다른 요소가 시작되는 위치를 시각적으로 구분하기 어려울 수 있고, 거터 공간이 너무 크면 디자인을 따르기가 어려울 수 있다.

 

반응형 그리드

반응형 디자인을 통해 많은 웹 사이트는 웹 사이트의 콘텐츠가 기기 또는 화면 크기에 따라 이동할 수 있게 한다.

반응형 디자인에는 콘텐츠를 수용하고 찌그러지지 않도록 하기 위해 화면 크기에 따라 총 열 수가 달라야 한다.

모바일, 태블릿  데스크톱 장치 모두 크기가 상당히 달라서, 웹 디자인에서는 반응형 그리드 크기를 만드는 것이 일반적이다.

대형 또는 데스크탑 장치에서는 12 열 그리드로 시작하고, 소형 또는 모바일 장치에서는 12 열 그리드를 4 열 그리드로 조정한다.

 

 

공백

공백 또는 음의 공백은 요소 사이의 여백을 나타낸다.

공간을 사용하여 사이트의 유용성을 높이고 콘텐츠의 우선순위를 지정할 수 있다.

구글 검색 사이트는 많은 공백을 포함하고 있고 콘텐츠를 검색하는 기본 작업에만 사용자의 주의를 집중시킨다.

그러나 너무 많은 공백이 사이트의 흐름에 부정적인 영향을 미칠 수도 있다.

 

수동 공백(Passive Whitespace)

수동 공백(= 마이크로 공백)은 때때로 고려되지 않은 공간이라고 불리며, 특정 읽기, 흐름 또는 콘텐츠 순서를 통해 사용자를 안내하지 않고 레이아웃의 미학을 개선하는 데 사용된다. 

수동 공백의 가장 빈번한 사용은 텍스트 요소 내에 있다.

다른 글꼴은 다양한 수동 공백을 가지고 있으며, line-height 또는 margin과 같은 CSS의 속성을 변경하여 디자인할 수 있다.

텍스트 줄 사이의 간격을 조정하여 디자인의 전체적인 가독성과 균형을 향상할 수 있고, 사이트의 텍스트 간격이 너무 넓으면 읽기가 어려워질 수도 있다. 

 

활성 공백(Active Whitespace)

수동 공백과 달리 능동 공백은 의도적이다.

활성 공백(= 매크로 공백)은 콘텐츠를 강조하거나 사용자를 안내하기 위해서 공간을 통해 전체 페이지 구조를 향상하는 것을 의미한다.

사용자가 페이지의 콘텐츠를 효과적으로 안내받고 콘텐츠를 보다 쉽게 ​​소비하고 흡수할 수 있도록 한다.

활성 공백은 일반적으로 사이트 요소 사이에 공간을 추가하여 보인다. ex) 기사 사이드 바에 공간을 추가하면 페이지의 주요 콘텐츠로 부터 콘텐츠를 시각적으로 구분하는 데 도움이 되고, 독자가 집중해야 할 내용과 단순히 보충적인 세부 정보를 빠르게 이해할 수 있다.