BIM 칼럼니스트 강태욱의 이슈 & 토크
 

콘바(Konva)는 웹 기반 인터랙티브 그래픽을 지원하는 HTML5 Canvas JavaScript 프레임워크이다. 콘바는 고성능 애니메이션, 화면 전환, 그래픽 노드 오버레이, 계층화, 필터링, 캐싱, 데스크톱 및 모바일 애플리케이션에 대한 이벤트 처리 등을 가능하게 한다. 이를 이용해 딥러닝 레이블링 도구 같은 웹 기반 그래픽 편집기, 게임 등을 쉽게 개발할 수 있다. 이번 호에서는 콘바를 이용한 HTML5 기반 인터랙티브 그래픽 개발 도구를 소개한다.

■ 강태욱 | 건설환경 공학을 전공하였고 소프트웨어 공학을 융합하여 세상이 돌아가는 원리를 분석하거나 성찰하기를 좋아한다. 건설과 소프트웨어 공학의 조화로운 융합을 추구하고 있다. 팟캐스트 방송을 통해 Engineering digest와 관련된 작은 메시지를 만들어 나가고 있다. 현재 한국건설기술연구원에서 BIM/GIS/FM/BEMS/역설계 등과 관련해 연구를 하고 있으며, 연구위원으로 근무하고 있다.
이메일 | laputa99999@gmail.com
페이스북 | http://www.facebook.com/laputa999
홈페이지 | https://sites.google.com/site/bimprinciple 
팟캐스트 | http://www.facebook.com/groups/digestpodcast

그림 1. 딥러닝 훈련 이미지 레이블링 도구 개발 사례

그림 2. 디자인 맵

그림 3. 콘바 기반 웹 그래픽 설명 서비스 

■ konvajs 사이트 : https://konvajs.org/docs/sandbox/Interactive_Building_Map.html

콘바의 동작 개념
콘바는 가상무대에 객체를 그리고 이벤트 리스너를 추가한 후 사용자 마우스 클릭 등 이벤트를 처리하는 방식으로 동작한다. 객체를 이동하고 크기를 조정하거나 다른 모양과 독립적으로 회전하는 등 애니메이션을 지원한다. 
콘바는 그래픽을 표현하기 위해, 다음과 같은 계층적 구조를 가진다.