도티의 디자인 가이드 ep.4 - 그리드(Grid). 정렬의 미학

개발자를 위한 디자인 가이드 ep.2에서 저는 시각 디자인의 중요한 4요소 중 하나로 비율을 꼽았습니다. 비율 자체를 넓게 정의하여 proportion(일반적인 의미의 비율)과 grid(그리드), spacing(공간과 여백), layout & composition(레이아웃과 구도) 등을 포괄하는 개념으로 설명하였는데요, 오늘은 그중 손쉽고(?) 용이한 툴인 그리드(grid)를 간단히 맛보도록 하겠습니다.

자, 이 가이드의 핵심 독자는 그리드라고 하면 그리드 컴퓨팅이 먼저 떠오르는, 디자인을 귀찮아하는 개발자분들을 위한 것이므로, 일단 우리의 현실을 직시하면서 시작을 해봅시다. 일반적으로 개발자들이 만드는 페이지는 아래와 같이 생겼습니다.

적당히 텍스트가 주르륵 나오면서, 논문 스러운 레이아웃이 정겹기도 합니다. 여기에 테이블을 좀 넣고 색상도 슥슥 넣으면서 레이아웃을 잡으면... (일부러 좀 그런 예를 골랐는지도 모르겠습니다만..)

대충 이런게 나옵니다. 자연 친화적인 강렬한 녹색도 마음에 드는군요. 이러한 페이지가 친숙하신 분들은 이 가이드를 집중해서 보세용. 후후.. (-_ -)

위의 난감한강렬한 색감은 다음 기회에 다루기로 하고, 우선 그리드부터 알아봅시다.

그리드는 간단히 말하자면, 땅 따먹기를 자를 대고 하는 것입니다. 단, 약간의 규칙을 가지고 하면 효과 만점이죠. 예를 들어, 황금 비율 같은 식으로 말입니다. 황금 비율이 뭐냐구요? 자, 아무리 개발자라도 지나가는 책 표지에서 아래와 같은 그림은 보셨을 것입니다.

인체에 숨겨진 황금비율. 황금비율은 고대 그리스 시절부터 가장 아름답고, 안정적인 비율로 알려져있습니다만, 자세한 건 구글링해보시길 바라며, 대충 1:1.618 정도의 비율이라고 기억해두시면 되겠습니다.

이렇게 특정한 규칙으로 웹 브라우저상의 부동산을 네모 반듯하게 잘 잘라내고, 내용 및 이미지를 그 틀에 맞게 잘 정리해서 집어넣는 것을 보통 그리드 레이아웃이라고 부릅니다. (역시나 이해를 돕기 위하여 멋대로 정의하였습니다. 후후)

원래는 오프라인 상의 인쇄매체를 위하여 개발되었지만, 지금은 웹사이트 디자인 시에도 그리드 디자인을 빈번하게 사용하고 있습니다. 인쇄 매체에는 조금더 정형화 되어있는 공식들이 많이 사용되었는데, 프랙탈/재귀적으로 나누는 방식도 사용되었었죠.

그리드를 나누고 내용을 정렬한 예시

이론이 너무 길어지니, 실전 예시로 들어가 봅시다.

먼저 아래의 화면을 보겠습니다.

이 이미지에서 테두리가 처진 부분을 제외하고는 전부 글자로 이루어진 것을 볼 수 있습니다. 하지만 어째서인지, 정리 정돈이 된 모습이 아주 눈에 착착 달라붙지 않나요? 스크린샷 위에 글자가 모인 부분을 중심으로 선을 그어보면...

부동산을 요롷게 나눈 것이 보입니다. 그려놓고 보면 간단하죠? 대충 좌:우를 2:1로 나누고, 좌측에서는 다시 1:1:1 정도로 3등분하여 내용을 정리한 것을 볼 수 있습니다. 그런데 저렇게만 해도 내용이 상당히 정리되어 보입니다. (물론 중간 중간 굵은 글씨로 리듬감도 들어가 있죠)

이를 기가막히게 잘쓰는 곳이 신문사들입니다. 국내 신문사는 어디를 올리는 가에 따라 난감한 댓글이 달릴까봐 쫄아서심히 우려되므로, 바다건너 신문을 담아오자면..

세로로 쫙쫙 그어진 선들이 보이시나요? 거기에다, 중간 중간에 가로로 줄을 넣어서 적당히 덩어리를 나누어 주고 있죠? 글씨만 가득한 신문이 참 그럴싸해 보입니다. (실로 이런 신문사의 레이아웃 편집자는 돈도 많이 받겠죵)

그런데 집을 지을 때, 요즘 같은 남남 세상에 옆집과 따닥 따닥 붙어있으면 조금 부담스럽겠죠? 그래서 집과 집 사이에 담이라는 것도 만들고, 담과 집 사이에 공간을 만들어 주기도 합니다. (아파트 거주자는 해당 없음)

