8pt로 디자인하는 이유

결론부터 말하자면, 8pt로 디자인해야 여러 디스플레이에서 컴포넌트가 깨지지 않기 때문에 8pt로 디자인합니다.

8의 배수로 UI 사이즈를 통일한 시스템을 8pt grid system이라고 부르는데, 말그대로 모든 컴포넌트 dimension, padding, margin 등 수치를 전부 8의 배수로 디자인하는 것입니다. 근데 왜 하필 8일까요? 일단 다들 그렇게 하라고 해서 하긴 했는데 궁금해졌습니다.

왜 pt로 디자인을 할까? Why pt?

• Designing for the smallest size allows us to scale our assets into the different sizes the different devices require.
• pt로 작업한 아트보드는, 실제 디바이스로 갔을 때 더 크게 렌더됨 (대표적으로 @2, @1.5, @0.75 배)
• 1pt가 해상도 (@1, @2, @3)에 따라 1, 4, 9 px로 표현되는 것이다.
• 1 pt가 결국 스크린으로 갔을때 n픽셀로 표현되는 것이기 때문에, 1pt를 기준으로 디자인하는 것이 중요하다.

왜 8pt로 디자인해야 할까? Why 8?

• 대부분의 픽셀 디스플레이가 1pt를 @1, @2, @1.5, @0.75 배 해서 보여준다.
• 여기서 소수점 디스플레이가 문제다 @0.75, @1.5.
• 72ppi (1pt=1px) 디스플레이에서 작업한다고치자. 컴포넌트 길이를 8px로 잡으면, @0.75와 @1.5에서 각각 6px, 12px이 되면서 사이즈가 자연수로 떨어진다.
• 즉 8을 기준삼으면, 대부분의 디스플레이에서 컴포넌트 사이즈가 소수점으로 나오지 않는다.
• 컴포넌트 사이즈가 소수점으로 나오면, 컴포넌트가 이렇게 살짝 깨져보인다 (half pixel offset).
  

  

• 그 외에도...
  -그냥 애플과 구글이 추천하니까 8pt grid system을 쓴다.
  -또, 8이 짝수라 배수 계산하기가 편하니까 8pt grid system을 쓴다. 8pt가 너무 크다고 생각들면 4를 써도 된다.
  -일관성이 생겨서 쓴다 (=협업하기 편함).

폰트도 8배수로 하는게 좋을까?

• While font sizes may vary and stray from the 8 multiplication, it’s important the line height will not.
• 행간 또한 마진이기 때문에 8배수를 지키는 것이 좋다.

 

관련 글

why pt 부분이 아직 아리쏭하다면 아래 글을 추천드립니다.

Pixel vs. Point (px vs. pt)

출처

The comprehensive 8pt Grid Guide

8-Point 그리드 시스템

UI/UX 초심자를 위한 웹 그리드시스템 훑어보기

 

올랖

디자인을 좋아하고 더 잘하고 싶어 공부합니다.

쉬는 시간에는 책이나 영화를 보고 농구 슛 연습을 합니다.