며칠전에 나나티님이 zurb의 Foundation 말씀을 하셔서, 오랫만에 다시 찾아봤습니다.

나나티님 말씀대로 우리나라보다는 외국에서 Foundation에 대한 평가가 더 좋죠.

둘을 비교하기 전에 먼저, 사실 부트스트랩이나 파운데이션 과 같은 프론트엔드 프레임워크와 그리드 시스템, css 보일러플레이트 등등 이런 종류를 부르는 단어가 많고 좀 헷갈리긴 합니다.

프론트엔드 프레임워크가 다른 css 시스템 들을 포함하고, 거기에 js 컴포넌트들까지 포함된것으로 이해하면 간단한데,

스타일 가이드, 그리드 시스템, css 보일러플레이트, 패턴 라이브러리 등은 거기서 거기 같긴 합니다.

유행한 순서는, css 보일러플레이트, 그리드 시스템이 좀 오래됐고, 최근에 스타일 가이드와 패턴 라이브러리가 유행하는 것 같습니다. 어쨋든...

이런 것들을 다 모아놓은 사이트 들을 몇개 남겨봅니다.

1. css 시스템들의 순위? : http://cssdb.co/ - 폰트나 애니메이션 들도 다 포함되어 있고, 시스템 만 보면 1위 부트스트랩과 2위 파운데이션의 차이가 거의 4배-8배 나네요. ^^;
2. 스타일 가이트 / 패턴 라이브라리 모음들:
   • http://styleguides.io/
   • https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

그럼 본격적으로 부트스트랩 vs 파운데이션 비교를..

(기본이 되는 데이터는 Vermillion 것을..)

외국에서 더 인정을 받는 (또는 받았던) 이유는, 파운데이션의 그리드 시스템이 조금더 자연스럽고 기능이 더 많았던 점, 파운데이션 이전부터 zurb가 제공하던 풍부한 플러그인들 인것 같습니다. 하지만, 부트스트랩 버전이 3대로 올라오면서, 두 프레임워크간의 차이가 거의 없어진 모양새입니다.

부트스트랩이 더 인기를 끈 이유는, 쉽게 프로토타입이 가능한, 즉 별다른 작업없이 쉽게 완성된 웹페이지를 만들 수 있다는 점인데, 오히려 개발자들은 (수많은 부트스트랩 테마들에도 불구하고) 직접 사이트를 만들어야 하는 입장에서 오히려 완성도를 떨어뜨리는 단점으로 작용한것 같습니다.

하지만 파운데이션도 작년부터 테마, 템플리트, 패턴 라이브러리등을 강화하면서 이 부분을 나름대로 따라잡고 있는 모양새입니다.

대부부의 비교 글들은, 둘이 거의 비슷하니 입맛에 맛는 것을 고르라고 끝나는 것 같습니다.

댓글들에서는, 개발자들은 아직도 파운데이션의 손을 들어주는 것 같고요..

어쨋든 '하루 한글'을 쓰기 위해서 또 남깁니다.

근데, 저만해서는 '해'가 뜨지 않는군요.. ^^;

사실 제일 관심있는 부분은 polymer 와 web component입니다.

개발도 그렇고, 반응형 부분도 그렇고, 점점 web component의 활용도가 높아지는 것 같습니다.

다음글로, 그리드 시스템 이해/비교 또는 퍼포먼스 측면의 반응형 웹, 또는 웹 컴포넌트 이해 로 해볼까 합니다. ^^