> 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)를 공간 안에 효과적으로 배치하는 프로세스를 말합니다.

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH5H41q4jjsCniYXpiS%2F-LH5ML2OuSHDNO5N7XkU%2Fimage.png?alt=media\&token=3df4aee4-058b-476e-9d81-8c5b233cbbfb)

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH5H41q4jjsCniYXpiS%2F-LH5MmoBRfdrFvjfkd8z%2Fimage.png?alt=media\&token=be76c7e0-8e96-4f4e-911e-1b1fbe07c6af)

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

![Layout × Grid](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDY3WW0EKFNtRYK5AK%2F-LHDY5KMqdDi7Uv-cYHW%2Fimage.png?alt=media\&token=510c44e2-c263-47c2-9e97-e5cb000c4cb6)

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

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH5H41q4jjsCniYXpiS%2F-LH5Mx_6wMGoHfmdGK2H%2Fimage.png?alt=media\&token=2ef37c1f-b0b7-4b68-ae88-955bac9d587a)

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH5H41q4jjsCniYXpiS%2F-LH5OMlRSkOCsKCYZFa1%2Fimage.png?alt=media\&token=7f35b1cd-461d-4e26-a842-81cb5e3cc39c)

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH5H41q4jjsCniYXpiS%2F-LH5RL_JQGNhNc2nxqVT%2Fimage.png?alt=media\&token=e937d6d0-72e1-4406-bc55-114e446a90fa)

## 그리드의 대중화

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

{% tabs %}
{% tab title="스위스 디자인 1955" %}
![Josep Muller-Brockmann, 1955년 스위스 포스터 오토 클럽](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH1jORDUBB6AUNlUB4q%2F-LH1t6n0ZBfiTCskmpaP%2Fimage.png?alt=media\&token=2c12aee2-e5c2-4a1b-aef9-c91f4994ad68)
{% endtab %}

{% tab title="스위스 디자인 1955" %}
![Joseph Müller-Brockmann, 취리히 타운 홀 포스터, 1955](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH1jORDUBB6AUNlUB4q%2F-LH1tIu4jq-1lcyoPKY3%2Fimage.png?alt=media\&token=67c9bca9-c1da-4551-adf7-3248270edc32)
{% endtab %}

{% tab title="스위스 디자인 1958" %}
![Eugene and Max Lenz, Sports Poster, 1958년](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH1jORDUBB6AUNlUB4q%2F-LH1sH8-8Qjmjwy7hSSj%2Fimage.png?alt=media\&token=e3294fb9-c28d-4cf3-a1c0-edd5b1f742ef)
{% endtab %}

{% tab title="스위스 디자인 1962" %}
![Joseph Muller-Brockmann, 1962년](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH1jORDUBB6AUNlUB4q%2F-LH1sTrKtfAqI_FP4mFM%2Fimage.png?alt=media\&token=fabf2e87-251b-419d-80ad-4b081c384727)
{% 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 %}

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHHPu4p7FBDFnIDuXuT%2F-LHHPvq8b1h9IHrcPHXG%2Fimage.png?alt=media\&token=f7c4265a-2d34-496c-a792-5947f4f8337f)

## 웹 디자인 × 그리드

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

![그리드를 사용한 웹 레이아웃 스케치](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH5H41q4jjsCniYXpiS%2F-LH5O3lp2kUxQnxpXWhO%2Fimage.png?alt=media\&token=bce1baf4-4a5d-451c-b115-1140ce59853e)

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH1jORDUBB6AUNlUB4q%2F-LH1v3fC_kK7x7XhutqF%2Fimage.png?alt=media\&token=2fc6d9ee-6f79-4899-b8e7-f531d1e3c02e)

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH1jORDUBB6AUNlUB4q%2F-LH1vk4he34kCx44WaE3%2Fimage.png?alt=media\&token=feb712d7-99ad-4476-8759-f56a27c1ebfc)

![](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH1jORDUBB6AUNlUB4q%2F-LH1vbCHHQWmCIXYsv_E%2Fimage.png?alt=media\&token=54b565ce-034c-4d2f-b2d5-841af9a2edbc)

## 그리드 프레임 워크

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

![Bootstrap Grid System | 정형 그리드](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH2Z5VY5BolLehxrzt0%2F-LH2_gbzC_ulVj-4CVCE%2Fimage.png?alt=media\&token=536af15f-087c-4762-ab47-ca435f4e9416)

![Susy Grid System | 비정형 그리드](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH2Z5VY5BolLehxrzt0%2F-LH2cO9jCncc-2LK81JB%2Fimage.png?alt=media\&token=c0f7bd9c-b2f0-42dd-bc7d-662458cfe816)

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

![Bootstrap 문서 › Grid System 사용 가이드](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH5H41q4jjsCniYXpiS%2F-LH5JDCmY-FcgoFjNqDy%2Fimage.png?alt=media\&token=28a8d276-0c1f-4e49-8b76-b9d6c59d390d)

![Susy 문서 › Grid System 설정 가이드](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH5H41q4jjsCniYXpiS%2F-LH5KMh9wgY5fyDlA5dU%2Fimage.png?alt=media\&token=edf4c345-0d39-44d5-887e-d8800fabb8ee)

## CSS Grid 등장

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

![CSS Grid 모듈 가이드라인](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH2Z5VY5BolLehxrzt0%2F-LH2cz6LntoSi-XxIhpS%2Fimage.png?alt=media\&token=471434df-e5d6-41cf-bdad-dd1891533d78)

![CSS Grid로 구현한 레이아웃 프로토타입](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LH2Z5VY5BolLehxrzt0%2F-LH2dVeMp_d9-NazZzAk%2Fimage.png?alt=media\&token=b76fc737-f881-4854-90d9-40eb293b7f41)

![CSS Grid로 구현한 레이아웃 디자인](https://3440753900-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LH1dN99ZXtZTFG_0JKV%2F-LHDY3WW0EKFNtRYK5AK%2F-LHDYzl7MfRrznV9Dvx-%2Fimage.png?alt=media\&token=69a99ec9-dfad-4297-b83a-c9565a372a8d)