레이블이 Curl인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Curl인 게시물을 표시합니다. 모든 게시물 표시

2017년 5월 16일 화요일

Curl로 구현한 구몬 스마트펜 매니저

1. 스마트펜이란?

 스마트펜이란 한마디로 정의하기는 어렵지만 펜 형태의 다기능 기계장치이다.  그중에서  스캔장치를 가지고 있고, 도트 형태의 배경 무늬를 가지는 인쇄물을 스캔하면 연결된 음원을 재생하는 기계가 국내에서는 교육용으로 많이 사용된다. 한솔, 교원과 같이 가정 학습 분야를 이끄는 회사에서도 이를 이용한다. 세이펜, 소리펜 등의 다양한 이름을 가지기도 한다.
교원(구몬)의 신형 스마트펜 - 2017.05 발매

2. 교원의 호출

 교원에서 새로운 스마트펜을 발매 예정인데, 이와 관련된 관리 프로그램을 제작하기 위하여 몇몇의 개발 업체를 호출하였다.  우리도 그 업체들 중 하나로 제안 및 견적 작업에 참여 하였다.
 교원의 요청은 간단 명료 하였다.
"학부모들이 스마트펜의 음원 파일을 직접 관리할 수 있게 해주세요 !! "

 이전까지 학부모들이 스마트펜에 필요한 음원 파일을 추가하는 것 자체가 어려워서 교사들이 직접 필요한 파일을 추가해서 학부모들에게 전달하는 형태로 판매가 이루어 지고 있었다. 새로 산 스마트펜이어도 교사가 개봉해서 학부모에게 전달하는 형태가 되었기 때문에 문제가 되고 있었다.  학부모 입장에서 새로산 스마트펜인데, 이미 포장이 회손된 상태인 것이었다.


3. 제안 단계

 교원측에서는 웹페이지에서 관리가 가능하도록 하고 싶다고 했다.  ActiveX가 아닌 이상 시스템 리소스에 직접적으로 접근이 불가능한 형태로 웹브라우져가 바뀌어 가고 있는 상황이라서 C/S 형태로 제안했다. 사용의 편리성, 존재감 등의 부가적인 요소를 추가적으로 강조하였다. 마지막으로 Windows 뿐만 아니라 Mac도 지원하는 것을 제안하였다. 결과적으로 우리 회사가 선정되었고, 초기 교원이 생각한 것보다 3배 정도의 프로젝트 규모가 되었다.


4. 개발 단계

 화면 설계를 전체적으로 세번을 했다.  첫번쨰와 두번째에 설계된 내용은 교원 직원들을 감동시키지 못했다. 사용하기에 너무 어려워 보인다는 것이었다.  FTP Client를 사용하는 우리들에게 있어서는 일반적인 인터페이스였다(경쟁사의 관리 프로그램도 마찬가지 이다). 하지만 학부모들에게는 어려운 것이었다. 두번째 화면 설계를 가지고 회의하던 마지막 부분에 누군가가 아이디어를 내 놓았다.
"모바일 앱처럼 만든다면 학부모들도 손쉽게 이용할 것이다"
모바일 앱처럼 사용이 편리하고, 일반 PC 프로그램 처럼 기능성이 향상된 내용으로 화면을 설계 하였다. 그 결과가 아래와 같다.


스마트폰을 사용하는 사람이라면 누구나 손쉽게 접근 가능하도록 설계 하였다. 직관적이며 필요한 작업을 모두 수행할 수 있는 인터페이스이다. 사용자 메뉴얼이 없는 UI를 만들기 위하여 노력하였다.

5. 끝으로

 의뢰자의 좋은 평가와 함께 구몬 스마트펜 매니저 개발 프로젝트는 종료되었다. 물론 스마트펜 매니저 관련하여 2개의 프로젝트가 더 있을 예정이다.


바로가기 링크 :  구몬 스마트펜 매니저 다운로드 페이지 열기

- 2023-03-06 수정
  다운로드 페이지가 변경된듯 하다. 해당 페이지로 갈 수 없기 때문에 위의 링크를 제거 했다.


2016년 12월 15일 목요일

Curl로 구현한 ProcessBook

