What is DT(Digital Transformation, DT, DX)?

위키피디아는 "디지털 트랜스포메이션(Digital Transformation, DT 또는 DX, DT)은 클라우드 컴퓨팅을 활용하여 문제를 해결하고 소유 중인 하드웨어 사용자에 대한 의존성을 줄이되 구독 기반 클라우드 서비스에 의존성을 증대시키기 위해 새롭고 빠르고 자주 변화하는 디지털 기술을 사용하는 방식을 말한다. " 고 디지털 트랜스포메이션을 정의하고 있습니다.

바로가기 : 디지털 트랜스포메이션 (위키피디아)

가만히 보니 단순히 기술적인 용어가 아닙니다. 기업의 비즈니스 및 서비스 생산 방식의 변화까지도 포함하고 있습니다.
더 찾아보니 LG CNS 블로그의 정의가 꽤 유용합니다. 요약하면
"기존 사업 서비스 모델이 줄 수 있는 고객 가치를 개선하고, 동시에 이를 제공하기 위해 필요한 운영 체계를 최적화하며 경쟁사들이 제공하지 못하는 새로운 형태의 신규 사업 서비스 모델을 개발해 차별화된 고객 만족과 내부 운영 효율화를 추구하는 일련의 '기업 혁신 활동'을 말합니다"

바로가기: 디지털 트랜스포메이션의 필수 전략! 기업의 클라우드 전환 (LG CNS)

저는 이 글을 통해 공간정보서비스의 DT를 통해 비즈니스 수익을 창출하는 방법을 고민하고자 합니다.

바로가기(웹뷰): 3D 드론센싱 애니메이션

바로가기(유튜브): 3D 드론센싱 애니메이션 

 

공간정보서비스와 DT

개인적 견해이지만 결론부터 말하자면 공간정보서비스 분야의 DT는 민간기업의 공간정보관련서비스를 수요자가 구매하여 서로의 비즈니스가 상생하는 생태계가 만들어지는 것이라고 생각합니다.
실제 공간정보서비스를 위한 기반환경을 서비스하는 비즈니스, 실제 사용자 관점에서 엔드유저 서비스를 제공하는 비즈니스가 서로 협력하는 비즈니스 환경이 만들어지는 것입니다. 이의 한 부분으로써 공간정보서비스 분야에서 DT를 실현하는 성과로써 지도서비스를 얘기하고자 합니다.

 

우리는 서비스를 개발하며 지도서비스 또는 지도API를 이용합니다. 네이버, 카카오 등 민간사업자가 제공하는 지도API를 이용하거나 국토지리원의 바로이맵, 브이월드 등 공공부문이 제공하는 지도API를 이용합니다. 민간사업자가 제공하는 API를 이용하는 경우 과금이 발생하는 대신 안정적 접속환경을 보장받을 수 있고, 공공부분의 경우 무료로 이용할 수 있지만 속도 등 안정적 이용은 보장받을 수 없습니다. 공통적인 것은 2D 환경만 수용한다는 것입니다. 물론 브이월드가 3D 지도 API를 서비스했지만, 이는 현재 웹기술과는 거리가 있습니다.

저는 공간정보서비스의 3D 전환을 DT관점에서 얘기하려 합니다. 3D를 구현하는 기술적인 방법은 더 이상 새롭지 않습니다. 하지만 우리나라의 어떤 공간정보서비스도 3D 지도 환경 위에서 제공되지 않습니다. 이는 여러가지 원인이 있지만 

첫째, 우리나라 전체를 수용하는 3D 지형정보를 구축하는데 드는 비용이 높다.
둘째, 3D를 렌더링 하는 사용자PC의 컴퓨팅 파워가 높아야 한다.
세째, 3D 환경에 어울리는 비지니스 콘텐츠의 발굴 또는 렌더링 방법에 대한 고민이 미흡했다.

