Transcript 그리드 시스템이란?
디자인실 이효식 그리드 시스템이란? ‘주어진 공간 안에 각 디자인 요소들을 어떻게 배열해야 하는가? 그리드(Grid)는 화면 요소를 배치하기 위한 수평선(Horizontal lines)과 수직선(Vertical lines)의 패턴을 의미하며, 화면 요소에 시각적 순서를 부여하기 위한 일종의 가이드라인 역할을 수행한다. 이러한 그리드를 체계적으로 설계하기 위해 필요한 것이 바로 그리드 시스템이다. 그리드 시스템은 디자인의 레이아웃 문제를 해결할 수 있는 적절한 도구라 할 수 있다. 그리드 시스템이란? 그리드 시스템의 역할 1.그리드 시스템은 레이아웃의 개념을 미리 제공한다. :실제로 작업을 시작하기 전에 디자인을 몇 가지 개선 하는데 도움이 될 수 있다. 2.어떤 그리드와 결합하느냐에 따라 디자인이 더 매력적으로 보일 수 있다. 3.그리드 시스템으로 좋은 구조를 만들 수 있다. 4.그리드 시스템은 편집한 디자인의 위치 요소에 대한 안내 역할을 한다. 5.좋은 그리드 시스템은 가독성과 주목성을 높일 수 있다. 그리드 시스템으로 작업한다는 것은 보편적인 확실성의 법칙에 준한다는 것을 의미한다. 틀이 잡혀 있는 그리드는 디자인 과정을 보다 명료하고 간단하게 해주며 디자인 작업을 신속하고 편리하게 해 준다. 즉, 그리드 시스템은 디자인 방법의 하나로 보다 객관적이고 합리적으로 작업할 수 있도록 해 주는 보조수단이며, 비주얼 레이아웃에 있어 시각적 질 서와 일관성을 유지시켜 주는 것이라 할 수 있다. 그리드 시스템의 종류 • • • • • • 960 Grid System 978 Grid System 970 Grid System 980 Grid System 1080 Grid System 1200 Grid System • • Fluid Grid System Responsive Grid System 960 Grid System 대표적인 그리드 시스템. http://960.gs/ 978 Grid System 실제 컨텐츠 영역이 940px 인 960 Grid System을 보완하기 위함 http://978.gs/demo/ 기타 고정형 그리드 970 Grid System http://uxmovement.com/wireframes/wireframe-effectively-on-the-new-improved-970grid-system/ 980 Grid System http://robkellas.com/980-grid-system/ 1080 Grid System http://www.1080.gs/ 1200 grid System http://1200px.com/ 유동형 그리드 시스템 Fluid Grid System 컬럼의 폭을 픽셀이 아닌 퍼센트를 사용한다. 주요 화면 해상도와 기기에 대해 적절한 화면 비율을 제공한다. 각 컬럼을 비율로 주게 되면, 폭이 아주 좁은 모바일 웹에서는 그다지 효과가 없게 됩니 다 Fluid960gs 반응형 그리드 시스템 responsive grid system 유동형 그리드 시스템의 한계를 극복하기 위해서, CSS3 미디어쿼리와 연동하여, 특정 경계치 내에서 정해진 (유동형) 그리드 시스템을 사용한다. http://www.responsivegridsystem.com/ http://www.lukew.com/ff/entry.asp?1514 http://pr.hyundai.com http://alldic.daum.net/ http://skinnyties.com/ http://www.time.com/time/ 반응형 그리드 시스템 responsive grid system Multi-Device Layout Patterns 1. Mostly Fluid 가장 인기있고 심플한 패턴으로, 유동형 그리드, 유동형 이미지 의존하 며, 데스크 탑에서 좌우 여백과 함께 여러 컬럼으로 배치되고, 화면 폭이 작아지면 컬럼을 수직로 배열한다. Princess Elisabeth Antarctica Trent Walton 반응형 그리드 시스템 responsive grid system Multi-Device Layout Patterns 2. Column Drop 다양한 컬럼 레이아웃과, 일관된 레이아웃으로 최소 크기의 컬 럼 폭 유지하고, 화면 폭이 작아지면 중앙 컬럼을 중심으로 컬럼을 수직 배 열한다. Owltastic Festival de Saintes 반응형 그리드 시스템 responsive grid system Multi-Device Layout Patterns 3. Layout Shifter 크게 대, 중, 소로 나누어 다른 레이아웃을 사용하 며, 가장 혁신적인 디자인이 많이 일어나는 패턴 으로, 본질적으로 많은 작업과 높은 기술을 필요 로 하기 때문에, 앞의 두 패턴보단 인기가 적다. Performance Marketing Awards Food Sense 반응형 그리드 시스템 responsive grid system Multi-Device Layout Patterns 4. Tiny Tweaks 대부분 하나의 컬럼에서 몇 가지 요소(이미지, 글 꼴 등)로 구성된다. 멀티 디바이스 적용은 글꼴 크기와 이미지 크기조 정으로 이루어 진다. Design made in Germany Issue 5 Future Friendly 반응형 그리드 시스템 responsive grid system Multi-Device Layout Patterns 5. Off Canvas 위 패턴들은 작은 화면에서 수직 배열을 한다는 공통점이 있다. Off Canvas 패턴은 새로운 트랜드이며, 보여지지 않는 스크린(Off Screen)을 활용하며, 네비게이션을 숨기는 레이아웃을 가장 많이 사용 한다. 사용자 액션에 의해 화면 공간을 제어한다. 참고 Reasons Why Grids are Used for Website Layout http://naldzgraphics.net/design-2/reasons-why-grids-are-used-for-website-layout/ Multi-Device Layout Patterns http://www.lukew.com/ff/entry.asp?1514 960 Grid System vs 978 http://www.prosoxi.com/2012/02/19/960-grid-system-vs-978/ gridpak http://gridpak.com/ the grid system http://www.thegridsystem.org/