[UI 디자인의 모든 것] Ch3: 레이아웃, 그리드

 

레이아웃이란?

📌 레이아웃
특정 영역 안에 텍슽, 이미지, 여백 등 디자인 요소를 시각적으로 배치하는 것

• 해상도
  • 화면의 정밀도를 나타내는 지표, 스크린의 가로 *세로 픽셀 수 기준으로 정밀도를 표현함
  • 해상도 선정 기준
    • 현재 스크린 점유율 기준으로 작업하는 게 좋음
    • StatCounter에서 조회 가능
    • 대표적으로 안드로이드는 360*800, IOS는 375*812 해상도를 사용
    • 하나의 디자인으로 모든 해상도(안드로이드, IOS)에서 일관되어 보이도록 디자인해주는 것이 좋음
• 일관된 디자인
  • 사용자가 모든 해상도에서 일관된 경험할 수 있도록, 다양한 해상도를 대응하는 디자인을 해야 함

---

고정과 가변 영역

• 디자인 화면이 생각과 다르게 개발되는 경우가 있음
• 고정
  • 해상도 커지거나 작아져도 정의한 수치값이 일정하게 유지되는 것
  • 좌우 마진은 모든 페이지에 일관되게 적용해야 해서 고정으로 설정하는 편
• 가변
  • 디바이스 사이즈에 맞춰 변동되는 부분
  • 해상도에 따라 크기가 변하는 버튼, 배너같은 이미지는 가변으로 설정하는 편
• 예시
  • 캐러셀 영역과 리스트

출처: UI 디자인 원칙_챕터3-1

---

그리드시스템

📌 그리드(Grid)
디자인 레이아웃에 동일한 규칙을 적용해 일관된 UI를 할 수 있도록 도와줌

• 디바이스 환경에 따라 디자인 요소를 일정한 간격으로 배치하고, 크기를 부여해 체계적인 배열을 도와줌
• 반응형 디자인 작업 시 해상도 대응이 용이
• 4가지 기본 요소
  

  

  출처: UI 디자인 원칙_챕터3-2

  
  
  • 컨테이너
    • 콘텐츠의 폭, 콘텐츠를 감싸는 너비를 의미
    • 컨텐츠 너비 값은 정해져 있지 않아, 상황에 따라 설정하는 것을 권장함
    • mobile, tablet 의 경우 가로 너비가 좁아 콘텐츠 양이 많으면? ▶️ 마진을 줄이고, 컨테이너 너비를 넓게 설정하는 것을 권장함
    • desktp은 가로 너비가 넓어서 자유롭게 설정 가능
      

      

      출처: UI 디자인 원칙_챕터3-2

  • 컬럼
    • 단의 넓이를 의미
    • 콘텐츠를 정렬 or 배치하는 역할
    • 일반적인 값
      mobile: 2~6(4 컬럼 주로 사용)
      tabelt: 6~12(6~8 컬럼 주로 사용)
      desktop: 12~16(12 컬럼 주로 사용)
    • 콘텐츠 양 많거나 레이아웃 다양하면? ▶️ 컬럼 개수 多
      단순 레이아웃? ▶️ 컬럼 개수 少 
      

      

      출처: UI 디자인 원칙_챕터3-2

  • 거터
    • 컬럼과 컬럼 사이의 간격
    • 콘텐츠 사이의 여백을 제공해서, 콘텐츠의 가독성을 높여줌
    • 레이아웃에서 중요한 요소이며 디바이스마다 크기를 적절하게 설정해서 사용해야 함
      mobile: 8-16
      tabelt: 16-24
      desktop: 24-32
  • 마진
    • 화면의 좌우 여백의 너비
    • 마진에 따라 콘텐츠의 너비(컨테이너)가 정해짐
    • 표현하는 콘텐츠 양 + 레이아웃에 맞춰 마진 설정
    • 마진은 모든 페이지에 일정하게 적용하는 것일반적인 값
      mobile: 16-20
      tabelt: 20-36
      desktop: 24-36
      

      

      출처: UI 디자인 원칙_챕터3-2

---

반응형 디자인 

 

• 디바이스 화면 크기에 맞게 디자인과 레이아웃이 자동으로 변경되는 것
• 반응형 디자인이 중요한 이유
  • 다양한 디바이스 사용(어떤 환경에서는 편리하게 이용 도와줌)
  • 일관된 디자인(하나의 템플릿으로 다양한 디바이스 대응)
  • 비용 효율화(하나의 코드 베이스로 유지보수가 용이)
  • 콘텐츠 최적화(텍스트나 이미지를 쉽게 확인하고 이해할 수 있음)

 

브레이크포인트

• 레이아웃이 변환되는 지점

출처: UI 디자인 원칙_챕터3-2

브레이크포인트 설정

• 점유율 먼저 확인
• 레이아웃 파악
• 디자이너, 개발자가 논의해서 결정

 

최적화된 그리드, 12 컬럼

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

출처: UI 디자인 원칙_챕터3-2

차례대로 데스크탑, 태블릿, 모바일