디자이너는 왜 그리드 시스템을 알아야 할까?
[DesignSystem] 디자이너는 왜 Grid 시스템을 알아야 할까?
Grid System의 이해
왜 내 디자인이랑 개발 아웃풋은 미묘하게 다를까?
모든 UI 디자이너가 초기에 한 번쯤 해봤던 고민일지도 모릅니다. 정답은 아마도 디자이너와 개발자가 다른 기준을 가지고 일을 하고 있기 때문이지 않을까요? 만약 Zeplin을 통해 공유되는 고정값 크기와 속성을 가지고 똑같이 붙여 넣어서 개발을 한다면 누가 봐도 똑같은 아웃풋을 낼 수 있을지도 모릅니다. 하지만 우리는 다양한 디바이스의 디스플레이에 대한 대응을 해야 하고 이에 따라 유연하면서도 일관되고 정돈된 UI를 설계해야 하죠.
디자이너는 개발자에게 어떠한 기준과 규칙 아래에서 ui를 구현해야 하는지 가이드를 제시해야 합니다. 개발자가 시안마다 제각기 다르고 애매모호한 여러 가지 요소들의 크기, 간격에 대한 고민을 하는데 에너지를 쏟는 건 쉽지도 않고 효율도 떨어지죠. 왜냐하면 그건 디자이너가 훨씬 잘하는 일이거든요.
어떤 디자인에 있어서 개발자에게 명확한 가이드를 제시하려면, 그 디자인에는 명확한 기준과 규칙이 있어야 합니다. 요소의 크기와 간격이 그 정도 크기여야 하는지에 대한 당위성을 부여하는 그리드(Grid)는 엄청나게 중요한 역할을 하죠.
그리드는 디자이너들 간의 협업에 있어서도 굉장히 중요한 역할을 합니다. 누구는 8pt 간격으로 누구는 12pt 간격으로 디자인을 한다면 그 시안 하나하나는 괜찮은 예쁜 결과물이 나올 수 있을지도 모릅니다. 오히려 그게 더 심미적으로 예쁜 디자인일 수도 있죠. 하지만 여러 시안들이 모인 그 프로덕트는 밸런스와 표준점을 찾을 수 없는 중구난방의 제품이 나오게 될 수밖에 없습니다.
이처럼 개발자, 그리고 디자이너들이 같은 표준화된 관점 아래서 프로덕트를 바라볼 수 있도록 하는 가장 빠른 방법은 그리드(Grid)에 대한 약속을 하는 겁니다. Columns, gutters, and margins에 대한 기준을 정하고 여러 상황에서의 Breakpoint를 정의하기만 해도 우리는 비슷한 시각에서 결과물을 만들어 낼 수 있습니다.
Material Design에서 정의하고 있는 그리드 시스템1. Columns
Columns은 스크린에서 콘텐츠가 포함되는 영역을 말합니다. 칼럼은 여러 스크린 사이즈에 유연하게 반응하기 위해 보통 고정 값보다는 퍼센트로 정의될 때가 더 많습니다. column의 개수는 여러 스크린 사이즈의 breakpoint에 따라 결정됩니다. 예를 들면 모바일에서는 4 columns grid를 사용하고 태블릿에서는 8 columns grid를 사용한다 라고 정의를 내릴 수 있는 거죠.
2. Gutters
Gutters는 column 사이의 간격입니다. 즉 콘텐츠 사이의 간격이라는 말이죠. gutter는 한 breakpoint 영역 안에서 고정값으로 적용이 됩니다. breakpoint 영역이 바뀔 때 gutter 고정값은 조금씩 넓어지게 되겠죠. 예를 들면 모바일에서는 16 dp의 gutter를 사용하다가 태블릿 영역에서는 24dp의 gutter를 사용하도록 정의하는 거죠.
3. Margins
Margin은 스크린의 맨 끝 좌우의 공간을 의미합니다. 모든 colums과 gutters를 감싸는 좌우 공간이죠. 이 또한 고정값으로 부여합니다. 마찬가지로 breakpoint 영역이 바뀔 때마다 조금씩 넓어지게 되겠죠.
Material Design에서 정의하는 Breakpoint 별 dp 값Material Design에서는 위와 같이 breakpoint에 따라 colums/margins/gutters를 정의하고 있습니다. 이런 식으로 그리드를 활용하여 디자인을 하게 되면 여러 가지 스크린에 대해서 유연하게 대응할 수가 있게 되죠.
여기서 이런 그리드 시스템을 알고 여러 디자인 시스템의 그리드와 컴포넌트의 스타일 가이드를 보면 대부분 요소들의 사이즈나 높이, 간격을 8pt 기준으로 사용하고 있다는 걸 알 수가 있습니다. 그리드 시스템에는 여러 종류가 있지만 왜 많은 디자인 시스템에서 8-point grid 시스템을 따르는지 이해할 필요가 있었습니다.
8 point grid system
여러 컴포넌트와 섞여서 한 페이 지위에 모였을 때 전체적인 디자인이 무너지는 느낌을 받은 적이 있을 겁니다. 이는 좋은 컴포넌트들이 한 페이지에 일관되고 밸런스 있게 배치되기 쉽지 않기 때문입니다. 이건 디자이너가 여럿일 때 더 많이 발생하는 문제죠. 여러 명의 디자이너와 개발자들에게 모두 같은 생각으로 일관된 배치를 하도록 유도하는 건 시스템 없이 불가능한 일입니다.
하지만 만약 앞으로 모든 요소들의 크기와 간격을 8pt 단위로 디자인하도록 유도한다면? 여러 요소들을 배치하는 게 훨씬 더 정돈된 방향으로 흘러갈 수 있다는 거죠.
왜 하필 8pt일까요?
일단 첫 번째로는 대부분의 스크린이 8 단위의 크기를 가지기 때문입니다. 여러 가지 디바이스들에 대해서 가변적으로 또 유기적으로 위치과 크기를 잡기 용이하다는 거죠.
두 번째 이유도 역시 스크린에 따른 offset을 방지하기 위해서라고 합니다. 1.5배 스케일을 키워 렌더링을 하는 경우에도 깔끔하게 렌더링 되도록 하기 위해서죠.
8 point grid 시스템을 활용하면 디자인을 할 때도 고민이 많이 줄어들 수밖에 없다는 생각이 들어요. 크기를 정의하는 데 있어서 생기는 고민은 물론 요소들을 배치할 때도 적은 고민으로 배치할 수 있겠죠. 적은 에너지 소모로 표준화되고 일관된 퀄리티의 퍼포먼스를 뽑아낼 수 있다는 말입니다. 개발자들도 8pt 기준으로 생각을 하게 되니 크기에 대한 감각도 수월해질 수 있겠죠.
마무리하며
일관된 디자인에 대한 고민은 아주 오래전부터 시작되었을 겁니다. 요새 들어 그 중요성이 더욱더 부각되고 있죠. 이는 결과물의 일관성뿐만 아니라 디자인과 개발을 하는 주체들의 에너지 소모를 줄이기 위한 측면에서도 매우 중요하기 때문이에요. 반복적인 일들을 줄이고 재활용성을 높이는 것들이 이런 노력들이겠죠. 여기서 아낀 에너지는 제품의 퀄리티를 높이는 다른 고민에 소모할 수도 있을 거고요.
그 관점에서 그리드는 매우 기초적이고 필수적인 부분이 될 수 있습니다. 개발자와 디자이너가 같은 기준과 시각에서 시안을 공유하고 구현하는 초석이 되는 것이죠. bootstrap이나 vueify 등등 여러 가지 많은 프레임 워크에서도 그리드 시스템을 제공하고 있어요. 디자이너가 그런 시스템에 대한 이해도가 있다면 그 자체로 개발자와 협업함에 있어 큰 자산이 될 수 있지 않을까 하고 생각해 봅니다.
