8-Point 그리드 시스템
패딩과 컴포넌트 사이의 간격 - 얼마가 좋을까?
(출처 : https://medium.com/built-to-adapt/intro-to-the-8-point-grid-system-d2573cde8632#.oh33ss65e의 기사를 번역 및 가공한 컨텐츠 입니다.)
*왜 px단위가 아닌 pt단위인지는 https://brunch.co.kr/@blackindigo-red/18를 참고하세요 :)
디자이너라면 웹 사이트나 잡지, 모바일 앱 등 무엇을 디자인하든 간에 ‘그리드’라는 용어를 들었을 것입니다.
모든 종류의 콘텐츠는 ‘그리드’라는 시스템을 이용해 배치됩니다.
우리는 가로 그리드를 사용하여 콘텐츠의 내용을 정렬하고 세로 그리드를 사용하여 텍스트 본문을 세로로 정렬합니다.
소프트 그리드와 하드 그리드는 우리가 이 시스템을 얼마나 엄격하게 준수하는지 설명합니다.
저는 브린 잭슨 (Bryn Jackson)이 8pt 그리드 시스템에 대해 열렬히 이야기한 것을 듣고 관심을 가지게 되었고, 8pt 시스템이 내 디자인에 어떤 이점을 줄 수 있는지 알아보기로 했습니다. (참고: [Spec](https://spec.fm/specifics/8-pt-grid)
8pt 시스템을 사용하지 않고서도 그리드를 잘만 쓰고 있었는데...
저는 Bootstrap이나 Foundation과 같은 디자인 시스템을 사용하여 웹 디자인을 시작했고, 심지어 유사한 시스템을 직접 만들려고 시도한 적이 있었습니다.
그러나 중요한 것을 깨닫지 못했습니다. 버튼과 같은 컴포넌트들을 페이지에 따라 개별적으로 배치하면 그 한 페이지는 아름답게 보일 수 있겠지만, 더 큰 레이아웃의 측면에서 전반적인 디자인이 저하된다는 것이었습니다.
통일된 그리드가 없다면 유지보수가 어렵고, 프로덕트의 전반에 걸쳐 만족스러운 구성을 지속하기 어렵기 때문입니다.
디자인 아이디어를 사용하여 몇 가지 요소를 미세하게 다르게 만들 수는 있습니다.
하지만 일관된 그리드 시스템이 없이는 디자인 팀과 개발팀이 같은 비전을 공유할 수 없고, 요소들의 간격 관계를 정의하는 시스템이 없으면 서비스의 일관성을 유지하기가 어렵습니다.
여기에서는 8pt 그리드 시스템과 공간,컴포넌트의 크기에 따라 임의의 숫자를 사용하는 보편적인 디자인 그리드 시스템을 비교해 볼 수 있습니다.
왜 인터페이스에서 일관성이 유지되어야 하는가?
물론 꼭 일관성을 유지할 필요는 없습니다.
하지만 전문적이고 신뢰할 수 있는 사이트의 디자인을 원한다면 일관성을 유지해야 합니다. 온라인 쇼핑을 할 때, 구매를 클릭하고 신용 카드 입력 양식이 사이트와 다르게 보일 경우 약간의 망설임을 경험한 적이 있을 것입니다. 작은 일관성 들은 우리 서비스를 오래 지속하게 합니다.
왜 Bootstrap이나 이와 유사한 시스템들로는 부족한가?
Bootstrap은 설계자 / 개발자가 콘텐츠 및 사용자 경험에 집중할 수 있도록 하는 독창적인 컴포넌트 라이브러리입니다. 이를 통해 수많은 웹 사이트의 품질을 높였습니다.
그러나 일관된 측정 단위가 없으면 특히 두 명 이상의 디자이너가 있는 프로젝트에서 페이지 간의 레이아웃에 대한 불일치가 발생할 수 있습니다.
우리가 Pivotal(역주:글쓴이가 일하는 회사)에서 자체 브랜드 아이덴티티를 구축 할 때 우리는 우리만이 가진 고유한 컴포넌트와 레이아웃을 만들었습니다. 하지만 최근 UI 시스템을 통합하는 프로젝트를 하는 동안 제품의 모든 부분에서 브랜딩이 약간씩 다르다는 사실을 발견했습니다.
이 프로젝트에서 브랜딩의 전반적인 개념은 동일했지만 전 세계의 각 팀에서 UI를 구축하는 부분에서 실행이 약간씩 달랐습니다. 왜 이렇게 된 걸까요?
그들 중 누구도 잘못된게 아닙니다.
스타일 뒤에 있는 규칙을 명확하게 설명 할 수 있는 시스템이 없기 때문에 각 컴포넌트들이 다른 높이와 패딩을 가지고 있게 된 것입니다.
이런 상황에서 솔루션은 8pt 그리드 시스템이 될 수 있습니다. 페이지 요소의 크기를 조정하고 간격을 늘리려면 8pt 씩 증가시킵니다. 나에게 이것은 높이나 너비, 여백 또는 패딩이 8pt 씩 증가한다는 것을 의미합니다.
왜 8pt인가?
다양한 크기의 디바이스가 출시되고 픽셀의 밀도들이 계속 증가하면서 디자이너가 에셋을 쌓는 과정이 더욱 복잡해졌습니다. 크기나 여백의 요소에 8과 같은 짝수를 사용하면 다양한 장치를 쉽고 일관되게 조정할 수 있습니다.
1.5 배 해상도의 디바이스들은 홀수를 깨끗이 렌더링하는 데 어려움을 겪습니다.
예를 들어 5px를 1.5x로 스케일링하면 반 화소가 오프셋 됩니다.
그렇다면 그 많은 짝수 중에 왜 6이나 10이 아니고 8인가?
인기 있는 화면 크기 대다수는 8로 나눌 수 있으며 이 숫자는 화면에 쉽게 들어맞습니다.
8씩 증분하여 6 포인트 시스템과 같은 변수로 바꿀 수도 있고, 10 포인트 시스템보다더 많은 양의 옵션을 제공합니다. "시스템"은 따라 하기 쉽고 반복하기 쉬운 경우에만 좋습니다.
8pt 시스템을 통해 얻을 수 있는 가치는 무엇인가?
- 디자이너 : 효율적인 시스템. 요소들끼리 퀄리티가 저해되지 않고, 디자인 리듬을 유지하면서 의사 결정을 최소화할 수 있습니다.
- 팀의 경우 : 디자이너와 개발자 간의 쉬운 의사소통 시스템 (픽셀 때문에 번거로울 필요가 없음). 개발자가 매번 측정하지 않고도 8pt 단위로 쉽게 생각할 수 있습니다.
- 사용자 : 일관된 느낌을 주어 신뢰할 수 있는 브랜드라는 느낌을 줄 수 있습니다. 또한, 원하는 장치에서 흐릿한 반 화소 오프셋이 없습니다.
어떻게 적용할 수 있나?
다음은 디자이너와 개발자를 위한 8pt 그리드 구현에 대한 몇 가지 기사입니다.
Bryn Jackson’s 8-Point Grid: 8pt 그리드의 정의에서 구현에 이르는 가장 포괄적인 가이드입니다.
Sketch Workflow — 8 point Soft Grids: 그의 Sketch를 이용한 워크플로우에 대한 글은 8pt 그리드 구현을 시작하기에 훌륭한 가이드입니다. 또한 그는 www.nudg.it의 제작자이기도 합니다.
Google Material Design — Metrics & keylines article: 8pt 그리드 구현에 대한 예와 설명을 위한 또 다른 훌륭한 자료입니다.
Intuit’s Harmony Design System은 반응형에 대한 좋은 설명서이기도 하면서 그리드의 기초, 픽셀 수를 왜 계산하는지를 설명합니다.
https://medium.com/@_bklmn/8pt-gui-templates-ed8798badab3#.xybw016yz 8pt 매테리얼 디자인에 대한 템플릿과 가이드를 제공합니다.
