🌙

☀️

E-MODER KIOSK 💳 ▻ 1탄

September 20, 2019

무인주문결제기 개발기

💎 목차

서론 (Introduction)
본론 (Main)
결론 (Conclusion)

🌱 서론

태풍 링링 🌪 지니가고 쌀쌀한 가을 🍂이 왔습니다.

모두들 이제는 자켓을 걸치고 다녀야 할거같아요 :)

이번 주제는 첫 직장에서 개발했던 프로젝트에 대해 얘기해보자 합니다.

그 당시는 여러모로 고생했던 기억이 새록새록나네요 🤔

키오스크 ?

첫 직장에서는 키오스크를 개발하였습니다.

맨 처음 키오스크라는 얘기를 듣고는 이게 무엇인가 했습니다.

사전적 정의를 살펴보니 키오스크란, 무인 자동 결제기 라고 합니다.

일반적으로 패스트푸드점에서 볼수 있는 키오스크입니다.

키오스크를 생각하면 임베디드 영역이고 당연히 C 언어를 생각하여 걱정이 앞섰습니다.

왜냐하면 대학과정에서 C 언어는 1학년을 제외하고는 배운적이 없었고

그마저 군대라는 문턱으로 놀기만 바빠 1학년 지식은 머리속에는 없었습니다. 🤣

추가적으로 첫 직장은 PHP기반의 ERP 솔루션을 제공하여

자연스럽게 웹 기반인 키오스크를 개발 계획을 세웠습니다.

그 당시, 기획, 설계, 구현을 총괄하였으며,

Node Js 처음으로 접했습니다. 🤩

⬆ 목차

🌹 본론

▸ 기술 스택

2017년, Node Js 처음 접한 시점에서는

키오스크는 임베디드 장비이다보니

어떤식으로 환경을 구축해야하는 막막하였지만

타겟보드 장비에 서버를 구동시키고 터치 스크린으로 페이지를 조작하는

매커니즘을 구성하여 진행해 보았습니다.

▸ 타겟 보드

대학교 시절, 사용해봤던 Raspberry Pi로 진행을 1차 개발을 진행하였고

OS는 Raspbian 이라는 ubuntu 설치했습니다.

그럼 차근차근 환경 셋팅을 해보겠습니다.

1. 비밀번호 변경

$ sudo raspi-config

해당 화면이 나타나면 1. Change User Password Select 클릭

Enter new UNIX password : 비밀번호 입력 ( 숨김 )

Retype new UNIX password : 비밀번호 재확인 ( 숨김 )

passwd : password updated successfully ( 변경 성공 )

보안을 위해 비밀번호를 변경

2. 한글 설치

$ sudo apt-get install -y ibus

$ sudo apt-get install -y ibus-hangul

$ sudo apt-get install -y fonts-unfonts-core

한글이 깨지는 현상이 발생 할 수 있으니 설치

3. 해상도 변경

$ sudo nano /boot/config.txt

# 코멘트(#) 처리된 것들을 활성화 시켜준다.
----------------------

hdmi_force_hotplug = 1

# 1: 출력 스탠다드, 2: 일반적인 모니터
hdmi_group = 2

# 해상도 설정
hdmi_mode = N

# 1: 단순 영상, 2: 음성 출력
hdmmi_drive = 2

----------------------

출력하는 모니터 해상도에 맞게 조절

hdmi_mode로 해상도를 조절한다.

해상도 참조

4. 절전모드 해제

$ sudo nano /etc/lightdm/lightdm.conf

------------------------------
# before
#xserver-command = x

# after
# 코멘드 제거 및 -s O -dpms 추가
xserver-command = x -s O -dpms

------------------------------

5. 스크린세이버 해제

$ sudo nano /etc/X11/xinit/xinitrc

# 하단에 추가
--------------

xset s off
xset -dpms
xset s noblank

--------------

6. 마우스 커서 숨기기

# unclutter 설치
$ sudo apt-get install unclutter

$ sudo nano ~/.config/lxsession/LXDE-pi/autostart

# 하단에 추가
------------------

@unclutter -idle 0

------------------

7. 화면 회전

$ sudo nano /boot/config.txt

# display_rotate 숫자 변경
# 0 = 0도, 1 = 90도, 2 = 180도, 3 = 270도
------------------

display_rotate = 3

------------------

모니터를 세로로 할지, 가로로 할지 판단 후에 설정 해준다.

8. 터치 보정

$ nano /etc/X11/xorg.conf.d/90-rotate-screen.conf

# 단, xorg.conf.d 디렉토리가 존재하지 않을경우
$ mkdir /etc/x11/xorg.conf.d

$ sudo nano /usr/share/X11/xorg.conf.d/90-rotate-screen.conf

# 아래 내용을 복사해서 붙여넣는다.
-------------------------------------------------------

Section "Input Class"
     Identifier "RotateTouchCW"
     MatchProduct "ILITEK ILITEK-TP"
     Option "TransformationMatrix" "0 -1 1 1 0 0 0 0 1"
EndSection

-------------------------------------------------------

화면 회전시 터치 보정을 해줘야한다.

▸ Node Js

라즈베리파이 셋팅은 끝났으니 본격적으로 Node Js를 시작한다.

# node, npm 버전 확인
$ node -v && npm -v

# node가 설치 되어있을시 구버전을 삭제
$ sudo apt-get remove --purge nodejs

# curl 통해 최신 버전 셋
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash

# node 설치
$ sudo apt-get install -y nodejs

# npm 버전 업데이트
$ npm install -g npm

# node, npm 버전 확인
$ node -v && npm -v

Node Js 설치 완료

⬆ 목차