안녕하세요. HTML5 기반의 데이터 인포그래픽 컴포넌트 webPonent CHART의 Visual Radar Chart 추가 버전 업그레이드 소식을 안내드립니다. 추가된 Radar 차트의 기능 및 사용환경은 아래와 같습니다. (Radar CHART) - 여러 개의 데이터를 한번에 보여주기 유용 - 데이터 개수에 따라 다각형 세팅 가능 - 차트 눈금 개수 지정 가능 - Tick 모양(원, 사각형, 삼각형, 별, 다이아몬드) 설정 가능 - Tooltip을 이용해서 커서가 틱을 가리킬 때 해당 데이터를 불러올 수 있음 - 시계열 사용 가능 - 애니메이션 효과 사용 가능 - 범례 사용 가능 - 데이터의 크기를 패턴으로 나타낼 수 있음 (사용환경) - 서버: 모든 서버 - 언어: 개발언어에 종속되지 않음(htm..

[웹포넌트 차트] webPonent Visual Gauge Chart webponent CHART 2.0.6 버전이 릴리즈 되었습니다. (짝짝짝)2.0.6버전에 맞추어 새롭게 추가된 Gauge Chart에 대해 작성해보려 합니다. gauge chart는 크게는 원형 게이지(angular), 선형 게이지(Linear), 실린더(cylinder), 온도계(thermometer) 이렇게 크게는 4가지, 세부적으로는 8가지 타입으로 구성되어져 있습니다. 디자인 테마로는 기본 디자인(Basic), 블랙 디자인, 라이트 그레이 디자인 3가지 종류가 있습니다. 여기에 option과 style을 주어 원하는 색상의, 모양의 게이지를 만드실 수 있습니다.예를 들면, 하나의 실린더도 필요에 맞게, 나만의 스타일로 변경 가..

[웹포넌트 가상키보드] 다운로드부터 설치까지 같이 해볼까요? 두달전쯤 webPonent VIRTUAL KEY(웹포넌트 가상키보드)를 출시하고 '박토끼' MD가 직접 소개글을 써주셨는데요. 이번글에서는 제가 가상키보드를 다운로드에서 부터 설치까지 진행해보고 직접 사용까지 해보겠습니다. 웹포넌트 가상키보드는 가격이 저렴할뿐만 아니라 30일간 사용 할 수 있는 트라이얼 버전을 제공해서 무료로 현재 서비스하는 페이지에 직접 적용 시켜 바로 확인 할 수 있습니다. 바로 다운로드할 수 있는 페이지로 가볼게요! 웹사이트로 이동 을 누르시면 웹포넌트 사이트로 이동하는데요 아래와 같이 중간쯤에 보면 CHART, GRID 제품외에 가상키보드 제품 메뉴가 보입니다. 위에 빨간색 네모박스 버튼을 누르면 트라이얼 다운로드 페이..

[웹포넌트 가상키보드] 웹 사이트를 안전하게 만드는 가장 손쉬운 방법 저번주 금요일, 웹포넌트 2차 리뉴얼 사이트를 오픈하면서 새롭게 webPonent VIRTUAL KEY(웹포넌트 가상키보드)를 동시에 출시하였습니다! 새롭게 출시한 제품은 여태까지 웹포넌트에서 선보인 데이터 시각화 및 처리에 유용했던 CHART, GRID와는 조금 다른 성격입니다. '웹 사이트를 안전하게 만드는 가장 손쉬운 방법'이라는 캐치프레이즈에 걸맞게 아주 간편하게 웹 사이트에 보안키패드를 사용할 수 있게 해주는 제품입니다. 시중 은행 사이트에 들어가면 꼭 보게 되는 것은 바로 가상키보드 입니다. 가상키보드는 말 그대로 물리적인 키보드가 아니라 화면에 가상으로 나타나는 키보드입니다. 멀쩡한 키보드가 있는데, 왜 굳이 불편한 가상키..

안녕하세요. CX사업부 MD 태태입니다. 오래간만에 PhantomJS 를 이용하여 PDF를 생성하는 글을 포스팅합니다. 지난 3번의 포스팅을 통하여 기본적인 PhantomJS를 통한 PDF출력에 대해 살펴보았는데, 이번 글에서는 PhantomJS에서 제공하는 다양한 Event listener에대해 살펴보겠습니다. 웹화면을 PDF형식으로 출력하다보면 예상치않은 웹상의 오류에 대해 대처해야하거나, JavaScript로직의 실행시점을 알아야 하는등 다양한 문제가 발생할 수 있습니다. 이럴 때 사용할 수 있도록 PhantomJS는 몇가지 Event listener를 제공해주고 있는데, 이번 포스팅에서는 webPonent 제품을 개발할 때 유용하게 사용되었던 것들을 중심으로 소개하고 설명해드리도록 하겠습니다. o..

[웹포넌트 그리드] 일반 HTML 테이블의 한계를 뛰어넘는 데이터 그리드! Q1. 데이터 그리드는 왜 사용할까요? 데이터를 표현하기 위해서 일반 HTML 테이블을 쓰는 것은 보편적인 관행이었습니다. 데이터에 레코드가 많지 않거나 데이터를 사용자가 조작하게 하고 싶지 않는 한 일반적인 테이블을 사용해도 전혀 문제가 없습니다. 그러나 테이블에 수 백 건의 레코드를 사용하는 웹 애플리케이션을 구축할 때라면, 일반 HTML 테이블로 데이터를 표현하는 데에 아주 큰 사용상 결함을 겪게 될 것입니다. 예를 들어, 일반 테이블로 1000건의 데이터를 표현한다고 가정해보겠습니다. 하나의 로우()당 30px 이라고 한다면, 제목(thead)영역까지 포함하여 테이블의 길이는 30,030px이 될 것입니다. 24인치 모니터..

안녕하세요!! CX사업부 MD 태태입니다!지난번에 우리가 문서 규격을 갖춘 PDF를 출력하고 헤더, 푸터 까지 출력했었죠.그런데 기억하시나요?그 때 우리는 한가지 문제에 직면했었습니다.기억을 더듬기 위해 지난번 코드의 일부를 살펴보지요.1234567891011121314151617181920212223242526272829303132page.paperSize = { format: 'A4', orientation: 'portrait', margin: { left: '1cm', right: '1cm' }, header: { height: '1cm', contents: phantom.callback(function () { var div = document.createElement('div'); var img..

안녕하세요!! CX사업부 MD 태태입니다! 지난번 글 에서 PhantomJS를 이용해서 간단히 Google(우리의 구글신) 화면을 캡쳐했었습니다! 하지만 우리가 단순히 화면만 캡쳐할 거였으면 이미지로 만들었겠죠~ 실제로 PhantomJS를 통하여 동일한 로직을 통해 이미지 파일을 추출할 수도 있습니다. (추출파일 확장자만 바꿔주면 되요) 그러나 우린 문서를 원합니다!! 이미지가 아닌 PDF 문서! 문서형식의 파일에는 여러가지 페이지에 대한 설정들이 들어가게 됩니다. 페이지 여백 설정, 방향설정, 페이지 Header, Footer설정, 페이지 크기 등 다양한 설정을 할 수 있어야 하겠지요. 그렇기 때문에 이번에는! PhantomJS로 그리드&차트 PDF 출력하기 그 두번째 내용으로 PDF 문서의 페이지설정..

웹포넌트 그리드와 차트는 웹 상에서 표현된 데이터를 Excel, CSV, PDF 등의 파일로 추출하는 기능을 가지고 있습니다. 데모 보러가기 클릭!! 그 중 PDF를 추출하는 기능은 PhantomJS 라는 툴을 이용하여 만들었는데요, PDF추출 기능을 구현하며 처음 사용해 된 PhantomJS! 세상 모든것들이 그렇듯 잘 사용하기만 하면 아주 유용한 녀석입니다. 만들면서 많은 시행착오를 겪게 되었는데요, 앞으로 몇 회에 걸친 글을 통해 구현하면서 얻게 된 Know How와 Tip들을 공유해보도록 하겠습니다. 그 첫 시간으로 PhantomJS란 과연 무엇인지에 대한 간략한 설명과 함께 기본적인 Screen capture에 대해 설명하도록 하겠습니다. 1. PhantomJS 란? PhantomJS 공식 홈페..