1. Plant Monitoring

 Plant Monitoring 관점에서 OSIsoft사의 PI ProcessBook이라는 제품이 있다. 각종 센서에서 생성되어 서버에 저장된 데이터를 Visualization하여 사용자에게 제공할 수 있는 도구이다. 오랜 세월 다듬어진 이 제품은 강력한 기능을 제공하지만 그만큼 가격이 비싸다고 할 수 있다. OSIsoft의 제품 가격은 현장에서 운영하시는 분들이 잘 아시겠지만, 연간 사용료를 근간으로 하는 가격 정책을 가지는 것으로 알고 있다.  연간 사용료는 센서의 개수에 따라서 다르며, 같은 제품이더라도 센서의 개수가 많아질수록 비싸진다. 즉 연간 사용료가 수억원이 될 수도 있다.  PI라는 제품군에는 여러가지가 포함되어 있다. 종류가 많기에 거론 하기 보다는 아래에 링크를 달아 둔다.

바로가기 링크 :  PI System Product List

2. ProcessBook

 PI System 제품군에서 사용자에게 현실적으로 다가가는 것의 중심에는 ProcessBook 이라는 것이 있다. 모든 공장에서 PI System 제품군의 전체 기능을 사용하는 것은 극히 드물며 한국 실정에서는 UI 측면에서 일반적으로 ProcessBook만을 사용한다.  이번 프로젝트의 최대 목표 역시 기존 ProcessBook을 대체 할 수 있는 것을 개발하는 것이었다.

3. Plant Monitoring System (PMS)

금번 프로젝트는 PMS라 명명하고 아래의 범위를 개발하였다.

  • 서버 (AWS EC2 이용)

  - 서버를 상황에 따라 증설 가능한 Scalable한 구성으로 개발
  - 수집된 데이터의 저장
  - 각 클라이언트의 데이터 요청에 대한 응답


  • 클라이언트 (Curl로 개발)

  -  ProcessBook에 준하는 Designer
  -  SVG 이미지 표시 기능
  - 서버와의 통신 및 데이터 처리
  - 실시간 데이터 표시 및 과거 이력 데이터 조회
  - 예제 작성

4. PMS 특징

작성되어진 예제 중 하나는 아래와 같다.  (석유 화학 공정의 일부이다. )



위의 예제는 OSIsoft사의 예제와 동일하나 전체적으로 장시간 모니터링을 위한 화면이어서 화려함 보다는 부담 없는 색상을 사용하였고, 사용성 측면에서 기능을 개선하였다. 

특징을 살펴보면 아래와 같다.
  • Auto scaling  기능

 PI ProcessBook은 화면을 디자인 하고 나서 사용할 때에는 디자인한 크기로 화면을 제공한다. 하지만 PMS는 화면 크기에 따라서 자동으로 표시되는 내용을 확대 하거나 축소한다. 언제든지 디자인한 모든 내용이 화면에 표시되는 형태이다. 물론 화면이 작은 경우 스크롤바를 표시하여 디자인한 크기 그대로 표시할 수 있으나, 사용자 측면에서 그것을 원하지는 않는다고 생각한다. 사용자들은 언제나 모든 내용이 표시되기를 원할 것이다.

  • Threshold 기능

 각 센서의 값을 표시할 때 설정한 값 이상이면 배경을 넣고 표시하도록 개선하였다. 시각적으로 보다 더 쉽게 알아 볼 수 있도록 하였다.

  • History 기능

 과거 5분간(기본 설정값 & 변경가능)의 데이터에 대해서는 툴팁으로 손쉽게 조회 가능하도록 하였다. 핵심은 데이터를 로컬에 축적하고 필요한 경우 서버측에 요청하지 않고 표시한다. 

  • 다른 화면 연결 기능

 다른 화면과 연결하는 기능이 추가 되었다.  설명을 하자면 화면 내에  Group을 표시 하는 기능이 있고, 이 아이콘을 클릭하면 Group의 상세 내용이 표시되는 형태이다. 


6.  Grouping 응용

여러 개의 센서들을 모아서 한 아이콘으로 표시하는 Grouping 기능을 응용해서 사용자에게 초기 화면을 제공한다면 아래와 같은 형태로 만든다. 예제는 한국의 울산에 있는 공장의 대략적인 대지 형태와 설비들의 그룹을 배치한 형태이다. (물론 예제는 석유 화학 공정 만을 표시하고 있지 않으며, 각 공정의 연관성 또한 없다.)
사용자는 홈 화면에서 보고 싶은 화면으로 연결해서 들어간다. 





7. 사용자 화면 

사용자가 보게 될 화면들은 아래와 같다. 컨셉은 모바일UI 처럼 슬라이딩으로 화면이 전환 되며, 이전 화면 링크를 눌러서 되돌아갈 수 있다. 







중요 지표들을 따로 Grouping해서 아래의 그림과 같이 사용자에게 제공할 수 있다.



8. 편집 모드

편집 모드로 전환하면 화면에 팔레트가 표시된다. 이 팔레트로부터 Drag & Drop을 하여 아이템을 추가 한다. 물론 PI ProcessBook 에서 제공하는 팔레트 보다는 훨씬 더 빈약하지만 이것은 아이콘을 SVG로 제작하면 보강이 가능한 구조이다. 아이콘들은 SVG로 제작되기 때문에 아이콘의 크기를 변경하더라도 깨끗하게 표시된다.




9. 끝으로

이러한 UI의 응용 분야는 많다. Plant Monitoring 이외에도 Network Monitoring, Security Monitoring등에 적용 가능하다. 


* 이 내용은 회사 블로그에도 올렸으며, 동일한 내용을 개인 블로그에 복사하여 올린 것입니다. 


2016년 9월 9일 금요일

Curl 로 만든 Excel


Curl로 만드는 세상은 무궁무진하다.   MFC와 비교한다면 문제 해결 범위가 좁은 것은 사실이지만, 개발의 편의성 측면에서 볼 때  MFC 보다 우월하다고 생각한다.  내가 지금까지 접해본 수십 개의 개발 언어 중에서 내 구미에 가장 알 맞는 언어인 것 같다.

우리나라 IT 대기업에서도  Excel을 만들 생각은 하지 않는다. 있다면 한컴 정도?
그런데 대기업도 아닌 우리 회사에서 Excel과 비슷한 것을 만들 수 있다는 점 하나 만 보더라도 Curl은 상당히 매력적인 언어이다.

이번에는 MS의 Excel을 대체 해보고자 Curl로 만든 것이  FastSheet다. 대략  30M/M로 개발되었다. 결과물은 아래와 같다.

<그림 1 : Excel? >

마치 Excel을 보는 듯한 인터페이스(사실 인터페이스는 거의 동일하다)를 제공한다. 기존의 Excel 사용자라면 아무 문제 없이 사용할 수 있으리라 생각된다. 함수 입력도 Excel에서 제공하는 수식 편집 기능과 동일하다.

<그림 2 : FastSheet의 함수 입력기 >

Excel에서 지원 하는 모든 함수를 제공하지는 않지만 사용 빈도가 높은 90개 정도의 함수를 지원한다. 물론 FastSheet의 소스를 수정하지 않고 사용자 정의한 함수가 추가 가능하다. 뿐만 아니라, 차트 기능도 제공한다. 

<그림 3 : FastSheet의 차트 >

물론 인쇄 기능도 당연히 제공한다.  Excel 만큼의 굉장한 인쇄 옵션은 아직 제공하고 있지는 않지만, 가로 세로 방향에, 용지에 맞춰서 인쇄를 할 수도 있다. 

<그림 4 : 인쇄 미리 보기 화면 >


이미 구글이나 MS가 웹으로 이런 기능을 만들었는데, 뒤늦게 이런 것을 왜 만드냐고 질문한다면 나는 이렇게 말하고 싶다. 

 "Benz나 BMW가 자동차를 만들었는데, 현대/기아는 왜 자동차를 만들어요?"


* 이 글은 회사 블로그에도 동일하게 게시하였습니다.

ESP8266 Digital Input Pin의 불편한 진실

1. 믿었던 놈인데... ESP8266은 2017년도 부터 사용했기 때문에, 7년 정도 사용해 왔었다. 그동안 여러 종류의 내 프로젝트에 사용한 MCU이고, 이에 따라서 신뢰도가 상당히 높았다. 물론 순수한 ESP8266으로 사용하지는 않고 Wemos...