UI 프레임워크, 부트스트랩이란? :: 디자인일반[SSISO Community]
 
SSISO 카페 SSISO Source SSISO 구직 SSISO 쇼핑몰 SSISO 맛집
추천검색어 : JUnit   Log4j   ajax   spring   struts   struts-config.xml   Synchronized   책정보   Ajax 마스터하기   우측부분

디자인일반
[1]
등록일:2015-05-16 11:09:46 (0%)
작성자:
제목:UI 프레임워크, 부트스트랩이란?

 1. 부트스트랩(Bootstrap)이란?

 

 

혹시 이 글을 여러분은 부트스트랩(Bootstrap)을 들어보셨나요? 

부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 빠르게 레이아웃을 구성하고 다양한 인터페이스를 사용할 수 있습니다. 부트스트랩은 클래스로 미리 정의된 스타일시트와 자바스크립트로 구동하는 플러그인의 라이브러리입니다. 미리 정의 된 클래스를 이용해 쉽게 웹디자인을 하고 완성도 높은 다양한 UI를 만들 수 있습니다. 보통 웹사이트를 제작할 때 필요한 UI 디자인은 하나하나 적용하고 직접 코딩하는 것이 일반적입니다. 하지만 미리 정의된 스타일시트를 이용해 이 과정을 단축시킬 수 있고 그 퀄리티가 굉장히 뛰어납니다. 웹사이트를 너무 쉽게 만들 수 있어서 우려의 목소리도 나오고 있지만 워드프레스, 어썸폰트, 부트스트랩, 제이쿼리등 훌륭한 프레임워크, 플러그인등을 이용해 웹사이트의 제작이 간소화 된다면 단점 보다 장점이 더 많습니다.


부트스트랩은 UI를 편하게 구성해 주는 플러그인이기 떄문에 부트스탭만으로는 웹사이트를 완성 할 수 없습니다.

보통 웹사이트는 서버에서 복잡한 명령을 처리하고 결과물을 사용자 PC로 전송해 브라우져에서 이를 해석하여 보여줍니다. 우리가 일반적으로 게시판에 글을 쓰거나 회원가입을 할 때 저장 되는 정보를 보통 DB(DataBase)라고 하며 대표적으로 MY-SQL, 오라클등이 있습니다. 또한 다양한 변수에 따라 다른 결과 값을 가지고 와야 하는데 이를 해석하는 프로그래밍을 웹언어라고 합니다. 대표적으로 PHP, ASP, JSP등이 있습니다. 이런 웹언어를 서버의 운영체제가 해석하여 결과를 출력해 줍니다. 또한 서버에는 우리가 웹사이트에서 보이는 이미지, 동영상등이 저장되어 있어 24시간 전세계 어디에서도 볼 수 있죠.  이렇게 서버에서 해석한 결과를 클라이언트(사용자)에게 보내주고 인터넷 익스플로러, 크롬과 같은 브라우져를 통해 결과를 확인합니다. 결과적으로 우리가 보고 있는 브라우져는 웹언어를 해석하지 못하고 해석 된 결과를 보여주는데 이를 조금 자세히 설명 드리면 브라우져는 HTML과 CSS를 통해 결과를 만들고 자바스크립트를 통해 동적인 표현이나 계산을 수행합니다. 웹사이트의 구성과 동작 방식을 조금 설명드렸는데 이 부트스트랩이라는 플러그인은 CSS와 자바스크립트로 결합 되어 있습니다. 부트스트랩이 주는 편리함은 사용자가 보는 디자인과 동작 구현 방식을 보다 빠르고 편하게 구현 해 주는데에 목적이 있습니다. 이를 UI(User Interface)라고 이야기합니다. 부트스트랩이 무엇인지 조금 이해가 되셨나요?


부트스랩을 이용하면 다양한 디자인과 동적인 효과를 사용할 수 있습니다.

앞으로 차차 소개하기로 하고 오늘 간단히 몇가지만 소개해 드리겠습니다.


▲ 부트스트랩을 이용하면 버튼을 따로 디자인 할 필요가 없습니다.


▲ 버튼의 크기와 효과도 다양하게 바꿀 수 있습니다.


▲ 불러오는 이미지에도 간단히 적용할 수 있습니다.


▲ 자바스크립트를 이용하면 말풍선 팝업창도 간단하게 만들 수 있습니다.


▲ 부트스트랩의 콤포넌트는 아이콘, 네비게이션등 다양한 기능을 제공합니다. 

 

 2. 부트스트랩(Bootstrap) 장점

 

 

부트스트랩은 정말 쉽고 빠르며 다양한 응용이 가능합니다.

요즘 웹사이트 제작시에 모바일 환경을 빼 놓고 이야기하는 경우는 거의 없으며 이런 환경적인 요인으로 반응형웹의 제작빈도가 굉장히 높아지고 있습니다. 부트스트랩은 이런 모바일 환경과 반응형웹 제작에 더욱 유리하게 사용할 수 있습니다. 그리고 수 많은 테마가 존재하기 때문에 테마만 적용해도 손쉽게 웹사이트의 외형을 만들 수 있습니다. 욀관된 UI를 통해 개발에 필요한 부담을 많이 줄여줍니다. 기업의 입장에서 보면 시간 단축은 곧 비용 절감입니다. 


 

 3. 부트스트랩(Bootstrap) 전망

 


국내에서 부트스트랩의 활용은 해외에 비하면 높은 편이 아닙니다.

부트스트랩은 국내의 사용자에게 익숙한 UI는 아니기 때문입니다. 국내외 웹사이트 UI를 비교하면 큰 차이가 있습니다. 독창적인 우리나라만의 UI가 있는 느낌인데 해외에서는 간결하고 깔끔하면서 여백이 많은 UI를 선호합니다. 워드프레스와 그누보드, 제로보드를 단순 비교해도 UI의 차이가 있는데 결국 국내 누리꾼들이 아직 부트스트랩의 UI에 적용하기에는 조금 무리가 있는 편입니다. 워드프레스의 국내 사용률이 해외와 비교했을 때 굉장히 낮은 것도 비슷한 이유라고 할 수 있습니다. 부트스트랩은 웹퍼블리싱을 직업으로 갖고 있거나 준비하는 분이라면 꼭 짚고 넘어갈 필요성은 있습니다. HTML과 CSS를 모르는 사람이 접하기에는 무리가 있고 개발자들을 위해 개발 된 플러그인이기 때문입니다. 개발이나 코딩을 하시는 분이라면 어렵지 않게 부트스트랩을 활용하고 적용 할 수 있을 것입니다. 

[본문링크] UI 프레임워크, 부트스트랩이란?
[1]
코멘트(이글의 트랙백 주소:/cafe/tb_receive.php?no=34401
작성자
비밀번호

 

SSISOCommunity

[이전]

Copyright byCopyright ⓒ2005, SSISO Community All Rights Reserved.