KR101494844B1

KR101494844B1 - 메타 데이터를 이용한 차트 변환 시스템 및 그 방법

Info

Publication number: KR101494844B1
Application number: KR20140112930A
Authority: KR
Inventors: 조기태
Original assignee: 그린캣소프트(주)
Priority date: 2014-08-28
Filing date: 2014-08-28
Publication date: 2015-02-25
Also published as: WO2016032080A1; JP2017501508A; JP6149165B2; CN105517681B; CN105517681A; US20170161354A1

Abstract

메타 데이터를 이용한 차트 변환 시스템 및 그 방법이 개시된다. 차트(chart) 변환 시스템은 차트를 표현하기 위한 차트 컴포넌트(component)를 포함하는 차트 규칙, 상기 차트 규칙을 구현하는 차트 런타임 및 메타 데이터 형태로 첨부된 차트 유형정보를 저장하는 메타 데이터 관리모듈, 상기 메타 데이터 관리모듈로부터 상기 차트 유형정보의 메타 데이터를 추출하는 추출모듈 및 상기 차트 컴포넌트 각각의 변환량을 연산하고, 상기 연산된 변환량과 상기 추출모듈에서 추출된 차트 유형정보의 메타 데이터를 결합하는 제어모듈을 포함한다.

Description

메타 데이터를 이용한 차트 변환 시스템 및 그 방법{System for Transforming Chart Using Metadata and Method thereof}

본 발명은 차트 변환 시스템 및 그 방법에 관한 것으로서, 구체적으로 벡터 형식으로 구성된 임의의 그림 파일을 차트 형태로 변환하는 시스템 및 그 방법에 관한 것이다.

최근 인터넷 기반 기술의 중심이 서버에서 웹 브라우저로 이동하면서 캔버스 API(Application Programming Interface), SVG(Scalable Vector Graphics) 등 그래픽 관련 기술 표준을 적극적으로 활용하는 추세이다. 그래픽 관련 기술 활용을 통해 보다 복잡한 시각적 상호작용이 강조되는 웹 응용 프로그램을 구축하는 사례가 급증하고 있다.

이러한 관련 기술 중 특히 SVG는, 그래픽 디자이너들이 널리 사용하는 저작도구들이 지원되고, 웹 브라우저 중심 개발의 핵심 역할을 하는 자바스크립트(javascript)언어로 쉽게 개별 구성 요소를 동적으로 조작할 수 있다는 특성이 있다. 이 때문에 SVG는 대시보드(Dashboard)나 차트(Chart) 등 웹 상에서 데이터를 시각화하는 방법으로 선호되는 추세이다.
특허 공개공보 10-2007-7015384 등에는 그래픽 사용자 인터페이스에 정보를 디스플레이하기 위한 방법 등이 개시되어 있으나, 종래의 기술에서는 디자이너가 저작도구로 제작한 SVG 파일을 대시보드나 차트 등 웹의 동적 구성요소로 변환하기 위해서는 자바스크립트 개발자의 개입이 불가피하다. 더불어, 디자인이 복잡하고 목표로 하는 시각화의 수준이 높아질수록 디자이너와 개발자 사이의 보다 긴밀한 협업이 필요하다.

삭제

하지만, 이러한 협업을 위해서는 디자이너도 개발자의 요구사항을 이해해야 하며, 개발자 역시 자바스크립트뿐만 아니라 SVG 표준에 대한 상당한 이해가 필요하다.

디자이너가 저작 도구가 생성한 SVG 파일 내용을 직접 다루거나, 개발자가 디자인 작업에 깊게 관여하는 것은 일반적인 관행이 아니다. 이 때문에 웹 기반 시각화 기술의 빠른 발전에도 불구하고 대시보드나 차트에 사용되는 디자인은 단순하고 정형화된 수준에서 크게 벗어나지 못하고 있는 실정이다.

따라서, 본 발명은 SVG와 같은 벡터 형식의 그래픽 파일 유형에 스크립팅(scripting)을 결합하여 대시보드나 차트 등 데이터를 시각화하는 컴포넌트를 제작하는 데 있어서 발생할 수 있는 전술한 문제점을 해결하기 위해 제안된 것이다

본 발명을 통해, 디자인된 파일에 미리 정해진 규칙에 따라 메타 데이터를 첨부하여, 디자이너와 개발자 각자의 역할을 명확히 분리함으로써, 디자이너와 개발자 모두의 작업 효율 향상을 도모하는 것을 목적으로 한다.

또한, 본 발명은 그래픽 디자이너들이 작업물에 메타 데이터를 직접 첨부하거나, 별도의 응용 프로그램의 도움을 받아 작업물에 메타 데이터를 첨부할 수 있게 하여, 개발자의 도움 없이 데이터 시각화 기능을 갖는 차트나 대시보드를 완성할 수 있게 함으로써, 빠르게 양질의 컨텐츠를 생산할 수 있도록 하는 데 다른 목적이 있다.

