오픈형 UI 플러그인

“부트스트랩(Bootstrap)”

<getbootstrap.com>

 요즘 부트스트랩(Bootstrap)이 하나의 화두로 떠오르고 있습니다. 부트스트랩은 트위터에서 오픈 소스로 공개한 웹 프런트 엔드 개발 도구로, 유연한 HTML, CSS, JavaScript 템플릿과 다양한 UI 컴포넌트, 인터랙션을 제공해서 웹 사이트를 구축하는 시작점이 됩니다. 이 글에서는 부트스트랩의 특징과, 부트스트랩으로 웹 사이트를 구축하는 방법에 대해 알아보고 활용 가능한 라이브러리를 소개하겠습니다. (구자섭 과장)

1) 부트스트랩이 등장한 이유

 웹 페이지 개발을 진행할 때 개발자에 따라사용하는 도구 및 라이브러리가 다른 경우가 있다. 이런 경우를 방지하기 위해 미리 표준을 정하고 진행한다. 표준을 정하지 않는 경우 개발자마다 소스코드 작성 형태 등이 제각각이기 때문에 디자인까지 달라질 수 있으며 작업을 다시 해야하는 상황도 발생한다.

 웹 UI 개발은 쉬워 보이면서도 어려운 점이 많다. 단일한 클라이언트 환경만 고려하면 되는 UI 개발과는 달리, 웹 UI 개발은 다양한 브라우저 환경의 호환성을 충족시키는 크로스 브라우징(Cross Browsing) 작업이 필요하다.

 Internet Explorer, FireFox, Chrome, Safari, Opera 등 PC에서 많이 사용하는 브라우저만 해도 5가지이며, 각 브라우저의 버전이나 운영체제에 따라 별도의 작업을 해야 하는 경우도 있다. 최근에는 스마트폰, 태블릿 PC 등 다양한 스크린 크기와 기기에 특화된 브라우저가 있는 모바일 환경까지 고려해야 하는 상황이다.

 중소규모의 웹 사이트에서 다양하고 복잡한 브라우저 환경에 대응해 크로스 브라우징 작업을 하기에는 부담이 많다. 부트스트랩은 이런 어려움을 해결해, 간편하고 빠르게 사이트

를 구현할 수 있도록 도와주는 툴이다.

 중소규모의 웹 사이트에서 다양하고 복잡한 브라우저 환경에 대응해 크로스 브라우징 작업을 하기에는 부담이 많다. 부트스트랩은 이런 어려움을 해결해, 간편하고 빠르게 사이트를 구현할 수 있도록 도와주는 툴이다.

 트위터 개발자인 마크 오토(Mark Otto)와 제이콥 쏜튼(Jacob Thornton)가 다양한 환경에 대응할 수 있도록 정형화된 인터페이스를 만들어, 현재는 하나의 프레임워크 형태로 발전했다.

2) 부트스트랩이란?

 부트스트랩은 CSS와 자바스크립트로 이루어진 라이브러리이다. 일반적으로 웹 개발을 하는 경우 웹디자이너나 프로그래머가 각자 CSS, 자바스크립트를 만들어서 사용하게 되는데, 부트스트랩을 사용하는 경우 미리 어느 정도 만들어진 CSS와 자바스크립트를 기반으로 작업을 진행하게 된다. CSS와 자바스크립트로 디자인 작업이 되어 있기 때문에  HTML를 이용해서 웹페이지의 뼈대를 만들고, 부트스트랩을 이용해서 미리 정의된 스타일시트를 이용하면 화면 레이아웃 요소들을 쉽게 정할 수 있다.

 트위터 부트스트랩의 스타일시트는 미리 선언해 놓은 속성과 값을 재활용하기 쉽게 만들어놓은 스타일시트 라이브러리이다. 웹 페이지에서 사용되는 모든 요소(button, form, icon, dropdown menu, etc)의 스타일시트를 미리 만들어 놓고 HTML 페이지의 태그에 선택자만 삽입하면 모든 디자인이 자동으로 만들어진다.

 부트스트랩은 간단하게 선택자만 삽입해도 멋진 웹 페이지를 만들 수 있지만, 기능을 확장할 수 있도록 자바스크립트도 사용하고 있다. 팝업창, 드롭다운 메뉴, 툴팁, 이미지 슬라이더 등 웹 페이지에서 주로 사용하는 기능을 확장할 수 있으며, 서드파티(3rd-party) 라이브러리를 통해 기능을 추가할 수 있다.

3) 참고사이트

 ≫ getbootstrap.com : 부트스트랩 공식

    홈페이지

 ≫ bootstrapk.com : 부트스트랩 한국어

    번역 사이트

 ≫ layoutit.com : 위지위그(WYSIWYG)

    기반으로 레이아웃 빌더를 제공

 ≫ bootsnipp.com : 위지위그 기반으로

    폼 컨트롤, 버튼 빌더를 제공

<www.layoutit.com/build?r=30610315>

<bootsnipp.com/buttons>

<bootsnipp.com/forms?version=3>

사내 기술교류회(4/27)

 : WMS V1.5 Release

 지난 4월 27일 기술혁신팀 주관으로 사내 기술교류회가 개최되었습니다. 이번 기술교류회는 JBMap Suite : WMS V1.5의 배포설명회 형식으로 진행되었으며, 사장님을 비롯해 약 15명이 참석하였습니다.

