8pt 그리드
원문 링크:
8pt 그리드
pt란 무엇인가?
pt = point
큰 해상도의 스크린을 디자인하는데 왜 작은 아트보드를 사용하는지 궁금해 본적이 있는가?
내 iPhone XR의 스크린은 414x896pixel이 아니고, 실제로는 828x1792pixel로 두 배나 크다.
아래와 같은 현상 때문이다.
iPhone XR: Artboard to Render to ScreeniPhone XR은 일반 스크린보다 pixel이 두 배 많은 레티나 디스플레이기 때문에 아트보드는 실제 픽셀보다 두 배 크게 표현된다.
iPhone X: Artboard to Render to ScreeniPhone X는 pixel이 3배 더 많기 때문에 아트보드가 3배 더 크게 표현된다.
가장 작은 사이즈로 디자인해야 픽셀을 흐리지 않고 다양한 크기의 디바이스에 맞게 asset들을 확대할 수 있다. 1pt는 @1x, @2x, @3x 사이즈에서 1,4,9 pixel로 변환된다.
16px의 아이콘이 있다면, @2x, @3x로 추출했을 때 추출된 이미지는 32px와 48px이 되어 레티나와 슈퍼 레티나 디스플레이에 적합하게 표현된다.
왜 8인가?
첫 번째 이유로는, 여러 가지 스크린에서(안드로이드의 @0.75와 @1.5를 포함하여) 픽셀이 딱 떨어질 수 있는 사이즈이기 때문이다.
The following ×2, ×3 and ×4 are easily scaled with any basic unit.두 번째 이유는, 이유는 자세하게 밝히지 않지만 애플과 구글에서 그렇게 해도록 하기 때문이다.
세 번째 이유는, 작업하기에 기본이 되는 유닛이기 때문이다. 4와 8은 쉽게 배수를 만들 수 있고, 유연하고 일관성 있게 다룰 수 있다.
타이포그래피
타이포그래피 시스템을 만들 때는 가능하면 명확히 구분되면서 일관적인 스타일로 만들려고 한다.
폰트의 크기가 8의 배수와 다르게 떨어지더라도, 행의 높이는 8의 배수로 적용하는 것이 중요하다. 예를 들면 폰트 사이즈가 15px일 때, 행의 높이는 8의 배수인 24px로 하는 것이 적당한 값이다.
Font sizes may vary, however their line height must be a must be a multiplication of 8.일관적인 타이포그래피 시스템을 쉽게 만들기 위해 Grid Lover라는 툴을 사용한다.
아이콘
위에 언급한 것 처럼, 8pt 그리드가 기본으로 적용된 아이콘은 확대했을 때 흐려지지 않는다.
Exporting a 16×16 pixels icon for iOS will result in perfectly rendered icons in 16, 32 and 48 pixel여러 가지 크기로 아이콘을 활용하려면, 16x16 pixel과 20x20 pixel의 두 가지 사이즈로 만들어라. 이 방법으로 16, 20, 24(16x1.5), 32, 40 등의 모든 사이즈를 커버할 수 있다.
