레이아웃과 그리드 시스템

 UI 디자인 핵심 

▶ 레이아웃

     : 특정 영역 안에 텍스트, 이미지, 여백 등 디자인 요소를 시각적으로 배치하는 것

 

▶ 그리드

     : 정보와 요소를 체계적으로 배치하고 시각적으로 통일한 디자인을 하도록 도움

 

 

 

 해상도 

▶ 해상도 = 가로 픽셀 수 * 세로 픽셀 수
     : 화면의 정밀도를 나타내는 지표

 

 

▶ 해상도 선정 기준

     : 현재 스크린 점유율 기준으로 작업

• IOS : 375 * 812
• Android : 360 * 800

 

▶ 일관된 디자인

• 사용자가 모든 해상도에서 일관된 디자인을 경험할 수 있도록 노력해야 함
• 다양한 해상도를 대응할 수 있도록 디자인하는 것이 중요

 

 

 

 고정 / 가변 

▶ 고정 (Fix)

     : 해상도가 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것

       ex) 좌우 마진 → 모든 페이지에 일관되게 적용되어야 하기 때문

 

▶ 가변 (Flexible)
     : 디바이스 사이즈에 맞춰 변동되는 부분들

       ex) 버튼(해상도에 따라 크기가 변함), 배너

 

▶ 고정과 가변 활용 : 캐러셀

캐러셀

• 캐러셀 영역을 고정으로 설정
  1) 컨텐츠 크기는 일정하게 유지, 확장된 영역만큼 컨텐츠 개수가 더 보임
  2) 좌우 마진, 거터, 상하 여백의 요소도 고정된 수치를 유지하며 확장됨
  
  
• 캐러셀 영역을 가변으로 설정
  1) 컨텐츠 크기가 디바이스 해상도에 따라 같이 확대

 

▶ 고정과 가변 활용 : 리스트

리스트

• 확장될 때의 레이아웃을 생각하며 고정/가변 영역을 정하고 수치 설정
• 기능과 레이아웃에 따라 고정, 가변 영역을 설정 
• 디바이스가 확장될 때 해상도에 맞게 가변 영역이 변함
• 여백 → 확장된 영역만큼 공간이 늘어남
• 이미지 → 비율로 사이즈가 커지거나 줄어듦(width 값을 기준으로 height가 변함)

 

 

 

 그리드 

▶ 그리드(Grid)
     : 사전적으로 '격자무늬'라는 의미를 가짐

• 디자인 레이아웃에 동일한 규칙을 적용하여 일관된 UI를 할 수 있게 도와줌
• 디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고 크기를 부여해 체계적인 배열을 도와줌
• Desktop / Tablet / Mobile 반응형 디자인 작업 시 해상도 대응이 용이함

 

▶ 그리드의 4가지 기본 요소

1. Container (컨테이너)
2. Column (컬럼)
3. Gutter (거터)
4. Margine (마진)

 

▶ Container (컨테이너)

     : 컨텐츠의 폭으로 컨텐츠를 감싸고 있는 너비를 의미

• 컨테이너 값은 정해져 있지 않음
• Mobile / Tablet 의 경우, 마진을 줄이고 컨테이너 너비를 넓게
• Desktop 은 가로가 넓어 자유롭게 설정 가능

컨테이너 크기

 

▶ Column (컬럼)

     : 단의 넓이

• 컨텐츠를 정렬하고 배치하는 역할
• 컨텐츠 양이 많거나 레이아웃이 다양한 경우 → 컬럼 개수는 많이 필요
• 단순한 레이아웃 → 컬럼 개수는 줄어듦
• 일반적인 컬럼 개수
  1) Mobile : 2~6 (4컬럼을 주로 사용)
  2) Tablet : 6~12 (6~8컬럼을 주로 사용)
  3) Desktop : 12~16 (12컬럼을 주로 사용)

컬럼

 

▶ Gutter (거터)

     : 컬럼과 컬럼 사이의 간격

• 컨텐츠 사이의 여백을 제공해 가독성을 높이고 사용자가 이해하기 쉽도록 함
• 레이아웃에서 중요한 요소로 디바이스마다 크기를 적절하게 설정해 사용
  1) Mobile : 8~16
  2) Tablet : 16~24
  3) Desktop : 24~32

거터

 

▶ Margine (마진)
     : 화면 좌우 여백의 너비

• 마진에 따라 컨테이너(컨텐츠의 너비)
• 표현해야하는 컨텐츠의 양과 레이아웃에 맞게 마진 설정
• 마진은 모든 페이지게 일정하게 적용하는 것을 권장
• 대표적인 마진 값
  1) Mobile : 16~20
  2) Tablet : 20~36
  3) Desktop : 24~36

마진

 

 

 

 반응형 디자인 

▶ 반응형 디자인
     : 정해놓은 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경되는 것

 

▶ 반응형 디자인이 중요한 이유

1. 다양한 디바이스 사용
2. 일관된 디자인
3. 비용 효율화 → 하나의 코드 베이스로 되어있음
4. 컨텐츠 최적화
   
   

▶ Breake Point (브레이크 포인트)

     : 반응형 디자인에서 레이아웃이 변화되는 지점

       → 정해놓은 지점에서 레이아웃 변경이 가능해짐

브레이크포인트

• 모든 기기를 대응하는데에는 무리가 있어 필요한 기준 설정이 필요
  1) Mobile : 0~599
  2) Tablet : 600~1024
  3) Desktop : 1024~

 

▶ 최적화된 그리드, 12컬럼

• 12컬럼 그리드 → 반응형 디자인에 최적화

12컬럼

 

 

 

🌱 오늘의 한 걸음

 쿠팡 페이지 전체를 스크린샷으로 찍어서 그리드 요소를 체크하였다. 그리드는 총 3단계 박스로 만들었다. 가장 넓은 영역의 박스를 1단계, 1단계 보다 작은 영역의 박스를 2단계, 2단계보다 작은 영역을 3단계로 적용했다. 특히 3단계 그리드 박스에는 2단계 박스 안에서 반복되는 이미지와 텍스트를 기준으로 만들었다.