<기술교류회, 2015. 4. 27>

 오늘 공개된 WMS 솔루션은 기본적인 기능 외에 KMZ, KML 파일과 비표준 NetCDF의 지원기능이 포함되었습니다. 또한, 시설관리 솔루션인 GeoStack에 시범적용하여 다양한 편의기능이 추가로 적용되었습니다.

 WMS 솔루션은 연구과제를 비롯해 현재 개발중이거나 향후 진행될 프로젝트에 적용될 예정이며, 자세한 내용은 임시 오픈한 기술블로그의 글(링크: JBMapSuite-WMS 1.5.0 Release)에서 확인할 수 있습니다.

≫ 바로가기 : JBMS-WMS 1.5.0 Release

[강추기사모음] 이 기사 보셨나요?

 이 코너에서는 함께 공유하면 좋을만한 기사들을 선정해 보았습니다. 기사 제목을 선택하시면 해당 페이지로 이동합니다. 잘 알려지지 않은 기사중에서 다른 직원들과 나누고 싶은 정보가 있다면 뉴스레터 편집실로 알려 주세요.

≫ IT인재를 놓치는 채용 담당자들의 5가지 실수 (출처:CIO Korea)

≫ 개발자간 공유 문화 정착이 힘든 이유 (출처:ZDNet Korea)

≫ 55세 개발자가 막내인 개발팀 (출처:ZDNet Korea)

≫ [R&D가 위험하다] 공공 R&D, 100億 써 2億도 못번다 (출처:ChosunBiz)

≫ 백두산 大폭발 가능성은? (출처:YTN)

[ISDM컬럼] 스마트재난관리

 재난(Disaster)이란 국민의 생명·신체 및 재산과 국가에 피해를 주거나 줄 수 있는 것으로서 태풍, 홍수, 호우, 폭풍, 폭설, 가뭄, 지진, 황사(黃砂) 등 자연현상으로 인하여 발생하는 재해, 화재, 붕괴, 폭발, 교통사고, 환경오염사고 등 이와 유사한 사고로 대통령령이 정하는 규모 이상의 피해 등 국가기반체계의 마비와 전염병 확산 등으로 인한 피해를 망라하여 말한다.

 재난관리(Disaster Management)란 각종 재난으로부터 국토를 보존하고 국민의 생명·신체 및 재산을 보호하기 위하여 국가 및 지방자치단체의 재난관리체제를 확립하고, 재난의 예방·대비·대응·복구를 위한 일련의 활동을 의미한다.

 스마트재난관리(Smart Disaster Management)란 실시간으로 재난을 예측, 감지, 대응이 가능하도록 정보통신기술(ICT),

항공우주기술(ST), 로봇기술, 나노기술(NT), 바이오기술(BT)등 첨단기술을 융합하여 시스템적으로 관리하는 것을 말하며, 전 세계적으로도 전략적 고도화를 추진하고 있는 추세이다.

정확한 정보공유의 실패는 모든 사고와 재난의 원인이며, 상상이상의 비극적 결과를 초래하고 있으며, 기술 후진국은 사후 수습 위주의 재난관리가 이루어지고 있어, 사전 예방 및 대비 대응의 한계로 피해규모가 상대적으로 커지고 있으나, 기술 선진국은 사전 탐지 예측 기술과 실시간 상황정보의 공유를 통한 스마트 재난 관리로 인명피해는 물론 재산피해를 획기적으로 줄이고 있다.

 우리나라의 경우 통신기기의 발달에도 불구하고 유선전화를 통한 상황파악 및 메일을 통한 사진전송 등으로 상황판단시간 지연 및 자료부족, 중앙 지방 현장 부처 간의 양방향 소통 및 정보공유 부재로 재난상황 예측 관리를 위한 오감기반 입체적 접근방식이 필요하다.

 특히 최근 세월호 침몰사건 이후 예방차원의 재난안전 분야의 투자 규모 확대, 특히 첨단 ICT 기술을 활용한 재난관리시스템의 중요성이 확대되고 국가의 정책화됨에 따라서 재난정보를 통합 표출 분석하는 스마트 재난 관리

시스템 시장이 확대되고 있다.

 2016년 국가과학기술위원회에서 추진되고 있는 다 부처 공동 기획 사업 중 재난대응분야를 살펴보면, 국민안전 감시 및 대응 무인항공기 융합시스템(현장정보 지원차량 포함) 구축 및 운용, 개인방호 및 범죄예방 웨어러블 스마트 장비 개발, 재난·재해 감지․대응용 지능형 CCTV 기술 개발 및 실증 테스트베드 구축, 첨단센서 기반 재난 예측·조기경보 시스템 개발사업 등이 있다. 이중 첨단 안전진단센서 기술 기반 재난재해 예측시스템 개발 사업은 우리 제이비티의 사업영역과도 밀접하게 관계되고 있으며, 그림과 같이 첨단 안전진단센서·계측 기술을 활용하여 시설물·재난상황별 재난재해 예측시스템 개발을 통해 재난방지를 위한 실시간 재난감지 기반을 마련을 목표로 하고 있다.
(스마트재난관리연구소장 심규철 박사)