3. 반응형 그리드 > 퍼블리싱강좌

퍼블리싱강좌

3. 반응형 그리드 정보

반응형웹 3. 반응형 그리드

본문

목차

  1. 용어정리
    1. 유동형
    2. 반응형
    3. 유연한/적응형
  2. 그리드
    1. 그리드 시스템
    2. 유동형 그리드
    3. 유동형 그리드 시스템
    4. 탄력있는 홈
    5. 반응형 (유동) 그리드 시스템
    6. 반응형 not 유동형 그리드 시스템
    7. 일반화된 반응형 그리드 시스템
    8. 시멘틱 그리드 시스템
    9. CSS 전처리 언어
  3. 글을 닫으며
  4. 참고문헌/자료

용어정리

반응형 웹에 관련한 기법/용어가 조금 헷갈릴 수 있고, 특히 영어단어와 한글번역에 있어서 합의가 이루어지지 않았거나 그 과정에 있기에, 본 강좌에서 사용하는 한글번역에 대해서 미리 정리하고자 합니다.

여러 기법/용어 앞에 붙는 대표적인 형용사로, 유동형 (fluid), 반응형 (responsive), 유연한 (flexible), 적응형 (adaptive) 등이 있습니다.

유동형 (fluid)

이번 강의 제목인 유동형 그리드 (fluid grids)를 비롯해서 유동형 이미지 (fluid images) 등 EM 등에 의해서 반응형 웹 디자인이 제안될때 주로 사용되는 단어가 ‘fluid’ 입니다. 영단의 원래 뜻은 ‘물흐르듯이’ 라는 뜻이고, 물리학적 정의에 따르면 ‘주위의 압력에 모양이 쉽게 변하는’ 이라는 뜻이랍니다 (출처). 정말 반응형 웹에 가장 적합한 단어가 아닌가 합니다. 이를 한자어로 바뀌면서 ‘유동(流動)’으로 사용하고 있습니다. 개인적으로는 fluid가 가지고 있는 수동적인 특성이 잘 나타나지 않는 것 같아서 아쉽습니다.

실제로 유동형이 사용될때는, 주로 웹 컴포넌트의 폭을 px 대신 em과 %를 사용하는 것입니다.

반응형 (responsive)

반응형이 붙는 것은, CSS3 미디어 쿼리를 이용하여 폭에 따라서 다른 스타일을 만드는 것이라 볼 수 있습니다.

그 사용용도 측면에서, ‘유동형 ~’ 라고 불리는 기법들은, 반응형 웹 이전부터 개별적으로 사용되고 있었다면, 반응형 웹 디자인의 일부로 자리잡은 기법/개념들은 ‘반응형 ~’ 이라고 부르게 되는것  같습니다.

대표적으로 EM의 유동형 이미지 (fluid images)가 이미지의 최대폭을 100%로 하기 위한것 이라면, 이를 포함하고 거기에 모바일에서 용량이 작은 이미지를 사용하기 위한 여러 기법을 통칭하는 단어로는 반응형 이미지 (responsive images)를 사용하는것 같습니다.

유연한 (flexible)/적응형 (adaptive)

위 단어들에 비해서 상대적으로 적게 사용되는 단어이고, 같은 뜻으로 통용되는 것도 아닌것 같습니다. adaptation와 responsiveness 를 혼용하거나 대립되는 개념으로 보는 경우도 있고 하여, 본 강좌에서는 가능한한 반응형 웹의 기법/개념으로는 사용하지 않으려 합니다.

그리드 (grid)

원래의 그리드 시스템은, 출판분야에서는 아주 오래전 부터 사용된 개념으로 ‘황금분할’이나 ‘Villiards Diagram’ 처럼 기하학적 미학을 바탕으로 제안되어 중세시대부터 사용되었습니다. (출처: 위키피디아).

아래의 왼쪽 그림은, Villiards Diagram이 (출판) 페이지 구성에 적용된 한 예를 보여주고 있습니다. 근대사회로 넘어와서는 출판 기술이 발달하면서, 보다 정형화되고 단순화된, 그리고 타이포그래피 (typography)를 포함한 개념/기법들이 제안되었고, 그중 획을 그은 출판물로 ‘Die Neue Typographie (1928)’가 있습니다. 아래 오른쪽 그림에서보듯이, 적절한 폰트의 사용, 전체적인 레이아웃 등, 현재의 웹 디자인과 비교해도 손색이 없을 정도입니다.

