HTML5와 CSS3 기반의 웹 개발을 시작하려고 할 때, BluePrint나 960gs처럼 검증된 그리드 프레임워크를 떠올리기 쉽습니다. 하지만 이들 외에도 최신 웹 표준을 적극적으로 지원하는 훌륭한 프레임워크들이 있습니다. 대표적인 두 가지를 소개합니다.
1. 52framework
52framework은 HTML5와 CSS3를 본격적으로 활용하고 싶은 개발자에게 유용한 프레임워크입니다. 주요 특징은 다음과 같습니다.
- CSS3 그라디언트(gradient), 다중 섀도우(multiple shadows) 등 강력한 스타일 속성을 손쉽게 사용할 수 있습니다.
- 인터넷 익스플로러(IE)에서도 동작하는 CSS3 셀렉터를 지원하여 구형 브라우저 호환성 문제를 줄여줍니다.
- Vimeo 스킨과 유사한 디자인이 적용된 새롭게 개선된 HTML5 비디오 플레이어를 제공합니다.
- JavaScript 기반의 HTML5 유효성 검사(validation)가 포함된 완전히 새로운 폼(Form) 프레임워크를 갖추고 있습니다.
덕분에 디자인과 폼 처리에 드는 반복 작업을 크게 줄일 수 있으며, 크로스 브라우징 이슈도 상당 부분 해결됩니다.
2. Susy
Susy는 Sass(SCSS) 환경에서 사용할 수 있는 초경량 그리드 레이아웃 프레임워크입니다. 반응형(responsive) 그리드 레이아웃을 명확하고 직관적으로 구현하는 데 특화되어 있습니다.
- float, flexbox, table 등 원하는 레이아웃 방식과 자유롭게 조합해 사용할 수 있습니다.
- 복잡한 계산 없이 Sass 문법만으로 유연한 그리드 시스템을 구축할 수 있습니다.
- 고정 그리드부터 유동 그리드까지 다양한 반응형 레이아웃 요구 사항을 커버합니다.
특히 Sass를 이미 사용하고 있는 프로젝트라면, Susy를 통해 코드의 일관성과 유지보수성을 높일 수 있습니다.
정리
기존의 BluePrint나 960gs에 만족하지 못한다면, 최신 웹 표준 지원에 강점이 있는 52framework, 그리고 Sass 기반의 유연한 반응형 그리드가 필요하다면 Susy를 고려해 보시기 바랍니다. 프로젝트의 성격과 기술 스택에 따라 적합한 도구가 달라지므로, 각 프레임워크의 공식 문서를 참고해 선택하는 것이 좋습니다.