또한, 본 발명은 개발자들이 개별 디자인 컨텐츠의 특수성에 구애 받지 않고 메타 데이터에 대한 일반화된 규칙을 전제로 데이터 시각화 컴포넌트나 플랫폼을 구축할 수 있게 함으로써 동일한 코드를 다양한 디자인에 적용하여 코드 재활용성을 높이고 개발 효율을 극대화하는 데 목적을 둔다.

본 발명의 목적은 이상에서 언급한 목적으로 제한되지 않으며, 언급되지 않은 또 다른 목적들은 아래의 기재로부터 당업자에게 명확하게 이해될 수 있을 것이다.

전술한 과제를 해결하기 위한 본 발명의 일 면에 따른 차트 변환 시스템은

차트(chart)를 표현하기 위한 차트 컴포넌트(component)를 포함하는 차트 규칙, 상기 차트 규칙을 구현하는 차트 런타임 및 메타 데이터 형태로 첨부된 차트 유형정보를 저장하는 메타 데이터 관리모듈, 상기 메타 데이터 관리모듈로부터 상기 차트 유형정보의 메타 데이터를 추출하는 추출모듈 및 상기 차트 컴포넌트 각각의 변환량을 연산하고, 상기 연산된 변환량과 상기 추출모듈에서 추출된 차트 유형정보의 메타 데이터를 결합하는 제어모듈을 포함한다.
바람직한 실시예에 있어서, 메타 데이터 관리모듈은 차트 컴포넌트(component)를 포함하는 차트 규칙, 차트 런타임 및 메타 데이터 형태로 첨부된 차트 유형정보, 상기 차트를 포함하는 문서 객체 모델인 DOM(Document Object Model) 및 DOM(Document Object Model) 객체를 저장하는 차트 저장부, 디자인 파일 생성자에 의해 벡터 형식의 그래픽 파일이 업로드 되면, 상기 차트 저장부로부터 상기 업로드 된 그래픽 파일에 대응하는 적어도 하나의 DOM(Document Object Model) 객체를 제공하고, 상기 제공된 DOM 객체와 상기 그래픽 파일을 매칭하는 매칭부, 매칭 결과에 따라, 상기 DOM 객체에 메타 데이터를 첨부하는 생성부를 포함한다.
바람직한 실시예에 있어서, 차트 저장부는 메타 데이터가 첨부된 DOM(Document Object Model) 객체를 저장한다.

삭제

본 발명의 다른 일면에 따른 차트 변환 방법은 디자인 파일이 업로드 되면, 상기 업로드 된 디자인 파일에 대한 차트 선택 화면을 디스플레이 하는 단계, 차트 구성요소와 상기 디자인 파일에 포함된 디자인 구성요소를 연결하는 단계, 디자인 구성요소에 연결된 상기 차트 구성요소 정보를 상기 디자인 파일에 메타 데이터로 저장하는 단계를 포함한다.

차트 변환 방법은 차트 구성요소의 메타 데이터를 추출하는 단계, 차트 유형에 대한 런타임을 선택하는 단계, 선택된 런타임을 기반으로 상기 차트 구성요소를 판별하는 단계, 판별된 상기 차트 구성요소 각각의 변환량을 연산하는 단계 연산된 차트 구성요소의 변환량과 상기 추출된 차트 구성요소의 메타 데이터를 결합하는 단계 및 결합된 차트를 디스플레이 하는 단계를 포함한다.

이상에서 설명한 바와 같이, 본 발명에 따르면 데이터 시각화를 위한 동적인 컴포넌트를 개발하는 데 있어서, 그래픽 디자이너와 스크립트 개발자 간 직접적인 협업의 필요성을 최소화함으로써, 디자이너와 개발자 간의 상이한 경험과 배경에서 발생할 수 있는 의사소통 과정의 오해나 지연요소를 원천적으로 방지할 수 있다.

또한 본 발명의 상기한 특성을 활용하면 불특정 다수의 디자이너가 사전에 구현된 런타임 서비스를 이용해서 별도의 개발 과정 없이 원하는 차트나 대시보드를 빠르게 생산할 수 있다. 이를 통해, 본 발명을 재활용 가능한 데이터 시각화 컴포넌트에 대한 마켓플레이스(marketplace) 서비스 등에도 활용할 수 있다.

본 발명을 통해 데이터 시각화 컨텐츠를 매우 빠른 속도로 확보할 수 있기 때문에 데이터 시각화 컨텐츠를 바탕으로 인포그래픽(Infographic)제작 서비스나 다양한 테마와 템플릿을 지원하는 대시보드 서비스 등을 구축할 수 있다.

