모든 종류의 콘텐츠는 '그리드'라는 시스템을 이용해 배치된다. 우리는 가로 그리드를 사용하여 콘텐츠의 내용을 정렬하고, 세로 그리드를 사용하여 텍스트의 본문을 세로로 정렬한다.
The Box Model
구성 요소: border, margin, padding, dimensions of the element itself
px, pt
- pt란? : 화면 해상도에 따라 달라지는 공간을 측정하는 값이다.
1x resolution(@1x) 이라면 1pt = 1px이고,
@2x라면 1pt=4px이 된다.- px이 아니라 pt(dp)인 이유? : 화소밀도에 따라 달라지는 px에 비해, pt(dp)는 같은 비율로 보여지는 독립적인 수치기 때문이다.
8포인트 그리드란?
-
기본원칙 : 모든 요소가 8의 배수라는 것(8,16,24,32,40,48...).
예를 들어, 입력 필드의 높이가 48px이고, 다른 입력 필드와의 공간은 16px
- 8의 배수를 사용해 블록 및 인라인 요소의 치수, 패딩 및 여백을 정의
1. 하드 그리드
: 8의 배수로 정의된 그리드에 요소를 배치. 이미 4 포인트 그리드로 디자인된 Material Design은 자연스럽게 이 방법을 따른다.
2. 소프트 그리드
: 개별 요소 사이의 8의 배수를 측정. 많은 시스템 UI 요소가 짝수 그리드로 정해지지 않은 iOS에 유리할 수 있다.
왜 사용해야 하는가?
그리드가 없으면 앱 전체의 디자인 퀄리티가 전반적으로 저하되어 보인다. 또한 서비스 일관성 부여와 유지보수가 어렵고, 디자인과 개발팀이 같은 시각을 공유할 수 없다.
크기나 여백의 요소에 8과 같은 짝수를 사용하면 다양한 디바이스를 쉽고 일관되게 조정할 수 있다. 1.5배 해상도의 디바이스들은 홀수를 깨끗이 렌더링하는 데 어려움을 겪는다.
-
디자이너 : 요소들끼리 퀄리티가 저해되지 않고, 디자인 일관성을 유지하면서 의사 결정 과정을 최소화할 수 있다.
-
팀 : 디자이너와 개발자 간의 쉬운 의사소통 시스템 (개발자가 매번 측정하지 않고도 8pt 단위로 쉽게 생각할 수 있다.)
-
사용자 : 일관된 느낌을 주어 브랜드 신뢰성을 높인다. 어떤 디바이스던 흐릿한, 깨지는 오프셋이 없다.
4배수 그리드
4배수가 8배수보다 나은 점 ?
1. 세분화
아이콘 크기, 요소 사이의 간격, 텍스트와 아이콘 사이의 가로 간격 등 모든 요소를 세분화 시킬 수 있다. 즉, 선택할 수 있는 옵션이 많아진다는 것! 8,16중 하나를 선택하는 대신 12라는 선택지가 생긴다.
2. 더 나은 타이포그래피
텍스트를 8의 기준 그리드로 맞추게 되면 여러 글줄의 텍스트가 너무 빡빡하거나 크다는 문제가 생기곤 한다. 줄 높이가 4의 배수인 4의 베이스라인 그리드에 텍스트를 정렬하면 어떻게 다를까 ?
16px 줄 높이와 14px 폰트 크기
20px 줄 높이와 14px 폰트 크기
24px 줄 높이와 14px 폰트 크기
위의 이미지처럼 바운딩 박스를 텍스트의 베이스라인이 아닌 그리드에 정렬한다. 많은 디자이너가 시각적 여백을 위해 바운딩 박스가 아닌 베이스라인 격자에 텍스트를 정렬한다고 한다.
BaseLine
베이스라인 은 디자이너들 사이에서 일반적으로 사용되는 용어이지만 다른 모든 사람들에게는 신비한 개념일 수 있다. 베이스라인은 단어의 글자가 놓여 있는 수평의, 일반적으로 보이지 않는 선을 의미한다.
디자인부터 개발까지
우리가 사용하는 대부분의 소프트웨어는 텍스트를 직사각형 컨테이너 또는 바운딩 박스 에 바인딩한다. 디자이너와 개발자 모두 이러한 컨테이너의 너비, 높이, x 및 y 좌표를 참조하여 한 프로그램에서 다른 프로그램으로 이동할 수 있다.
그러나 이 규칙에는 몇 가지 문제가 있다.
텍스트가 직사각형 공간을 완전히 채울 수는 없으므로 경계 상자는 문자가 대략적으로 위치할 위치만 참조할 수 있다는 것이다. 이미지나 버튼과 달리 텍스트의 경계 상자는 보이지 않으므로 다양한 상황에서 어떻게 보일지 예측하기 어렵다. 동적 콘텐츠의 경우 구현 시 어떻게 나타날지 알 수 없다.
(Bounding boxes arbitrarily wrap around the letters)
➡️ 바운딩 박스는 임의로 글자 주위를 감싸고 있다.
이를 더욱 복잡하게 만드는 더 큰 문제는 이러한 상자가 설정되는 방식에 일관성이 없다는 것이다. 다른 프로그램은 경계 상자를 생성하는 방식이 다르다. 상자 안에 패딩이 더 많은 프로그램도 있고, 더 적은 프로그램도 있다.
개발자가 디자인을 구현할 때 일반적으로 bording box와 그 사이의 공간을 측정한다. bording box가 보이지 않고 그 사이의 표준화가 부족하기 때문에 텍스트 요소의 위치를 정확하게 변환하는 것이 어렵고 시간이 많이 걸린다.
반응형, 적응형 환경에서는 경계 상자가 동적이라는 점을 기억해야 한다. iPhone 4에서 6 Plus, iPad까지 특정 화면 크기에 맞도록 요소의 크기와 위치를 변경해야 한다. 풍경부터 인물까지. 절대적인 측정만으로는 요소의 위치와 모양을 설명하기에 충분하지 않다.
iOS의 경우 Xcode의 자동 레이아웃은 개발자가 다양한 화면 크기 및 방향과 같은 외부 변경은 물론 앱에 표시되는 동적 콘텐츠와 같은 내부 변경에 적응할 수 있는 디자인을 만들 수 있도록 하는 제약 조건 기반 레이아웃 시스템이다.
개발자는 경계 상자의 수직 및 수평 중심과 같은 속성을 제약 조건으로 사용한다. box는 해당 요소의 실제 영역을 반영하므로 버튼, 이미지 및 선에 적합하다.
하지만 타이포그래피 작업에 있어서 더 좋은 방법이 있을까?
bounding box의 대안
bording box 대신 텍스트의 baseline을 참조하면 디자인을 구현할 때 정확도가 크게 향상될 수 있다. Xcode에서 경계 상자 사이의 공간을 측정하는 대신 개발자는 보이지 않는 bording box 사이의 임의의 간격이 아닌 실제 텍스트의 baseline에 의존하는 좌표점으로 baseline을 사용할 수 있다.
(Bounding boxes as constraints versus baselines as constraints)
First Baseline과 Baseline
Xcode에는 실제로 우리가 지정하는 두 가지 기준 속성, 즉 First Baseline 과 Baseline이 있다. First Baseline 속성은 텍스트 첫 번째 줄의 세로 위치를 나타내고, Baseline 속성은 텍스트 마지막 줄의 세로 위치를 나타낸다.
(첫 번째 기준선과 기준선이 위치하는 곳)
디자이너가 Sketch와 같은 프로그램에서 이러한 속성을 추출한 후, 개발자는 Xcode에서 수직 제약 조건을 기준선으로 설정한다.
(Changing spacing properties between bounding boxes to baselines in Xcode)
baseline은 수직 속성이라는 점에 유의해야 한다. 즉, baseline에는 수직 제약 조건만 적용할 수 있습니다. 수평 공간(예: 컨테이너 너비)을 나타내려면 여전히 bounding boxes가 필요합니다.
올바르게 수행된 경우 baseline 측정을 사용하면 설정하는 데 추가 단계가 필요하지만 구현 후 정렬을 수정하는 데 소요되는 시간을 크게 줄일 수 있다. 구현이 이미 디자인과 동일해 보인다면 디자인 QA 과정에서 디자이너와 엔지니어 사이의 지루한 대화를 줄일 수 있다.
이러한 그리드를 깨도 될까?
아래의 예는 4의 배수가 아닌 몇 가지 숫자를 보여준다. 테이블 행 내부에 줄 높이가 20px인 14px 텍스트는 텍스트의 상단과 하단에 10px의 간격이 생긴다. 두 번째 예에서와 같이 테이블 행의 높이를 44px로 만들 수 있지만, 확인 표시 아이콘과 동일한 '문제'가 발생하여 상단에 14px, 하단에 14px의 간격이 생긴다. 두 예에서 모두 그리드를 깨는 것은 괜찮다.
20px 줄 높이와 14px 폰트 크기가 적용된 테이블 행의 예
24px 줄 높이와 18px 폰트 크기가 적용된 테이블 행의 예
구글 머터리얼 디자인에서는 "텍스트는 버튼이나 리스트와 같은 구성 요소 내 중앙에 있을 때 4dp 그리드 외부에 배치할 수 있다. 그리드 외부에 배치되지만, 컴포넌트 내부의 중심에 배치될 때 텍스트는 여전히 수직으로 중앙 정렬되어 나타날 수 있다." 라고 말한다.
출처
