본문으로 바로가기

Susy Framwork Overview (Susy 둘러보기)

category StyleSheet/Susy 2015. 12. 18. 08:11

Susy Overview


Sass 로 구축할 수 있는 프레임워크 중에 아름다운 그리드 시스템 레이아웃을 보다 쉽게 제공,지원해주는 Susy 프레임워크에 대해서 알아보도록 하겠습니다.


만약 누군가가 "그리드 시스템이 뭐지?!" 라고 한다면 먼저 그리드 시스템에 대한 내용을 살펴보시기 바랍니다.

Sass, Compass 를 한 번쯤 다루어 본 사람이라면 Sass 홈페이지에서 사스의 프레임워크로 Compass, bourbon 그리고 Susy 정도를 보았을 것입니다.


Susy[soo-zee] 는 다른 그리드시스템에 비해 상당히 쉬운 그리드시스템으로 정평이 나 있습니다.

Susy 를 사용하면 보다 쉽고 간결하게 웹사이트 레이아웃을 디자인(설계)할 수 있으며 더 나아가 반응형 웹 디자인 레이아웃도 스마트하게 구현할 수 있습니다.


다만, Susy 를 사용하기 위해서는 최소한 Sass 가 선행학습되어야 합니다. 


앞으로 Susy(수지)의 Documentaion 에서 발췌한 내용들 중에 이 정도는 알아야 할 필요성이 있는 내용들에 대해 다뤄보도록 하겠습니다.




Why Susy?

Susy 는 사용자가 모든 레이아웃을 복잡하지 않은 math(레이아웃 계산방식) 방식으로 쉽게 그리드 시스템을 만들 수 있도록 도와주는 유용한 도구입니다.

여러분 중에 Bootstrap 이나 Foundation 과 같은 전통적인 격자 프레임워크를 사용해 보았다면 당신은 이미 이러한 프레임워크가 넓이폭과 브레이크 포인트(중단점)를 고정시키면서 사용한다는 것을 알고 있을 것입니다.


게다가 사용자는 HTML 에 클래스를 추가해야만 레이아웃을 변경할 수 있습니다.


하지만 Susy 는 즉시 어떤 클래스를 타켓으로 그것을 그리드에 적용할 수 있습니다.


이 말만으로는 완전히 추상적이고 이해하기 어렵다는 것을 알고 있습니다. 

조금 이론적으로 접근하여 이에 대해 간단히 말하고자 하는 것입니다. 


Arnaud Guera(AG) 이 고안한 10개의 columns 을 사용한 복잡한 그리드 시스템과 같은 구축을 보다 쉽게 할 수 있도록 Susy 를 사용하는 것입니다.


AG가 고안한 그리드 시스템




Installing Susy 2 (Susy2 설치하기)

Susy 는 Sass 의 프레임워크이기 때문에 당연히 Sass 가 설치되어 있어야 합니다. 

만약에 Sass 가 설치되어 있지 않은 경우에 다음과 같은 명령어를 통해 설치할 수 있습니다. (자세한 Sass 설치까지는 다루지 않습니다.)



$ gem install sass $ gem install susy


Sass 와 Susy 가 이미 설치되어 있다면 gem 을 업데이트합니다.


$ sudo gem update



설치가 잘 되지 않는다면 install 명령어를 아래와 같이 실행해보세요.


$ sudo gem install susy $ sudo gem install sass $ sudo gem install sass $ sudo gem install susy



문제가 해결되지 않는다면 루비 RVM을 다시 설치해야 할 지도 모릅니다.


그리고 여러분의 프로젝트에서 Compass 와 함께 사용할 것이라면 다음의 명령어를 실행합니다.


$ compass install susy


Setting up Susy

Sass 와 Susy 모두가 잘 설치되었다면 Susy 를 설정하기 위해서 사용자의 config.rb(compass 구성파일)에 Susy 를 불러오도록 합니다.


ㆍ rb 파일의 네이밍은 반드시 config 로 할 필요는 없습니다. (구성파일이란 것을 명시적으로 보여주기 위한 암묵적인 약속)