도 1은 본 발명의 실시예에 따른 데이터 시각화 시스템의 구성을 도시한 도면이다.
도 2는 본 발명의 실시예에 따른 데이터 시각화 장치 구성을 나타낸 블록도이다.
도 3은 본 발명의 실시예에 따른 데이터 시각화 장치의 구성을 보다 상세하게 나타낸 도면이다.
도 4a는 본 발명의 실시예에 따른 차트 변환 방법의 흐름을 나타낸 흐름도이다.
도 4b는 이해를 돕기 위해, 도 4a의 흐름에 따라 구축한 차트 저장부(210)에 디자인 원본을 업로드하고 차트 컴포넌트로 변환하는 과정을 도시한 도면이다.
도 5a는 본 발명의 실시예에 따라 구현한 차트 런타임이 차트 컴포넌트로부터 메타 데이터를 추출하여 데이터와 결합하여 동적인 차트를 표현하는 과정을 도시한 흐름도이다.
도 5b는 도5a의 흐름을 막대 차트에 적용한 것을 나타낸 도면이다.
도 6은 본 발명의 실시예에 따른 본 발명의 실시예에 따른 데이터 시각화방법이 실행될 수 있는 컴퓨터 장치의 일 구성을 도시한 도면이다.
도 7은 본 발명의 실시예에 따른 다이얼 차트를 나타낸 도면이다.

본 발명은 벡터 형식으로 구성된 임의의 그림 파일에 메타 데이터를 첨부하여 이를 동적인 형태의 차트로 자동 변환하는 시스템 및 그 방법에 관한 것이다. 특히, 본 발명에서는 벡터 형식의 그래픽 파일 유형에 스크립팅(Scripting)을 결합하여 대시보드와 차트 등의 데이터를 시각화하는 컴포넌트를 생성하는 메타 데이터를 이용한 차트 변환 시스템 및 그 방법을 제공한다.

본 발명은 임의의 벡터 형식의 디자인 파일에 메타 데이터를 추가하거나 변경할 수 있는 웹 응용 프로그램 형태, 또는 디자인 저작도구의 플러그인 형태의 모듈을 제공하며, 사전에 정의된 차트의 유형, 혹은 대시보드의 유형을 지원하기 위한 메타 데이터 작성을 위한 직관적인 사용자 인터페이스를 제공한다.

한편 본 발명은 일 측면에서 상기한 메타 데이터가 첨부된 디자인 파일을 지정된 차트나 대시보드의 유형에 대한 규칙에 대한 구현체와 결합하여 설정된 데이터 원본에서 조회한 데이터에 따라 완성된 형태의 차트 혹을 대시보드로 동작할 수 있도록 지원하는 런타임 환경을 제공한다.

본 발명의 이점 및 특징, 그리고 그것들을 달성하는 방법은 첨부되는 도면과 함께 상세하게 후술되어 있는 실시예들을 참조하면 명확해질 것이다. 그러나 본 발명은 이하에서 개시되는 실시예들에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 것이며, 단지 본 실시예들은 본 발명의 개시가 완전하도록 하며, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 발명의 범주를 완전하게 알려주기 위해 제공되는 것이며, 본 발명은 청구항의 범주에 의해 정의될 뿐이다. 한편, 본 명세서에서 사용된 용어는 실시예들을 설명하기 위한 것이며 본 발명을 제한하고자 하는 것은 아니다. 본 명세서에서, 단수형은 문구에서 특별히 언급하지 않는 한 복수형도 포함한다.

이하, 본 발명의 바람직한 실시예를 첨부된 도면들을 참조하여 상세히 설명한다. 우선 각 도면의 구성요소들에 참조부호를 부가함에 있어서, 동일한 구성요소들에 대해서는 비록 다른 도면상에 표시되더라도 가능한 동일한 부호를 가지도록 하고 있음에 유의해야 한다. 또한 본 발명을 설명함에 있어, 관련된 공지 구성 또는 기능에 대한 구체적인 설명이 본 발명의 요지를 흐릴 수 있다고 판단되는 경우에는 그 상세한 설명은 생략한다.

설명에 앞서 본 명세서에서 사용하는 용어의 의미를 간략히 설명한다. 용어의 설명은 본 명세서의 이해를 돕기 위한 것으로서 명시적으로 본 발명을 한정하는 사항으로 기재하지 않은 경우에 본 발명의 기술적 사상을 한정하는 의미로 사용하는 것이 아님을 주의해야 한다.

-메타 데이터(Metadata)

일반적으로 메타 데이터란, ‘데이터에 관한 데이터’라고 정의할 수 있다. 즉, 데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 속성정보라고도 한다. 메타 데이터는 대량의 정보 가운데에서 찾고 있는 정보를 효율적으로 찾아내서 이용하기 위해 일정한 규칙에 따라 콘텐츠에 부여된다.

