티스토리 뷰

@Develop/tool

Bootstrap 소개 장단점 및 설치방법

조준점 2018. 9. 19. 00:16

20180917_bootstrap_00

Bootstrap 소개 장단점 및 설치방법

Bootstrap 이란?

"부트스트랩은 반응형이며 모바일 우선인 웹프로젝트 개발을 위한 가장 인기있는 HTML, CSS, JS 프레임워크입니다." 이 내용은 부트스트랩 홈페이지 메인에 나와있는 내용이다. 쉽게 말하자면 미리 정의된 HTML, CSS, JS(javascript)를 모아놓은 것이다. 버튼, 프로그래스바, 캐러셀 등 많은 것들이 미리 정의되어 있기 때문에 부트스트랩 클래스에 대해 빠삭하다면 아래 블로그 정도는 순식간에 제작할 수 있다.

[사진을 클릭하시면 사이트로 이동합니다]

Bootstrap 장단점

위에 언급했지만, 부트스트랩의 가장 큰 장점은 그 내부의 클래스들만 알고 있다면 빠르고 쉽게 여러형태의 웹 페이지를 제작할 수 있다. 그리고 대부분은 각 해상도 대응에 대한 처리도 되어있기 때문에 반응형 처리도 어렵지 않다. 퀼리티 또한 나쁘지 않기 때문에 많은 기업들이 사용하는 프레임워크이다. (아래는 부트스트랩을 사용했다는 기업 홈페이지들..)

[사진을 클릭하시면 사이트로 이동합니다]

그러면 이렇게 완벽해보이는 부트스트랩의 단점은 무엇일까?

많은 사람들이 얘기하는 단점은 크게 3가지 정도가 있다. 첫번째는 아무래도 미리 짜여진 스타일이 많기 때문에 정형화된 디자인과 기능이 많다. 그래서 창의적인 디자인이나 기능을 원하는 사람들에게는 뜯어고치는게 오히려 더 많은 시간을 작업하게 한다.

그리고 두번째는 성능이다. 구성요소는 타 프레임워크와 비교해도 별 차이가 없다고 한다. 하지만 페이지 로딩 속도를 비교해보면 다른 프레임워크에 비해 굉장히 무겁다고들 얘기한다. 부트스트랩을 사용하는 사이트의 경우 부트스트랩 코드의 10% 정도만 사용한다고 한다. 결국 필요없는 나머지 90%의 코드들을 같이 로딩한다는 말이된다. 그리고 중요한 점은 IE8 지원을 위해서 퍼포먼스 희생이 크다는 것이다.

마지막 세번째는 부트스트랩에 익숙해지기 위한 조건이다. 미리 정의된 클래스(Class)들을 하나 하나 다 분석하고 있어야 하며, 각 해상도에서 어떻게 반응하는지 파악하고 있어야 한다. 그래야 미리 정의된 것들을 가져다 쓰면서 작업 속도를 줄일 수 있다. (하지만 익숙해지기까지는 많은 실습이 필요할듯...)

그래도 간단한 웹 사이트(디자인이 크게 중요하지 않은?)를 제작하는 경우에는 유용한 프레임워크라고 생각한다.

Bootstrap 설치방법

설치 방법은 매우 간단하다. 부트스트랩 CDN을 사용한다면 본인 소스코드에 아래 내용들을 적용해주면 된다.

<!-- 합쳐지고 최소화된 최신 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- 부가적인 테마 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">

<!-- 합쳐지고 최소화된 최신 자바스크립트 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

아니면 부트스트랩 홈페이지에서 다운받아 작업할 폴더에 필요한 파일을 넣고 위와 같이 적용시키면 된다.

CDN(Contents Delivery Network) 이란?

필요한 데이터를 여러 개의 서버에 두고 수요가 있을 때 사용자에게 전달하는 네트워크로 하나의 서버에 모든 데이터를 저장해놓지 않아 속도 측면에서 유리하다고 한다. 부트스트랩은 CDN을 지원하여 웹 사이트의 불필요한 자원 소모를 줄인다. 필요한 기능을 서버에서 분리하여 가지고 잇어 효율적인 데이터 교환이 가능해진다.

CDNì ëí ì´ë¯¸ì§ ê²ìê²°ê³¼