첫번째 제약 요소는 다음과 같습니다. 국토지리정보원에서 항공영상과 DEM 정보를 무상으로 제공하지만, 실제 서비스에서 호출되는 데이터 형식으로 전환하는 비용과, 이의 운영을 위한 인프라 환경 구성 비용이 예산을 초과하는 경우가 대부분입니다.
지형정보를 3D로 표현하기 위해서는 실제 영상 이미지와 DEM이라는 높이 정보를 동시에 요구합니다. 따라서 서비스용 리소스 저장을 위하여 기존 2D 지도 대비 2배의 저장 공간을 요구합니다. 원본에 대한 저장 비용까지 고려하면 비용은 더욱 높아집니다.

이런 제약조건을 신규 비즈니스 전환을 위한 기회로 받아들이는 생각의 전환이 필요합니다.
공간정보서비스의 3D 전환을 위하여 3D 콘텐츠를 생산하는 사업자가 첫번째 제약조건을 극복하고 3D 콘텐츠 제공자 역할을 할 수 있습니다. 지금처럼 국토지리정보원이 유일한 리소스 제공자일 필요는 없습니다. 국민에게 봉사하는 관점이 아닌, 민간의 비즈니스를 풍부하게 하는 조력자로써 무료가 아닌 유료서비스로 안정적으로 3D 지도 리소스를 제공한다면 제공자와 수요자 모두가 비즈니스 목적을 이룰 수도 있습니다. 

두번째 제약요소는 업계 스스로의 문제입니다. 3D 콘텐츠의 렌더링을 위해 고사양의 PC를 요구하지만 최근 컴퓨팅 파워의 눈부신 발전은 모바일폰에서도 3D 렌더링을 지원합니다. 문제는 공간정보 업계 스스로가 공공정보화사업을 주력 비즈니스로 영위하며 기술의 구현 범위를 제한한 것에 있습니다. 만일 즉시 이용가능한 고품질의 3D 지도서비스가 API 수준에서 제공된다면 이 것의 이용으로 3D 기반 서비스 제공이 가능합니다.

컴퓨팅 기술의 발전은 인프라 환경의 고민없이 콘텐츠 제작에 집중할 수 있도록 합니다. 이는 기회입니다. 제한을 두지 않고 내가 제공하려 하는 콘텐츠 또는 서비스에 역량을 발휘하면 되니까요.

세번째 제약요소는 GIS를 위한 공간정보서비스를 고집하기 때문에 발생합니다. 공간정보업계에 종사하시는 분들과 3D 관련하여 얘기를 나누게 되면, 지하 시설물을 얘기하고, 경관 분석을 얘기합니다. 좀 더 시각을 넓혔으면 합니다. 마이크로소프트는 Flight Simulator를 통해 전지구적인 범위에서 Real3D를 구축해가고 있습니다. 이는 GIS가 아닌 게임입니다. 결국 더 넓히면 Real World 에 Fun & Joy라는 가치를 담고 있습니다. 공간정보가 주력이 아닌 다른 산업을 풍부하게 하는 조력자(Enabler)의 역할을 하고 있습니다.

이의 모방이 DT라면 이를 통해 새로운 기회를 만들 수 있습니다. 단순히 공간정보서비스 제공이 아니라 어떤 산업 분야에서 어떻게 사용될 수 있는지 고민을 하고 이의 해결책을 찾는다면 시장은 커질 것이라고 믿고 있습니다. 기존의 Choropleth Map, HeatMap, 아이콘 등으로 시각화하는 것이 2차원 환경에서 주류였다면 여기에 더해 높이라는 가치를 제공하는 방법을 찾는다면, 그 안에서 3D 환경에서 사용자 UX의 가야할 방향을 찾을 수 있습니다.

공간정보서비스의 DT를 지원하는 3D 지도서비스

프로그웍스는 "하늘지도"라는 카테고리에서 "하늘지도 3D 지도서비스 API"를 소개하려 합니다. API 사용자는 이의 이용을 통해 어려운 3D를 조금이라도 쉽게 이용하게 하려합니다. API 사용자는 기존 공간정보서비스를 WebGL이라는 기술 기반 위에서, 법이 허용하는 범위 내에서 가장 정교한 3D 지형정보를 활용하도록 하겠습니다. 20cm급 고해상도 항공영상과 5m급 DEM 정보를 기반으로 만든 1m급 DEM 정보를 통해 렌더링 되는 고정밀 3D 국토정보 API입니다. 또한 이 API는 클라우드환경에서 제공되어 사용자의 증가에 능동적으로 대응하도록 인프라가 설계되었습니다. 최근 영상은 물론 과거영상까지 3D렌더링을 지원할 예정입니다.

