brunch

매거진 프로덕트 자습서

라이킷 15 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 타미 Jul 07. 2024

Grid System(그리드 시스템)-8pt와 4pt

8pt 그리드 시스템과 4pt 시스템 기본 개념

개발과 호환되는 디자인은 일관성이 있어야 합니다. 디자인을 작업할 때 일관된 레이아웃으로 디자인을 설계해야 반응형 디자인을 작업할 수 있기 때문이죠. 레이아웃뿐만 아니라 아이콘, 버튼, 여백, 레디오스(radius), 폰트 크기 등 모든 디자인 요소가 규칙적인 수치로 설계되어야 효율적인 디자인과 개발이 가능합니다.

제품(서비스)의 사용자가 어떤 화면에서 어떤 기능을 사용하든 통일된 경험을 제공하듯이, 디자인과 개발 작업 또한 매번 새로운 디자인, 새로운 개발 코드가 아니라 효율적인 작업을 위해 반복되는 기능은 동일한 리소스를 활용하는데요. 이때 필요한 것이 디자인 시스템이고, 디자인 시스템 중 하나가 그리드 시스템입니다.

그리드 시스템이 PT(포인트) 단위인 이유

8pt 그리드 시스템, 4pt 그리드 시스템

그리드 시스템은 대표적으로 8pt와 4pt가 있습니다. 그리드 시스템을 말할 때 pt인 이유는 이전 글의 픽셀 단위의 개념들에 대한 것을 읽어 보시면 알 수 있는데요. 핵심만 설명하면 pt(포인트) 단위는 절대적 크기라서 해상도와 상관없이 일정한 크기를 유지하기 때문입니다.

pt 단위는 픽셀 밀도와 상관없이 1pt=1/72인치 값을 적용한다. 다시 말해 모든 기기에서 1pt는 항상 1/72인치의 크기로 표시되어 디바이스 해상도에 따라 px 값만 증가하거나 축소한다. pt 값은 해상도와 상관없이 모두 동일한 것이다.

- '픽셀 밀도와 DP,SP 개념' 중에서

그렇다면 왜 하필 8pt와 4pt일까요. 기술 발전으로 다양한 해상도와 화면 크기가 생겨나면서, 디자이너는 여러 디바이스에서 하나의 디자인으로 통일되게 설계하는 것이 필수가 되었습니다. 이를 위해 디자이너들이 발견한 규칙이 바로 8pt와 4pt 수치입니다.

8과 4인 이유

디바이스에 표현되는 디자인 요소의 화질을 위해

8pt와 4pt인 이유를 알기 위해서는 디자인이 디바이스에 표현되는 방식을 알아야 합니다. 피그마에서 작업한 디자인 작업물은 디바이스에 표현되기 위해 픽셀 단위로 변경되어야 합니다. 이 과정을 논리적 해상도(디자인 작업 단위 pt)에서 물리적 해상도(디바이스 표현 단위 px)로 변환하는 것인데요. 이를 N배율로 추출한다고 말합니다. (논리적 해상도와 물리적 해상도에 대한 개념은 이전 글을 참고해주세요!)

8과 4는 논리적 해상도에서 물리적 해상도로 변경될 때 픽셀값이 정수로 떨어집니다. 이 때문에 8pt와 4pt 그리드 시스템이 대표적인 것입니다. pt 단위에서 어떤 배율로 추출하든 정수로 추출되어야 디자인 요소가 디바이스에 똑같이 표현되거든요. 만약 정수가 아닌 경우에는 디자인 화질이 저하됩니다. 다시 말해, 디자인이 깨져 보이는 것이죠.

예를 들어, 1pt로 작업한 사각형을 1.5 배율로 추출하면 1.5x1.5 px 크기의 사각형이 됩니다. 위 이미지처럼 픽셀은 정수가 아닌 수치를 반투명하게 하거나 중간 톤으로 처리하는데요. 정수가 아닌 수치는 첫 번째 픽셀을 100% 채우고, 다음 픽셀을 50% 정도 채우는 방식으로 조정하는 것입니다.

이 방식을 안티앨리어싱(Antialiasing)이라 합니다. 이 방식은 그래픽 렌더링 기술인데요. 논리적 해상도에서 물리적 해상도로 변환하는 과정에서 이 기술이 사용되어 디자인의 선명도가 떨어지기 때문에 화질이 저하되는 것입니다. 그래서 어떤 배율로 추출하든 정수값으로 산출되는 8pt와 4pt가 대표적인 단위가 된 것이죠.

8pt 보단, 4pt 그리드 시스템

4pt 그리드 시스템이 추세인 이유

8pt 그리드 시스템은 구글의 머티리얼 디자인 시스템에서 채택된 이후 많은 디자이너들이 채택하는 방식이 되었습니다. 그러던 중 8pt 그리드의 한계가 발견되기 시작했습니다. 디바이스의 화면 크기가 다양해지고 있는 상황에서 8pt 그리드 시스템은 복잡한 인터페이스의 표현이 어려운 것입니다.

하람아이 - 그룹웨어 디자인 제안 중 일부(출처 : 작가 본인)

단순한 레이아웃에서는 8pt 그리드 시스템이 효과적이지만, 한 화면에 디자인 요소가 많은 경우에는 요소의 간격이나 폰트를 8 단위에 맞추어 작업하기가 곤란합니다. 위 이미지처럼 한 기업의 모든 결재 기능을 포함하는 그룹웨어 서비스 같은 경우, 디자인 간격이나 폰트가 8pt 단위보다 세밀하게 표현해야 하기 때문입니다.

결국 디바이스가 점점 더 다양해지고, 제품(서비스)의 기능이나 정보 구성이 많아질수록 더욱 세밀한 디자인 요구가 증가하고 있기 때문에 많은 디자이너들이 4pt 그리드 시스템을 채택하고 있습니다. 여기에 기술까지 발전해 고해상도 디스플레이가 보편화되면서 매우 작은 디자인 요소도 선명하게 표현할 수 있으니 디자이너들은 디테일한 작업까지도 완성도를 위해 놓칠 수가 없습니다. 더 나아가 사용자들 또한 디지털 기기에 익숙해짐에 따라 제품(서비스) 디자인에 대한 기대치가 높아졌습니다.

이러한 흐름들 속에서 사용자들이 더욱 정교한 디자인을 원하게 되었고, 8pt 보다는 4pt 그리드 시스템이 이러한 요구를 충족시키는데 적합하게 된 것입니다. 실제로 노코드 툴로 유명한 웹플로우(Webflow)에서도 '디지털 제품의 기능과 인터페이스가 복잡해지면서 더 작은 그리드 단위가 필요하게 되었다'라고 발표하기도 했습니다.

마무리하며

8pt와 4pt 그리드 시스템은 제품(서비스) 디자인에서 필수적인 도구로 자리 잡고 있습니다. 이 시스템들은 일관된 사용자 경험을 제공하고, 디자인 및 개발 프로세스를 효율화하며, 반응형 디자인을 구현하는 데 중요한 역할을 합니다. 만약 UX/UI 디자인을 시작하시는 분이라면, 이러한 그리드 시스템과 관련된 디자인 개념을 잘 활용하여 제품(서비스)의 완성도를 높여 보시길 추천드립니다. :)