[웹포넌트 가상키보드] 다운로드부터 설치까지!!

[웹포넌트 가상키보드] 

다운로드부터 설치까지 같이 해볼까요?

 

 

 

 

 

 

두달전쯤 webPonent VIRTUAL KEY(웹포넌트 가상키보드)를 출시하고 '박토끼' MD가 직접 소개글을 써주셨는데요. 이번글에서는 제가 가상키보드를 다운로드에서 부터 설치까지 진행해보고 직접 사용까지 해보겠습니다.

 

웹포넌트 가상키보드는 가격이 저렴할뿐만 아니라 30일간 사용 할 수 있는 트라이얼 버전을 제공해서 무료로 현재 서비스하는 페이지에 직접 적용 시켜 바로 확인 할 수 있습니다.

 

바로 다운로드할 수 있는 페이지로 가볼게요!

웹사이트로 이동 을 누르시면 웹포넌트 사이트로 이동하는데요 

아래와 같이 중간쯤에 보면 CHART, GRID 제품외에 가상키보드 제품 메뉴가 보입니다. 

 

 

위에 빨간색 네모박스 버튼을 누르면 트라이얼 다운로드 페이지로 이동합니다. 거기서 아래 버튼을 누르시면 다운로드 받을수 있습니다.

 

다운로드 바로가기

 

다운받은 zip파일을 압축을 풀면 30일간 사용할 수 있는 라이센스 파일과 keypad관련 zip파일이 또 나오는데요.

 

webPonent-VirtualKey-1.0.0.zip 을 다시 압축을 풀면 아래와 같이 파일을 확인 할 수 있습니다.

 

 

 

 

간단하게 파일을 설명드리자면 keypad 디렉토리에는 가상키보드에서 사용되는 이미지 파일과 스크립트 파일등 필요한 리소스가 포함되어 있고 샘플 페이지도 포함되어 있습니다. (sample.html) 

다음으로 WEB-INF에는 eltz-keypad.jar 과 가상키보드 구동에 필요한 서블릿 정보가 있는 web.xml 이 있습니다.

마지막으로 index.html은 샘플 페이지로 이동 시켜주는 스크립트만 있고 꼭 필요한 파일은 아닙니다.

 

자, 이제 필요한 파일은 준비가 되었으니 간단하게 설치해보고 구동 시켜보도록 하겠습니다.

 

아참! 이번 데모에서 IDE는 이클립스(mars)를 사용하고 JDK는 1.7을 사용 하겠습니다. 그리고 WAS는 tomcat6 을 사용하겠습니다.

 

그럼 고고고!!

 

첫번째로 압축을푼 파일들을 이클립스 프로젝트로 옮겨보도록 할게요.

 

 

 

이번 데모를 위한 프로젝트라 구성이 심플하죠? 

참고로 result.jsp, sample.html, index.html 3가지 파일은 샘플을 위한 파일이므로 실제로 적용 될때는 필요 없는 파일입니다.

 

이제 두번째로 간단하게 설정값들을 변경해줘야 합니다.

keypad/js/keypad.js 파일 7,8 라인에 KEYPAD_HOME, KEYPAD_CONTEXT_ROOT 변수에 기본 값이 세팅되어 있습니다. 

KEYPAD_HOME 은 keypad디렉토리의 위치인데요 기본값이 /keypad/ 으로 되어있을겁니다.

지금 데모에서 처럼 루트 디렉토리 바로 아래에 위치한 경우에는 변경할 필요가 없습니다. 다만 디렉토리 위치가 다르다면 해당 위치에 맞게 수정해주셔야 합니다.

다음 설정값으로 KEYPAD_CONTEXT_ROOT 은 WAS의 Context Path인데요 기본값이 '/' 으로 되어 있습니다.

이값도 마찬가지로 서버설정에 맞춰서 수정해주시면 됩니다.

저는 아래와 같이 Context Path를 '/'로 되어있기 때문에 기본값들을 변경하지 않을게요~!

자, 이제 한가지 작업만 더 해주시면 끝납니다. 어떤 작업이 남았을까요??

