웹 디자인 기초 - 그리드 시스템

 

안녕하세요

웹디자인 기초 내용을 정리하려고 하는데요

웹 디자인은 편집 디자인에 기초를 두고 있습니다.

 

그리드의 기본 요소는 4가지가 있습니다. 컨테이너(콘텐츠 폭), 단의 수, 단과 단 사이인 거터, 좌우 마진 입니다. 컬럼 값의 너비가 소수로 나온다고 하여도 퍼블리싱 단계에서 조정하는 영역이므로 디자인상으로 문제가 되지 않습니다.

 

디자인상에서는 시각적으로 영역을 설정하지만 퍼블리싱에서 수치를 정확하게 사용해야 합니다. 고정된 값으로는 px을 주로 쓰지만, 가변 값으로는 %,em,rem을 쓰게 됩니다. 

 

전체적인 폭은 요구하는 디바이스에 따라 달라지는데 1920,1600,1440,1280,1080,1024,960,768로사용됩니다. 

하나의 도메인으로 반응형을 제작하기에는 12단이 최적화 되어 있습니다. 디자인과 개발에 최적화 할 수 있는 형태입니다.

 

거터값은 일반적으로 30,24,20을 가장 많이 사용합니다. 개발과정에서는 이러한 값을 통일해야 효율성이 올라갑니다. 

컬럼과 거터값을 정확하게 계산하기 좋은 사이트입니다.

http://gridcalculator.dk/

 

위의 스펙은 PC부터 태블릿에 대응할 수 있는 해상도인데요, 모바일에서는 기업 혹은 작업자마다 다르게 설정할 수 있습니다. 저의 기준은 IOS 1배인 IPhone 14에 맞춘 390px을 기준으로 제작합니다. 제작 상황에 따라서 크게 작업해서 줄이는 경우도 있고 작게 작업해서 키우는 경우도 있습니다.