Grid System(그리드 시스템)과 반응형,적응형
기본 개념과 레이아웃
UXUI 디자인에서 여백은 어떤 기준으로 작업될까요? 공부를 처음 시작하시는 분이라면 8pt 그리드, 4pt 그리드, 소수점 없애기 등에 대해 들어보셨을 거예요. 꼭 UXUI 분야가 아니더라도, 디자인할 때 여백과 간격의 중요성은 잘 알려져 있습니다.
디자인에 정답이 없듯이, 여백과 간격에도 정답은 없습니다. 그럼에도 8pt, 4pt 그리드 시스템과 소수점 없애기 등의 가이드라인이 존재하는 이유는 개발과의 호환성 때문입니다. 아무리 시각적으로 감각적인 디자인이라도 개발과 호환되지 않는다면 실제로 구현할 수 없으니까요.
개발자와 제품을 만들 때 디자이너가 신뢰를 쌓으려면 이런 가이드를 알고 있어야 합니다. 작업물에 대한 논리적인 근거와 소프트 스킬을 활용하면 갈등을 최소화하고 더 나은 결과물을 만들 수 있으니까요. 실력 있는 디자이너, 좋은 디자이너라면 함께 만들 수 있는 작업물을 만들어 프로젝트가 진행되게 작업하는 사람임을 기억해야 합니다.
그리드 시스템에 대한 내용은 양이 많기 때문에 이번 편에서는 그리드의 기본 개념과 레이아웃에 대해 알아보겠습니다.
그리드가 필요한 이유
일관성과 효율성
그리드(Grid)는 격자를 말하는데요. 그리드 시스템은 이러한 격자로 화면 레이아웃을 체계적으로 구성하기 위한 규칙입니다. 개발 가능한 디자인을 하려면 레이아웃이 수치 단위로 일관되게 설계되어야 합니다.
눈대중으로 작업한 예시 화면을 같이 볼까요. 대충 눈으로 볼 때는 적당히 잘 디자인된 것처럼 보이지만, 개발을 위해 그리드를 확인하면 중구난방임을 알 수 있습니다.
어떠한 규칙도 없기 때문에 개발자가 한 땀 한 땀 화면을 만들어야 하겠지만.. 이러한 디자인은 개발자분들이 작업해주지 않습니다. 규칙이 없는 디자인은 개발자가 매번 새로운 코드를 작성해야 하기 때문에 개발 시간이 증가되고, 간격이나 정렬이 일관되지 않으니 예상치 못한 버그가 발생할 수도 있거든요. 따라서 개발자가 이러한 디자인을 구현하기를 꺼리는 것은 자연스러운 일입니다.
개발 뿐 아니라 디자인 또한 어딘가 혼잡스럽다는 느낌을 주고 있습니다. 시각적 일관성이 부족한 디자인은 사용자에게 불안정한 느낌을 제공하고, 비전문적인 느낌을 주기 때문에 제품에 신뢰를를 주기 어렵습니다. 비유하면 보이스피싱 같아서 링크에 접속할 때도 괜히 개인정보만 유출되는 것 같고, 구매도 꺼려지는 기분이 드는 것과 같습니다.
만약 이 디자인이 꽤 괜찮다고 생각되신다면, 디자인을 보는 눈이 높이는 연습을 추천드립니다. 보는 눈이 높을수록, 자신의 실력도 자신의 눈만큼 따라가니까요.
일정한 간격으로 맞추어 보았습니다. 자세히 보시면 디자인 요소(그래픽, 텍스트, 버튼 등)도 모두 8pt 그리드가 적용되어 있습니다. 정렬과 간격이 일관되어 전체 화면이 균형 잡히고 이전 디자인보다 조화롭게 보입니다. 텍스트, 그래픽, 디자인 요소들이 그룹화되어 사용자가 정보를 빠르고 쉽게 파악할 수 있도록 도와줍니다. 무엇보다 디자인에 대한 개발 기준이 확립되었기 때문에, 개발자가 일관된 규칙을 적용하여 개발 속도를 높이고 오류 발생을 최소화할 수 있습니다. 설명을 위해 만든 자료라 디테일이 아쉽지만.. 넘어가 주시길 바랍니다 :)
결국 그리드가 필요한 이유는 시각적인 일관성으로 사용자가 정보 접근을 더 편하게 만들고, 개발 작업의 효율을 높이기 위함입니다. 디자이너는 그리드 시스템을 이용해 사용자의 정보 접근에 대한 스트레스를 줄이고, 개발자의 작업을 생산적으로 만들어 제품의 품질을 높이는 데 기여할 수 있어야 합니다.
그리드 시스템의 기본 개념
5가지
UXUI에서 그리드 시스템을 적용하기 위해서는 5가지 개념을 알아야 합니다. 웹, 태블릿, 모바일 모두 해당 개념으로 그리드를 구성하고 있어요.
1. Container(컨테이너) : 전체 화면에서 디자인이 작업되는 폭
2. Margin(마진) : 전체 화면에서 컨테이너를 제외한 양쪽의 폭
3. Columns(컬럼) : 컨테이너를 구성하는 단
4. Unit(유닛) : 컬럼의 넓이를 구성하는 내부 요소
5. Gutter(거터) : 유닛의 여백으로, 유닛 사이의 간격
이 중에서도 컬럼에 대한 한 가지 오해가 있습니다. 어떤 사람은 유닛과 거터의 합이라 말하고, 누군가는 유닛을 컬럼으로 이해하는 것인데요. 이러한 오해의 시작은 디자인 툴의 거터 설정 방식에서 출발했습니다.
피그마에서 컬럼을 설정할 때, 컬럼의 개수를 설정하게 됩니다. 개수를 설정하고 화면을 보면 유닛 4개가 보이면서 유닛을 컬럼으로 오해합니다. 여기서 유닛 사이의 간격인 거터를 마치 컬럼 사이의 간격으로 이해할 수 있습니다. 기본 개념을 모르는 상태에서 피그마로 독학하다 보면 이런 오해가 발생할 수 있습니다.
핵심은 눈에 보이는 유닛의 개수가 컬럼의 개수와 같을 뿐이지, 컬럼이 유닛이 되는 것은 아님을 인지해야 합니다. 결국 소프트웨어(예. 피그마, 스케치)의 그리드 설정 방식이 달라도, 기본 개념에 대한 정의는 변하지 않습니다. 피그마에서 만드는 거터도 결국 유닛 사이의 간격을 의미하고 있으니까요. 그러니 기본 개념을 잘 숙지해서 개발자와 그리드 시스템을 논의할 때 혼동하지 않기를 바랍니다.
예를 들어, 피그마 기준으로 디자이너가 개발자에게 8pt 그리드로 설계했다고 전달했습니다. 개발자 입장에서는 컬럼의 크기를 8pt로 맞추었을 때, 디자인에 보이는 유닛의 크기가 다르다고 얘기할 수 있습니다. 혹은 개발자가 먼저 이미지와 텍스트 박스 사이의 간격이 다르게 나오는 게 맞는지 물어볼 수 있어요. 이처럼 기본 개념을 모르고 작업하게 되면 개발자와의 의사소통이 혼란스러워지고, 올바른 그리드 시스템의 구현이 어려울 수 있습니다.
그리드 시스템과 레이아웃
그리드와 레이아웃
그리드 시스템은 레이아웃 설계의 기초입니다. 그리드(격자)를 이용하면 다양한 기기와 화면 크기에 대응할 수 있는 레이아웃을 설계할 수 있어요. 대표적으로 반응형과 적응형 웹을 구축하는 경우가 해당됩니다. 디자인 의뢰를 받았을 때 반응형(Responsive) 웹이라면, 디자이너는 그리드를 이용해 유동적인 레이아웃을 설계하고, 적응형(Adaptive) 웹이라면 고정된 레이아웃을 설계해야 합니다.
레이아웃을 설계할 때는 브레이크포인트를 알아야 합니다. 요즘은 디바이스가 다양하기 때문에 사람들이 많이 사용하는 디바이스 화면을 선택하고, 해당 화면 크기에서 웹사이트 디자인이 가장 적절하게 보이도록 기준을 정합니다. 데스크탑인 경우, 태블릿인 경우, 모바일인 경우에서 디자인이 가장 잘 보이는 화면 크기를 설정하는 것입니다. 이렇게 설정한 화면 크기를 레이아웃이 변경되는 기준점인 브레이크포인트(Breakpoint)라고 합니다. 브레이크포인트를 설계할 때 위 이미지처럼 그리드를 사용하는데요, 이때 그리드 시스템을 적용하는 것입니다. 8pt 그리드 시스템이라면 컬럼의 간격을 8배수에 맞추는 식으로요.
그리드 시스템과 반응형
반응형 = 화면 크기에 따라 자동으로 레이아웃과 스타일이 조절
반응형 웹은 화면 크기에 따라 자동으로 레이아웃과 스타일이 조절됩니다. 하나의 디자인이 사용자의 화면 크기에 맞게 조절되는 것입니다. 자세히 보시면, 이미지, 버튼, 텍스트 등 디자인 에셋들이 화면에 맞게 자동으로 조절되어 있습니다.
디자이너는 반응형 화면을 작업할 때 브레이크포인트에 따라 변경되는 디자인 요소를 설계합니다. 예를 들어, 데스크탑 화면에서 헤더는 Brunchstory 로고가 있지만, 모바일 화면의 헤더에서는 로고를 햄버거 탭 안으로 숨기거나, 레이아웃에 맞춰 2단으로 구성된 콘텐츠(인기 작품과 글/작품)는 모바일 화면에서 세로로 정렬되도록 설계하는 식으로요.
'디자인이 조절된다'는 의미는 위 이미지처럼 디자이너가 설정한 브레이크포인트에서 레이아웃과 디자인 요소 크기가 변경되는 것을 의미합니다. 사용자가 인터넷 창의 가로를 잡고 화면 너비를 작게 만들면, 변경되는 가로 길이에 따라 실시간으로 레이아웃이 변경되는 것입니다. 디자인 구성은 똑같지만, 화면 크기에 따라 레이아웃이 2단에서 1단으로 변경되는 식으로 유연하게 레이아웃이 움직이는 것이죠. 그래서 유동적인 레이아웃이라고 말하는 것입니다.
그리드 시스템과 적응형
적응형 = 화면 크기에 따라 자동으로 레이아웃과 스타일이 변경
적응형 웹은 화면 크기에 따라 레이아웃과 스타일이 변경됩니다. 하나의 디자인이 아닌, 브레이크포인트마다 디자인이 다릅니다. 데스크탑, 태블릿, 모바일마다 설정한 대표 화면 크기(브레이크포인트)에서 같은 링크로 접속했지만, 디자인 구성이 다르게 보이는 식입니다. 그래서 디자이너는 적응형 웹을 작업할 때 브레이크포인트에 따라 각각 다른 디자인을 설계할 수 있습니다.
그렇다면 적응형으로 구현하는데 데스크탑, 태블릿, 모바일 모두 반응형처럼 하나의 디자인으로 보이게 만드는 것은 가능할까요? 가능합니다. 반응형과 적응형은 구현하는 방식의 차이인 것이지 디자인의 차이는 아닙니다. 고객이 적응형이지만, 데스크탑, 태블릿, 모바일 모두 하나의 디자인으로 보이게 해달라고 한다면 구현 방식의 차이만 설명드리면 됩니다.
지금 보시는 이미지처럼 적응형은 지정한 화면크기(브레이크포인트)에서 디자인이 바뀌는 것이고, 그 이상이나 그 이하의 화면 크기에서는 레이아웃이 변경되지 않습니다. 데스크탑 크기에서 모바일 크기까지 인터넷 창을 줄이는 과정에서 아무런 변화가 없습니다. 이처럼 지정한 화면 크기일 때만 레이아웃이 변경되기 때문에 고정적인 레이아웃이라 말하는 것입니다. 적응형이지만 하나의 디자인처럼 보이도록 가능한 이유도 반응형처럼 하나의 디자인으로 보이도록 작업하여도, 중간에 실시간으로 레이아웃이 바뀌지 않도록 개발한다는 의미이기 때문입니다.
그리드 시스템 = 디자인 전반적인 구조
마지막으로 그리드 시스템은 격자 체계를 의미하지만, 레이아웃 작업에만 해당되는 것은 아닙니다. 8pt 그리드 시스템은 디자인 요소의 간격을 8pt로 조절할 뿐만 아니라, 디자인 에셋인 아이콘이나 이미지 크기, radius 값 모두 8배 수로 맞추어 작업합니다. 폰트의 크기 및 간격 역시도 8pt, 16pt, 24pt와 같이 8의 배수로 설계되고, 텍스트 박스의 크기 또한 최대한 8 배수에 맞추는 식입니다.
이번 편에서는 그리드 시스템의 기본 개념과 레이아웃에 대해 알았는데요. 다음 편에서는 디자이너들에게 익숙한 8pt 그리드 시스템, 4pt 그리드 시스템을 살펴보겠습니다.
정리
1. 그리드 시스템의 필요성 : 일관성, 효율성
2. 그리드 시스템의 기본 개념 5가지
1) Container(컨테이너) : 전체 화면에서 디자인이 작업되는 폭
2) Margin(마진) : 전체 화면에서 컨테이너를 제외한 양쪽의 폭
3) Columns(컬럼) : 컨테이너를 구성하는 단
4) Unit(유닛) : 컬럼의 넓이를 구성하는 내부 요소
5) Gutter(거터) : 유닛 사이의 간격
3. 그리드 시스템 = 반응형/적응형 레이아웃 설계의 기초
4. 반응형과 적응형의 결정적인 차이 = 화면 크기에 따른 실시간 레이아웃 조절 여부
5. 그리드 시스템은 레이아웃 외에도 아이콘, 이미지, 폰트 등 디자인 전반적인 구조를 설계