본 명세서 전체에 걸쳐 메타 데이터는 SVG(Scalable Vector Graphics) 문서의 맥락에서 메타 데이터 태그와 클래스 속성을 포괄하는 그래픽 구성 요소나 문서 전체에 대한 참조 정보의 의미로 이해한다.

- 벡터 형식의 그래픽 유형

SVG(Scalable Vector Graphics), AI(Adobe Illustrator) 또는 EPS(Encapsulated PostScript)의 예와같이, 그림의 각 픽셀 별 색상 값이 아닌 도형의 기하학적 구성 정보 및 속성을 저장하여 임의의 배율로 자유롭게 확대 축소가 가능한 그림데이터 저장 형식을 뜻한다.

-SVG (Scalable Vector Graphics)

SVG는 2차원 벡터 그래픽을 표현하기 위한 XML(eXtensible Markup Language)기반의 파일 형식으로, 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화, 목록화, 스크립트화가 가능하며 필요하다면 압축도 가능하다. SVG 형식은 브라우저에서 널리 지원되는 표준기술 이라는 이유로 웹 상에서 동적인 데이터 시각화 기능을 구현하는데 흔히 사용된다.

본 명세서의 모든 예시는 별도의 언급이 없으면 SVG를 기준으로 하는 것으로 간주한다. 다만 본 발명의 개념은 메타 데이터를 첨부할 수 있고, 프로그램적으로 구성 요소를 구조적으로 접근할 수 있는 모든 유형의 벡터 그래픽에 적용할 수 있기 때문에 본 발명은 반드시 SVG 형식에만 적용되어야 한다고 해석해서는 안되며 SVG를 사용한 구현은 본 발명의 일 실시예로 간주한다.

한편 SVG 형식의 그래픽 파일은 XML 형태로 구성되어 DOM API를 통해 구조적인 조작이 용이하며 SVG 문서 내부에는 도형이나 색상 정의 등과 같은 디자인 요소 이외에도 제작자는 저작권 등을 명시할 수 있도록 특수한 메타 데이터 태그를 포함하는 것이 일반적이다. 또한 HTML과 마찬가지로 SVG 문서 대부분의 구성 요소는 클래스 속성을 통해 해당 요소의 의미를 부여할 수 있다.

-XML (eXtensible Markup Language)

마크업 언어(markup language)는 태그 등을 이용하여 데이터의 구조를 명기하는 언어의 한 가지로서, 인터넷 웹 페이지를 만드는 HTML(HyperText Markup Language)을 획기적으로 개선하여 만든 언어이다. XML 은 HTML 에 비해, 홈페이지 구축기능, 검색기능 등이 향상되었고, 웹 페이지의 추가와 작성이 편리해졌다.

도 1은 본 발명의 실시예에 따른 데이터 시각화 시스템의 구성을 도시한 도면이다.

도 1을 참조하면, 차트 저장부(210)와 차트 런타임을 구비한 데이터 시각화 시스템을 통해 불특정 다수의 디자이너(A, B)와 소수의 개발자(C)가 직접적인 협업 과정 없이 각자 디자인 및 시스템 운영 업무를 담당하는 실시예가 도시된다.

실시예에서는, 다수의 재활용 가능한 차트 컨텐츠가 차트 저장부(210)에 기 저장된다. 차트 사용자(D)는 차트 저장부(210)에 기 저장된 차트 컨텐츠를 이용하여 차트 데이터를 시각화한 보고서 등을 작성 가능하다.

이때, 차트 저장부(210)에 기 저장되는 차트 컨텐츠에는 차트 규칙 및 차트 런타임이 포함된다. 여기서, 차트규칙이란 막대, 파이 등 대표적인 차트 종류별로 주어진 데이터로부터 해당 차트를 표현하기 위해 추상적으로 정의된 일련의 규칙의 집합이다.

예컨대, 차트 규칙에는 차트가 다이얼 차트인 경우, 다이얼 차트의 디자인 구성요소 등이 포함된다. 여기서, 다이얼 차트는 도 7에 도시된 바와 같이, 원형 눈금에 시계 바늘 모양으로 하나 이상의 값을 표시하는 차트이다.

즉, 다양한 다이얼 차트의 디자인에는 현재 데이터 값을 나타내기 위해 반드시 하나 이상의 바늘(n1)에 해당하는 구성요소가 포함된다. 더불어, 다이얼 차트의 디자인에는 상기 바늘(n1)은 어느 특정 지점(10)을 중심으로 데이터 최대값에 대한 현재 값의 백분율에 대응하는 각도 범위만큼 시계 방향으로 회전해야 한다는 등의 내용을 포함한다.

차트 런타임은 차트 규칙에 대한 실제 구현체로서 DOM API(Document Object Model Application Program Interface) 를 통해 전술한 다이얼 차트의 바늘 등을 포함하는 구성 요소의 참조를 획득한다. 이후, 차트 런타임은 연동하는 데이터로부터 구성요소의 새로운 위치나 크기를 계산하여, 계산된 값을 차트에 적용한다. 실시예에서 SVG의 경우 해당 작업은 트랜스포메이션(Transformation) API를 통해 수행 가능하다.

도 2는 본 발명의 실시예에 따른 데이터 시각화 장치 구성을 나타낸 블록도이다.

도 2를 참조하면, 벡터 형식으로 구성된 임의의 그림 파일에 메타 데이터를 첨부하여, 그림 파일을 동적인 형태의 차트로 자동 변환하는 데이터 시각화 장치는 사용자 인터페이스 모듈(100), 메타 데이터 관리모듈(200), 메타 데이터 추출모듈(300)및 제어모듈(400)을 포함한다.

본 명세서에서 사용되는 ‘모듈’ 이라는 용어는 용어가 사용된 문맥에 따라서, 소프트웨어, 하드웨어 또는 그 조합을 포함할 수 있는 것으로 해석되어야 한다. 예를 들어, 소프트웨어는 기계어, 펌웨어(firmware), 임베디드코드(embedded code), 및 애플리케이션 소프트웨어일 수 있다. 또 다른 예로, 하드웨어는 회로, 프로세서, 컴퓨터, 직접 회로, 직접 회로 코어, 센서, 멤스(MEMS; Micro-Electro-Mechanical System), 수동 디바이스, 또는 그 조합일 수 있다.

사용자 인터페이스 모듈(100)은 디자이너, 개발자 및 차트 사용자를 포함하는 사용자에게 입출력 인터페이스를 제공한다. 예컨대, 사용자 인터페이스 모듈(100)은 디자이너에게는 그래픽 파일 업로드를 위한 인터페이스와 차트 구성요서와 디자인 그래픽 파일을 대응시키기 위한 인터페이스 등을 제공한다. 또 다른 예로, 사용자 인터페이스 모듈(100)은 개발자에게는 디자이너에 의해 메타 데이터가 첨부된 그래픽 파일에서 메타 데이터 추출을 위한 인터페이스 및 차트 변환 후 상기 변환된 차트를 디스플레이 하는 인터페이스 등을 제공한다.

메타 데이터 관리 모듈(200)은 차트(chart)를 표현하기 위한 차트 컴포넌트(component)를 포함하는 차트 규칙 및 상기 차트 규칙을 구현하는 차트 런타임을 저장한다.

메타 데이터 추출모듈(300)은 메타 데이터 관리모듈(200)로부터 사용자 인터페이스 모듈(100)에 입력된 그림 파일 데이터(a)에 대응하는 차트 컴포넌트의 메타 데이터(b)를 추출한다.

제어모듈(400)은 차트 컴포넌트 각각의 변환량을 연산하고, 메타 데이터 추출모듈(300)로부터 추출된 메타 데이터(c)를 전달받는다. 상기 연산된 차트 컴포넌트 변환량과 추출된 메타 데이터는 제어모듈(400)에서 결합된다. 이후, 제어모듈(400)은 결합된 차트 컴포넌트 데이터(e)를 사용자에게 출력하도록 사용자 인터페이스 모듈(100)로 전달한다.

도 3은 본 발명의 실시예에 따른 데이터 시각화 장치의 구성을 보다 상세하게 나타낸 도면이다.

도 3을 참조하면, 데이터 시각화 장치의 사용자 인터페이스 모듈(100)은 입력부(110) 및 출력부(130)를 포함하고, 메타 데이터 관리 모듈(200)은 차트 저장부(210), 매칭부(230) 및 생성부(250)를 포함하고, 제어모듈(400)은 연산부(410) 및 결합부(420)을 포함한다. 도 3을 설명함에 있어, 중복되는 설명은 생략한다.

메타 데이터 관리모듈(200)의 차트 저장부(210)는 차트 컴포넌트(component)를 포함하는 차트 규칙, 차트 런타임 및 메타 데이터 형태로 첨부된 차트 유형정보 등을 저장한다.

매칭부(230)는 디자인 파일 생성자에 의해 벡터 형식의 그래픽 파일(f)이 업로드 되면, 차트 저장부(210)로부터 업로드 된 그래픽 파일에 대응하는 적어도 하나의 DOM(Document Object Model) 객체를 제공하고, 제공된 DOM 과 상기 그래픽 파일을 매칭한다.

생성부(250)는 매칭 결과에 따라, DOM 객체에 메타 데이터를 첨부하여, 메타 데이터가 첨부된 차트 유형정보를 생성한다.

생성부(250)에서 생성된 메타 데이터가 첨부된 차트 유형 정보는 차트 저장부(210)로 전달되어 저장 가능하다.

