brunch

매거진 Design Information

라이킷 313 댓글 3

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by Giii Sep 23. 2020

8포인트 그리드 시스템

알아두면 유용한 UI 디자인 시스템

오늘날의 UI-UX 디자인은 감에 의지하는 디자인보다는 계획과 조건에 의지하는 디자인 성향이 강합니다. 논리와 감각을 바탕으로 하는 디자인은 상대방을 설득할 수 있지만 자신의 이성적이 감각에 의지해서 디자인하게 되면 상대방을 설득하기 힘들 것입니다.

디자이너가 단순히 디자인만 잘하면 되지는 이제 옛날 말이 되었습니다. 디자인을 구성하는 전반적인 시스템을 이해하고 요소들을 어떻게 구현할지도 생각해야 합니다. 많은 기업들은 이미 디자인 시스템을 구축하여서 디자인하고 그 디자인 시스템을 구축하는데 많은 노력을 하고 있습니다.

단순히 핀터레스트와 비헨스에 의존하여 디자인하는 것보다는 디자인을 구성하는 이론에 접근하려는 성향을 가진다면 프로젝트를 이끌어가는데 더 좋은 방향성을 나타낼 것입니다. 그래서 오늘은 일반적으로 사용되는 레이아웃 그리드 시스템 중 하나인 8포인트 그리드 시스템에 대해서 이야기해보려 합니다.

왜 'pt'를 사용하지?

일단 왜 픽셀이 아닌 포인트를 사용하냐면 요즘 모바일 기기는 레티나 또는 슈퍼 레티나 디스플레이를 탑재하고 있어서 픽셀의 밀도가 다릅니다. 실제 너비보다 2배 또는 3배 이상의 픽셀 값을 가지고 있어서 우리는 기존과 동일한 물리적 크기를 유지해야 했기 때문에 2배 또는 3배로 아트보드 사이즈를 높여 작업을 하였습니다.

예로 iPhone X를 기준으로 작업한다면 375x812 픽셀 너비가 아니라 실제로 1125x2436 픽셀로 @ 3x이기 때문에 포토샵에서는 3배로 1125x2436 사이즈로 작업을 해야 하는데 포인트는 화면 해상도에 따라 달라지는 공간 측정값이기 때문에 포인트를 기반으로 하는 스케치나 피그마에서는 375x812 사이즈로 작업을 하면서 각 배율에 맞게 추출하는 작업방식을 사용하는 것입니다.

또한 포토샵에서 픽셀을 기반으로 2x이나 3x로 디자인하는 것보다 스케치나 피그마에서 포인트를 기반으로 1x로 디자인하는 것이 더욱 효율적입니다. 그 이유는 1x에서 2x, 3x, 4x 등으로 내보낼때 정수로 쉽게 확장이 가능하기 때문입니다.

만약에 3x에서 가로세로 20의 네모 박스를 디자인하였을 때 그것을 1x로 내보내려면 3으로 나누어서 가로세로 6.6의 값을 가진 네모가 되며 2x에서는 1.5로 나누어서 13.3의 값을 가지게 됩니다. 정확히 정수로 떨어지는 값을 구하기 힘들기 때문에 1x에서 디자인하는 것이 더욱더 효율적입니다.

많은 숫자 중 '8'인 이유는?

그러면 포인트로 디자인하는 이유는 대략 이해가 되었다면 왜 8pt로 디자인하는 게 일반적인지에 대해서도 알아야 할 필요가 있습니다. 일단 8포인트 그리드 시스템은 8의 배수를 사용하여 블록 및 인라인 요소의 치수, 패딩 및 여백을 정의하는 것입니다.

다양한 디바이스 크기와 픽셀 밀도가 계속해서 증가하면서 디자이너의 작업이 더욱 복잡해졌습니다. 크기 및 공간 요소에 8과 같은 짝수를 사용하면 다양한 장치에서 쉽고 일관되게 확장할 수 있으며 8의 배수는 모두 짝수 이기 때문에 더욱 일관성 있는 디자인을 할 수 있습니다.

다른 숫자들의 문제는 x1.5의 배율을 가진 디바이스에 내보낼 때 문제가 되는데 5는 x1.5에서 7.5의 값을 가지기 때문에 테두리가 일그러지는 현상이 발생합니다. 반대로 8은 1.5배로 내보낼 때 12로 떨어지기 때문에 테두리가 일그러지는 현상이 발생하지 않아 픽셀에 신경 쓰지 않고 디자인할 수 있습니다.

또한 타이포에서는 코딩을 할 때 rem이나 em 방식으로 사용하기 때문에 마찬가지로 8의 배수로 16을 본문 텍스트로 지정하고 사용하는 경우가 많습니다. 또한 구글과 애플이 8pt에 대해서 어느 정도 언급하고 있기 때문에 그러한 가이드를 따르는 이유도 있습니다.

절대적인 건 아니다!

8pt 그리드 시스템은 일반적으로 많이 사용하는 것이지 절대적인 건 아닙니다. 부트스트랩 같은 경우 12 그리드 시스템을 사용하는데 표준 부트스트랩 그리드는 열의 각면에 15px 여백이 있는 12 열 레이아웃을 사용하는데 결과적으로 열 사이의 30px 여백에 그리드의 왼쪽과 오른쪽에 15px가 추가되는 구성을 가지게 되며 이것 도한 효율적인 방법이라고 할 수 있습니다. 또한 iOS에서는 8pt를 절대적으로 따르지 않습니다.

8포인트 그리드 시스템은 두가지로 나누는 경우도 있는데 소프트 그리드 방식과 하드 그리드 방식이 있고 두가지 방식은 어느정도 차이가 있습니다. 또 디자이너마다 적용하는 요소가 어느 정도 차이가 있지만 좋은 디자인 작업물을 보면 대부분 8pt그리드 시스템을 많이 적용하고 있습니다.

다양한 플랫폼에서 5나 10 같은 숫자보다는 8의 배수가 더욱 효과적으로 적용되기 때문에 8pt 그리드 시스템에 대해서 실무에 활용해보신다면 좀 더 일관적이고 효율적인 디자인을 해볼 수 있습니다.

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari