본문 바로가기
카테고리 없음

그리드의 종류, 그리드 시스템

by daybyday-dev 2024. 3. 29.

그리드의 종류, 그리드 시스템


1. 레이아웃, 그리드

 

  • 레이아웃
    • 제한된 지면 안에 디자인 요소를 배치하는 것
  • 그리드
    • 지면을 효율적으로 사용하기 위해 공간을 분할하는 정렬선
    • 그리드를 사용해 레이아웃(디자인 요소 배치) 진행

 

2. 레이아웃의 종류

 

레이아웃의 종류

 

  • 레이아웃의 종류 (자세한 설명은 해당 링크 참고)
    • 침실 배치
      • 침실 방을 배치하는 것과 같이 잠을 자기 위한 한 가지 목적으로 사용하는 공간
      • 집중해서 읽어야 하는 책, 소설책 등의 레이아웃
        → 화려한 디자인 변화를 추구하지 않고, 가독성이라는 한 가지 목적을 추구하여 정제된 디자인 형태를 가짐
    • 거실 배치
      • 다채로운 공간이기 때문에 한 가지 목적만을 가지고 있지 않음
      • 사진, 이미지와 함께 글이 배치되는 책, 미술도록, 건축책 등의 레이아웃
         다양한 기능, 목적을 가지고 있기 때문에 다양한 배치가 이루어짐
    • 호텔 로비 배치
      • 호텔 로비처럼 공공장소는 책을 읽는 것보다는 '보는 것'에 적합한 공간
      • 잡지, 광고, 인터넷 신문 등의 레이아웃
        시각 자극을 위한 배치 형태, 다이내믹한 연출
    • 부엌 배치
      •  부엌은 용도가 확실하기 때문에 집에서 가장 분류가 엄격한 공간
      • 카탈로그, 상품상세표시, 목차 
         정보 전달이 가장 중요(용도 확실) 하기 때문에 정보가 엄격하게 분류되어 있는 형태
  • 레이아웃 종류에 따라 사용되는 그리드(공간 분할 정렬선)가 다름

 

3. 그리드의 종류(그리드 시스템)

 

그리드의 종류

 

  • 블록 그리드(Block Grid) 
    • 침실 배치 레이아웃에서 사용
    • 하나의 블록을 가지고 계속 똑같은 디자인의 페이지가 반복되는 것
    • 하나의 기능, 목적만을 가짐
    • 공간이 굉장히 넓고, 변화가 없음
    • ex) 본문이 계속 반복되는 소설책
  • 단 그리드(Column Grid)
    • 거실 배치 레이아웃에서 사용
    • 단(칼럼)이 나누어져 있는 것
    • 글의 내용이 복잡, 다양할 때 주로 사용(본문, 주석, 요약 등 글을 나눠서 써야 할 경우)
    • 정보 기능에 따라 공간을 차등주어 사용
    • ex) 신문(내용 많거나 정보의 종류가 다양함), 웹사이트 기사, 미술도록
  • 모듈 그리드(Modular Grid)
    • 호텔 로비 배치 레이아웃에서 사용
    • 모듈로 쪼개져있는 것
    • 이미지와 글자 크기가 다양한 다목적 기능, 정보 전달을 위한 글 읽기보다 '보는 것'의 강조가 필요한 경우 사용
    • 공간의 변화가 많음
    • 블록 그리드와 단 그리드에 비해 이미지 크기, 글자 배치가 다양함
    • 디자이너가 가장 많이 사용하는 그리드 종류
    • 목적에 따라 다양하게 쓸 수 있다는 것이 가장 큰 장점 → 유기적인 레이아웃 가능
    • ex) 안내장, 포스터, 광고 등
  • 계층 그리드(Hierarchical Grid)
    • 부엌 배치 레이아웃에서 사용
    • 그리드의 크기가 일정하지 않음 → 가변적
    • 그리드가 서로 겹쳐(오버랩) 입체적으로 사용
    • 목적에 따라 공간을 미리 자르는 것
    • ex) 목차의 쪽번호는 작은 단, 제목은 긴 단, 요약번호는 더 긴 단과 같이 공간을 미리 쪼개는 것
  • 하나의 그리드 종류만을 사용해서 디자인 작업하는 경우보다는 텍스트 페이지는 블록 그리드, 이미지 페이지는 모듈 그리드 등 목적에 따라 여러 그리드 종류를 혼합하여 작업하는 경우가 많음

 

4. 레이아웃 종류와 그리드 시스템 예시

 

블록 그리드 예시

 

  • 블록 그리드(Block Grid)
    • 글의 변화가 거의 없고, 고정적인 경우에 사용
    • 하나의 블록 사용
    • 텍스트만 주로 나열되어 있는 소설책, 글책 등
    • ex) 전시 소개 부분은 텍스트만 나열되어 있고 글의 변화가 없기 때문에 블록 그리드를 사용함

단 그리드 예시

 

  • 단 그리드(Column Grid)
    • 단(컬럼)이 나누어져 있는 것
    • 글자와 이미지를 함께 전달해야 하는 경우에 주로 사용 → 다목적 기능
    • 정보 기능(특징)에 따라 공간을 차등주어 사용
    • 글자만 등장하는 페이지 또는 글 + 이미지 등장하는 페이지 등 페이지 목적에 따라 그리드 개수 차등 부여 가능
      → 거실 배치 레이아웃(다양한 기능, 목적을 가지고 있는 배치 종류)
    • ex) 첫 번째 컬럼에는 이미지, 두 번째와 세 번째 컬럼에는 글자를 배치
      글자가 차지하는 공간이 더 크기 때문에 이미지보다는 글자가 위주인 디자인

모듈 그리드 예시

 

  • 모듈 그리드(Modular Grid)
    • 모듈로 쪼개져있는 것
    • 이미지와 글자 크기가 다양한 다목적 기능, 정보 전달을 위한 글 읽기보다 '보는 것'의 강조가 필요한 경우 사용
    • 블록 그리드와 단 그리드에 비해 이미지 크기, 글자 배치가 다양함
    • 디자이너가 가장 많이 사용하는 그리드 종류
    • 모듈 그리드를 블록 그리드로도 쓸 수 있고, 단 그리드로 쓸 수도 있고, 계층 그리드로도 쓸 수 있어 사용성이 좋음
    • ex) 첫 번째 이미지의 경우, 글자는 한글과 영어 두 개의 단을 사용하여 마치 단 그리드와 같음
      두 번째 이미지의 경우, 가운데 이미지를 배치하고 양쪽에 글자를 배치함
      즉, 그리드 시스템은 유지되면서 목적에 따라 레이아웃(배치)이 변함
    • 목적에 따라 다양하게 쓸 수 있다는 것이 가장 큰 장점 → 유기적인 레이아웃 가능
    • 다양한 디자인 요소를 품어야 할 경우 사용

계층 그리드 예시

 

  • 계층 그리드(Hierarchical Grid)
    • 그리드의 크기가 일정하지 않음 → 가변적
    • 그리드가 서로 겹쳐(오버랩) 입체적으로 사용 가능
    • 목적에 따라 공간을 미리 자르는 것
    • ex) 첫 번째 이미지와 같이 폭이 다른 표를 디자인해야 하는 경우, 그리드 크기가 가변적인 계층 그리드를 사용하는 것이 좋음
      두 번째 이미지의 경우, 패턴이 글자 아래에 깔려(오버랩) 장식적인 요소로 사용됨 → 입체적으로 사용
  • 레이아웃의 종류(침실 배치, 거실 배치, 호텔 로비 배치, 부엌 배치)에 따라 사용해야 할 그리드 종류가 달라짐