레이아웃 디자인
디자인의 꽃 | "레이아웃"
Last updated
디자인의 꽃 | "레이아웃"
Last updated
디자이너라면 누구나 할 것 없이 레이아웃 디자인이 얼마나 중요한지 알고 있습니다. 디자인을 구성하는 가장 기본적인 요소이기 때문입니다. 레이아웃은 각 구성요소(Components)를 공간 안에 효과적으로 배치하는 프로세스를 말합니다.
그리드는 디자인을 레이아웃 하는 방법론 중 하나로 텍스트, 이미지와 같은 그래픽 요소를 계층 구조로 구성하는 일관된 프레임 워크를 보장합니다. 그리드를 사용하려면 먼저 그리드 시스템을 구성하는 용어와 기본 사용법을 학습해야 합니다.
그리드는 격자 구조를 만드는 행과 열, 모듈로 구성됩니다. 그리드를 사용하는 목적은 레이아웃이 균형을 이루고 비율이 적절하게 유지되도록 하는데 있습니다. 요컨대 정보에 질서를 부여하는 체계(System)을 제공합니다.
그리드 시스템은 1940~1950 년 대에 등장한 스위스의 그래픽 디자인으로 대중화 되었습니다. 스위스 디자인 스타일은 고딕(San-Serif) 계열의 타입, 원색 및 그리드 레이아웃이 주류를 이룬 디자인 입니다. 스위스 디자인은 "단순성, 가독성 및 객관성"에 중점을 둔 디자인으로 디지털 디자인과 관련도가 높습니다.
1940~50년대 스위스에서 유래한 디자인 스타일로 International Typographic Style 또는 International Style 이라고도 불리며, 20 세기 중반 그래픽 디자인 개발의 기반이 되었습니다. 취리히(Zurich) 미술 학교의 조세프 뮐러-브록만 (Josef Muller-Brockmann)과 바젤(Basel) 디자인 학교의 아르민 호프만 (Armin Hofmann)이 이끄는 스타일은 단순함, 가독성 및 객관성을 선호했습니다. 각 학교에서 개발한 수 많은 공헌 중 대표적인 것은 고딕 계열의 활자를 활용한 인쇄술과 그리드 및 비대칭 레이아웃의 활용을 들 수 있습니다. 또한 비주얼 커뮤니케이션 수단으로 활판 인쇄술과 사진 촬영 결합이 강조 되었습니다. 가장 영향력 있는 작품은 포스터로 개발되었으며, 가장 효과적인 커뮤니케이션 수단으로 간주 되었습니다.
— 디자인 이즈 히스토리 "Swiss Design"
21세기 디지털 디자인 세상에서도 그리드는 여전히 뛰어난 디자인 도구로 사용됩니다. 하지만 CSS는 언어 차원에서 그리드를 지원하지 않아, 웹 레이아웃에 그리드를 사용하기 위한 다양한 방법이 등장했습니다. 대표적으로 사용된 방법은 컬럼 그리드 입니다. 일관된 간격으로 구성된 컬럼에 요소를 배치합니다.
그리드를 사용해 레이아웃 디자인 하는 경험을 유사하게 구현한 수 많은 CSS 그리드 프레임 워크가 등장하고 사용 되어 왔습니다. 대표적인 프레임 워크로 Bootstrap과 Susy 등을 들 수 있습니다.
그리드 시스템을 표방한 이러한 방법론은 매우 편리하며 생산성을 향상 시킬 수 있는 장점이 있습니다. 반면 프레임 워크를 활용하기 위한 별도의 학습이 요구된다는 단점 또한 가집니다. 그리고 대부분의 인기 있는 프레임 워크는 모두 영문으로 언어의 장벽이 더 크게 다가오기도 합니다.
기술의 발전으로 더 이상 그리드 프레임 워크를 사용하지 않아도 되는 시대가 도래했습니다. 레이아웃 디자인을 보다 쉽고 강력하게 구현할 수 있도록 CSS Grid 모듈을 언어 차원에서 지원하기 시작했고, 대부분 브라우저에서 이를 완벽하게 지원하기 때문입니다. CSS Grid를 사용하면 프레임 워크를 학습하는 수고 없이 멋진 레이아웃을 만들 수 있습니다.
