라즈베리 파이 4B 매직미러 만들기(#4) -매직미러 config.js 구조 알아보기

기본적인 화면을 우리가 필요한 정보로 채워 넣기 위해서 매직미러의 config.js 파일을 수정하여 매직미러에서 제공하는 모듈을 활용하여 커스터마이징하여 필요한 정보만 보여주도록 할 수 있다.

기본 설정으로 나오는 매직 미러 화면

 

기본 설정으로 보여주는 화면을 보면 날자는 영어로 나오고 달력, 날씨, 뉴스 기사 등이 나오는데 불필요한 부분은 빼고 수정할 부분은 수정해 보도록 하자.

 

매직미러의 디렉토리 구조

먼저 원격을 접속한 터미널에서 디렉토리 구조를 살펴 보면 접속한 유저의 홈 디렉토리 밑에 MagicMirror라는 디렉토리가 존재하고 그 하위 디렉토리에 config라는 디렉토리가 존재한다. 최초 config.js.sample 파일만 있었는데 이 파일을 config.js 파일로 한 벌 더 복사했기 때문에 2개의 파일이 있는 것을 확인할 수 있다. 매직미러 앱이 동작할 때 config 디렉토리의 config.js 파일을 참조하여 어떠한 모듈을 보여줄지를 결정하기 때문에 매직미러를 설정하는 작업은 이 config.js 파일에 대한 이해가 매우 중요하다.

 

 

config.js 파일의 수정

먼저 날자 부분이 영어로 나오는 것을 한글로 나오도록 수정해 보자. 리눅스 상의 기본 텍스트 에디터인 vi 툴을 통해 config.js 파일을 열어보자. 그러면 터미널에서 해당 파일을 열어서 보여주는데 아래 스크린샷의 중간 부분에 language: “en”, 이라고 설정된 라인이 있다. config.js 파일은 텍스트 파일로 이 텍스트 파일을 수정하여 설정을 반영할 수 있도록 되어 있다.

매직미러의 config.js 파일

language: “en” 부분의 의미는 언어는 영어로 보여주도록 설정하는 설정파일의 규칙이라고 보면 된다. 한국은 “ko”로 표기하기 때문에 “en” 부분을 “ko”로 변경한 후에 저장한다. vi 에디터에서 파일을 수정하려면 “e”키를 누르면 편집모드로 들어간다. 이 상태에서 수정하고자 하는 위치로 커서키를 이동하여 수정하고 수정이 완료되면 “ESC”키를 눌러 편집모드에서 나간다. 그리고 나서 “w” 키를 누르면 파일이 저장된다. Vi 편집기에 대한 자세한 설명은 별도의 가이드를 찾아서 참고하도록 하자.

 

수정된 설정의 확인

수정이 완료되면 MagicMirror 디렉토리에서 “npm run start” 명령을 입력하고 엔터를 누르면 화면에 매직미러 정보가 표시된다. 그러면 아래 스크린샷 처럼 날자 부분이 영문에서 한글로 변경된 것을 확인할 수 있다.

날자 부분이 한글로 바뀌어 나온다.

매직미러 위치 정보

이제 불필요한 달력 부분을 삭제해 보도록 하자. 그 전에 현재 화면에 보여지고 있는 정보들의 위치 정보를 이해할 필요가 있다. 매직미러는 아래와 같이 키워드를 통해 표시하고자 하는 모듈의 정보를 미리 정의해 놓았다. 위 스크린샷에서 좌측 상단의 날자 정보는 top_left 라는 키워드를 통해 표시하고 있다.

매직미러의 Position에 해당하는 키워드와 위치정보

매직미러 git hub 페이지

매직미러 소스를 제공하는 제작자의 git hub 페이지는 https://github.com/MichMich/MagicMirror 인데 여기에 방문해 보면 우리가 처음에 git clone 명령어를 통해 복제한 소스 페이지 정보를 확인할 수 있다.

매직미러 github 페이지

제작자의 git hub 페이지에 접속해 보면 위 스크린샷 처럼 소스코드의 디렉토리 정보를 확인할 수 있고, 우리가 복제한 디렉토리 구조와 동일한 것을 알 수 있다. config 폴더를 클릭하여 들어가면 아래 스샷처럼 config.js.sample 파일만 있는 것을 확인할 수 있는데 우리 config 폴더에는 복사한 config.js 파일을 포함하여 2개의 파일이 있다는 것을 기억할 것이다.

config 디렉토리의 파일

 

위 파일을 클릭해 보면 파일의 내용을 확인할 수 있다.

github 파일에서 config.js 파일의 정보 확인

 

라즈베리 파이의 로컬 디스크에 존재하는 파일의 내용과 동일하고 좀 전에 수정했던 language: “en” 부분도 확인할 수 있다.

 

config.js 모듈 구조

일단 우리가 눈 여겨 볼 부분은 설정 파일을 조금 더 내려서 모듈을 설명하는 부분이다.

기본적으로 자바스크립트 상의 설정 파일인 config.js 파일은 json 파일의 규칙을 따르는 텍스트파일로서 일정한 규칙을 갖는다. 트리 구조로 영역을 구분하는데 하위의 부분은 “TAB”을 통해 하위 설정임을 구분한다.

config.js 파일의 모듈 구조

 

 

매직미러 문서

매직미러에 대한 문서 정보는 아래 사이트에서 확인 가능하다.

https://docs.magicmirror.builders

 

모듈 설정 부분에 보면 아래 처럼 Option 부분이 있고 Option 부분에서 사용할 수 있는 키워드 정보들이 있다. Description 부분에는 해당 키워드에 대한 설명과 어떠한 Value가 적용가능한지 설명되어 있다. 위 예에서는 module에 대한 정보가 compliments라는 모듈이 설정되었고, position을 통해 위치를 “lower_third”로 설정하여 화면의 중간 세번째 줄에 표시되도록 설정한 내용이라고 이해할 수 있다.