[PlusX UI] 8일차 화요일

오늘은 그리드에 대한 강의를 들을 차례이다!

--

UI 그리드 시스템은 어디에 적용을 하면 좋을까, 벤치마킹을 하면서도 그리드를 가지고 오는 것은 어렵다.

그리드에 대한 기초개념에 대해 다루는 것이 이번의 강의 주제이다

 

Grid는 디자인 전반에 걸친 그리드 시스템을 의미한다, 각 정렬을 맞추는 것에 그 의의를 한다는 것.

그리드 시스템의 사용은 모든 디자인에 많이 쓰인다는 것...

 

그리드 시스템의 구성요소는 Margin, Column, Gutter로 되어있다.

Margin은 양옆 가장 큰 여백, Gutter은 여백, Column은 구성단위로 볼 수 있다.

 

Column은 단개수와 단폭을 포함하고 잇다, 분기점에 따라 다르게 사용을 한다.

퍼센트 단위로 사용하기도 한다.

Gutter은 단과 단 사이을 의미한다.

Gutter값이 너무 크지는 않는지 확인해야한다.

Margin은 양옆 가장 큰 여백, 대칭이 아닌 비대칭으로 사용하기도 한다.

 

Column + Gutter은 contrainer라고 한다.

콘텐츠를 담고 있는 가장 큰 폭을 담당한다.

실질적으로 디자인을 해야하는 영역이라고 본다.

 

--

 

02. 해상도에 따른 그리드

 

디자인 프로세스에 맞춰서 그리드를 작업하지만, UI에서는 주로 정해진 그리드의 양이 있다.

1920 해상도에서는 적게는 4개에서 많게는 16개의 컬럼을 사용한다. 대중적으로 16 column 그리드를 사용한다

랩탑인 1336, 1440 사이즈에서도 4개 ~ 12 컬럼 그리드를 사용하는 편.

그런데 상하좌우로도 짤라서 화면 레이아웃을 사용하기도 한다.

되도록이면 레이아웃 변화를 주는 것이 좋다고 한다.

1280이나 1024에서도 12 컬럼 그리드를 사용해도 되긴 하지만 !

그리드가 너무 복잡하면 방해가 되기 때문에 8 컬럼 그리드 사용을 권장한다고 한다.

1280 / 1024 의 경우 12개도 가능하긴하지만 8개의 컬럼 사용을 권장한다.

720 /  360 은 모바일에 해당하게 되는데 이 경우는 최대 8개에서 4개까지의 컬럼을 사용하는데, 6개의 컬럼 그리드를 사용하는 것이 일반적이라고 한다.

 

Desktop / Mobile

12 Gird / 4 Grid

 

 

반응형 웹사이트를 제작할 때 그리드 시스템을 가장 많이 사용하게 된다.

해상도 분기점에 따라 적절하게 사용을 하게 된다.
예를 들어 / 

1920~1280 의 화면에서는 12 컬럼 그리드 시스템을 사용하다가,

1279~768 의 화면으로 사이즈가 작아진다면 6 컬럼 그리드를 사용,

767~360 사이즈까지 작아지면 4 컬럼 그리드를 사용하는 것이다.

 

 

--

 

마진값은 어떠한 역할을 하는지?!에 대해서는 강의에서.

 

 

 

 

#플러스엑스 #패스트캠퍼스 #plusxsharex #plusx #ui강의 #ux강의 #bx강의
#플러스엑스강의후기 #플러스엑스셰어엑스 #플러스엑스환급챌린지