|
Phase 1 | ROS로 조명 및 공조 시스템 제어하기 |
가장 흥미로운 Front-end 생성
지금 하고 있는 ROS IoT 스마트홈 프로젝트는 IT 솔루션으로 치면 SI에 가깝다고 볼 수 있습니다. 대부분 이런 일을 할 때 가장 흥미로운 부분이 있다면 그건 아마 프론트엔드를 만드는 과정일 것입니다. 가장 큰 이유는 일단 상대적으로 구현하기 쉽고, 눈으로 그 결과를 바로 확인할 수 있기 때문입니다. 기획을 할 때도 대부분 프론트엔드를 먼저 생각합니다. 그게 직관적이기 때문입니다. 여기에서도 프론트엔드를 먼저 구축하고, 백엔드를 구현해보겠습니다.
제작 과정 요약
ROS IoT 스마트홈 프로젝트(이하 Cranberry라 명칭하겠습니다.)는 라즈베리파이를 허브 디바이스로 사용할 예정입니다. 즉, 모든 것이 라즈베리파이 위에서 작동될 예정입니다. 그렇다고 라즈베리파이를 들고다니면서 코딩을 할 순 없는 노릇이니, 이전 포스팅에서 저희는 PC 기반(Native/VM)에서 우분투와 ROS Melodic을 설치했습니다. 코딩을 PC에서 하고, 추후 라즈베리파이에 프로젝트를 옮겨서 실제로 서비스해보겠습니다.
HTTP + CSS + JS(ROS)
프론트엔드를 구현할 때 생각할 것들이 여러 가지가 있습니다만 가장 크게 생각했던 것은 '어떤 디바이스에서 ROS를 제어할 수 있게 할 것인가' 였습니다. Cranberry는 구현하기 위해 배워야 할 게 한 두 개가 아니었기 때문에, 각 디바이스에 맞는 애플리케이션을 만들기란 시간적인 문제가 너무 컸습니다. 따라서 Cranberry는 웹 페이지 형태로 서비스하겠습니다. Dashboard를 구현하기 위해 HTTP와 CSS, Javascript에 대한 이해가 조금 필요했습니다. 이 글을 보러 오시기 전에, HTTP와 CSS에 대한 개념이 있으시다면 좋겠지만, 저처럼 이런 쪽을 전혀 모르시는 분들을 위해 간단하게 설명하겠습니다.
HTTP(Hypertext Markup-Language)
웹 페이지를 브라우저에 나타내는데 꼭 필요한 것으로, 웹 페이지에 표시할 컨텐츠나, 웹 요소들 간의 관계와 이름을 정의합니다. 웹페이지를 만드는 과정을 건축에 비유했을 때, 외벽을 세우고, 지붕을 만드는 과정과 비슷합니다.
CSS(Cascading Style Sheet)
http에서 정의한 요소들의 구체적인 배치와, 색상, 모양을 결정합니다. http에서 건물의 기초 공사와 같다면, css는 내부 인테리어를 하는 것과 같습니다.
Javascript
HTTP, CSS에서 건물의 기초와 마감까지 다 했습니다. 이것만으로 그 건물을 써먹기에는 뭔가 부족합니다. 사람이 살기 위해서는 전기도 들어와야 하고, 소방시설, 공조, 냉난방, 하수처리까지 있어야 쓸만합니다. javascript는 이 역할을 담당합니다. Cranberry Dashboard에서는 ros와의 연동을 위해 javascript를 사용합니다.
Django
위에서 간단하게 HTTPS, CSS, Javascript에 대해 건축을 예를 들어 설명했습니다. 그런데 건축을 예로 들면서, 가장 기초가 되는 토목 공사에 대한 부분은 따로 언급하지 않았습니다. 토목 공사는 건물을 사용하는데 어떤 역할도 수행하지 않지만, 건물 자체가 서 있을 수 있는 중요한 일을 합니다. 이 중요한 일을 수행하는 것을 웹 프레임워크라 하며, Cranberry에서는 Django라는 파이썬 기반의 풀스택 웹 프레임워크를 사용하겠습니다.
파이썬 가상환경, venv(Virtual-envirionment) 생성하기
이정도면 웹 페이지를 구현하기 위한 대부분의 설명을 마친 것 같습니다. Dashboard 구현은 위에서 설명한 것과 비슷하게 토목공사-> 벽체 세우기-> 인테리어 마감-> 건물 내부 구현의 순으로 진행하겠습니다.
우선 토목 공사 먼저 하겠습니다. 앞서 말씀드렸듯, Cranberry는 PC에서 개발 한 후 라즈베리파이에 옮겨서 서비스를 진행할 예정입니다. 따라서 언제든지 이사갈 준비를 해야 합니다. 파이썬에서는 이렇게 실행 환경이 변경되어도 코드가 잘 실행될 수 있도록 venv라는 기능을 제공합니다. venv는 파이썬을 통째로 프로젝트 폴더에 복사해서 프로젝트가 실행되는 파이썬과 OS에서 작동하는 파이썬을 분리합니다. 이렇게 함으로써, 개발한 파이썬 코드를 다른 시스템에서도 원활히 사용할 수 있으며, OS에 파이썬 라이브러리를 설치했다 뭔가 잘못되었을 때 파이썬을 다 다시 설치해야하는 문제로부터 벗아날 수 있습니다.
우분투에서 Ctrl +Alt +T 를 이용해 터미널을 열고 다음 명령어를 입력해 보겠습니다.
mkdir -p ~/catkin_ws/src/Cranberry # -p 옵션은 중간에 없는 폴더를 자동으로 생성해줍니다.
cd ~/catkin_ws/src/Cranberry # ~/catkin_ws/src/Cranberry 경로로 이동
sudo apt-get install python3-venv -y # python3-venv 설치
python3 -m venv web-env # web-env이름을 가진 venv 생성
source web-env/bin/activate # web-env 진입
위의 과정을 수행한 후, 터미널 앞에 (web-env)가 추가되었다면 성공적으로 web-env라는 이름의 venv에 진입했다는 것을 알 수 있습니다. 아래 명령어로 web-env에 Django 웹 프레임워크를 설치해보겠습니다.
$ python -m pip install Django #Django 설치
$ python # 파이썬 쉘 실행
>>> import django # 파이썬 쉘에서 Django import하기
>>> print(django.get_version()) #Django 버전 출력
3.1.1설치가 완료되고, $나 >>>을 제외한 아래 세 줄의 명령어를 입력하면 현재 설치된 Django 버전을 확인할 수 있습니다.
Done!
웹 Dashboard를 구현하기 위해 간단히 HTML + CSS + Javascript에 대한 설명을 진행했으며, Django를 설치해봤습니다. 다음 포스팅에서는 Django를 통해 웹 서버를 실행시켜 보겠습니다.
참고문헌
docs.djangoproject.com/ko/3.1/intro/install/
긴 글 읽어주셔서 감사합니다.
글이 도움이 되셨다면 왼쪽 아래의 공감버튼과 광고 클릭 부탁드립니다. 고마움을 표현할 수 있는 가장 쉬운 방법입니다.
