#11/28 [매직미러 HowTo] / 스텝 2

스텝2. 필요한 정보 추가 

개발환경 둘러보기

  앞에서 매직미러를 실행해 봤습니다. 뭔가 개발을 한 것이 아니라 오퍼레이팅 시스템을 설치하고 매직미러 프로젝트를 다운로드 받아 실행을 한 것이 전부였는데 기본적인 매직미러가 동작을 합니다. 

아직 영어로 된 화면 밖에 안 보입니다. 스텝2에서는 한글을 쓸 수 있도록도 해 주고 이것 저것 추가 하고 싶은 것이 많은데 어디서 부터 시작을 해야 할지 감부터 잡아야겠습니다. 우선 매직미러를 실행해 봅시다. 

 

$cd MagicMirror $npm run start

개발환경 둘러보기

실행된 매직미러에서 개발 환경을 보기 위해서는

개발환경 단축키	Ctrl + Shift + I
상단 메뉴	Alt

 

  키를 누르면 됩니다. 다음 [그림 77]은 개발환경 단축키를 눌렀을 때의 화면입니다. 매직미러 화면은 좌측에 나타나고 우측에 개발환경이 나타납니다. 개발 환경의 상단 메뉴 중에서 소스를 선택합니다. 소스를 선택하면 개발환경 내의 좌측에 소스트리가 나타나는데 여기서 Translations을 선택하고 Translations.js를 더블클릭하면 우측에 소스가 나타나는데 소스 중간쯤을 보면 한글이 보이네요. 한글을 지원할텐데 화면에는 영문으로만 표시가 되네요. 바꾸고 싶다는 생각이 마구들지 않나요? 

 

 

그림 77. 매직미러 개발환경

 

  한글로 구성을 바꾸고 원하는 기능을 추가하기 위해서는 좌측의 매직미러 화면 구성이 어떻게 되어있는지 확인이 필요합니다. Elements로 이동을 해서 상단의 글래스 중에서 하나를 더블 클릭하면 하단에 화면 구성이 나타납니다. 그리고 Class를 이동해 보면 우측의 그림과 같이 어떤 영역인지 비주얼하게 확인을 할 수도 있네요.

 

그림 78. 화면 구성

 

  [그림 79]와 같이 Alt Key를 눌러 상단의 메뉴를 활성화 시키고 Help에서 Documentation을 선택하면 웹페이지가 뜨면서 개발 환경에 대한 문서가 보여집니다. 

 

  여기서 매직미러 프로젝트에서 사용하는 개발툴의 이름이 일렉트론(Electron)이라는 것을 알 수 있습니다. 일렉트론은 데스크탑 우리가 만든 애플리케이션들을 만들 수 있는 플랫폼으로 우리가 만든 매직미러를 데스크탑에서 실행할 수 있도록 해 주는 툴이라고 합니다.

 

그림 79. 일렉트론

디버깅

  하나하나 세세하게 보고 갈 필요는 없겠습니다. 대충 어떻게 생겼는지만 보고 하나 둘씩 해 보면서 배우는 것으로 하겠습니다. 매직미러에 포함된 일렉트론을 이용해서 소스를 수정할 수 있고 디버깅을 할 수 있다면 별도의 개발 환경을 꾸밀 필요가 없다고 생각을 했습니다. 

 

디버깅이란 프로그램을 개발하면서 생긴 오류를 수정하는 과정을 일컫는 말입니다. 이 오류를 벌레에 비유해서 버그(Bug)라고 이야기를 하며 이 버그를 없애는 것을 디버깅(Debugging)이라고 한 것입니다. 

 

  그런데 아쉽게도 일렉트론을 이용해서 소스코드를 수정하는 작업을 할 수는 있지만 복잡해 보였습니다. 그래서 매직미러 홈페이지의 포럼에 질문을 올려봤는데 매직미러를 만들어본 선배들 역시나 별도의 툴을 사용하고 있었습니다. 많은 매직미러 개발자들은 라즈베리파이에서 직접 개발을 하지 않고 개인 컴퓨터에서 라즈베리파이에 접속해서 개발을 하고 있었습니다. 하지만 우리는 라즈베리파이와 라즈베리파이 OS와 친해질 필요가 있다고 생각을 해서 라즈베리파이 내에서 개발을 하는 것으로 진행을 하고자 합니다. 

에디터 지니

  라즈베리파이 홈페이지에서 우측 상단을 보면 Forum이 있습니다. 가입을 하고 나면 포럼에 질문을 올릴 수 있습니다. 궁금하신 사항을 여기에 물어보시면 전세계의 매직미러 개발자들이 대답을 해 줍니다.

 

그림 80. Geany 설치

 

  개발툴이라고 해야 소스코드를 수정할 수 있는 에디터가 여기선 필요한데요. 

 

  기본적으로 설치되어 있는 텍스트 에디터는 윈도우의 메모장과 비슷해서 불편해 보이고 터미널에서 사용하는 nano 라는 툴도 있습니다만, 둘다 훌륭한 툴이기는 하나 특히 터미널에서 사용하는 툴은 윈도우 사용자가 사용하기에는 적응하기 힘들어서 구글링을 통해서 에디터를 찾았습니다. 

다른 분들도 많이 사용하고 추천하는 에디터는 지니(Geany)였습니다. 지니를 설치하겠습니다. 

 

$sudo apt-get install geany

   

  그리고 [그림 81]과 같이 시작 → 개발에서 지니를 찾을 수 있습니다. 

 

그림 81. 지니

 

  다음 챕터부터 지니를 이용해서 하나씩 둘씩 소스를 수정해 보도록 하겠습니다.