> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/css-grid/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/css-grid/master.md).

# 레이아웃 디자인

## 레이아웃 × 그리드

디자이너라면 누구나 할 것 없이 레이아웃 디자인이 얼마나 중요한지 알고 있습니다. 디자인을 구성하는 가장 기본적인 요소이기 때문입니다. 레이아웃은 각 구성요소(Components)를 공간 안에 효과적으로 배치하는 프로세스를 말합니다.

![](/files/-LH5ML2OuSHDNO5N7XkU)

![](/files/-LH5MmoBRfdrFvjfkd8z)

그리드는 디자인을 레이아웃 하는 방법론 중 하나로 텍스트, 이미지와 같은 그래픽 요소를 계층 구조로 구성하는 일관된 프레임 워크를 보장합니다. 그리드를 사용하려면 먼저 그리드 시스템을 구성하는 용어와 기본 사용법을 학습해야 합니다.

![Layout × Grid](/files/-LHDY5KMqdDi7Uv-cYHW)

그리드는 **격자 구조를 만드는 행과 열, 모듈로 구성**됩니다. 그리드를 사용하는 목적은 레이아웃이 균형을 이루고 비율이 적절하게 유지되도록 하는데 있습니다. 요컨대 정보에 질서를 부여하는 체계(System)을 제공합니다.

![](/files/-LH5Mx_6wMGoHfmdGK2H)

![](/files/-LH5OMlRSkOCsKCYZFa1)

![](/files/-LH5RL_JQGNhNc2nxqVT)

## 그리드의 대중화

그리드 시스템은 **1940\~1950 년 대에 등장한 스위스의 그래픽 디자인으로 대중화** 되었습니다. 스위스 디자인 스타일은 고딕(San-Serif) 계열의 타입, 원색 및 그리드 레이아웃이 주류를 이룬 디자인 입니다. 스위스 디자인은 **"단순성, 가독성 및 객관성"**에 중점을 둔 디자인으로 디지털 디자인과 관련도가 높습니다.

{% tabs %}
{% tab title="스위스 디자인 1955" %}
![Josep Muller-Brockmann, 1955년 스위스 포스터 오토 클럽](/files/-LH1t6n0ZBfiTCskmpaP)
{% endtab %}

{% tab title="스위스 디자인 1955" %}
![Joseph Müller-Brockmann, 취리히 타운 홀 포스터, 1955](/files/-LH1tIu4jq-1lcyoPKY3)
{% endtab %}

{% tab title="스위스 디자인 1958" %}
![Eugene and Max Lenz, Sports Poster, 1958년](/files/-LH1sH8-8Qjmjwy7hSSj)
{% endtab %}

{% tab title="스위스 디자인 1962" %}
![Joseph Muller-Brockmann, 1962년](/files/-LH1sTrKtfAqI_FP4mFM)
{% endtab %}
{% endtabs %}

{% hint style="info" %}

### 스위스 디자인

1940\~50년대 스위스에서 유래한 디자인 스타일로 International Typographic Style 또는 International Style 이라고도 불리며, 20 세기 중반 그래픽 디자인 개발의 기반이 되었습니다. 취리히(Zurich) 미술 학교의 [조세프 뮐러-브록만 (Josef Muller-Brockmann)](http://en.wikipedia.org/wiki/Josef_M%C3%BCller-Brockmann)과 바젤(Basel) 디자인 학교의 [아르민 호프만 (Armin Hofmann)](http://www.designishistory.com/home/swiss/_http://en.wikipedia.org/wiki/Armin_Hofmann)이 이끄는 스타일은 **단순함, 가독성 및 객관성을 선호**했습니다.\
\
각 학교에서 개발한 수 많은 공헌 중 대표적인 것은 고딕 계열의 활자를 활용한 인쇄술과 그리드 및 비대칭 레이아웃의 활용을 들 수 있습니다. 또한 비주얼 커뮤니케이션 수단으로 활판 인쇄술과 사진 촬영 결합이 강조 되었습니다. 가장 영향력 있는 작품은 포스터로 개발되었으며, 가장 효과적인 커뮤니케이션 수단으로 간주 되었습니다.

— 디자인 이즈 히스토리 ["Swiss Design"](http://www.designishistory.com/home/swiss/)
{% endhint %}

![](/files/-LHHPvq8b1h9IHrcPHXG)

## 웹 디자인 × 그리드

21세기 디지털 디자인 세상에서도 그리드는 **여전히 뛰어난 디자인 도구로 사용**됩니다. 하지만 CSS는 언어 차원에서 그리드를 지원하지 않아, 웹 레이아웃에 그리드를 사용하기 위한 다양한 방법이 등장했습니다. 대표적으로 사용된 방법은 컬럼 그리드 입니다. 일관된 간격으로 구성된 컬럼에 요소를 배치합니다.

![그리드를 사용한 웹 레이아웃 스케치](/files/-LH5O3lp2kUxQnxpXWhO)

![](/files/-LH1v3fC_kK7x7XhutqF)

![](/files/-LH1vk4he34kCx44WaE3)

![](/files/-LH1vbCHHQWmCIXYsv_E)

## 그리드 프레임 워크

그리드를 사용해 레이아웃 디자인 하는 경험을 유사하게 구현한 수 많은 CSS 그리드 프레임 워크가 등장하고 사용 되어 왔습니다. 대표적인 프레임 워크로 [Bootstrap](https://getbootstrap.com/docs/4.1/layout/grid/)과 [Susy](http://oddbird.net/susy/) 등을 들 수 있습니다.

![Bootstrap Grid System | 정형 그리드](/files/-LH2_gbzC_ulVj-4CVCE)

![Susy Grid System | 비정형 그리드](/files/-LH2cO9jCncc-2LK81JB)

그리드 시스템을 표방한 이러한 방법론은 매우 편리하며 생산성을 향상 시킬 수 있는 장점이 있습니다. 반면 프레임 워크를 활용하기 위한 별도의 학습이 요구된다는 단점 또한 가집니다. 그리고 대부분의 인기 있는 프레임 워크는 모두 영문으로 언어의 장벽이 더 크게 다가오기도 합니다.

![Bootstrap 문서 › Grid System 사용 가이드](/files/-LH5JDCmY-FcgoFjNqDy)

![Susy 문서 › Grid System 설정 가이드](/files/-LH5KMh9wgY5fyDlA5dU)

## CSS Grid 등장

**기술의 발전으로 더 이상 그리드 프레임 워크를 사용하지 않아도 되는 시대가 도래했습니다.** 레이아웃 디자인을 보다 쉽고 강력하게 구현할 수 있도록 **CSS Grid 모듈을 언어 차원에서 지원하기 시작했고, 대부분 브라우저에서 이를 완벽하게 지원하기 때문**입니다. CSS Grid를 사용하면 프레임 워크를 학습하는 수고 없이 멋진 레이아웃을 만들 수 있습니다.

![CSS Grid 모듈 가이드라인](/files/-LH2cz6LntoSi-XxIhpS)

![CSS Grid로 구현한 레이아웃 프로토타입](/files/-LH2dVeMp_d9-NazZzAk)

![CSS Grid로 구현한 레이아웃 디자인](/files/-LHDYzl7MfRrznV9Dvx-)