본 발명의 다른 일면에 따른 차트 변환 방법은 그래픽 파일 생성자 및 디자이너에 의해 디자인 파일이 업로드 되면, 상기 업로드 된 디자인 파일에 대한 차트 선택 화면을 디스플레이 하는 단계, 차트의 필수 구성요소와 상기 디자인 파일에 포함된 디자인 구성요소를 연결하는 단계 및 상기 디자인 구성요소에 연결된 상기 차트 구성요소 정보를 상기 디자인 파일에 메타 데이터로 저장하는 단계를 포함한다.

도 4a는 본 발명의 실시예에 따른 차트 변환 방법의 흐름을 나타낸 흐름도이다. 특히, 도 4a는 차트 저장부(210)에 디자인 원본을 업로드하고 차트 컴포넌트로 변환하는 과정을 나타낸다. 도 4a를 통해 디자이너가 제작한 그래픽 디자인 결과물에 본 발명의 실시예에 따른 차트 변환 방법을 통해 그래픽 디자인 결과물에 메타 데이터를 설정하는 과정을 설명한다. 이하, 메타 데이터를 첨부하는 과정은 디자인 저작도구의 플러그인 형식으로도 구현 할 수 있으며 도 4a에서 도시한 과정은 본 발명의 대표적 실시예로 해석해야 한다.

먼저, S10 단계에서는 실시예에 따라 구성된 차트 저장소(210)에 디자인 원본이 업로드 되는 과정이 수행된다. 이때, 디자이너는 저작도구로 제작한 그래픽 디자인 파일을 SVG 형태로 저장한 후, 데이터 시각화 장치에 구성된 차트 저장부(210)에 업로드 한다. 그러면, S20 단계에서는 업로드 된 디자인 원본 파일에 시각적으로 대응하는 차트 선택 화면이 표시되는 과정이 수행된다. 이때, 차트 저장부(210)는 시스템이 지원하는 차트의 종류를 나열하여 디자이너가 업로드 한 디자인 파일을 변환할 대상을 선택할 수 있도록 한다.

S30 단계에서는 차트 구성요소와 디자인 구성요소가 시각적 상호작용을 통해 연결되는 과정이 수행된다. 이후, S40 단계에서는 차트 구성요소 정보를 디자인 파일에 메타 데이터로 저장하는 과정이 수행된다.

예컨대, 디자이너가 S20 단계에서 다이얼 차트를 선택했다면, 차트 변환 시스템은 S20단계 이후 단계에서 업로드 된 디자인 파일을 화면에 표시한 후, 디자이너에게 다이얼 차트의 필수 구성 요소인 바늘과 축 등에 해당하는 SVG의 DOM객체의 참조를 가져와서 DOM API를 통해 ‘class=”indicator”’과 같은 클래스 속성을 추가하는 방식으로 런타임 시 해당 객체가 다이얼 차트의 바늘로 동작해야 함을 기술할 수 있다.

상기한 방식에 따라 차트의 필수 구성요소에 대한메타 데이터 기술을 마친 후, S50 단계에서 데이터 시각화 시스템은 SVG의 ‘metadata’태그 내부에 XML의 커스텀 네임스페이스(name space)확장을 활용하여 사전에 정한 방식으로 ‘<chart: type>dial</chart: type>’과 같이 선택한 차트의 유형 정보를 메타 데이터로 파일에 첨부한 후 저장한다.

도 4b는 이해를 돕기 위해, 도 4a의 흐름에 따라 구축한 차트 저장부(210)에 디자인 원본을 업로드하고 차트 컴포넌트로 변환하는 과정을 도시한 도면이다.

도 4b에 도시된 막대 차트(41)의 경우 본 발명의 실시예에서는 차트 저장부(210) 데이터와 연동하는 대상이 되는 막대 구성요소(e, f, g) 이외에, 차트의 최소값(min) 및 최대값(max)에 대응하는 길이의 막대 구성요소를 추가로 지정한다. 해당 구성 요소는 상기한 방식과 마찬가지로 해당 SVG 태그에 ‘class=”min”’, 또는 ‘class=”max”와 같이 ‘class’속성을 지정하는 것으로 표현할 수 있다.

도 5a는 본 발명의 실시예에 따라 구현한 차트 런타임이 차트 컴포넌트로부터 메타 데이터를 추출하여 데이터와 결합하여 동적인 차트를 표현하는 과정을 도시한 흐름도이다.

첨부된 보고서에 대한 차트 컴포넌트 요청이 수신되면, S510 단계에서는 해당 차트 컴포넌트에 첨부된 메타 데이터를 추출하는 과정이 수행된다. 이후, S520 단계에서 추출된 메타 데이터에 따라 차트의 유형을 확인하고 상기 유형을 지원하는 차트 런타임을 구동하는 과정이 수행된다.