(Die Neue Typographie의 저자인 Jan Tschichold이 태어난 곳이기도 하고,  그외에서 많은 출판분야의 혁신이 일어났던 Leipzig에서 살고 있음을 자랑스럽게 생각하고 있습니다. :)

Villiards Diagram: 출처
Die Neue Typographie (Jan Tschichold, 1928): 출처

사실 초창기 웹 디자인을, 기존 출판 디자인 전문가들이 담당하고, 출판 분야의 경험을 웹으로 가져오려고 했다는 것을 감안하면 (예: css-tricks의 저자 Chris Coyer), 웹 디자인에서 그리드 시스템을 사용하는 것도 크게 놀랍지는 않습니다.

그리드 시스템 (grid system)

(웹 디자인에서) 정의
그리드 (시스템)이란, 화면의 폭을 몇개의 컬럼으로 나누고, 그중 일부 컬럼을 묶어서 하나의 class로 간단히 지정하여 사용하면, 해당 컬럼의 폭과 다른 (묶음) 컬럼과의 간격도 일정하게 유지되는 시스템입니다.

대표적인 그리드 시스템으로 960 Grid System을 들 수 있습니다. 960 Grid System 중 12 컬럼 그리드 시스템의 실제 컬럼폭과 그에 해당하는 CSS class들을 그림으로 표현하면 아래와 같습니다 (출처).

960 Grid System의 12컬럼 그리드 실제 폭: 출처

960 Grid System의 12컬럼 그리드 class 꼬리말: 출처

그림에서 보듯이, 실제 픽셀크기로 나누어진 오른쪽 (또는 위) 화면분할을, 왼쪽(또는 아래)처럼 CSS class (예: grid_1)들로 정의해서 사용하기 쉽게 해줍니다.

다음은 960 Grid System을 실제 레이아웃에 적용한 예와 코드입니다.

logo

text column

text column

big box

코드에서 보시듯이, logo, text 컬럼들 처럼 한 줄에 들어가야 하는 경우에도 별도의 wrap div나 clear:both 없이 다음 줄의 grid_* 클래스 div 를 연속으로 사용하는 것을 알 수 있습니다.

유동형 그리드 (fluid grids)

EM의 ALAP (A List A Part) 글 Fluid Grids 에서 설명한대로, 기존의 고정된 폭의 그리드가 아니라, 가로 폭에 따라서 그 크기가 변하는 em이나 %를 이용하는 방법입니다. 위 ‘그리드’가 일반적으로 미리 정해진 시스템 (즉, CSS 화일) 을 뜻한다면, 유동형 그리드는, 개념이나 기법을 뜻합니다.

유동형 그리드 시스템 (fluid grid system)

종종 뒤의 시스템이 빠진채 사용되어 EM의 유동형 그리드와 혼동되기 쉬우나, 그 의미는 CSS 화일 처럼 하나의 시스템을 뜻합니다.

이전 그리드 시스템은, 화면폭이 픽셀 (예를 들어, 위 960 Grid system의 경우 960px)로 정해져 있기에, 화면폭이 더 크거나 작은 화면에서는 적절하게 표현되지 않을 수 있습니다. 그렇기에 유동형 그리드 시스템에서는, 고정된 폭의 html 각 요소를 픽셀이 아닌 em 이나 %로 바꾸어 사용합니다.

위 960 Grid system을 유동형으로 변경한 fluid960gs가 그 대표적인 예입니다.

  1. 각 그리드들 (예: grid_1, grid_2, ... , grid_16)의 좌우 margin을 기존의 10px 에서 1%로 바꾸고,
  2. 각각 크기의 grid_* 들에게도 적절한 %를 주었습니다. (예: .container_12 .grid_4 { width:300px; } ⇒ .container_12 .grid_3 { width:23%;} )

하지만 이렇게 각 컬럼을 비율로 주게 되면, 폭이 아주 좁은 모바일 웹에서는 그다지 효과가 없게 됩니다.

탄력있는 홈 (elastic gutters)

