그리드 시스템에 대해서 알아보자

이 자료는 2013년도에 만든것이지만 디자인 기초에 대해서 알아볼 수 있는 좋은 자료라고 생각해요.

현재는 반응형웹이 활성화되어 그리드 시스템에 대한 이해가 더욱더 필요해 졌습니다.

 

그리드 시스템이 무엇인지 먼저 알아보고 왜 그걸 써야하는지 그리고 현재 타사이트들은 어떻게 적용하고 있는지 알아봅니다.

이 이야기는 “활용”과 표준화에  관한 이야기 입니다. 여기 있는 요소를 다른 페이지 어느곳이든지 적용할 수 있다는 겁니다.

 

 

이 컨텐츠는 아래와 같은 순서로 진행이 됩니다.

 

1. 그리드 시스템이란?

2. 왜 그리드 시스템을 사용해야 할까?

3. 예제로 알아보자

 

 

 

 

1. 그리스 시스템이란?

 

 

그리드

[grid] :

 

그리드의 사전적인 뜻은 격자, 바둑판의 눈금 등을 말하며
그리드는 판면을 구성할 때에 쓰이는 가상의 격자 형태의 안내선

 

말로 푸니 잘 모르시겠죠.

 

 

요런 선위에 각종 컨텐츠가 있는것이죠.

 

 

 

왼쪽이미지와 오른쪽 이미지 어떤것이 더 정리가 되어 보이고 컨텐츠가 잘 보이나요?

 

 

 

 

 

그리드 시스템은 제일 처음 건축에서 개발단계에서 구획을 나눌 때  사용되었고 그후 타이포그라피에서 활용되다가 1930년경 신문잡지등에서 기사, 사진 등 각 컨텐츠등을 효율적으로 구성하기 위해 사용되었습니다.

 

 

그럼 웹에서는 그 그리드 시스템이 어떻게 적용이 되었을까요?

 

 

 

인터넷이 활성화되면서 2000년 초반부터 후반까지 1024해상도의 모니터가 대세였습니다. 한국에서 대부분의 사용자 화면의 크기였죠.

 

 

 

 

 

 

그래서 그 그간동안 1024 화면에 어떻게 하면 복잡한 정보들을 잘 보여줄까 하는 것에 대한 연구가 진행되었고 가장 보편적으로 사용되어진 것은 960가이드 시스템입니다.
12컬럼, 16컬럼, 24컬럼 등등이 있고요 보통 12와 16컬럼을 사용하고 있습니다.

 

 

 

근데 왜 960그리드였을까요? 이유는 가장 많은 수로 나눠지기 때문에 각 컨텐츠들이 다른 곳에 활용되기 쉬웠기 때문입니다.

보편화 되었을 뿐 이 숫자는 절대적이지 않습니다.

 

 

 

 

현재에는 좀 올드합니다. 이 영화시대처럼 말이죠.

 

 

 

 

스탯카운터라는 외국의 통계사이트의 자료르 한번 찾아봤습니다.
지역은 한국으로 2009년 3월의 사용자 화면해상도를 보면 1024해상도를 굉장히 많이 사용하고 있습니다.   여러이유가 있겠지만 큰 해상도의 모니터들이 소비자들이 사용하기에 비싸서 보편화되지 않았습니다.

 

 

 

2013년 12월 현재를 한번 보겠습니다.
1920 해상도의 모니터가 가장 많이 쓰고 1024해상도는 약 3%정도 비율밖에 되지 않습니다.

 

 

 

그래서 업그레이드 된 그리드 시스템이 현재는 필요합니다. 다양한 디바이스가 나오고 있어 여기까지 맞출수 있다면 금상첨화죠

 

 

 

 

다양한 해상도가 현재는 존재합니다. 여러가지 방법으로 각 디바이스들에 대응하고 있습니다.

 

 

 

우리는 기준이 되었던 1024보다 넓은 1280px에서 많은 컨텐츠들을 보여줄 수 있는 방법이 필요합니다.

 

 

 

그럼 1024 해상도를 쓰는 사람들은 어떻합니까. 컨텐츠가 잘려 보일텐데요

1280에 맞는 그리드시스템이 여러가지 연구되었고 1140은 960px의 연장선이라는 점에서 활용이 가능합니다.
1280해상도에서는 총 12개의 그리드를 보여주고 1024해상도로 변경되었을때는 끝의 두 컬럼을 삭제하거나 밑으로 내리는 방식입니다. 이해가 잘 안 되신다구요

 

 

 

