BIM 칼럼니스트 강태욱의 이슈 & 토크
이번 호에서는 공간정보 기반 서비스 웹 애플리케이션을 개발하기 위해 장고(Django)와 부트스트랩(Bootstrap)을 사용해 GIS 기반 IoT 데이터 분석 스타일의 대시보드 개발 방법을 간략히 정리하고, 개발 후 서비스하는 방법을 살펴본다.
이를 통해 공간정보 기반 IoT 장비를 하나의 대시보드로 관리하고 분석하는 것이 가능하다. 여기서 공간정보는 GIS, BIM, 3D 점군(point cloud) 데이터와 같이 공간상 좌표로 표현되는 모든 정보를 말한다.
■ 강태욱
건설환경 공학을 전공하였고 소프트웨어 공학을 융합하여 세상이 돌아가는 원리를 분석하거나 성찰하기를 좋아한다. 건설과 소프트웨어 공학의 조화로운 융합을 추구하고 있다. 팟캐스트 방송을 통해 이와 관련된 작은 메시지를 만들어 나가고 있다. 현재 한국건설기술연구원에서 BIM/GIS/FM/BEMS/역설계 등과 관련해 연구를 하고 있으며, 연구위원으로 근무하고 있다.
페이스북 | www.facebook.com/laputa999
블로그 | http://daddynkidsmakers.blogspot.com
홈페이지 | https://dxbim.blogspot.com
팟캐스트 | www.facebook.com/groups/digestpodcast
그림 1. IoT 대시보드 웹 앱
이 글은 개발자가 애용하고 있는 파이썬(Python) 기반의 장고 플랫폼을 사용한다. 부트스트랩은 반응형 웹 사이트를 개발하기 위한 가장 인기 있는 HTML, CSS 및 자바스크립트(JavaScript) 프레임워크이다.
이번 호에서는 다음의 내용을 이해할 수 있다.
- 부트스트랩 대시보드 UI 라이브러리 사용법
- 장고 프레임워크의 데이터 모델과 웹 UI 간의 연계 방법
- GIS 맵 가시화 및 이벤트 처리
- 실시간 IoT 데이터에 대한 동적 UI 처리 방법
요구사항 디자인
다음과 같은 목적의 웹 앱 서비스를 가정한다.
- GIS 기반 센서 위치 관리
- IoT 데이터셋 표현
- IoT 장치 관리
- IoT 장치 활성화 관리 KPI 표현
- 계정 관리
- 기타 메뉴
개발 환경 준비
개발 도구
개발에 필요한 도구는 다음을 사용한다.
- UI : bootstrap
- 웹 앱 프레임워크 : DJango
- GIS : leaflet, Cesium
- 데이터 소스 : sqlite, spreadsheet, mongodb
구현된 상세 소스코드는 다음을 참고한다.
장고 기반 웹 앱 프로젝트 생성
장고는 파이썬으로 작성된 고수준의 웹 프레임워크로, 웹 애플리케이션 개발을 빠르고 쉽게 할 수 있도록 도와준다. 장고는 ‘The web framework for perfectionists with deadlines’라는 슬로건을 가지고 있으며, 많은 기능을 내장하고 있어 개발자가 반복적인 작업을 줄이고 핵심 기능에 집중할 수 있도록 한다.
다음과 같이 명령창을 실행하고, 장고 웹 앱 프로젝트를 생성한다.
python -m venv myenv
source myenv/bin/activate
pip install django pandas
django-admin startproject iot_dashboard
cd iot_dashboard
python manage.py startapp dashboard
생성된 프로젝트 폴더 구조는 <그림 2>와 같다.
그림 2
디자인 스타일 고려사항
부트스트랩 레이아웃 표현
부트스트랩은 웹 개발에서 널리 사용되는 프론트엔드 프레임워크로 주로 HTML, CSS, 자바스크립트로 작성되어 있다. 트위터의 개발자에 의해 처음 만들어졌으며, 웹 애플리케이션의 개발 속도를 높이고 반응형 디자인을 쉽게 구현할 수 있도록 도와준다.
부트스랩의 그리드 시스템은 12개 열로 디자인된다. 이는 유연성과 사용 편의성을 제공하기 위한 디자인 결정이다. 반응형 웹사이트를 구축하는 데에 많이 사용된다.
참고로, 12라는 숫자는 많은 약수(1, 2, 3, 4, 6, 12)를 갖고 있어 다양한 열의 조합으로 균등하게 나눌 수 있다. 이를 통해 분수나 번거로운 나머지 없이 다양한 레이아웃을 만들 수 있다.
- 유연성 : 12개의 열을 사용하면 다양한 화면 크기와 디바이스에 적합한 레이아웃을 쉽게 만들 수 있다. 각 요소가 차지하는 열의 수를 조정하여 대형 데스크톱 화면, 태블릿 및 스마트폰에서 잘 보이는 반응형 디자인을 만들 수 있다.
- 이해하기 쉬움 : 12개의 열을 기반으로 한 그리드 시스템은 디자이너와 개발자에게 직관적이다. 그리드 내에서 요소가 어떻게 동작할지 시각화하고 계산하기 쉽기 때문에, 일관된 레이아웃을 생성하고 유지하기가 간단하다.
- 디자인 관행 : 12개의 열을 사용하는 그리드 시스템은 부트스트랩 이전부터 다양한 그래픽 디자인 및 레이아웃 소프트웨어에서 사용되어 왔다.
■ 자세한 기사 내용은 PDF로 제공됩니다.