네 맞습니다! 라이센스 파일을 추가해야 합니다 ㅋㅋ

좀 전에 위에서 첫번째 압축을 풀어서 나온 webPonent.virtualKey.license 이 녀석을 추가 하셔야 하는데요.

이 라이센스 파일을 WEB-INF 디렉토리 바로 아래에 추가 하셔야 합니다. 아무데나 추가 하시면 안되요 ㅠㅠ

 

그럼 요놈 써보고 우왕~! 마음에 들어서 정식라이센스를 구입하시면 라이센스 파일만 교체하면 되겠죠?? 

 

이제 서버가 가동 시키면 됩니다. 서버를 Start 하고 localhost 접속하시면 샘플 페이지가 뜹니다.

80포트가 아니면 포트도 붙여주세요 ^^;;

 

 

 

자, 이렇게 샘플페이지가 두둥 떴습니다~!!

숫자+문자 입력과 숫자만 입력하는 password input으로 구성된 심플한 페이지 입니다.

문자 password를 누르시면 아래와 같이 기본테마가 적용된 QWERTY 자판이 뜨죠? 지금 디바이스가 PC기 때문에 PC모드로 나타납니다. mobile이나 tablet으로 접속하시면 각각 다른 크기와 모습으로 나올거에요~

참고로 mobile에서는 pc에서 없는 다른 키입력 방식이 추가 되어있습니다. 꼭 확인해보세요

뭐 사실 지금 부터는 여기 에서도 확인 가능해요ㅋㅋ

 

 

혹시 키보드 색상이 마음에 안드시나요??

걱정마세요! 왼쪽 상단에 테마를 선택하는 셀렉트 박스가 있습니다. 여기서 이것저것 바꿔보세요~ 마음에 드는 색상이 나오셨나요? .... 부족하다면 더 추가 해야겠네요 말씀해주세요..

 

저는 개인적으로 블랙02 테마가 마음에 드네요 ㅎㅎㅎ

 

비밀번호를 테스트삼아 입력하고 OK를 눌러볼까요? 저는 'abcd'를 하고 Let me in 버튼을 눌렀습니다.

그럼 비밀번호가 암호화되어서 서버로 전성되고 샘플로 만들어진 서버에서 복호화 한다음 'abcd' 값을 정상적으로 다시 보내줬네요.

 

 

가상키보드로 작성된 모든 값은 암호화되서 서버로 전송이 됩니다.

확인해볼까요?

 

위와 같이 알 수 없는 문자로 암호화되서 전달되어 정상적인 가상키보드의 Request가 아니면 복호화 할 수 없어 개인정보를 안전하게 지킬 수 있습니다.

 

그럼 응답도 한번 보죠.

 

위와 같이 정상적으로 복호화되서 응답이 왔네요~~

 

이번글은 여기에서 마무리 하고 다음 블로그에서는 웹포넌트 가상키보드가 제공하는 다양한 API 설명과 각 입력모드에 따른 사용법을 자세히 다뤄 보도록 하겠습니다.

 

 

웹포넌트 사이트에서는 제품의 구성도(구조와 플로우), 기능 설명, 데모, 개발문서, 관련자료 등 웹포넌트 가상키보드와 관련된 컨텐츠를 보실 수 있습니다.  

 

webPonent VIRTUAL KEY 특징	http://www.webponent.com/products/keypad/feature.cmd
webPonent VIRTUAL KEY 데모	http://www.webponent.com/products/keypad/demo.cmd
webPonent VIRTUAL KEY 개발문서	http://www.webponent.com/products/keypad/devdoc.cmd
webPonent VIRTUAL KEY 사용법	http://www.webponent.com/products/keypad/guide.cmd
webPonent VIRTUAL KEY 관련자료	http://www.webponent.com/products/keypad/refData.cmd
webPonent VIRTUAL KEY 가격	http://www.webponent.com/products/keypad/price.cmd

 

웹포넌트 가상키보드의 구매 문의는 02-784-2503 혹은 이 포스팅의 댓글로도 가능합니다. ^^)