Dotty Studio

기업가정신 & 스타트업, 그리고 기술과 디자인에 대한 곳.

개발자를 위한 디자인 가이드 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 정도의 너비에서 멈춥니다.

사용자 삽입 이미지

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

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

그럼 다음 시간에 봐용~
신고
댓글을 달아주세요
  1. 하재영 2008.08.15 01:41 신고 댓글주소 수정/삭제 댓글쓰기

    지난번에 잘 들어가셨죠? (론리스터디^^)

    요즘 레이아웃이랑 비율에 대해서 개인적으로 많은 고민을 하고 있었는데...

    많은 도움이 되는 것 같습니다.

    다음에는 제가 찾아 뵙겠습니다~!

  2. BlogIcon 이장 2008.08.15 07:12 신고 댓글주소 수정/삭제 댓글쓰기

    르꼬르뷔지에의 모듈러와도 개념이 닿아있는것 같습니다.

    • BlogIcon 김동신(dotty) 2008.08.16 00:28 신고 댓글주소 수정/삭제

      광의의 비율의 측면에서는 충분히 닿아있다고 생각됩니다. 웹상에서 그리드를 modular에 따라 잡는다면 어떻게 보일지, 궁금해지네요. ㅎㅎ

  3. BlogIcon hyunyu 2008.08.15 09:41 신고 댓글주소 수정/삭제 댓글쓰기

    Awesome post! 짝짝짝

  4. BlogIcon Dish 2008.08.15 13:09 신고 댓글주소 수정/삭제 댓글쓰기

    자연 친화적인 강렬한 녹색!!!

  5. Tuna 2008.08.16 11:20 신고 댓글주소 수정/삭제 댓글쓰기

    다음은 무엇을? 언제나 기다리고 있는 일인. 하악하악

  6. BlogIcon ikhwan 2008.08.16 16:15 신고 댓글주소 수정/삭제 댓글쓰기

    도서 편집에서 가독성을 높여주기 위해서 자간, 행간이 중요하고 더 넓게 보면 한쪽에서 상하좌우에 적절한 여백이 존재하는 것 처럼 웹디자인도 똑 같이 여백이 중요하것지요. 그 이유를 간단히 정리하자면 "변별력을 향상시키기 위해서"일 것이고~ 내 기준으로는 KONIGI와 yongfook 배치 점수는 낙제내(내 표현법대로 하면 덴부라 내지는 양아치). 기본적으로 시선은 왼쪽에서 오른쪽으로 흐르고, 위에서 아래로 흐르는데~(예로든 신문의 경우를 보면 잘 나타나 있음) 저 두사이트는 이 기본원칙을 무시하고 반대로 흐르내. 여백은 줬을지 모르지만, 시선을 잡는 색상의 배치가 잘못됐다고 봄.

    • BlogIcon 김동신(dotty) 2008.08.17 00:03 신고 댓글주소 수정/삭제

      동적 콘텐트라서 그때 그때 올린 내용에 따라서 달라져서가 아닐까요? :)
      일일이 수동으로 사람이 편집해주는게 아니라 올라오는 글에 따라 들어가는 내용(색상, 텍스트, 이미지 등)이 바뀌게 되면 기존의 정적인 도서 편집과는 다른 방법론과 기준이 필요하다는 생각이 드네요.

    • BlogIcon ikhwan 2008.08.18 10:56 신고 댓글주소 수정/삭제

      동적으로 변하는 경우에도 소제목이라든가, 표제라든가 다른 요소들을 이용해서 기본 흐름을 잡아줄 수 있지요. 애플 사이트를 보면 기본적으로 좌에서 우로, 위에서 아래로의 흐름이 무척 자연스럽잖아. 단순히 도서편집시에만 적용된다기 보다는 시각디자인/인간공학에서 지켜야하는 최소한의 기본원칙이 아닐까? 애플의 미니멀리즘이 성공할 수 있는 것도 새로운 기기이기 때문에 새로운 방법론과 기준을 생각하기 보다, 이러한 인간의 가장 기본적인 습성에 관심을 기울여서라고 생각되거든.

    • BlogIcon 김동신(dotty) 2008.08.19 01:15 신고 댓글주소 수정/삭제

      humane design에 입각하여야 한다는 점은 옳은 말씀입니다. 깊이 공감하고, 누구보다도 중요시 하는 편이라고 생각하고 있습니다.

      다만, 같은 결과를 내기 위하여 한 가지 원칙만이 있는 것이 아니듯, 새로운 미디어에서는 또 그에 걸맞는 방법론을 찾기 위한 다양한 시도가 필요하다고 생각합니다.

      yongfook의 시도는 그런 의미에서 충분히 옳은 방향으로서의 의미있다고 생각하구요, 작가 본인이 색상을 저렇게 한건, 원래 서비스(예: 트위터의 하늘색)들에 충실하기 위하여 한 것 같습니다.

      결론은, 항상 보다 나은 답은 있겠지만, 그 목표에 이르는데 있어서 행여 과정을 속단하여, 의미있는 시도들을 가로막아서는 안된다는 생각입니다.

      저는 가급적이면 더 많은 디자이너들이 기존의 틀에 도전하는 시도를 많이 하면 좋을 것 같다는 생각이 듭니다. 옳다고 하는 것이 과연 계속 옳은지를 끊임없이 도전해보는 것이죠. Pixar가 디즈니를 나온 후 그들이 가지고 있었던 고정관념을 깨뜨렸던것 처럼요. :)

      깊은 관심의 댓글 감사합니다! ㅎㅎ

    • BlogIcon ikhwan 2008.08.21 10:07 신고 댓글주소 수정/삭제

      고정관념 깨트리기가 참 어려운 것 같아요. 어제도 책 표지 시안 갖고 회의하다가 의견이 참 분분했내...
      항상 관심 갖고 읽어주시고, 답 주셔서 고마워용 ^^;

  7. BlogIcon 강규영 2008.08.18 08:50 신고 댓글주소 수정/삭제 댓글쓰기

    안녕하세요?

    밥 로스 그림이 너무 재밌어서 불펌했어요 ㅜㅠ

    http://alankang.tistory.com/137

    ㄷㄷㄷ

분류 전체보기 (822)
Entrepreneur (140)
Technology (265)
Design (93)
Science (22)
Thoughts (63)
소소한 하루 (184)
About (6)
me2day (40)
Paprika Lab (9)