Camp51.9_KioskProject

html, css, javascript를 처음 공부하는 동시에 메이커스페이스 Camp51.9의 시설 이용 키오스크를 직접 개발하는 프로젝트.

개요

html, 웹 공부를 시작하기로 했습니다. 프론트엔드 개발이나 디자인 분야를 지망하는 것은 아니지만 IT, 인터넷 환경에서 가장 기본이 되는 부분이기에 적어도 숙지는 하고 있어야 한다고 생각했습니다. 물론 지루하게 책만 보면서 공부할 생각은 아닙니다. 5년간 프로그래밍 공부와 개발을 이어오면서 1000자의 코드를 보는 것보다 10자의 코드를 써보는 것이 더 큰 도움이 된다는 것을 배웠기 때문입니다.

제가 일하고 있는 메이커 스페이스 Camp51.9에는 시설 이용을 위한 출입등록 목적의 이름, 소속 입력 웹이 있습니다. 그러나 코로나 바이러스 확산으로 인한 이용객의 정보 및 체온 확인이 크게 중요해졌기 때문에 기존 웹의 보완의 필요성을 느꼈습니다. 따라서 단순히 html 예제를 공부하는 것이 아닌 메이커스페이스의 시설 이용을 위한 키오스크를 직접 개발해보기로 했습니다. 이를 위해 웹 사이트 개발이 아닌 사용자와 동적인 상호작용을 할 수 있는 웹 애플리케이션 개발을 목표로 할 것 입니다.

공부와 개발을 동시에!

시작

매니저의 입장에서 본 저희 메이커스페이스의 이용 순서는 이렇습니다.

1. 체온 측정을 안내해주고 측정을 해드린 후 수기 작성을 받습니다.
2. 이를 확인한 후 위에서 이야기한 기존의 웹 시스템에 이름과 소속을 입력할 수 있도록 안내합니다.

• 체온 측정과 수기 작성, 웹이 모두 나뉘어져 있어서 불편한점이 많고 제가 가끔 입장하시는 분들을 확인하지 못하는 때에는 위의 모든것을 작성하지 못할 때도 많습니다.

따라서 프로젝트에 조금 더 추가하기로 했습니다. 큰 건물에서 자주 보이는 얼굴인식 체온측정 기기처럼 이용객들이 편리하도록 자동화 하는 것입니다. 얼굴 인식에서 더하여 마스크 감지 인공지능을 추가하여 조금 손을 보아 아두이노로 체온 측정기를 만들어 연동하면 여러 건물에서 흔히 볼 수 있는 체온 측정기를 사용료 없이 멋지게 만들 수 있을 것 같습니다. 후에 html과 연동을 목표로 하겠습니다.

전체적인 틀을 잡았으니 이제 세부적인 요소와 툴들을 정하도록 하겠습니다. 처음 시작할때는 관련지식이 전무한 상황이여서 구글 검색과 선생님께 여쭈어 필요한 툴들을 정리했습니다.

• HTML, CSS, JavaScript
  • 기본적인 웹 앱 개발 툴
• Firebase
• Google에서 제공하는 실시간 데이터베이스 서비스를 자바스크립트와 연동하여 출입시간과 사용자 이용정보를 DB로서 저장할 것입니다.
• Google Sheet
  • Google 스프레드시트를 자바스크립트와 연동하여 활용하여 결재에 사용할 수 있도록 사용자 정보와 출입시간을 깔끔하게 정리할 것입니다.
• Arduino
  • 적외선 체온 센서를 활용하여 사용자들이 쉽게 체온을 측정할 수 있도록 자동화 할 것입니다.
• Python
  • tensorflow를 활용하여 마스크 감지 인공지능을 함께 설치해 줄 것입니다.

웹 애플리케이션?

웹 애플리케이션(web application) 또는 웹 앱은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 소프트웨어를 말한다.

웹 애플리케이션은 사용자가 별도의 응용 소프트웨어를 설치하지 않아도 웹 브라우저를 통해 기능을 이용할 수 있도록 만든 웹 서비스입니다. 웹 애플리케이션은 클라이언트로서 사용될 수 있어 사용량이 늘고있고 유지관리가 용이하다는 장점이 있습니다. 웹 어플리케이션은 단순히 웹의 기능만이 아니라 웹 메일, 온라인 전자상거래, 커뮤니티, 블로그, 게임 등 여러가지 용도로 사용 될 수 있습니다.

기본적으로 무인 키오스크를 바탕으로 개발할 것이기 때문에 정적 웹사이트는 맞지 않습니다. 따라서 사용자와 상호작용이 가능한 웹 애플리케이션을 개발할 것입니다.

기능

이번 개발의 목적인 html 부분입니다. 우선 어떤 식으로 개발할지 설계했습니다. Camp51.9에서 필요한 기능은 다음과 같습니다.

• 로그인 화면(default)
• 회원가입 화면
• 이용 종류 선택 화면
• 이용 시설 화면
• 이용 장비 화면(외부인 이용 페이지)
• 이용 행사 화면
• 기타 이용사유 화면

로그인 창을 기준으로 서로 연결되도록 개발할 것입니다.

로그인 화면

• 로그인 화면입니다. 로그인, 퇴장, 회원가입으로 이어지는 기본 화면으로 꾸몄습니다.

• 로그인 페이지에서 아이디를 입력하고 Login 버튼을 누르면 확인 팝업이 실행되고 시설 종류 선택 화면으로 이어집니다.

회원가입 화면

• 회원 가입 페이지입니다. 처음 이용하는 고객은 회원가입을 한 후에 이용가능합니다.
  • 고객 정보는 자동으로 파이어베이스에 저장되어 입출력이 가능합니다.

이용 종류 선택 화면

• 이용 종류 선택 화면입니다. 사용 사유에 맞게 선택합니다.
  • 로그인 정보에 따라 현재 사용중인 유저의 이름이 출력됩니다.

시설 이용 화면

• 시설 이용 화면입니다. 원하는 시설을 선택하고 이용하기 버튼을 누릅니다.

잔여 좌석은 파이어베이스에서 자동으로 연산되어 출력됩니다.

• 잔여 좌석이 없을 경우 이용 불가합니다.

외부인 이용 화면

• 외부인 이용 페이지에서는 유료 장비를 사용할 수 있습니다. (영등포고 학생은 무료여서 따로 배치했습니다.)

행사 화면

• 행사 페이지입니다. 현재 코로나 바이러스로 진행중인 행사가 없어 경고 팝업이 생성됩니다.

기타 화면

• 기타 다른 사유가 있을 때는 기타 사용 팝업이 올라옵니다.

이렇게 기본적인 html의 화면 틀은 잡혔습니다. 로그인 기능과 팝업 등 html을 처음부터 시작해서 이 화면들을 구성하는데에 정말 오래걸렸지만 만족스러운 결과가 나온것 같습니다. 모든 데이터는 파이어베이스에 저장되고 출입기록이 스프레드 시트에 자동으로 쓰여지도록 구현할 것입니다. html 소스코드는 제 github에서 확인하실 수 있습니다.

깃허브