fluid960gs 와 같은 유동형 그리드 시스템의 경우, 두 컬럼을 가로지르는 '홈 (gutter)'이 %로 잡혀있게 되어, 화면폭이 많이 줄어드는 경우, 홈이 가로폭의 비율에 맞게 줄어듭니다. 하지만, 화면의 크기가 아주 작아지거나 아주 커지는 경우, 인접한 두 컬럼이 거의 맞붙어 보이거나 너무 떨어지게 되는 경우가 발생합니다.

이러한 문제점을 해결하기 위해서, GGS는, 홈을 각 컬럼으로 넣어버리고 컬럼의 양쪽 끝에 padding을 em 값으로 줌으로써 해결하려고 합니다. 즉, 해당 페이지의 기본 폰트 크기의 배수 (em)로 홈의 간격을 줌으로써, 화면 크기에 따른 폰트의 크기와 함께, 홈이 가로폭도 같은 비율로 조정하는 것입니다.

.wrapper {
   width: 25%;
   // Assuming gutter width = 1.5em */
   padding: 0 0.75em;
}

GSS는 이외에도, 화면 경계치마다 적절하게 폰트의 크기 (h* 포함)와 베이스라인을 조정하는 기준등을 같이 제공합니다.

반응형 (유동) 그리드 시스템 (responsive grid system)

이러한 유동형 그리드 시스템의 한계를 극복하기 위해서, CSS3 미디어쿼리와 연동하여, 특정 경계치내에서 정해진 (유동형) 그리드 시스템을 사용하는, 이른바 '반응형 그리드 시스템'이 등장하게 됩니다.

960 Grid system의 (간단한) 반응형 버전으로, Foldy960의 경우, 보통의 경우 3 컬럼을 제공하고

.grid_1 {width:31.333%} 
.grid_2 {width:64.667%} 
.grid_3 {width:98%}

화면 크기가 640보다 작거나 같을때는, 이 세 class들을 한 컬럼으로 만듭니다.

@media screen and (max-width: 640px) {
 .grid_1,.grid_2,.grid_3{
   float: none;
   width:100%;
   margin:0 0 2.5em;
}

작동하는 예는 여기를 참조하세요.

반응형 not 유동형 그리드 시스템

반응형 그리드 시스템 중에 유동형이 아닌, 즉 컬럼의 폭을 %로 잡지 않은 경우도 있습니다. 대표적으로 SimpleGrid의 경우, 네개의 경계치 ( ~ 720, 720 ~ 985, 985 ~ 1235, 1235 ~)로 나누고, 해당 경계치 안에서는 고정된 컬럼 폭을 사용합니다. 참고로 SimpleGrid 는 4컬럼과 6컬럼 시스템을 제공하고, 각 컬럼은 id로 위치가 결정됩니다. (예: slot-0과 slot-4는 6컬럼 시스템의 각각 첫번째와 5번째 컬럼를, 그리고 slot-6 ~ slot-9는 4컬럼 시스템의 컬럼 id들입니다. 또한 이러한 컬럼들은 서로 통합, 중첩될 수 있고 다른 컬럼 시스템들끼리도 혼용됩니다. 자세한 내용은 홈페이지 참조)

아래는 4컬럼 시스템의 각 화면 크기별 컬럼 가로폭 입니다.

@media screen and (min-width: 1236px) {
 .slot-6, .slot-7, .slot-8, .slot-9 {
   width: 279px;
 }
}
@media screen and (min-width: 986px) {
 .slot-6, .slot-7, .slot-8, .slot-9 {
   width: 219px;
 }
}
@media screen and (min-width: 720px) {
 .slot-6, .slot-7, .slot-8, .slot-9 {
   width: 160px;
 }
}

일반화된 반응형 그리드 시스템

반응형 그리드 시스템의 경우, 대부분 미리 정해진 화면 경계치를 사용하는 반면, Gridpak의 경우는 자신이 원하는 경계치를 설정하고 해당 경계치에 맞는 유동형 그리드를 독자적으로 정의할 수 있는 웹 인터페이스를 제공합니다. 이렇게 정의된 반응형 그리드는 CSS나 LESS 등 원하는 포멧으로 다운받아서 사용할 수 있습니다.

그림에서 보듯이, 특정 경계치 용 컬럼수 뿐만아니라, GSS에서 사용한 padding과 gutter를 모두 지정할 수 있도록 하여 보다 유연하게 원하는 그리드 시스템을 만들 수 있습니다.

시멘틱 그리드 시스템 (semantic grid system)

마지막으로 언급할 가치가 있는 그리드 시스템으로, 이른바 시멘틱 그리드 시스템인 http://semantic.gs/이 있습니다. HTML5 섹션관련 태그들을 그리드 시스템에 사용하여, 시멘틱과 레이아웃을 통합한 접근 방법이라고 볼 수 있습니다. LESS/SASS/Stylus 형태로 제공되는 그리드 시스템은, 고정형, 유동형, 반응형 레이아웃이 있습니다.

아래 코드는 LESS로 만들어진 반응형 레이아웃의 일부입니다.

...
...
@column-width: 60; @gutter-width: 20; @columns: 12; @gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px; .column(@x,@columns:@columns) { display: inline; float: left; width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width); margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width); } header { .column(12); } article { .column(9); } aside { .column(3); } @media (max-device-width: 960px) { article { .column(12); } aside { .column(12); } }