현재 제작 중으로 정식으로 판매하지는 않습니다. 하지만 "아파트엔서비스"를 통해 일부 샘플을 제작하여 보여드리고 있습니다. 향후 많은 사업자가 이 API를 이용하여 다양한 3D 공간정보서비스를 개발하기를 기대합니다. API 발급 비용은 아직 내부 협의 단계로 밝히긴 어렵지만, 충분히 납득할 수 있는 비용으로 과금될 예정입니다.

이 후 지속적으로 하늘지도3D API를 소개하고, 이를 활용하는 쇼 케이스를 공개할 예정입니다.

아래 링크는 하늘지도API를 이용하여 제작된 드론센싱 애니메이션의 동영상 입니다. 배경 3D 리소스(항공영상 및 고도)는 삼아항업이 제작한 것입니다. 드론이 장성댐 인근을 비행하며 센싱하는 간단한 시나리오 입니다. 동영상을 인코딩한 PC가 태블릿이라 인코딩 품질이 좋지는 못합니다. 하지만 앞으로 나아가고자 하는 방향은 보입니다.

바로가기(웹뷰): 3D 드론센싱 애니메이션

바로가기(유튜브): 3D 드론센싱 애니메이션

 

SVG(Scalable Vector Graphics) 정의

> 바로가기 : W3C SVG Specfication (https://www.w3.org/TR/SVG2/)
> 바로가기 : W3School SVG Tutorial (https://www.w3schools.com/graphics/svg_intro.asp)
> 바로가기 : SVG 애니메이션 레벨2 (https://svgwg.org/specs/animations/)

동적 웹페이지를 위하여 플래쉬가 널리 사용되던 적이 있습니다. 현재도 사용되긴 하지만 웹 호환성 문제가 나타나며 점진적으로 사용이 감소하고 있는 추세입니다. 플래쉬를 충분히 대체할 수 있는 웹 표준 기술이 존재하기 때문에 플래쉬는 결국 사장될 것입니다. 이를 대체하는 대표적인 표준 기술이 SVG 입니다.

SVG(Scalable Vector Graphics)는 XML 문서 형식으로 2차원 벡터 그래픽 객체를 정의하는 웹 표준으로 1999년 W3C(World Wide Web Consortium)의 주도로 개발되었습니다. 당시 인터넷 이용 환경은 차별없는 웹 구현에 제약이 있었습니다. 웹 브라우저에서 그래픽 객체를 표현하기 위해 Flash, Applet, ActiveX 등 벤더 종속적인 Binary Plug-in 을 사용했으나 상호운영성 및 호환성에 부족한 부분이 있었습니다.

현재 신규 제작되는 웹사이트의 경우 대부분 HTML5 사양이 적용되고 있습니다. HTML5가 이전 HTML 사양과 구별되는 기술직인 특징은 멀티미디어(video, audio) 사용성 강화, 그래픽 표현 강화(svg, canvas), Socket 적용 등을 들 수 있습니다. HTML5가 정의하는 2차원 벡터 그래픽 표현 방법은 SVG를 사용합니다. 이를 통해 HTML5는 SVG가 가지는 장점을 수용합니다. SVG가 가지는 장점은 여러가지가 있지만 대표적으로 다음과 같습니다.

  • 문서로 작성되는 그래픽이기 때문에 텍스트 편집기를 통해 제작될 수 있다. 기계판독(Machine-Readable)이 되는 형식이다
    (플래쉬는 이진 바이너리 코드의 실행으로 기계판독이 되지 않는 데이터 입니다)
  • 벡터 그래픽이기 때문에 표현되는 장비 해상도에 영향을 받지 않는다
    (확대, 축소하더라도 원본의 품질을 유지한다)
  • DOM (Document Object Model)을 가지기 때문에 그래픽 요소에 대한 검색, 색인이 가능하다
  • Video, Audio, Raster Image 등 멀티미디어 요소와 통합이 쉽다
  • Animation 지원으로 동적인 그래픽 표현이 가능하다
    (SVG 애니메이션은 SMIL(Synchronized Multimedia Intergration Language)을 정의하는 W3C Synchronized Multimedia(SYMM) 워킹그룹과 협력하여 개발되었습니다.)
  • 웹 표준 기술이기 때문에 별도의 이진 플러그인 없이 웹브라우저에서 바로 동작한다.

[출처] http://svgtutorial.com/svg-browser-support/   

SVG 적용 사례

> 바로가기 : Pinterest (https://www.pinterest.co.kr/)
> 바로가기 : ArcGIS (https://developers.arcgis.com/javascript/3/jssamples/graphics_svg_path.html)
> 바로가기 : Earth NullSchool (https://earth.nullschool.net/)
> 바로가기 : D3-Data Driven Documents (https://d3js.org/)

 

SVG를 이용한 공간정보 시각화

공간정보 분야에서 SVG 적용으로 얻을 수 있는 가장 큰 이점은 SVG Animation 요소 적용으로 실시간으로 변하는 상황의 표현이 쉽다는 것입니다. 아래의 예시는 간단한 SVG 애니메이션 소스 입니다. 

첫번째는 그래픽요소가 가지는 속성을 변경하는 것으로, 실제 공간정보분야에 적용된다면 비즈니스 레이어에 존재하는 객체가 가지는 Business Value에 연동하여 그래픽 표현을 적용하는데 적용될 수 있습니다.
두번째는 객체의 위치를 변경하는 것으로써 이동체(Moving Object)의 실시간 위치를 관제하는 경우 적용될 수 있습니다.
세번째는 지정된 길을 따라가는 예시로 항공기의 궤적, 물류 분야 관제 등 경로 표현에 적용될 수 있습니다.
SVG에서 객체의 형상(Rectagle, Circle, General Path, Group,..)을 정의하는 모든 요소는 애니메이션의 대상이 됨으로 동적인 표현이 가능합니다.

지리좌표계의 적용을 위해 SVG 의 Root Element(<svg>)에 'viewBox' 속성을 지정합니다. 이를 통해 실세계 좌표계(World Coordintate Reference System)를 사용할 수 있습니다. 일반적으로 경위도로 표현되는 좌표를 그대로 이용하기 때문에 GIS App 개발을 위한 별도의 변환 작업이 요구되지 않습니다.

> 다운로드 : svg_gis.html ( 

svg_gis.zip
다운로드

가장 일반적인 방법으로써 공간정보의 시각화를 위하여 Openlayers, leaflet등의 공개 SW가 널리 사용됩니다. 이 들 라이브러리는 D3와 함께 사용되면 동적인 정보 표현을 가능하게 합니다. D3는 HTML, SVG, CSS를 쉽게 사용하도록 도와주는 Wrapper 또는 Helper 라이브러리 입니다. 사용자는 SVG가 정의하는 그래픽 요소에 대한 지식이 없더라도 D3를 통해 쉽게 SVG를 이용할 수 있습니다.

기회가 된다면 본 블로그를 통해 다양한 GIS Data Viewer(OpenLayers, Leaflet, CesiumJS)에서 SVG를 활용하는 사례를 직접 제작하여 게시하겠습니다. 

> 바로가기 : SVG 애니메이션 사례 - 영국 바람 차트 (

https://charts.animateddata.co.uk/ukwind/)

> 바로가기 : leatlet + SVG - TOURISVIS.COM 스키장 안내 지도 (

https://winter.intermaps.com/oetztal?lang=en)

 

 

Cesium JS에서 시점 변경 기능 활용하기

이번엔 Cesium JS를 활용하여 시점 변경 기능을 만들어 보도록하겠습니다.

서비스바로가기


1. 카메라 시점 변경 기능을 위한 "range" Element 구성     


<!DOCTYPE html>
<html lang="en">
<meta charset = "UTF-8">
<head>
    <script src="js/Cesium-1.53/Build/Cesium/Cesium.js"></script>
    <link href="js/Cesium-1.53/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width:auto; height:600px;"></div>
 
<div>
    <h2>카메라 시점 변경하기</h2>
    <input type="range" id="controllbar" name="range_value" min="500" max="15000" step="100" onchange="lookAtTransform(value)">
</div>
 
</body>
</html>
cs

- 최소값을 500 , 최대값을 15000으로 설정하고 step을 100으로 잡아 한번의 이동 시 100만큼의 값이 조절되도록 하였습니다.

- onchange함수를 설정하여줍니다.


실행화면은 다음과 같습니다.


2. script 태그 안에 아래와 같은 소스코드를 적용합니다.


<script type="text/javascript">
    var extent = Cesium.Rectangle.fromDegrees(117.89628431.499028139.59738043.311528);
  
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.7;
 
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGMxZjMzNy01N2FkLTQ3YTctODU0NS05NGY0MmE3MGJiOWEiLCJpZCI6NjExNywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTI3OTE3NH0.6VdcqK6vL7faWx_vYkkOuNNa8dapTn1geCi7qYBhGCw';
    var viewer = new Cesium.Viewer('cesiumContainer',
        {
            timeline : false,
            animation : false,
            selectionIndicator : false,
            navigationHelpButton : false,
            infoBox : false,
            navigationInstructionsInitiallyVisible : false   
        });
    
    //카메라 시점 조절하기 
    function lookAtTransform(value){
        var transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(126.92342837.524969)); // 카메라 시점이 적용될 위,경도         
        var camera = viewer.camera; //camera 선언
        
        camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
        camera.lookAtTransform(transform, new Cesium.Cartesian3(-10000.0-10000.0, value)); // 시점 변경을 위한 초기범위 설정    
    }
</script>
cs

"value"는 input태그 안 controllbar의 움직임에 따라 고도(각도)값이 변경됩니다. 


전체 소스코드는 아래와 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">
<meta charset = "UTF-8">
<head>
    <script src="js/Cesium-1.53/Build/Cesium/Cesium.js"></script>
    <link href="js/Cesium-1.53/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width:auto; height:600px;"></div>
 
<div>
    <h2>카메라 시점 변경하기</h2>
    <input type="range" id="controllbar" name="range_value" min="500" max="15000" step="100" onchange="lookAtTransform(value)">
</div>
 
<script type="text/javascript">
    var extent = Cesium.Rectangle.fromDegrees(117.89628431.499028139.59738043.311528);
  
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0.7;
 
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGMxZjMzNy01N2FkLTQ3YTctODU0NS05NGY0MmE3MGJiOWEiLCJpZCI6NjExNywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTI3OTE3NH0.6VdcqK6vL7faWx_vYkkOuNNa8dapTn1geCi7qYBhGCw';
    var viewer = new Cesium.Viewer('cesiumContainer',
        {
            timeline : false,
            animation : false,
            selectionIndicator : false,
            navigationHelpButton : false,
            infoBox : false,
            navigationInstructionsInitiallyVisible : false   
        });
    
    //카메라 시점 조절하기 
    function lookAtTransform(value){
        var transform = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(126.92342837.524969));          
        var camera = viewer.camera;
        
        camera.constrainedAxis = Cesium.Cartesian3.UNIT_Z;
        camera.lookAtTransform(transform, new Cesium.Cartesian3(-10000.0-10000.0, value));        
    }
</script>
</body>
</html>        
cs


완성된 최저, 중간, 최상으로 움직였을때의 화면입니다.

 - 자세한 기능을 보기위해 실행 화면 우 상단 baseLayer Map을 "Terrain Map"으로 변경합니다.

사진과 같이 controllbar 조절에 따라 시점이 변경되는 것을 볼 수 있습니다.

서비스바로가기

+ Recent posts