자료의 출처는 codecademy(https://www.codecademy.com/) 'front-end engineer' course이며, 학습 후 정리한 내용입니다.
⚡️ 올바르지 않은 내용이 있을 경우 댓글로 남겨주시면 감사하겠습니다. ⚡️
GRIDS AND SPACING
Grid Type
다양한 유형의 그리드가 존재하며 모든 유형의 시각적 디자인에서 사용된다.
인쇄기의 제작과 함께, 책 제작자들은 페이지의 텍스트에 구조를 가져오기 위해 원고식 그리드(manuscript-style grid) 또는 block grid를 개발하였다.
뉴스 디자인 내에서 column grid는 출판사들이 페이지를 여러 가지 내용을 강조하기 위해 섹션으로 분할할 수 있게 했다.
column grid:웹 디자이너가 사용할 가장 일반적인 그리드 유형
column grid는 페이지를 내용 너비에 걸쳐 있는 수직 단위로 분할하며, 이 그리드 구조는 요소가 정밀하고 우아하게 배치되는 방식을 지시할 수 있다.
Grid Anatomy
웹 사이트 디자인의 세 가지 주요 구성 요소: column, gutter, margin
column(열): 페이지 너비에 걸쳐 있는 수직 섹션
웹 디자인에서, 일반적으로 12개 또는 16개 열로 구성된 레이아웃을 볼 수 있지만 다른 열에는 3개 열만 표시될 수 있다.
column 수를 정의하는 것은 디자인, 장치 및 화면 보기 크기에 따라 달라진다.
gutter: 각 column 사이의 negative space
gutter는 column이 함께 실행되지 않도록 하는 데 도움이 되며, 이는 column-based grid를 사용하는 목적을 부정할 수 있다.
column-based grid의 왼쪽과 오른쪽에 margin(여백)이 나타난다.
이렇게 하면 디자인의 내용이 브라우저 창의 가장자리까지 일치하지 않는다.
참고로 여백은 그리드, 브라우저 창 또는 장치의 너비에 따라 달라질 수 있다.
대형 표시장치의 경우, 작은 화면에서는 여백이 매우 두드러질 수 있으며, 가로 세로 폭과 같을 수 있다.
Grid Rows
Row(행): 그리드의 수평선
row을 높이별로 내용을 그룹화하는 보이지 않는 상자로 간주하며,
일반적으로 row는 콘텐츠를 함께 그룹화하고 다른 콘텐츠를 다 정렬하여 더 많은 공백을 허용하는 데 사용된다.
예를 들어, 모든 항목이 동일한 양의 열(column)에 걸쳐 있고 다른 요소에 의해 중단되지 않고 페이지 전체에서 정렬되도록 한다고 가정한다.
이 결과를 얻기 위한 한 가지 방법은 내용을 행 구성요소로 감싸는 것이다.
이렇게 하면 행의 내부가 아닌 모든 내용이 강제로 삭제된다.
행을 사용하여 사용하지 않는 나머지 열이 있는 영역에서 콘텐츠를 강제로 분리할 수 있다.
디자인에서 12개의 column grid를 사용하고 하나의 요소가 7개의 열에 걸쳐 있기를 바란다고 가정
이것은 왼쪽이나 오른쪽으로 채워지지 않은 다섯 개의 column을 여전히 가지고 있다는 것을 의미한다.
자연스럽게 문서에 추가된 새로운 내용이 사용되지 않는 공간을 채우려고 할 것이다.
그러나 7개의 열에 걸쳐 있는 행 요소를 구성 요소 주위에 배치하면 구성 요소 아래에서 새로운 내용을 시작하고 나머지 5개의 열을 비워 둘 수 있다.
Grid Gutters
gutter는 column 사이의 음의 공간을 차지한다.
gutter는 수평으로 정렬된 요소 간에 자연스러운 분리를 제공하는 동시에 콘텐츠 행을 수직으로 분리하는 데 도움이 된다.
참고: 전체 열 수보다 항상 gutter가 하나 적다. 예를 들어, 12개 열 그리드에서 설계하는 경우 11개의 gutter만 사용
각 열을 구분하는 간격마다 하나씩 존재
gutter width에 대한 표준이 설정되지 않았지만, 수평 열을 시각적으로 구분하지만 열 너비보다 훨씬 더 얇은 크기를 선택하는 것이 좋다.
수직 gutter도 마찬가지
또한, 수직 및 수평 거터는 주어진 그리드 레이아웃에 대해 크기가 일치할 필요가 없다.
이는 디자이너로서 페이지의 요소를 분리할 때 수평 간격보다 수직 간격을 더 많이 원할 수 있기 때문
거터 공간이 너무 좁으면 한 요소가 끝나고 다른 요소가 시작되는 곳을 시각적으로 구분하기 어려울 수 있다.
반면, 거터 공간이 너무 크면 설계를 따르기가 어려울 수 있다.
Responsive Grid
웹 콘텐츠를 설계할 때 디자이너는 사용자가 접할 수 있는 다양한 화면 크기와 웹 사이트 레이아웃에 어떤 영향을 미칠지 고려해야 한다.
많은 웹 사이트는 응답성이 높은 디자인을 활용하는데, 이는 웹 사이트의 콘텐츠가 장치나 화면 크기에 따라 이동하도록 하는 일련의 기술이다.
이러한 변경으로 인해 응답성이 높은 설계에서는 콘텐츠를 수용하고 스퀴즈되지 않도록 하려면 화면 크기에 따라 총 열 수가 달라야 한다.
모바일, 태블릿 및 데스크탑 장치의 모든 것은 크기가 상당히 다르다.
따라서, 응답성이 높은 그리드 크기를 만드는 것이 웹 설계의 일반적인 관례이다.
대형 또는 데스크탑 장치에서는 12개 열 그리드로 시작할 수 있지만 소형 또는 모바일 장치에서는 12개 열 그리드를 4개 열 그리드로 조정할 수 있다.
디자이너는 응답성이 뛰어난 그리드 설계를 통해 화면의 콘텐츠를 최대화할 수 있으므로 사용자가 보다 쉽게 액세스할 수 있다.
또한 디자인 구성요소는 숨쉴 공간이 충분하고 내용물이 페이지 전체에 자연스럽게 흐를 수 있다.
Whitespace
공간은 웹 디자인에서 균형 있고 조화로운 레이아웃을 만드는 중요한 측면이다.
디자이너로서, 공간을 어떻게 개선하고 디자인을 해칠 수 있는지를 이해하는 것이 중요하다.
whitespace 또는 negative space은 요소 사이의 빈 공간을 나타낸다.
column의 gutter에 있는지, 또는 텍스트 블록 주위에 추가적인 padding이 있는지 여부이다.
디자이너는 공간을 사용하여 사이트의 사용 편의성을 높이고 콘텐츠의 우선 순위를 지정할 수 있다.
좋은 whitespace의 몇 가지 예를 살펴보자.
작업영역의 예를 보면 왼쪽의 웹 사이트가 시작 페이지의 공백을 포함한다는 것을 알 수 있다.
콘텐츠를 검색하는 기본 액션에만 사용자의 관심을 집중시킨다.
이 경우 whitespace도 흰색이다. 하지만, whitespace는 항상 백색인 것은 아니다.
오른쪽 예제에서는 공백이 너무 많으면 사이트 흐름에 부정적인 영향을 미칠 수 있다.
요소 사이에 너무 많은 간격을 포함하면 콘텐츠를 원활하게 탐색하려는 사용자에게 문제가 발생할 수 있다.
whitespace는 passive와 active로 나뉜다.
Passive Whitespace
첫 번째 유형의 whitespace는 passive whitespace 또는 micro whitespace이다.
특정 읽기, 흐름 또는 내용 순서를 통해 사용자를 안내하지 않고 레이아웃의 미관을 개선하기 위해 사용되는 passive whitespace는 고려되지 않은 공간이라고도 한다.
passive whitespace의 가장 빈번한 사용은 텍스트 요소 내에 있다.
font-family 는 다양한 양의 passive whitespace를 가지며,
유형을 설정할 때 line-height 또는 margin과 같은 CSS property를 변경하여 디자인 내에서 해당 passive whitespace의 측면을 제어할 수 있다.
텍스트 줄 사이의 간격을 조정하면 디자인의 전체적인 가독성과 균형을 개선할 수 있다.
사이트의 텍스트가 너무 빡빡하거나 제목과 단락 아래에 충분한 여백이 없는 경우, 사용자는 콘텐츠를 소비하기 어려울 수 있다.
그러나 사이트의 텍스트가 너무 띄어쓰면 읽기 어려울 수 있다.
충분한 간격이 없는 텍스트와 너무 많은 텍스트 사이에서 건강한 균형을 찾는 것은 디자이너에게 중요한 작업이다.
Active Whitespace
보다 자연스럽게 발생하는 passive whitespace와 달리 active whitespace는 의도적으로 생성된다.
macro whitespace라고도 하는 active whitespace는 콘텐츠를 강조하거나 사용자를 한 지점에서 다음 지점으로 안내하기 위해 공간을 통해 전체 페이지 구조를 향상시키는 것을 말한다.
사이트 디자인에 active whitespace를 추가하면 여러 섹션을 펼칠 수 있다.
이 기술은 사용자가 페이지의 내용을 보다 효과적으로 안내하여 사용자가 콘텐츠를 보다 쉽게 소비하고 흡수할 수 있도록 한다.
active whitesapce는 여러 가지 형태로 제공된다.
그러나 전통적으로 사이트 요소 사이에 공간을 추가함으로써 달성된다.
예를 들어, 문서 사이드바에 공간을 추가하면 페이지의 주요 내용에서 내용을 시각적으로 구분하는 데 도움이 된다.
또한, 이러한 유형의 whitespace는 독자들이 무엇에 초점을 맞춰야 하는지 아니면 단지 보충적인 세부 사항인지 빠르게 이해할 수 있게 해준다.
'IT > CSS' 카테고리의 다른 글
| CSS: Grid - 2 (0) | 2021.06.09 |
|---|---|
| CSS: Grid (0) | 2021.06.06 |
| Documentation and Research (0) | 2021.06.05 |
| Layout with Flexbox (0) | 2021.05.22 |
| Responsive Design - II (0) | 2021.05.16 |
댓글