구동 이후, S530 단계에서는 해당 차트 유형의 필수 구성요소를 판별하는 과정이 수행된다. 예컨대, 다이얼 차트 유형의 경우 차트 런타임은 해당 차트 컴포넌트의 SVG 파일에는 다이얼의 바늘에 해당하는 구성 요소를 ‘indicator’라는 값을 갖는 ‘class’ 속성의 존재 유무로 조회할 수 있다. 이는 DOM API나 이를 기반으로 한 자바스크립트 라이브러리 등을 활용해서 수행할 수 있다.

상기한 방식으로 바늘 및 축의 DOM 객체에 대한 참조를 획득한 후, S540 단계에서는 차트와 연동된 데이터로부터 구성요소의 변환량을 계산하고 이를 차트에 적용하는 과정이 수행된다. 예컨대, 차트 유형에 따라 다이얼 차트의 경우, 차트의 구성요소인 바늘의 회전 각도를 계산하는 과정이 수행된다. 다이얼 차트의 경우 최대값에 대한 백분율을 나타내는 것이 일반적이기 때문에, 바늘의 회전각도를 전체 회전 가능 범위인 360도에 대한 백분율 적용값으로 나타낼 수 있다.

S550 단계에서는 계산된 각도를 트랜스포메이션 API를 통해 객체에 적용시켜 변환량이 적용된 차트를 표시하는 과정이 수행된다. 상기 전술한 실시예에서 다이얼 차트의 바늘 객체에 적용하여 상기한 축의 객체를 기준으로 회전시키면 데이터 값이 적용된 완성된 다이얼 차트로서 동작하게 된다.

한편, 다이얼 차트의 디자인에 따라 바늘의 회전 범위가 360도가 아닌 특정 범위, 예컨대 -120도로부터 120도까지로 제한되는 경우를 가정할 수 있다. 이 경우, 해당 제약 범위는 상기한 바와 마찬가지로 SVG 문서의 ‘metadata’ 태그 등을 활용해서 기술하고, 차트 런타임에서 추출해서 계산시 참조하는 방식으로 구현할 수 있다.

본 발명의 실시예에 따라 차트 컴포넌트는 필요에 따라 최종 사용자의 보고서나 대시보드 등에 첨부해서 데이터 시각화에 활용할 수 있다. 이 때, 차트 저장부(210)로부터 메타 데이터를 첨부한 차트 컴포넌트를 불러와서 최종 사용자가 지정한 데이터를 결합하여 완성된 차트를 화면에 표시하기 위해서 ‘차트 런타임’을 구성할 수 있다.

도 5b는 도5a의 흐름을 막대 차트에 적용한 것을 나타낸 도면이다.

도 5b에 도시된 바와 같이, 실시예에서는 차트 구성요소에 대한 메타 데이터를 추출하여, 상기한 최소 및 최대값에 해당하는 구성 요소를 조회한 후 구성 요소의 화면 경계로부터 막대가 차지할 수 있는 영역의 크기를 계산한다. 이후, 데이터 구성요소를 복사해서 연동하는 데이터의 플롯(도 5에 도시된 실시예의 ‘A’, ‘B’, ‘C’, ‘D’) 수만큼 복제한 후, 상기한 방식으로 계산한 영역에 대한 각 플롯 데이터의 백분율에 따라 개별 막대의 길이를 계산하여 트랜스포메이션 API를 통해 적용한다.

도 6은 본 발명의 실시예에 따른 본 발명의 실시예에 따른 데이터 시각화방법이 실행될 수 있는 컴퓨터 장치의 일 구성을 도시한 도면이다.

본 발명의 실시예에 따른 차트 변환 방법은 컴퓨터 시스템에서 구현되거나, 또는 기록매체에 기록될 수 있다. 도 6에 도시된 바와 같이, 컴퓨터 시스템은 적어도 하나 이상의 프로세서(121)와, 메모리(123)와, 사용자 입력 장치(126)와, 데이터 통신 버스(126)와, 사용자 출력 장치(127)와, 저장소(128)를 포함할 수 있다. 전술한 각각의 구성 요소는 데이터 통신 버스(122)를 통해 데이터 통신을 한다.

컴퓨터 시스템은 네트워크에 커플링된 네트워크 인터페이스(129)를 더 포함할 수 있다. 상기 프로세서(121)는 중앙처리 장치(Central Processing Unit (CPU))이거나, 혹은 메모리(123) 및/또는 저장소(128)에 저장된 명령어를 처리하는 반도체 장치일 수 있다.

상기 메모리(123) 및 상기 저장소(128)는 다양한 형태의 휘발성 혹은 비휘발성 저장매체를 포함할 수 있다. 예컨대, 상기 메모리(123)는 ROM(124) 및 RAM(125)을 포함할 수 있다.

