디지털컨버전스-플립커뮤니케이션즈: N-Screen을 고려한 UI 제작 가이드

반응형 웹디자인과 그리드 시스템 에 이어 그리드시스템을 설계, 디자인, 프론트앤드개발까지 적용 방법에 대해서 설명하겠습니다.

두번째, 그리드시스템 적용 방법

웹에서의 그리드시스템은 다양한 방법이 소개되고 있지만,
기획, 디자인, 개발과 통일된 그리드를 사용하기 위해 가장 빈도수가 높은 960그리드시스템의 12컬럼방식을 사용합니다.

960 Grid System
Column	12
	16
	24

설계단계의 그리드시스템 적용

어도비 에지 리플로우(Adobe Edge Reflow)

“사용자들이 HTML 콘텐츠 스타일링을 위한 표준인 CSS를 이용해 레이아웃과 시각적인 디자인을 작성할 수 있도록 돕는 응답 속도가 빠른 웹 설계 툴. 이 툴로 반응 웹 디자인이 훨씬 용이하고 빠르게 작업될 수 있을 것으로 기대된다.” 라고 소개되고 있습니다. 리플로우의 결과물은 HTML파일로 제작되어 설계된 화면이 웹에서 어떻게 구현될 지 확인 할 수 있습니다.

- 제작 영상 : 링크

디자인단계의 그리드시스템 적용

Adobe Edge Reflow를 통해 제작된 설계화면에서 최적의 화면을 선택해 디자인 작업을 합니다.

Nathan Smith의 960 그리드시스템

Nathan Smith의 사이트에 가시면 그리드시스템을 적용할 수 있는 다양한 템플릿을 다운로드 할 수 있습니다.
HTML파일은 물론이고, 스케치 할 수 있는 화면도 제공하고 있으며,
각 프로그램(Corel draw, Fireworks, Flash, illustrator, indesign, photoshop등)의 기본 그리드시스템 화면 제공하고 있습니다.

프론트앤드 개발단계의 그리드시스템 적용

Bootstrap framework

Bootstrap은 아래와 같이 소개 되고 있다.

“빠르고 쉬운 웹 개발을 위한 매끈하고 직관적이며 강력한 프레임워크.”

부트스트랩은

IE7 지원이 가능하며,
12컬럼 반응형그리드,
수십개의 구성요소(Component),
자바스크립트 플러그인,
폰트(Typography),
나만의 부트스트랩 만들기(Customizer)

등을 제공합니다.

12컬럼반응형그리드

- 기본 그리드 시스템(Default Grid System)
반응형 기능을 활성화 하지 않으면 940px의 레이아웃을 만듭니다.
반응형css를 추가하면 그리드는 화면 해상도에 따라 724px과 1170px 폭에 맞춥니다.
767px이하의 해상도에서는 컬럼은 유동적으로 되고 세로로 나열 됩니다.

- 유동 그리드 시스템(Fluid Grid System)
컬럼의 폭을 픽셀이 아닌 퍼센트를 사용합니다.
기본그리드시스템과 같은 반응형 기능이 있으며, 주요 화면 해상도와 기기에 대해 적절한 화면 비율을 제공합니다.

- 해상도 분기점(Resolution Break Point)과 컬럼(Column)
화면 해상도에 적절하게 대응할 수 있도록 여러 개의 미디어 쿼리를 지원합니다.

Label	Layout width	Column width	Gutter width (컬럼 사이 공간)
큰 화면	1200px 이상	70px	30px
기본	980px 이상	60px	20px
세로형태블릿 PC	768px 이상	42px	20px
스마트폰, 태블릿 PC	767px 이하	유동컬럼, 고정폭 아님
스마트폰	480px 이하	유동컬럼, 고정폭 아님

- 반응형 Class
화면 해상도에 따라 컨텐츠를 자유롭게 숨기거나 보여줄 수 있다.

Class	Phones 767px 이하	Tablets 979px 이상768 이하	Desktops Defult
. visible-phone	Visible	Hidden	Hidden
. visible-tablet	Hidden	Visible	Hidden
. visible-desktop	Hidden	Hidden	Visible
. hidden-phone	Hidden	Visible	Visible
. hidden-tablet	Visible	Hidden	Visible
. hidden-desktop	Visible	Visible	Hidden