CSS 전처리 언어

LESS, SASS 등의 CSS 전처리 언어들은, 특히 반응형 웹 디자인처럼 복잡한 규칙이 적용되는 스타일을 지정하는데에 많은 도움을 줍니다. 이에 관해서는, 별도의 강좌에서 더 자세하게 다뤄지기를 바라고, 이 강좌에서는 간단히 이러한 전처리 언어들의 특징을 정리해 보겠습니다.

변수처리

CSS 내에서 변수를 사용할 수 있습니다.

LESS 문법

@width: 100px;

header { width: @width; }

SASS 문법

$width: 100px;

header { width: $width; }

처리된 CSS

header { width: 100px; }

믹신 (Mixins)

일종의 상속/함수 개념으로, 특정 class를 부모class 또는 함수class 처럼 정의해서 재사용하는 것입니다. 아래의 경우 .rwd_width 에 width 속성을 정의하고 그 값은 .rwd_width class를 불러올때 정의할 수 있습니다.

LESS 문법

.rwd_width (@wd: 100px) { width: @wd; }

header { .rwd_width; }

article { .rwd_width(200px); }

SASS 문법

@mixin rwd_width ($dist) { width: $dist; }

header { @include rwd_width(100px); }

article { @include rwd_width(200px); }

처리된 CSS

header { width: 100px; }

article { width: 200px; }

중첩 규칙 (Nested rules)

가장 많이 사용되는 문법으로, 중첩된 html 요소/클래스 의 스타일을 정의할 때 유용합니다.

LESS 문법

header {

h1 { font-size: 1.4em; }

h2 { font-size: 1.2em; } }

SASS 문법

동일

처리된 CSS

header h1 { font-size: 1.4em; }

header h2 { font-size: 1.2em; }

이러한 언어들은 전처리 컴파일러를 통해서 CSS로 만들수 있기도 하지만, LESS의 경우 less.js를 이용해서 LESS 화일을 그대로 사용할 수 있기도 합니다.

두 언어의 장단점을 비교한 CSS-Tricks의 Chris Coyier 글도 있습니다.

글을 닫으며

사실 국내에서는 그리드 시스템을 많이 사용하지 않는 것 같습니다. 아마도 table로 레이아웃을 구성하던 관행 때문일것 같습니다. 하지만, 반응형 웹을 하기 위해서, 아니 웹 표준을 따르는 코딩을 한다면, table을 원래 목적이외에 사용하는 것을 피해야 할것입니다. 그리고, 이번 강좌와 같은 그리드 시스템을 도입하는 것이 일을 훨씬 간단히 하면서도 일관된 레이아웃을 만드는 데에 도움이 될것 같다고 생각했습니다.