ㆍ rb 파일을 compass 에서 $ compass config 란 명령어를 실행하면 default 구성파일인 compass.rb 파일이 생성됩니다.


# config.rb
require 'susy'


이제 사용자의 스타일시트에서 Susy 를 사용하기 위해 import 가 필요합니다.


# Sass/Scss
@import 'susy';





Susy Settings(전반적인 설정값 둘러보기)

Susy 는 내장된 전역적인 기본값의 리스트를 가지고 있습니다.

사용자는 코드를 통하여 기본값을 변경할 수 있으며 $susy 라는 전역 변수를 사용합니다.


// Susy 기본 구성방식
// () : map
$susy: (
key : value
);


위의 코드에서 괄호()는 map 으로써 compass 와 같은 Syntax 입니다. 


map 은 연관 배열과 유사합니다.  다시말해, 자바스크립트의 객체 리터럴 타입이라고 보셔도 무방합니다.

자바스크립트 객체 리터럴 :

var obj = { a : 100, b : true }

Susy Map :

$mapName = ( a: 100, b: true )

즉, 프로퍼티가 key(프로퍼티명) 와 value(프로퍼티값) 로 구성되어있습니다. 


앞으로 기본값들에 대해 더 살펴보겠지만 지금은 약간의 기본값만을 변경해 보겠습니다.


다음의 코드는 unit 단위를 rem(root em)으로 박스사이징을 보더박스로 설정하는 방법입니다.


$susy: (
global-box-sizing: border-box,
use-custom: (rem: true)
);


Susy 는 기본적으로 유동 그리드(fluid layout) 방식을 채택,사용하기 때문에 default Unit(기본 단위)은 %(percent)를 사용합니다.

그래서 Susy 를 정확한 중단점(breakpoints)을 가진 고정레이아웃으로 사용하려고 한다면 key 값을 static 으로 변경해주면 됩니다. 


앞으로 다루겠지만 responsive, fixed인 이 두 모드 사이에는 매우 중요한 차이점이 있음을 알게 될 것입니다.


프로젝트를 잘 구축하려면 또한 Normalize 나 Compass 를 포함해야 할 필요가 있으며 이런 부분은 초기 구성에 이루어져야 합니다.


Normalize 는 단계적 기능향상을 추구하는 프로젝트에서는 맞지 않을 수 있으니 초기화 CSS 는 선택적으로 사용하시길 바랍니다.

Compass Normalize 살펴보기



@import "normalize";
@import "compass";
@import "susy";

// Susy 기본 구성
$susy: (
global-box-sizing: border-box,
use-custom: (rem: true)
);

@include border-box-sizing;




AG 그리드 구현해보기(HTML & CSS For The AG Grid)

"백문이 불여일견"이듯이 위에서 살펴본 AG 그리드를 직접 구현보면서 Susy2 레시피를 살펴보도록 하겠습니다.

아래와 같이 HTML 마크업과 Scss 를 준비하도록 합니다.


See the Pen AG 그리드 테스트마크업본 by jaeheekim (@jaehee) on CodePen.


위와 같은 준비를 하셨다면 아래와 같은 그리드 레이아웃이 구성되어 있을 것입니다.


이와 같은 마크업 형태를 가지고 간단히 Susy2 를 사용해보겠습니다. 





Susy 에서 사용하는 Mixins & Functions

Susy 를 사용하는데 있어서 Susy 가 제공하는 세가지의 중요한 Mixins & Functions 이 있는데 이것을 이해하면 Susy 에서의 모든 작업을 수행하는데 수월할 수 있습니다.

이 글에서는 Susy2의 전반적인 그리드 시스템에 대한 숲을 보기 위해서 몇가지 믹스인 및 함수만 살펴본 후  AG 그리드를 테스트 해보는 시간을 가져보겠습니다.


container (@type Mixin)

사용자가 처음에 해야할 일은 Susy 의 매우 특별한 계산(Math)을 수행할 수 있는 container 를 정의하는 것입니다.


// The Container Mixin
@include container( length );

// Options : Options: <length> | auto


container mixin 은 자식 요소를 포함하는 컨테이너 요소의 max-width 값을 설정하고 옵션값으로 길이(e.g. 60em or 80%)를 선택적으로 사용할 수 있습니다.


이 옵션값인 인수가 없을 경우에는 Susy 는 max-width 를 Susy2 의 기본 값 100% 로 설정하게 됩니다.

그리고 Susy는 사용자가 정적 그리드(static & fixed Grid)를 사용하려고 한다면 사용자의  max-width 를 계산하기 위해 auto 로 사용하길 권고하고 있습니다.


container mixin 을 auto 로 설정하려면 길이 인수를 생략하면 됩니다.


// # Sass/Scss
#CustomContainer {
@include container;
}


/**
* Compiled CSS
*/
#CustomContainer {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
#CustomContainer:after {
content: " ";
display: block;
clear: both;
}


위의 컴파일된 CSS 에서 알 수 있듯이 container mixin 은 auto(인수없이 사용시) 로 설정시 margin 좌우측 값을 auto, max-width: 100%;  clearfix(플로트 해제)방식를 사용하여 스타일시트를 구성하게 됩니다.


다른 예로  사용자 임의로 body 요소가 포함된 문서의 내용을 화면 가운데로 배치하려면 아래와 같이 작성할 수 있습니다.


// # Sass/Scss
#wrapper {
@include container(940px);
}


위와 같이 적용하면 max-width: 940px; 좌우 margin 값을 auto 로 설정하게 되는 것을 보실 수 있습니다.


span (@type Mixin)

span mixin 은 Susy 에서 심장부 같은 역할을 하며 Susy2 는 이 믹스인을 그리드 작업시 매우 유연하게 사용할 수 있도록 설계되었습니다.

이 믹스인은 columns(컬럼수)를 정의하며, Susy2 그리드 시스템 컬럼의 총 개수는 기본값이 4입니다.


@include span( <width> [<wide / wider>] of <layout> [<last>] ); 


<width> 는 요소에서 사용될 columns 수를 의미합니다


[<wide / wider>] 는 1 또는 2이상의 gutters 를 포함한 column 의 넓이 폭을 녋힐 수 있습니다.


of 키워드 뒤에는 원하는 컬럼의 총 개수를 입력합니다.(세분화된 그리스 시스템을 사용할 수 있음.)


<layout> 은 Context 상에서 부모 컨테이너에 구성되어 있는 column 의 수를 나타냅니다.


<last> 옵션 인수는 아이템(요소)를 행에서 맨 가장자리로 위치하게 합니다.(E.g. float:right; margin-right:0; 을 설정하게 됨)



// * 이것은 9개의 Column 중에서 3 Column + gutter(margin 여백)을 가지면서
// * 해당 아이템(요소)를 맨 우측가장자리로 배치함을 의미합니다.
.some-selector {
@include span(3 wide of 9 last);
}


지금까지의 내용을 살펴보다 column 이나 gutter 와 같은 용어가 생소하다면 아래의 그림을 통해 짚고 넘어가 보시길 바랍니다.


이 그림은 앞으로 Susy 를 사용하는데 있어서 조그마한 도움을 줄 것입니다.





[참고]

Susy2 에서 gutter(거터)는 기본값으로 margin 의 좌우을 말합니다.

하지만, gutter-position 을 사용하여 margin 을 padding 으로 변경도 가능하기 때문에 반드시 거터가 margin만을 설정하는 것이 아님에 유의해주세요.



span (@type Function)

span 함수는 span 믹스인과 유사하고 엘리먼트의 넓이를 설정할 수 있고 margins 또는 paddings 와 관련된 믹스인을 사용할 필요없이 span 함수를 사용하여 width, margin, padding 을 셋팅할 수 있습니다.


// 9개의 컬럼 중 3개 컬럼을 width 값으로 설정
.some-selector {
width: span(3 of 9);
}


// 9개의 컬럼 중 1개 컬럼을 padding-left 로 설정
.some-selector {
padding-left: span(1 of 9);
}



gutter (@type Function)

이 거터 함수는 오직 한개의 인수만을 사용합니다.


// 9개 컬럼 레이아웃에서 1개의 거터폭과 동일한 마진을 출력
.some-selector {
margin-right: gutter(9);
}


지금까지 살펴 본 믹스인과 함수를 사용하여 AG 그리드를 테스트하는 시간을 가져보겠습니다.

이 외에 다루지 않은 것은 추후 살펴보겠습니다.





AG Grid with Susy2

위에서 작성한 레이아웃과 스타일시트를 기반으로 Susy2 에서 첫번째 해야할 일은 container 를 설정하는 것입니다.


# Scss
.container {
@include container;

// 콤파스의 기본 clearfix 함수이며,
// 사용잔는 다른 clearfix 메소드를 사용할 수 있음
@include clearfix;

}

# CSS
.container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
overflow: hidden;
*zoom: 1;
}
.container:after {
content: " ";
display: block;
clear: both;
}


AG 마크업의 ag1, ag2, ag3 가 형제 레벨로 놓여 있습니다.


여기서는 전체 컬럼수 10개를 사용하면서 ag1, ag3 에 10개 컬럼 중 2개만을 사용하고 ag2 는 나머지 컬럼수인 6개를 사용하도록 하겠습니다.


그리고 ag2 요소는 ag4 ~ ag10 까지의 중첩된 엘리먼트를 고려하여 clearfix 를 적용하도록 합니다


.ag1 {
@include span(2 of 10);
}

.ag2 {
@include span(6 of 10);
@include clearfix;
}

// 마지막 요소인 .ag3 last 인수를 넘겨
// 거터(margin-right)를 제거하고 float:right 를 설정함
.ag3 {
@include span(2 of 10 last);
}


ag2 에 중첩된 요소인 ag3, ag4를 각 3개의 컬럼을 사용하여 레이아웃을 설정해 봅니다.


.ag4 {
@include span(3 of 6);
}

.ag5 {
@include span(3 of 6 last);
}


// ag4 ag5 는 같은 컬럼을 사용하려고 함으로
// 아래와 같이 작성할 수도 있습니다.
// last 믹스인을 이용
.ag4,.ag5 {
@include span(3 of 6);
}
.ag5 {
@include last;
}


이렇게 되면 ag6 는 2개의 컬럼(플로트로 인해 ag4 와 ag5)을 가지고 되고 ag7는 중첩된 요소에서 마지막 아이템에 해당합니다.


지금까지 위와 같이 작성했다면 아래와 같은 레이아웃 형태를 가지게 됩니다.



최종 AG 그리드 레이아웃을 설정하기 위해 아래와 같이 작성합니다.


.ag6 {
@include span(2 of 6);
}

.ag7 {
@include span(4 of 6 last);
@include clearfix;
}

.ag8 {
@include span(2 of 4);
}

.ag9 {
@include span(2 of 4 last);
}

.ag10 {
clear: both;
// span 믹스인에 full 키워드를 사용하면 width 100% 로 설정하게 됨
@include span(full);
}


ag6 의 컬럼수는 ag2를 6개 컬럼을 사용했다고 해서 반드시 6을 사용해야 하는 것은 아닙니다. 

로컬 레이아웃을 기준으로 작성할 수 있다는 것에 유념해주세요. 

ㆍag6, ag7 를 아래와 같이 넓이 폭을 사용자 임의로 작성할 수 있습니다.

E.g) span(4 of 12), span(8 of 12)

이렇게 되면 컬럼수가 12개로 더 잘게 쪼개어진 상태에서 컬럼을 사용하게 될 것입니다.


이상 작성이 끝났다면 처음에 소개드렸던 AG 그리드와 같은 모습을 보일 것입니다.


지금까지 Susy2 에 관해 껍질(?)만 살짝 벗겨 보았네요.. 다만 Susy2 를 시작하기에 숲을 보실 필요는 있다고 생각됩니다.

다음 아티클부터는 Susy2 에 대한 docs 에 관한 내용을 살펴보도록 하겠습니다.


참고로 모든 Docs 를 다루는 것은 아니니 항상 Susy2의 레퍼런스를 참조하세요



Jaehee's WebClub


'StyleSheet > Susy' 카테고리의 다른 글

Susy Settings 기본 설정 #2  (0) 2016.02.10
Susy Settings 기본 설정 #1  (0) 2015.12.18