따라서, 본 발명의 실시예에 따른 차트 변환 방법은 컴퓨터에서 실행 가능한 방법으로 구현될 수 있다. 본 발명의 실시예에 따른 차트 변환 방법이 컴퓨터 장치에서 수행될 때, 컴퓨터로 판독 가능한 명령어들이 본 발명에 따른 차트 변환 방법을 수행할 수 있다.

한편, 상술한 본 발명의 실시예에 따른 차트 변환 방법은 컴퓨터로 읽을 수 있는 기록매체에 컴퓨터가 읽을 수 있는 코드로서 구현되는 것이 가능하다. 컴퓨터가 읽을 수 있는 기록 매체로는 컴퓨터 시스템에 의하여 해독될 수 있는 데이터가 저장된 모든 종류의 기록 매체를 포함한다. 예를 들어, ROM(Read Only Memory), RAM(Random Access Memory), 자기 테이프, 자기 디스크, 플래시 메모리, 광 데이터 저장장치 등이 있을 수 있다. 또한, 컴퓨터로 판독 가능한 기록매체는 컴퓨터 통신망으로 연결된 컴퓨터 시스템에 분산되어, 분산방식으로 읽을 수 있는 코드로서 저장되고 실행될 수 있다.

이상 바람직한 실시예와 첨부도면을 참조하여 본 발명의 구성에 관해 구체적으로 설명하였으나, 이는 예시에 불과한 것으로 본 발명의 기술적 사상을 벗어나지 않는 범주 내에서 여러 가지 변형이 가능함은 물론이다. 그러므로 본 발명의 범위는 설명된 실시예에 국한되어 정해져서는 안되며 후술하는 특허청구의 범위뿐만 아니라 이 특허청구의 범위와 균등한 것들에 의해 정해져야 한다.

Claims

차트(chart)를 표현하기 위한 차트 컴포넌트(component)를 포함하는 차트 규칙, 상기 차트 규칙을 구현하는 차트 런타임 및 메타 데이터 형태로 첨부된 차트 유형정보를 저장하는 메타 데이터 관리모듈;
상기 메타 데이터 관리모듈로부터 상기 차트 유형정보의 메타 데이터를 추출하는 추출모듈; 및
상기 차트 컴포넌트 각각의 변환량을 연산하고, 상기 연산된 변환량과 상기 추출모듈에서 추출된 차트 유형정보의 메타 데이터를 결합하는 제어모듈; 을 포함하여 차트 데이터를 시각화하는 차트 변환 시스템.
제 1항에 있어서, 상기 메타 데이터 관리모듈은
차트 컴포넌트(component)를 포함하는 차트 규칙, 차트 런타임 및 메타 데이터 형태로 첨부된 차트 유형정보, 상기 차트를 포함하는 문서 객체 모델인 DOM(Document Object Model) 및 DOM(Document Object Model) 객체를 저장하는 차트 저장부;
디자인 파일 생성자에 의해 벡터 형식의 그래픽 파일이 업로드 되면, 상기차트 저장부로부터 상기 업로드 된 그래픽 파일에 대응하는 적어도 하나의 DOM(Document Object Model) 객체를 제공하고, 상기 제공된 DOM 객체와 상기 그래픽 파일을 매칭하는 매칭부;
상기 매칭 결과에 따라, 상기 DOM 객체에 메타 데이터를 첨부하는 생성부;를 포함하는 것을 특징으로 하는 차트 변환 시스템.
제 2항에 있어서, 상기 차트 저장부는
상기 메타 데이터가 첨부된 DOM(Document Object Model) 객체를 저장하는 것을 특징으로 하는 차트 변환 시스템.
차트 변환 방법에 있어서,
디자인 파일이 업로드 되면, 상기 업로드 된 디자인 파일에 대한 차트 선택 화면을 디스플레이 하는 단계;
차트의 필수 구성요소와 상기 디자인 파일에 포함된 디자인 구성요소를 연결하는 단계;
상기 디자인 구성요소에 연결된 상기 차트 구성요소 정보를 상기 디자인 파일에 메타 데이터로 저장하는 단계;
를 포함하는 것을 특징으로 하는 차트 변환 방법.
제 4항에 있어서, 상기 차트 변환 방법은
상기 차트 구성요소의 메타 데이터를 추출하는 단계;
상기 차트 유형에 대한 런타임을 선택하는 단계;
상기 선택된 런타임을 기반으로 상기 차트 구성요소를 판별하는 단계;
상기 판별된 상기 차트 구성요소 각각의 변환량을 연산하는 단계;
상기 연산된 차트 구성요소의 변환량과 상기 추출된 차트 구성요소의 메타 데이터를 결합하는 단계; 및
상기 결합된 차트를 디스플레이 하는 단계;를 포함하는 것을 특징으로 하는 차트 변환 방법.
삭제