레이아웃이란, 컴퓨터 그래픽 디자인이나 소프트웨어 디자인에서 각 구성요소를 제한된 공간 안에 효과적으로 배열하는 것.
반응형이란 다양한 해상도의 디바이스에 최적화 시키는 것으로 그리드 시스템을 바탕으로 레이아웃을 구성하는 것이 중요함.
그리드 시스템을 활용해서 레이아웃을 만드는 이유 2가지는, 규칙을 가지고 UI 디자인 작업을 하기 때문에 사이즈나 여백에 대한 큰 고민 없이 빠르게 작업이 가능하고 그에 따라 결과물이 시각적으로 규칙성을 가질 수 있음. 더 중요한 것은 프런트엔드 개발자가 반응형 웹을 만들기 위해 CSS의 미디어 쿼리를 통해 Breakpoint에 맞춰 쉽게 레이아웃 제작이 쉬워짐.
예를 들면, 데스크톱이나 랩톱에서는 12단 그리드 시스템에서 3단 레이아웃의 카드 UI를 배치했다면, 폭이 좁은 태블릿에서는 6단 그리드 시스템에서 2단 레이아웃을 사용하고, 더 작은 모바일에서는 4단 그리드 시스템에서 1단 레이아웃을 만드는 방식.
주의점
사전에 약속된 그리드 시스템을 최대한 지켜 제작할 것. 사이드바처럼 고정 값 이 필요한 경우는 그리드 시스템 만들 때 좌측 여백을 제외하고 만드는 것이 좋음. 예외 케이스를 만들어도 되지만 너무 많은 예외 케이스를 만들지 말 것.
같이 알아두면 좋은 개념
Breakpoint, 그리드 시스템
