[ch3] 레이아웃과 그리드

레이아웃

• 특정 영역 안에 텍스트, 이미지, 여백 등 디자인 요소를 시각적으로 배치하는 것.
• 해상도 : 화면의 정밀도를 나타내는 지표.
  ▶ 해상도 선정 기준 : 현재 스크린 점유율 기준으로 작업을 한다. 대표적으로 안드로이드는 360*800, IOS는 375*812 해상도를 사용하며, 해상도 선정하기 전에 여러 요소를 고려하여 같이 작업할 디자이너랑 개발자와 논의하여 적절한 해상도를 선정한다.
  ▶ 일관된 디자인 : 사용자가 모든 해상도에서 일관된 디자인을 경험할 수 있도록 다양한 해상도에 대응할 수 있도록 디자인한다.
• 고정과 가변 영역 : 해상도에 맞는 레이아웃 작업을 위한 요소.
  ▶ 고정 : 해상도가 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것으로, 좌우 마진은 모든 페이지에 일관되게 적용되어야 하기 때문에 고정으로 설정한다.
  ▶ 가변 : 고정과 다르게 해상도가 커지거나 작아 지면 비율에 맞춰서 확대/축소 되는 것을 의미. 즉 장치의 크기에 맞춰 변동되는 부분들로, 해상도에 따라 크기가 변하는 버튼, 배너 같은 이미지는 가변으로 설정하는 편이다.
  

그리드 시스템

• 그리드(Grid) : 격자무늬.라는 뜻. 
• 그리드 시스템 : 디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고, 크기를 부여하여 체계적인 배열을 도와주는 시스템으로, 반응형 디자인 작업시 해상도 대응이 용이해지며, 레이아웃에 동일한 규칙을 적용하여 일관된 UI 작업을 하도록 도와준다.

• 그리드 시스템 기본 요소
  1) 컨테이너 : 콘텐츠 폭(너비).
  모바일/테블릿은 가로 너비가 좁아 마진을 줄이고 컨테이너를 넓게 하는 반면, 데스크탑은 이런 부분에서 비교적 자유롭다.
  2) 칼럼 : 단의 넓이.
  컨텐츠를 정렬하고 배치하는 역할을 한다. 보통 모바일은 2~6 칼럼, 테블릿은 6~12 칼럼, 데스크탑은 12~16칼럼을 사용한다.
  3) 거터 : 컬럼 간의 간격을 의미.
  콘텐츠 사이의 여백을 제공하여 가독성을 높여서 사용자가 컨텐츠를 쉽게 이해할 수 있도록 도와준다. 레이아웃 요소 중에서도 매우 중요한 요소로 디바이스 별로 크기를 적절하게 설정하여 사용한다. 보통 모바일은 8~16, 테블릿은 16~24, 데스크탑은 24~32이다.
  4) 마진 : 화면의 좌우 여백.
  마진에 따라 컨테이너 값이 정해지기 때문에 마진 값을 정하는 것이 중요하다. 표현해야 하는 콘텐츠의 양과 레이아웃에 맞게 마진을 설정하고, 모든 페이지에 일정하게 적용한다. 보통 모바일을 16~20, 테블릿은 20~36, 데스크탑은 24~36이다.
  
  

반응형 디자인

• 정해놓은 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경되는 것.
• 중요성
  ▶ 다양한 디바이스 사용
  사용자가 다양한 디바이스를 통해 사용하면서, 어떤 장치를 이용해도 일괄된 사용자 경험을 제공하며 편리하게 이용할 수 있게 해준다.
  ▶ 일관된 디자인
  반응형 디자인은 하나의 일관된 디자인 템플릿으로 다양한 디바이스에 대응하는 최적화된 화면을 디자인 할 수 있다.
  ▶ 비용 효율화
  하나의 코드 베이스로 되어있어 유지 보수가 용이하다.
  ▶ 콘텐츠 최적화
  모든 디바이스 해상도에 맞게 콘텐츠를 최적화해서 사용자는 내용을 쉽게 확인하고 이해할 수 있다.
• 브레이크 포인트 : 반응형 디자인에서 레이아웃이 변화되는 지점을 의미. 이를 통해 정해놓은 지점에서 레이아웃 변경할 수 있다. 
  ▶ 대표적으로 사용하는 브레이크 포인트 설정 :
  mobile : 0~599, tablet : 600~1024, desktop : 1024~
  
  

• 최적화된 그리드,12컬럼.
  12 컬럼 그리드는 반응형 디자인에 최적화 된 디자인.
  2, 3, 4, 6 단으로 자유롭게 레이아웃을 나눌 수 있어 디자인과 개발에 최적화되어있다.