예제로 GS샵을 보겠습니다. 현재는 1280 해상도에 최적화되어 많은 컨텐츠들을 보여주고 있습니다.

 

 

 

 

 

 

 

 

1024 해상도에서는 어떨까요? 끝의 2개의 컬럼이 없어지면서 1024 해상도 사용자들도 최적화된 화면으로 쇼핑을 할 수 있습니다

 

 

 

타 사이트들은 넓이값은 어떨까 하고 확인해 봤습니다. 먼저 오픈마켓에서 매출이 좋은 순으로 11번가 , G마켓, 옥션은 위와 같은 그리드 시스템을 활용하고 있습니다.

세 사이트 모두 980px의 넓이값을 사용하고 있습니다. 정확한 기준은 아니지만 가이드시스템에 맞춰본다면 16컬럼을 사용하고 있습니다.

 

대표로 11번가를 확인하면 다른 2개의 사이트 지마켓과 옥션과 달리 11번가는 넓어지는 해상도에 발빠르게 대응을 하고 있습니다.

메인은 현재 980px로 1024해상도와 1280해상도 사용자들을 공통으로 사용되고 있구요

서브에서는 1180px로 1280에서 좀 더 넓은 컨텐츠를 볼 수 있게 활용하고 있습니다. 해상도가 작아질때는 가운데 컨텐츠 영역이 유동적으로 변하는 형태입니다.

 

 

 

타 사이트들을 보면 GS샵은 앞서 이야기 드린대로 1280해상도에 많은 컨텐츠들을 볼수 있게 대응하고 있고 CJ몰도 1240의 넓은 화면을 사용하고요
아디다스는 960그리드 시스템을 완벽하게 유지하고 있습니다. 이유는 글로벌 사이트이다 보니 각 나라별 해상도 점유율로 다 다를테니 가장 보편화된 형태로 전 국가를 커버하고 있는것으로 판단됩니다.

 

네이버 쇼핑의 경우도 1280과 1024 해상도 모두 대응하고 있는데요. 네이버만의 스타일로 재해석하였습니다.

 

확인해보면 네이버메인은 1280해상도 모니터로 확인하면 1100px의 넓이값을 보여주고 1024해상도 모니터로 보면 880px로 끝의 2개 컬럼의 컨텐츠가 하단으로 떨어지는 형태로 기본은 GS샵과 동일합니다.
동일한 컬럼형태로 제작이 될 경우 각 컨텐츠 영역이 메인 뿐 아니라 서브에서도 활용될 수 있습니다.

 

 

 

960 / 1140에 둘다 대응하던 GS SHOP이 얼마전에 메인 개편을 하였습니다. 지금 쓰는건 2015년 8월 현재입니다. ㅎㅎ

그동안 두개를 대응하던 스타일을 없애고 960에만 대응하는 한가지 버전으로 바뀌었습니다.

 

이유가 뭔지는 알수 없으나 태블릿과 모바일에 좀 더 집중하고 PC에 맞는 화면을 따로 제공하는 건 의미없다고 판단한 것일수도요.

 

그동안 2가지 버전을 제공하느라 메인쪽의 배너버전을 2가지 셋으로 만들어줘야 했거든요.

운영요소는 쇼핑몰에 아주 중요한 부분이죠.

 

 

 

네이버 지식쇼핑에서 쓰던 두가지 해상도에 대응하던 이 버전도 현재는 업데이트 되어서 볼 수 없습니다.

대신 다른 방법으로 대응하고 있습니다. 박스형태의 디자인 모티브는 고대로 가져갑니다만 스타일은 변경되었습니다.

 

 

 

 

그리드 시스템의 최대 장점은 표준화 작업이 가능하다는 것입니다. 같은 그리드에 제작된 배너나 그 영역은

메인이든 서브든 어느곳이든 넣을수만 있다면 손쉽게 적용이 됩니다.

 

 

이게 최대 장점이지만..현재는 반응형 웹으로 제작되면서 훨씬 더 쉽게 응용이 가능해 졌지요.

하지만 반응형 웹의 단점은 익스플로러나 크롬  타 브라우저모두 버전에 영향을 많이 받아요~

 

 

2013년도 자료를 정리하면서 공유하면 좋겠다 싶어서 이렇게 올린것이구요. 제가 공부해서 올린 자료라서 틀린 부분에 대한건 태클 받아드립니다.

완전 기술적으로 들어가면 제가 좀 딸리겠지요 하하하

 

도움이 되셨다면 공감 버튼 하나 누르시거나 댓글좀 달아주시고용...^_^ /