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

글자의 배치와 배열, 그룹핑, 간격

by daybyday-dev 2024. 3. 27.

글자의 배치와 배열, 그룹핑, 간격


1. 글자의 배치와 배열

 

  • 타이포그래피는 배치, 배열을 통해 정보 전달을 해야 함
  • 하나의 화면 안에 정보를 어떻게 배치해 효과적으로 전달할 것인가?

 

명함 예시

 

  • A 그룹: 이름
    B 그룹: 이메일, 전화번호
    C 그룹: 주소
  • 첫 번째 명함
    • B그룹(이메일, 전화번호)이 A그룹(이름)에 속하는지, C그룹(주소)에 속하는지 모호함
    • 동일한 간격으로 인해 강조하고자 하는 내용이 무엇인지 명확하지 않음
  • 두 번째 명함
    • B그룹(이메일, 전화번호)을 C그룹(주소)에 가깝게 배치할 경우, 이름이 더 강조되는 효과 발생
    • 간격 차이를 많이 둘수록 더욱 강조됨
  • 세 번째 명함
    • A그룹(이름)과 B, C그룹(이메일, 전화번호, 주소)으로 두 개의 축이 존재
    • 글자 색상, 크기 등에 변화를 주지 않고 배치, 배열만으로도 강조 가능

 

2. 글자 배치 방법: 그룹핑(Grouping)

 

그룹핑

 

  • 관련성 있는 정보끼리 그룹핑해야 정보 인지가 빠름
  • 축을 통해 그룹핑하되, 축이 너무 많아지면 그룹핑이 어려움
  • 그룹 개수 최소화하고, 각 축의 길이를 다르게 하여 정보 그룹핑을 용이하게 할 수 있음
    축의 길이에 차이를 두면 특정 정보를 강조하는데 효과적
  • 유사한 정보끼리 그룹 묶고, 강조하고 싶은 그룹은 요소를 줄여 강조하고 싶은 요소만 남기고, 나머지는 다른 그룹으로 넘겨 축의 길이를 비대칭적으로 만들면 정보가 훨씬 강조됨
  • 그룹핑이 잘된 디자인은 여백 공간이 깔끔하게 떨어짐
  • ex) 첫 번째 명함은 이름을 강조하기에 매우 적합한 형태로 그룹핑이 가장 잘되어 있음
    두 번째 명함은 첫 번째 명함에 비해 이름 강조가 부족, 주소가 강조됨
    세 번째 명함은 그룹의 개수가 너무 많아 정리되지 않고, 정보 인지가 어려움

그룹핑의 안 좋은 예시와 좋은 예시

 

  • 첫 번째 명함의 경우, 축이 왼쪽과 오른쪽에 있어 시선이 밖으로 이동하게 됨
    (축이 왼쪽 정렬, 오른쪽 정렬로 바깥쪽으로 형성)
  • 두 번째 명함의 경우, 첫 번째 명함에 비해 축이 안으로 형성되어 있어 시선이 안으로 이동하게 됨
  • 두 번째 명함과 같이 보는 순간 구조가 명쾌하게 드러나는 디자인을 좋은 디자인이라 할 수 있음

왼쪽에서 오른쪽으로 갈수록 강조하고자 하는 내용이 명확함

 

  • 첫 번째 명함에서 세 번째 명함으로 갈수록 강조하고자 하는 내용이 명확하고 정보 전달이 매우 용이함
  • 그룹 개수 최소화하고, 각 축의 길이를 다르게 하면(비대칭적) 특정 정보를 강조하는데 효과적임
  • 디자인을 취향에 따라 접근하면 설득하기 어려워짐
  • 타이포그래피는 정보 전달이 중요

 

3. 글자 배치 방법: 간격(Spacing)

 

간격에 따른 명함 차이

 

  • 간격 차이를 통해 정보 구분, 전달 용이함
  • 일정한 간격보다 간격에 차등을 주면 강조하고자 하는 내용이 무엇인지 명확해짐
  • 간격은 그룹 안에서도 발생하고, 그룹과 그룹 사이에서도 발생
  • ex) 첫 번째 명함은 두 개의 그룹이지만 간격의 차이를 통해 정보 구분이 용이하고, 이름 강조 가능
    두 번째 명함은 하나의 그룹으로 간격 길이 차이를 통해 특정 정보(이름)를 강조함
    세 번째 명함은 동일한 간격 차이로 인해 강조하고자 하는 것이 무엇인지 모호함
  • 하나의 그룹이라 할지라도 그룹 내에서 간격 차이를 통해 특정 내용을 강조할 수 있음

간격 예시

 

  • 간격은 그룹 내에서도 발생하고, 그룹과 그룹 사이에서도 발생
  • 간격 차이가 일정한 것보다 간격 차이를 둔 경우 정보 전달이 보다 효과적
  • 첫 번째 명함은 그룹핑은 되어 있으나, 명함 오른쪽의 여백이 너무 넓어 정보가 왼쪽으로 치우친 느낌
    두 번째 명함은 가운데 배치로 축이 하나밖에 없으나, 간격을 다양하게 사용해 유사한 정보끼리 그룹핑한 느낌을 제공
    세 번째 명함은 A그룹(이메일, 이름, 직업, 전화번호)과 B그룹(주소)의 간격 차이로 정보 구분이 명확함

 

4. 세로 명함

 

가로 명함, 세로 명함

 

  • 세로 명함의 경우, 글자 배치와 글줄길이 등이 가로 명함과 다름
  • 가로에서 세로로 바꾸게 되면 글줄의 변화가 가장 많아짐

세로 명함 예시

 

  • 로고, 아이콘을 사용하면 해당 영역으로 시선이 가기 때문에 특정 내용이 더 강조됨
  • 배치, 그룹핑, 간격만으로도 정보 처리가 다르고, 정보 구조를 탄탄하게 만들 수 있음
  • 첫 번째 명함의 경우, 로고, 이름, 나머지 정보순으로 강조되어 정보를 읽기 쉽게 디자인함
    두 번째 명함의 경우, 하나의 축으로 연결되어 있어 그룹이 하나지만 간격에 차이를 두어 정보를 구분함