이러한 맥락에서 중요해지는 것이, 저렇게 나눈 영역들 사이에 적당히 '일정한' 공간을 넣어주는 것입니다. 여기서 포인트는 일.정.한. (아티스트라면 다채롭게 하지만 당신은 아님.)

아래의 애플 사이트에서 동그라미 친 부분들을 보면, 위 아래를 나누는 곳이나, 좌 우를 나누는 곳 모두 폭이 일정함을 알 수 있습니다. 사소한 부분처럼 보이지만, 치밀하게 맞추어야 하는 부분이죠.

박스와 박스 사이를 일정하게 해주고, 만약 박스 안에 내용이 들어가면, 박스 테두리와 내용물 사이의 여백도 다른 박스안의 내용물들과 동일하게 해주어야 합니다. 이렇게 일관성있게 여백을 넣어주면 알게 모르게 상당히 정돈된 느낌을 줍니다. (註: 흔히 이렇게 영역 사이가 떨어진 부분을 gutter 혹은 margin라고 부르고, 박스 테두리와 내용물 사이의 여백을 padding이라고 합니다.)

Key: 그리드를 일단 나누면, 악착같이 거기에 맞추어 정렬시키고, 영역들 사이 사이 공간을 일정한 폭으로 맞추어 준다.

예를 두어가지 더 보겠습니다.

위는 Konigi라는 사이트인데, 보시다시피 내용 중에 이미지들을 제외하고는, 마찬가지로 그리드를 만들어서 정돈을 하였더니, 깔끔해 보입니다. 단, 박스가 세로로 긴 것이 일관성있게 배열되어있기 때문에, gutter가 상하와 좌우가 약간 다르지만, 크게 거슬리지는 않습니다.

예를 좀 더 보자면..

Subtraction이라는 사이트인데, 가운데 이미지를 제외하면 그리드와 타이포로 거의 풀어낸 사이트입니다. 이미지 작업을 별로 할 것도 없이 정리정돈만 잘해도 상당히 멋진 사이트가 나오죠? 자, 포토샵이 두려운 개발자 분들에게도 희망을 주는 사이트입니다. (사실은 많이 고민해서 잘 만들어진 설계이지만....)

오늘은 예시를 풍부하게 보여드리는 날입니다. 많이 보고 많이 흉내내는게 배움에는 최고죠.

일본에 사는 핸섬한 용푹(yongfook)이라는 (닉은 왜이래) 웹 프로듀서의 사이트입니다. 개발도 하고 디자인도 하는 원맨 프리랜서죠. 초반에 살펴본 예시와 마찬가지로, 좌:우를 2:1정도로 나누고, 좌측을 다시 3단으로 나눈 그리드입니다. 역시 gutter가 일정합니다. 자칫 잘못하면 지루해보일 수도 있는 레이아웃 이기에, 색상과 이미지를 넣어서 변화를 주었습니다.

그리고 내친김에 한 개 더:

신문사인 뉴욕 타임즈의 웹사이트입니다. 상단에는 인쇄매체의 아이덴티티를 그대로 살린 클래시컬한 로고가 들어가있고, 아래로는 크게 3단 구성 -- 좌측의 얇은 녀석과 가운데의 큼지막한 녀석, 우측의 나름 넓직한 녀석 -- 으로 되어있고, 가운데와 우측을 다시 2단씩 나누었습니다.

웹은 HTML 특성상, 네모 반듯하게 자르기 좋도록 되어있습니다. 적당히 읽기 좋게 잘 자르고, 그 안에 내용을 잘 정리해서 집어 넣기만해도 상당히 그럴싸해 보일 수 있습니다.

하지만, 개발자의 입장에서도 신경써야 할, 새로운 환경의 변화가 있으니, 이른바 대형 모니터 유행. 24인치는 물론이고 30인치 모니터도 마구 마구 사들이는 요즘 시기에, 무작정 페이지를 넓게 해서 그리드를 팍팍 나누다보면 곤란합니다.

사람의 눈은 (현재 72dpi정도의) 모니터에서는 대략 400 ~ 600px 정도의 너비가 본문을 읽기에 편합니다. 그보다 얇으면 메인 콘텐트라기 보다는 서브 콘텐트나 메뉴에 적합하고, 그보다 넓다면 눈이 따라가기 힘들죠.

그 예로, 구글의 검색 결과도 창을 넓혀도 본문은 550px 정도의 너비에서 멈춥니다.

에에, 약간 삼천포로 빠졌습니다만, 오늘은 대충 그리드를 잡는 것의 효과와 신경써야할 기초적인 포인트를 살펴보았습니다.

그리드 디자인에 대하여 조금 더 공부해보시고 싶으신 분은, 레이아웃이나 그리드 디자인 관련 서적을 참고해보시면 좋을 것 같습니다. 상대적으로 적은(?) 노력으로 좋은 효과를 볼 수 있는 그리드 디자인, 꼭 (대충 조금 약간만) 마스터 하세요~

그럼 다음 시간에 봐용~