알메이트차트
알메이트차트(rMate Chart)는 ㈜리아모어소프트(RiaMore Soft)에서 어도비플렉스(Adobe® Flex™) 제품을 사용해 개발된 애플리케이션이다. 사용자에게 데이터를 시각적으로 알기 쉽게 제시할 수 있는 솔루션을 제공한다.
개요[편집]
알메이트차트는 사용자에게 데이터를 시각적으로 알기 쉽게 제시할 수 있는 솔루션을 제공한다. 단순한 2차원이 아닌 3D 와 그라데이션 효과를 넣은 2D 를 통해 수치 데이터를 표현하기 때문에 한 차원 업그레이드된 사용자 인터페이스(UI) 를 경험할 수 있다. HTML, .NET, JSP, PHP, ASP, 콜드퓨전(Coldfusion) 등과 같은 웹 스크립트 언어에 구애받지 않고 강력하고 화려한 차트를 제공한다. 알메이트차트를 생성하기 위해서는 차트 레이아웃과 수치 데이터가 필요하다. 차트 레이아웃은 차트 유형의 선택을 시작으로 차트 컬러 변경, 차트 축 조작 등 세밀한 부분을 제어하는 XML 파일이다. 차트 데이터는 XML 형식과 배역 객체를 지원하며, 사용자의 환경과 편의에 따라 데이터를 작성 가능하다. 알메이트차트의 수치 데이터는 XML 형식과 배열 형식을 지원하며, 사용자는 몇 가지 규칙에 따라 차트 데이터를 작성해야 한다. 규칙에 의거하여 단일 데이터 차트의 싱글 시리즈와 다중 데이터 차트의 멀티 시리즈를 XML 형식과 배열형식으로 각각 변환하여 차테에 삽입해야 한다.[1]
특징[편집]
알메이트차트는 약 36종의 세계 최대의 차트종류와 450여 샘플을 통해 신속한 개발이 가능하며, 섬세한 부분까지도 제어가 가능한 강력한 차팅 툴이다. 깔끔하고 아름다운 디자인을 통해 최고의 비주얼을 제공하고, 다양한 효과(effect)를 통해 한층 더 생동감 있는 UI를 제공한다. 또한, 차트의 외형과 데이터를 분리하여 업무의 효율성을 높일 수 있다. 프로그램 개발자라면 누구나 손쉽게 XML과 String 및 Array, Json, HTML table, CSV 등을 통해 차트와의 데이터 인터페이스가 가능하고 웹접근성을 준수한다.(시각장애인을 위한 TTS와의 데이터연동지원, 색맹/색약인분을 위한 패턴처리 기능 지원) 그렇기 때문에 IE, 크롬(Chrome), 파이어폭스(FireFox), 사파리(Safari) 등의 모든 브라우저에서 별도의 플러그인이나 ActiveX의 다운로드없이 사용이 가능하고 HTML5가 지원되는 최신의 모바일 환경(스마트폰, 태블릿PC)에서 사용이 가능하다. 그리고, 순수 국산기술로 개발되었기에 고객에게 신속한 응대를 제공해 준다.[2]
- 운용환경 : 크로스 브라우저를 지원하는 IE9 이상 외의 파이어폭스나 크롬과 사파리 등이 브라우저에서 운용된다. 모바일 단말의 지원은 HTML5를 지원하는 모든 모바일 플랫폼 아이오에스(iOS), 안드로이드(Android), 윈도우(Windows), 모바일 등에서 지원된다. 서버의 운영체제는 윈도우, 리눅스, 유닉스 등의 운영체제 서버의 종류에 종속되지 않는다. 또한, 서버의 개발언어에 종속되지도 않는다. 클라이언트의 차트와 서버의 데이터 인터페이스는 XML이나 배열(Array)과 제이슨(Json) 등으로 이루어지므로, 서버의 모든 개발언어에서 사용이 가능하다.[2]
주요 기능[편집]
지원되는 차트의 종류로는 선 차트, 막대 차트, 바 차트, 영역 차트, 파이 차트, 도넛 차트, 게이지 차트 등이 있다. 차트와 데이터의 연동으로 데이터는 XML을 통해서 전달될 수 있으며, 배열이나 제이슨, HTML 테이블, CSV 형식의 데이터도 지원이 가능하다. 에이잭스(Ajax) 통신을 통해 실시간 변형이 가능하다. 또한, 차트 레이아웃의 분리로 차트의 외형과 데이터는 분리되도록 하여 업무의 효율성을 높일 수 있다. 차트의 레이아웃은 XML로 작성할 수 있으며, 실시간 변경을 위하여 문자열로도 전달할 수 있다. 알메이트차트는 차트의 제목, 차트의 컬러, 차트의 바탕화면, 차트의 축, 축의 라벨, 축의 눈금선, 축의 두께, 범례, 차트 마우스 오버시 처리, 차트 클릭 시의 처리, 라벨의 위치, 차트가 보이는 이펙트, 선 차트에서의 꼭지점의 표시, 차트의 실시간 변형 등의 기능을 이용자가 설정하고 수행할 수 있다. 차트의 확대와 축소 기능, 마우스 십자가 표시, 다중선 및 영역 그리기 기능, 메모 기능, 추세선 그리기, 드릴다운을 통한 계층형 차트 표현 등의 다양한 디테일 기능도 제공된다. 각종 이벤트에 대하여 자바스크립트를 통한 이용자 정의 함수를 제공하며, 다양한 이펙트를 통해 화려한 사용자 인터페이스를 제공한다. 제공하는 이펙트는 보간, 슬라이드, 확대 및 축소, 클립 이펙트 등이 있다.
또한, 차트의 동적 변경이 가능하여 실시간으로 차트의 유형 및 데이터를 변경할 수 있고, 데이터 에디터를 통한 차트 시뮬레이션이 가능하다. 차트를 이미지 혹은 pdf로 변환하여 PC로 저장하거나 서버로 전송이 용이하며, 시각장애인을 위한 패턴기능 및 대체텍스트 기능 제공과 모바일 단말 스마트폰, 태블릿PC 등에서 데스크탑과 동일한 기능을 사용 가능하다.[2]
구성[편집]
알메이트차트의 생성을 위해서는 차트 레이아웃과 수치 데이터가 필요하다. 레이아웃은 차트유형, 차트 컬러 변경, 차트 축 조작 등의 차트의 외형을 제어하는 XML이고, 차트 데이터는 XML 형식과 자바스크립트 배열, 제이슨타입, HTML 테이블, CSV 등을 지원한다. 사용자의 환경과 편의에 따라 데이터를 선택할 수 있다. 즉, 차트 데이터 및 레이아웃을 작성하면 모바일 단말과 데스크탑으로 망을 통한 js 실행파일 및 데이터와 레이아웃을 전송한다.[2]
㈜리아모어소프트[편집]
㈜리아모어소프트는 자사의 HTML5기반 웹 및 모바일용 차트 컴포넌트인 알메이트차트가 한국정보통신협회(TTA)로부터 GS인증을 획득했다. 알메이트차트는 2012년 첫 출시 후 지속적인 연구개발과 업그레이드를 통해 알메이트 차트 v6.0 으로 거듭났다. 또한, 웹표준인 HTML5의 Canvas 기술과 자바스크립트, CSS를 이용해 기업업무 시스템과 웹서비스에서 필요한 각종 통계자료를 다양한 유형의 그래프로 쉽고 빠르게 구현하는 등 개발 생산성과 편의성을 높였다. 알메이트 차트는 다양한 디바이스와 브라우저 환경에서 웹 UI를 하나의 도구로 개발할 수 있어 원 소스 멀티 유즈(One Source Multi Use)를 지원하고, 데이터와 레이아웃을 분리해 업무의 효율성을 높였다. 심재홍 리아모어소프트 사장은 "알메이트 차트는 웹 표준과 웹 접근성을 강화하는 것은 물론 데이터를 감성적이고 트렌디하게 표현한다"며 "GS인증 획득을 계기로 제품에 대한 품질과 성능에 대한 신뢰성을 확보하고 국내 및 해외시장에서의 제품경쟁력에 가속도를 붙일 것"이라고 말했다.[3]
버전[편집]
5.0 버전[편집]
㈜리아모어소프트는 이벤트차트 등 11종의 신규차트 추가 및 디자인 개편된 알메이트 HTML5 차트 5.0을 출시했다. 이벤트 차트는 데이터의 특정 조건에 대해 차트 영역 내 CSS로 문자나 이미지 등을 통한 이벤트 액션 처리로, 생동감 있는 차트를 만들 수 있게 됐다고 설명했다. 또한, 간단하고 주목도가 높은 게이지류, 특정 이미지를 반복적인 형태로 배치해 비교할 수 있는 이미지 매트릭스, 데이터 블록을 쌓는 모양으로 실시간 변동성을 표현하는 이퀄라이저, 데이터 방향 및 크기 표시를 할 수 있는 윈드로스, 단계적인 데이터 필터링 과정을 표현하는 피라미드, 퍼늘, 오버레이 차트를 새롭게 개발해 시각화 수단을 다양하게 제공했다. 차트 UI의 핵심요소인 색상 및 디자인을 개선해 시각적 전달력과 미적 아름다움을 표현할 수 있게 했다. 축라벨 그룹핑, 라인차트 끝부분에 시리즈명 나타내기, 차트내 아이템 다중 선택, 선택된 데이터의 확인, 외부에서 차트 아이템 선택, 툴팁 개선, 서로 다른 차트간 십자선 연동 등의 신규 기능개발로 편의성을 높였다.[4]
6.0 버전[편집]
2019년 4월 4일자 기준으로 알메이트차트가 6.0 버전으로 업그레이드 되었다. 6.0 버전이 최신버전이다. 모바일 환경에서의 속도개선는 모바일 환경에서 속도가 느리다는 의견들이 있었고, 다양한 종류의 모바일 환경에서도 사용에 문제가 없도록 속도 개선에 노력했다. 최신의 스마트폰 환경에서는 거의 구분이 되지 않으나, 구형 스마트폰 등에서는 속도의 차이를 느낄 수 있다. 차트 내의 메모의 위치 변경의 문제가 있다. 기존 5.0 버전 이하에서는 차트 내의 특정 위치에 메모를 삽입하였을 경우 차트의 전체 크기가 변경이 되면, 메모의 위치가 변동되지 않는 문제가 있었다. 메모의 위치 조정을 물리적인 픽셀로만 조정하기 때문에 발생한 문제이다. 6.0 버전에서는 메모의 위치를 비율로 조정할 수 있도록 했다. 차트의 크기가 변경될 때, 메모의 위치도 변경된 크기에 맞추어 자동으로 조정되게 된다. 또한, 축에 표시되는 레이블의 길이가 다른 레이블보다 특별히 긴 경우가 있다. 기존에는 개발자가 태그를 통해 개행처리를 해 주어야 했으나, 6.0 버전에서는 자동으로 개행처리하는 기능이 추가되었다. 알메이트차트 6.0버전은 라벨의 중복을 회피할 수 있는 기능도 제공된다. 컬럼, 바, 라인, 영역, 플롯 등의 차트가 복잡하여 라벨이 겹쳐서 보여지게 되면, 자동으로 겹쳐지는 라벨이 표시되지 않게끔 하는 기능이 추가되었으며, 원게이지 안의 라벨에 클릭 이벤트도 제공한다. 심플 게이지, 하프 심플 게이지, 멀티 심플 게이지 등에서 원 안에 있는 라벨에 클릭을 할 경우 이에 대한 이벤트를 전달하는 기능이 추가되었다.
알메이트차트가 6.0 버전은 3D 컬럼와 바 차트에서 레이블의 위치 수정이 가능하다. 축의 레이블 위치를 계산하는 데 있어 입체감을 살릴 수 있어 수학적인 위치와 사람의 눈으로 보기 편한 위치가 일치하지 않는 면이 있었다. 이에, 6.0 버전부터는 사람의 눈이 보기 편한 위치에 라벨을 표시할 수 있있다. 서브레전드(SubLegend)에서 아이템 렌더러의 모양을 다르게 표현할 수도 있다. 기존에는 서브레전드의 경우 아이템 렌더러의 색상은 서로 다르게 할 수 있었지만, 모양은 하나로만 표현이 되었다. 6.0 버전에서는 모양도 서로 다르게 표시할 수 있다. 또한, 범례에서 아이템 클릭 시에 강조 여부 선택기능은 아이템의 비저블 여부만 선택되었던 강조 여부도 표현 가능하도록 옵션이 추가되었다. 급격히 인지도를 높이고 있는 자바스크립트 프레임워크인 VUE, 리액트(REACT), 앵귤러제이에스(Angular JS) 등에서 알메이트차트를 사용하면, 더욱 손쉽게 사용할 수 있는 예제와 매뉴얼이 개편되었다. 기존 차트의 매뉴얼은 사용설명서 PDF 파일과 개발자 API, html 파일의 두 가지로 제공이 되었다. 6.0 버전에서는 사용설명서가 pdf에서 html로 각 주제별로 좀 더 쉽게 이해할 수 있도록 세밀하게 정리되었다.[2]
- 신규 차트의 추가
범퍼차트(Bump Chart)는 주로 순위의 변동을 표현코자 할때 사용되는 차트이다. 매년마다 국가별 올림픽 메달의 순위변동, 대기업의 매출순위 변동 등을 차트로 표현하고자 할 때 아주 유용한 차트이며, 롤리팝 차트(Lollipop Chart)는 기존 이미지 차트(Image Chart)의 경우에 사용될 이미지를 선택하고 이를 적용 및 조정하다 보면 시간의 소요가 많아 유용한 차트임에도 불구하고 사용성이 떨이지는 문제가 있었다. 롤리팝 차트는 이미지 차트에서 이미지 대신에 간단한 도형으로 대체하여 표현할 수 있게 했다. 제공되는 도형의 종류는 원, 삼각형, 직사각형, 다이아몬드, 역삼각형의 5가지 타입이다. 듀얼 파이차트는 새로운 차트의 종류를 추가한 것이라기 보다는 기존 파이차트를 향상시켜 클릭 시에 회전하는 이펙트를 추가하여 파이차트 두 개를 멋지게 표현토록하는 형태의 차트이다.
알메이트차트 6.0 버전의 목표대비실적 차트의 업그레이드 내용으로, 컬럼 색 채우기 타입의 목표 대비 실적 차트 추가와 컬럼 오버랩(overlap) 타입의 추가 및 대시 앤 도트 타입이 추가되었다. 또한, 4분면 플롯(Plot) 차트는 기존 플롯 차트를 사용하는 사용자 중 이를 4분면에 표현하고자 요구가 여럿 있었다. 이에 6.0 버전에서는 좌우 축 형태의 차트를 4분면 축으로도 표시할 수 있도록 하는 기능이 추가되었다.[2]
- 기존 차트의 기능 향상
알메이트차트 6.0 버전부터 바 차트 및 컬럼 차트에서 특정 항목에 대하여 테두리 선 설정이 가능하다. 데이터 강조기능 보강의 하나로서, 차트에서 특정 항목을 강조하기 위하여 기존에는 차트의 색상을 통해서 이를 구현했다. 6.0 버전에서는 테두리 선에 강조기능을 줄 수 있도록 하여 더욱더 멋진 표현이 가능하다. 라인 및 영역차트에서 특정 데이터 포인트의 아이템 렌더러의 모양, 크기, 색, 선굵기, 선색을 다르게 표현한다. 기존 5.0 버전까지는 라인 차트에서 데이터 포인트의 아이템 렌더러는 하나의 모양만 가능했지만, 이번 6.0 버전에서는 서로 다른 모양의 아이템 렌더러를 표현 가능하다. 또한, 차트 내의 특정 영역에 선 및 화살표 긋기 및 코멘트 기능은 차트 내의 특정 영역의 일부에 대하여 선 긋기 기능 및 이에 대한 주석을 붙일 수 있는 기능이다. 차트의 특정 값을 강조할 때 설명 라인으로서 활용하면 유용하게 사용될 수 있으며, 차트 크기가 변경되더라도 자동으로 위치가 맞추어지게 된다. 패턴 차트의 보강으로는 패턴 차트는 색맹인 사람들을 위한 기능이다. 기존에는 차트에 패턴을 적용할 경우 흑백으로만 표시되게 했으며, 6.0 버전에서는 차트의 고유색상에 패턴을 입힐 수 있도록 변경하여 컬러와 패턴이 적용될 수 있다.
컨텍스트 메뉴의 추가로는 차트 영역에서 마우스 오른쪽 버튼을 클릭 시에 'save as png/jpg/pdf' 및 'save data as csv'라는 기능이 포함된 컨텍스트 메뉴를 'default'로 표시되게 했다. 이 기능을 끄고자 할 경우 옵션을 통해 제외시킬 수도 있다. 플롯 차트에 라벨 표시기능으로, 기존의 플롯 차트는 라벨을 표시하지 못하고 툴팁으로만 플롯의 값을 확인하였으나, 6.0 버전에서는 플롯에 라벨을 표시할 수 있다.[2]
각주[편집]
- ↑ rMate Chart 사용 설명서 백서 - http://demo.riamore.net/flashdemo/chart/Docs/rMate%EC%B0%A8%ED%8A%B85.0_%EC%82%AC%EC%9A%A9%EC%84%A4%EB%AA%85%EC%84%9C.pdf
- ↑ 2.0 2.1 2.2 2.3 2.4 2.5 2.6 ㈜리아모어소프트 공식 홈페이지 - http://www.riamore.net/component/chart.html
- ↑ 홍은기 기자, 〈리아모어소프트, 차트 컴포넌트 ‘알메이트-차트’ GS인증 획득〉, 《아이티데일리》, 2015-01-15
- ↑ 편집부, 〈리아모어소프트, ‘알메이트 HTML5 차트 5.0’ 출시 〉, 《아이티월드》, 2017-04-11
참고자료[편집]
- ㈜리아모어소프트 공식 홈페이지 - http://www.riamore.net/component/chart.html
- rMate Chart 사용 설명서 백서 - http://demo.riamore.net/flashdemo/chart/Docs/rMate%EC%B0%A8%ED%8A%B85.0_%EC%82%AC%EC%9A%A9%EC%84%A4%EB%AA%85%EC%84%9C.pdf
- 홍은기 기자, 〈리아모어소프트, 차트 컴포넌트 ‘알메이트-차트’ GS인증 획득〉, 《아이티데일리》, 2015-01-15
- 편집부, 〈리아모어소프트, ‘알메이트 HTML5 차트 5.0’ 출시 〉, 《아이티월드》, 2017-04-11
같이 보기[편집]
