웹 프론트엔드 프레임워크, Bootstrap

예쁘고 안깨지는 반응형 웹 페이지를 만들자!

 

부트스트랩 깃허브 리퍼지토리

부트스트랩, 깃허브에서 2번째로 별을 많이 받은 리퍼지토리이다. 깃허브에서의 별 갯수가 보여주듯이, 부트스트랩의 인기는 전 세계 웹 개발자들 사이에서 정말 뜨겁다. 부트스트랩은 개인 블로그 개발자 뿐만 아니라, 여러 대기업 웹페이지에서도 사용된다. 예를 들면, NBA.com, Wal-Mart, Target 이 있는데, 이는 모두 부트스트랩을 사용해 웹 프론트엔드를 구축한 홈페이지들이다.

부트스트랩의 장점은 잘 구조화 된 컴포넌트 배치와 디자인에 있다. 하지만 그 중에서 가장 큰 장점은 브라우저 해상도에 따라서 반응하여 컴포넌트를 재배치시켜주는 반응형 웹 프론트엔드라는 것이다.

노트북 모니터와 핸드폰에서의 페이지 비교 사진

본 홈페이지도 부트스트랩으로 만들어졌는데, 위 사진에 보듯이 브라우저 해상도에 따라서 화면 컴포넌트 배치가 달라진다. 핸드폰 해상도(아이폰5S) 320X568에서의 디스플레이와 모니터 해상도(13인치 Dell xps 노트북) 1920X1080에서의 디스플레이가 자동으로 맞추어 예쁘게 보여진다.

 

부트스트랩 코드 구조

1. Bootstrap.css
   부트스트랩의 코어 CSS 파일이다. 여기 대부분의 해상도별 컴포넌트 배치, 색상 및 폰트 디자인에 대한 코드가 들어있다. 일반적으로 부트스트랩으로 만든 웹 페이지들은 이 파일을 핵심으로 개발하는데, 보통 필요한 기능을 CSS로 덧붙여서 개발하거나 한다. 본 블로그의 경우 화면 상단에 해상도에 따라 다르게 보여지는 메뉴바는 해당 부트스트랩 코어 CSS 기능을 사용해서 만들어졌다.
2. Bootstrap.js
   부트스트랩의 코어 자바스크립트 파일이다. 이 파일은 부트스트랩 컴포넌트에 대해서 동적인 계산을 통해 어떤 동작이나 효과를 주고 싶을 때 사용한다. 본 블로그의 경우, 홈 화면에서 메뉴바를 돌려가며 보여주는 carousel이 해당 자바스크립트의 기능을 사용하여 만들어졌다.

 

장점 정리해보면

• 많이 비교되는 프레임워크인 워드프레스와는 달리 front-end만 모듈러하게 프레임워크를 이용하여 예쁘게 구성할 수 있다. 다시 말해, back-end 구성은 전적으로 사용자에게 달려있어서 자유도가 높다. 물론, 앞단도 자유롭게 확장하여 구현가능하다.
• 브라우저 호환성 그리고 backward compatibility(부트스트랩 버전3에서는 IE8 버전도 호환 지원한다고 한다.)
• 계속하여 개발되고 유지보수되어 새로운 기능/버전이 출시된다. 그리고 커뮤니티가 활성화되어 있어 일반 개발자들도 열심히 테마를 만들어 올린다.

 

사용 후기

• 경량화된 front-end 프레임워크라 사용하기 편함. 자유도 높음
• 브라우저 호환성 검증된 안전한 프레임워크
• 예쁜 테마는 거의 다 유료. 추후 워드프레스도 써보고 비교할 예정