참고문헌/자료

  1. Chirs Coyer, Print Design to Web Design: Comparative Analogies, css-tricks.com, 2009
  2. 960 Grid System : 일반적 그리드 시스템
  3. The 960 Grid System Made Easy, Six Revisions, 2010
  4. Ethan Marcotte, Fluid Grids, A List A Part, 2009
  5. Fluid 960 Grid System : 유동형 그리드 시스템
  6. Golden Grid System : 탄력있는 홈을 이용하는 그리드 시스템
  7. Foldy960 : 반응형 유동 그리드 시스템
  8. SimpleGrid : 반응형 not 유동형 그리드 시스템
  9. Gridpak : 일반화된 반응형 그리드 시스템
  10. The Semantic Grid System : 시멘틴 그리드 시스템
  11. Chris Coyer, Sass vs. LESS, css-tricks.com, 2012
추천
9

댓글 23개

너무 좋은 내용입니다.
많은 도움이 되었습니다.
요즘 HTML5와 반응협 웹에 관심을 가지고 일반 홈페이지를 만들어 이것을 모바일에서도 그대로 사용할 수 있도록 공부해 보고자 합니다.
서점을 다니면 좋은책을 (이해가는) 찾는데 힘드네요.
뭘 봐야 할지..
html5를 하려면 css를 공부해야겠죠 ?
jquery도 하고 싶은데.... 두개를 가이드해 줄 책을 고르기가 영 힘듭니다.
혹 분야에 써 먹기 좋은 책 있으시면 쪽지나 메일 부탁 드립니다.
html5와 반응형 웹은, 딱히 관련이 있지는 않습니다. ^^;
굳이 연결점을 찾자면, 오늘 글에 올라온 시멘틱 그리드 시스템 정도랄까요?
아니면 html5의 시멘틱 태그를 이용한 반응형 레이아웃?

물론 html5의 일부로 여겨지는 css3의 미디어 쿼리를 기반으로 반응형 웹이 작동하므로 관련이 없다고 보기도 힘들겠네요. ^^;

지운아빠님에게 html5와 jquery 강좌 유치를 부탁해보세요. ^^*
네 감사합니다.
덕분에 좋은 강좌 잘 듣고 배우고 있습니다.
그렇군요.. html5와 반응협 웹은 별개 개념으로 봐야겠군요.
html5이란 결국 웹의 태그를 제대로 사용하는것이란 건가요 . 그럼.
반응형 웹은 html5가 아니더라도 구현이 가능한거구요..
그렇게 이해하면 되나요 ?
음.. css3를 html5의 일부로 본다면, 반응형 웹을 하기 위해서 html5 가 필요하겠네요. ^^
그렇지 않고, html5의 새로운 tag이나 api 등을 말씀하시는 거라면,
반응형 웹과는 상관이 없습니다.

html5를 배우신다는 것은, 음.. 간단하게는 '새로운 태그들과 api들의 사용법을 배우는 것'이라고 생각합니다.
예를 들어, html4와 html5의 다른 점을 얘기하는 다음 글을 읽어보시는 것도 좋겠죠.
http://www.sqler.com/378506
헐....이거 책으로도 내도 되겠어요? 
제가 지금은 집중할 여건이 안되서 대략 둘러보고 가는데 정말 도움이 많이 될 듯합니다.  좋은 취지에서 선뜻 내어 놓은 강좌이고 거기에 내용또한 알차서 크게 사랑받겠어요.  감사드립니다.
디자이너가 그리드를 배열 체계로 활용한다는 것은 그가 구조적이고 미래 지향적인 관점에서 작품에 임하고 있음을 알려 줄뿐더러, 그 사실 자체가 디자이너의 정신 자세를 표현한다. - 요제프 뮐러 브로크만
개빈 앰브로즈와 폴 해리스가 쓴 'LAYOUT' 이라는 책에서 발췌했습니다.
그러게요..
저도 처음에는, 그리드가 코딩하기 편하려고 쓰는 것이라 생각했는데,
배경을 알고 나서는, 미학적인 고려가 중심이었다는 점에 많은 생각을 하게 되더군요..
일하면서 디자이너분들과 그리드 잡는 일이 정말 힘들엇는데.. 감각적인 디자인과는 좀 멀어질수도 있겟군요..
좋은 내용 항상 감사합니다. less 사용법등은 특히!! (__) 감사합니당
그리드 자체에만 집중하면 감각적인 디자인과는 멀어질 수도 있습니다만, 그리드를 배제하고는 감각적이면서 논리적인 문서를 만들 순 없을 것 같습니다.
전체 283
퍼블리싱강좌 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT