Materializecss 적용후기

SQLGate.com을 만들면서 Materializecss를 사용한 소감 및 이런저런 이야기들, 프론트앤드 개발자의 넋두리.

계속해서 신제품 출시이벤트 일정이 지연되고 있었다.

충분히 만족할만한 제품의 성능과 테스트가 부족하다는 우리 ‘벤자민’의 욕심을 꺾을 수 없었다.

일본전시회에서 제품소개 영상을 보던 일본인들은 연신 “スゴイ(스고이)"를 외쳐 주었지만, 자신이 10여 년간 만들어온 제품에 스스로 만족하는 개발자란 아마도 없을 것 같다.

그리고 그동안 SQLGate를 사랑해준 개발자들에게도 완벽하지 않은 제품을 일정이 급하다는 이유로 서둘러 배포 할 수는 없는 일이라 생각되어 우리는 모두 출시이벤트 지연에 동의했다. (그렇지만 미루는 건 힘들어)

원래 계획은 이랬다. 5월 말에 SQLGate 8.0을 배포 하고 새로운 사이트(워드 프레스로 만든)를 ‘베짱이디자이너'에게 디자인과 퍼블리싱을 맡긴다. 그 후1주일 안에 퍼블리싱된 php코드를 조금 수정해서 새로운 sqlgate.com을 오픈한다. (그리고 예정대로 5월말 전에 우리의 베짱이는 디자인과 퍼블리싱을 완료했다.)

개인적으로 회사의 운영문제를 해결하기 위해 서둘러 오픈해야 한다는 생각이 강했다. 돈이 급했던 건 아니지만 그렇다고 여유롭지도 않았다. 그리고 무엇보다 오픈을 바로 앞에 두고 질질 끄는 것 같은 상황을 피하고 싶었다.

마치 산이 앞에 있으므로 오른다는 심정으로 애초에 세운 계획대로 무조건 실행해야만 한다고 생각한 것 같다. (하지만 마음 한구석에는 내 사이트를 워드프레스로 만든다는 사실이 좋지는 않았다.)

의사결정

우리는 회의를 반복해야 했다. 힘들더라도 우리가 모두 만족할 수 있는 결과를 만들어 낼 것이냐 아니면 시간과 타협할 것이냐? 반나절 이상 회의를 계속했고 완전히 새로 만드는 것으로 의견이 모였다. (베짱이 디자이너가 만들어둔 WP 퍼블리싱 작업물은 모두 무용지물이 되었지만, 우리 베짱이 디자이너에게 너무 미안한 일이었지만…)

그리고 오픈일정이 결정되었다. 6월 26일!! 웹사이트에 관련된 작업은 단 한 개도 준비된 게 없는 상황이 되었지만. 더 미루는 것은 상상하기 싫었다.

Materializecss

남은 시간은 10여일 정도 백엔드와 연계하여 기능구현을 마저 해야 하니까 주요 페이지는 보다 먼저 준비가 되어 있어야만 한다. 시간은 없지만 대충 만들고 싶지 않았다.

기존에 여러 가지 웹사이트를 Bootstrap scss를 베이스로 하여 제작해왔지만(Bootstrap을 쓴다면 2~3일 안에 만들어 낼 수 있을 것 같은데..) 이번에는 조금 도전적으로 “Materializecss”를 적용해보고 싶었다.

1. SQLGate.com은 개발자들이 찾아오는 사이트이기 때문에 IE 문제에서 자유로울 수 있다
2. 모바일 사용자를 좀 더 고려해야만 한다.
3. 좀 더 세련된 class 네이밍을 사용하고 싶다. (bootstrap에 비교하면 짧고 간결하고 유용한 네이밍)

바닥부터 다시 시작하기

Materializecss를 사용하려고 프로젝트 환경을 설정하다 보니 모든 걸 다 확인하고 초기화 해야 했다. 기존에 사용하던 AX5UI에 Bootstrap 의존성을 모두 제거해야 했고 기존에 사용하던 페이지 레이아웃을 모두 다시 만들어야 했다.

프로젝트 폴더 구성
bower install materialize -S

일단 자신 있게 커멘드를 입력했다. 언제나처럼 리소스들이 무심하게 미리 정해둔 플러그인 폴더 아래로 다운로드 되었다.

이제 적당히 최적의 방법으로 사용만 하면 된다.

그리고 잘 모르겠으면 http://materializecss.com/에 가서 문서를 보고 공부하면 되는 것이다. 참 간단하고 쉬운 문제인데. 언제나 실천은 어렵다.

소스코드 다운로드 후에 폴더를 탐색하기 시작했다.

materialize 프로젝트 구성

본능적으로 sass 폴더가 있는지 확인했다. 역시나 예상대로 잘 정리되어 있었다. 이 정도라면 떡 만들듯이 반죽이 가능한 상태라 직감했다.

materializecss는 materializecss.scss 에서 하위 콤포넌트들을 Import하는 방식이다. 그리고 _style.scss는 웹페이지의 공통요소 폰트사이즈, 컨테이너 사이즈 등을 설정하고 있다.

_style.scss

콤포넌트별로 정의되지 않는 속성들 주로 태그 셀렉터에서 정의되는 CSS 속성과 @media 타입 등의 속성을 정의해주고 있다. _style.scss는 각각의 프로젝트마다 다르게 설정해야 하는 경우가 많은데. 현명한 선택이었다고 생각된다.

materializecss.scss

materializecss.scss에는 프로젝트에서 사용될 예정인 컴포넌트들이 차례대로 import 되어 있었다. Mixins, Variables, Reset을 제외하고 그 아래 components들은 상호 간에 의존성이 없고, 필요에 따라 주석처리 할 수 있다. 좀 더 깨끗한 프로젝트 환경을 원하는 나에겐 강하게 좋아할 수 밖에 없는 코드였다.

/**
* SASS
*/
gulp.task('front-scss', function () {
gulp.src(ASSETS_FRONT + '/scss/front.scss')
.pipe(plumber({errorHandler: errorAlert}))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest(ASSETS_FRONT + '/css'));
});
gulp로 sass빌드하는 것도 이게 마지막이 되겠구나

Color

Bootstrap에서 색상은 primary, success, info, warning, danger 로 정의되는 5가지 컬러를 기본으로 각각의 컴포넌트가 색상 값을 재정의하거나 그대로 사용하는 구조이다.

Bootstrap을 처음 사용할 때부터 했던 생각인데. 5가지 색상을 기준으로 사이트를 제작하는 것이 불편하지 않을까였다. 하지만 색상을 제한하여 얻는 효과도 있겠다고 생각되어 만족하려 애썼다.

Materializecss Color

Materializecss에서 색상정의하는 방법은 Bootstrap과는 아주 다르고 친절했다. 그리고 내가 따로 상황에 맞는 색을 선정할 필요가 있을까 하는 색상이 들 정도로 다양한 컬러가 미리 정의되어 있었다.

‘빨간색인데 약간 밝게’, ‘파란색인데 아주 진하게’

<div class="card-panel red lighten-1">This is a card panel with a red lighten-1 class</div>

위 코드처럼 엘리먼트 클래스 속성값으로 인라인 설정도 가능하고

.ilike-blue-container {     
@extend .blue-text, .text-lighten-4;
}

위와 같이 scss에 사용도 가능하다. 클래스 속성값에 사용하는 경우에는 예외 케이스에 다양하게 응용할 수 있어 좋았지만. scss에 extend하는 방법은 썩 아름답다고 느껴지지는 않았다. 요소별 컬러 class를 선언하고 사용하는 것이 좀 더 관리가 쉽다는 생각이다.

.my-box-text-color{
@extend .blue-text, .text-lighten-4;
}
////
.my-box{
@extend .my-box-text-color;
}

Grid System

Bootstrap에서 Grid 클래스를 이용하려면 다음과 같이 할 수 있다.

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
768이하에선 12칸, 768이상에선 6칸, 992이상에선 8칸
</div>
<div class="col-xs-6 col-md-4"></div>
</div>

딱히 흠잡을 곳은 없는 스타일이다. 매번 타이핑할 때마다 매번 반복되는 저 col- col- col- 이 조금 거슬렸지만. 역사와 전통이 있는 Bootstrap이니까. 사실 접두사는 IE하위버전을 위한 배려인데 그렇다고 Bootstrap이 IE하위버전을 지원하지도 않으니 참 아이러니 하다.

Materializecss는 좀더 간결하다. 직관적으로 s,m,l과 칼럼 개수만 정해주면 되기때문에 조금더 코드가 짧아져서 좋았다. 물론 이해가 쉬운 점도 장점이다.

<div class="row">
<div class="col s12 m6 l8">
768이하에선 12칸, 768이상에선 6칸, 992이상에선 8칸
</div>
<div class="col s6 m6"></div>
</div>

그리고 퍼블리싱을 하다보면 종종 특정 브라우저 사이즈에서 엘리먼트를 감추거나 보여주고 싶은 경우가 있는데. 다음의 CSS 클래스를 이용할 수 있다.

/* These classes can be added to HTML Elements    
* to affect visibility on certain displays.
*/
.hide-on-small-only   
.hide-on-small-and-down
.hide-on-med-and-down
.hide-on-med-and-up
.hide-on-med-only
.hide-on-large-only
.show-on-large
.show-on-medium
.show-on-small
.show-on-medium-and-up
.show-on-medium-and-down

하지만 개인적으로 이름이 아름답다고 말하긴 어려운 부분이다. 프로젝트가 시작되고 끝나가는 2주 동안 이 표현은 머리에 박히지 않는 것을 보아 그리 좋은 네이밍은 아니라 할 수 있겠다.

Waves

Materializecss에서 가장 눈길을 끄는 것을 꼽으라면 단연 CSS 애니메이션을 활용한 Wave Effect라 말하고 싶다.

어찌 보면 별것 아닌 효과이지만, 결과물을 보는 사람들에겐 ‘정성스럽다’, ‘신경 많이 썼네!’라는 평을 듣게 만들어 준다.

나 역시 Wave Effect와 몇몇 기능을 보고 Bootstrap에서 갈아타야겠다는 생각을 하게 만들었으니 참으로 중요한 요소임이 분명하다.

<a class="waves-effect waves-light btn-large" href="#">Wave</a>

엘리먼트에 Wave 효과를 주려면 위와 같이 waves-effect 클래스를 추가해준다. 이렇게 추가된 waves-effect 를 .find하여 jQuery 플러그인이 작동하는 방식이다. 여기에 효과의 색상을 waves-light, waves-red, waves-yellow, waves-orange, waves-purple, waves-green, waves-teal 등으로 정할 수 있다.

wave 효과가 발생하는 순간 엘리먼트 변화 (캡쳐뜨기 힘들었음)

나라면 저 효과를 어찌 만들까 고민을 해보았다. 역시 예상한 범위 정도로 작동하고 있었다.

AXISJ를 하면서 Bootstrap이나 Materializecss같은 CSS/JS 프레임워크를 만들려고 많은 노력을 했었다. (아마도 우리 베짱이 디자이너가 세계여행을 떠나지 않았다면 만들 수 있었을 수도 있겠다.) 하지만 작년부터 생각이 조금 바뀌게 되었다. 무언가를 퍼블리싱해서 만들어낸 결과가 더욱 많은 사람이 다시 사용할 수 있는 것이 더 중요한 일이구나 그리고 많은 사람에게 다가가려면 코드보다는 문서가 더욱 중요하다는 것.

주의 할 점은 CSS만 사용하고 materialize.js 를 적용하지 않으면 작동하지 않는 다는 점이다. (내가 그랬기 때문에 이런 말을 하는 것은 아니다.)

SideNav

sqlgate.com nav
<nav data-tag-nav class="header-nav">
<div class="container nav-wrapper">
<ul class="left hide-on-large-only" data-nav-account=""> <li><a href="#" data-activates="slide-out" class="waves-effect waves-light">
<i class="large material-icons">menu</i></a></li>
</ul>
<!-- 중략 -->
</div>
</nav>

#slide-out

Navigation bar 좌측 menu 아이콘에 data-activates=”slide-out” 속성을 부여하고 $('[data-activates="slide-out"]').sideNav(); 를 호출해주면 준비완료 상태가 된다.

사용자가 menu 아이콘을 클릭하면 미리 준비된 #slide-out 이 자연스럽게 스르륵 왼쪽에서 밀려 나온다.

Bootstrap을 이용하여 모바일용 사이드메뉴를 만들 때엔 시간이 많이 들고 정리가 매번 잘 안 되는 느낌이었는데 코드가 깔끔해져서 다시 한번 감동하게 된다. (직접 해보려면, 모바일에서 sqlgate.com에 접속하세요.)

Forms

Bootstrap에서 input, select, checkbox, radio 등의 폼컨트롤 요소를 사용하려면 요소에 class 속성값으로.form-control 클래스를 추가하여 사용한다. 클래스값을 주지 않았다고 해서 기능이 작동하지 않는 것은 아니지만 아름다운 UI를 원한다면 꼭 넣어주어야 한다.

Bootstrap Style

라벨의 위치는 조절이 가능하지만 애니메이션을 기대할 순 없다.

Materializecss를 이용하면 다소 난해한 폼컨트롤 요소의 스타일을 보게된다.

값이 없는 폼컨트롤 스타일
값이 들어간 폼컨트롤 스타일

사실 처음 샘플코드를 보면서는 약간 당황했다. 꼭 있어야 할 것 같았던 form-control 이 아예 없었다. 충분히 태그셀렉터로만 스타일을 정할 수 있는건데 이렇게 자신감 있게 사용할 생각은 하지 못했을까.

예전에는 그랬다. CSS Class Selector를 태그 레벨에 정의하면 다른 태그들이 모두 영향을 받게되어 좋지 않을 것이란 생각이 지배 적이었는데. input 등에 대해선 좀 더 열린마음으로 다가 가야 했었다 라는 생각이 들었다.

모바일에서야 기본 제공 스타일만으로 별문제가 없었지만 넓은 공간을 사용하는 PC환경에서는 예전보다 많이 없어 보이는 단점과 스크립트로 폼 컨트롤 value를 지정했을 때 라벨이 활성화되지 않는 현상 등이 있어, 스타일과 스크립트를 손봐서 사용했다.

끝으로

모바일에서 적은 노력으로 아주 만족스러운 결과를 만들어 낼 수 있고, CSS 애니메이션을 손쉽게 사용할 수 있어 최신 웹 개발 트랜드를 빠르게 적용할 수 있다는 장점과 아직 템플릿이 많지 않고 새로이 학습해야하는 단점이 있다.

100% 사용하진 못했다. 프로젝트 기간도 매우 짧은 편이었고 코드에 대해 아직 제대로 이해하지 못한 많은 기능이 있다. 하지만 첫 느낌은 매우 좋았다. 매력적이고 세련되었다, 아직은 거칠지만 컨트롤이 가능하므로 프로젝트가 마무리된 이 시점에 매우 만족하고 있다.

다음번 프로젝트(sqlgate.com 오픈하자마자 리뉴얼 ㅜ.ㅜ)가 이제 바로 시작될 것이다. 다음번 프로젝트에서 잘 부탁한다고 말하고 싶다.