라즈베리 파이로 스마트 미러 만들기

MagigMirror2 사용해보기

시간은 대체로 망설임을 잡아먹고 산다. 할까? 말까?, 이렇게 할까? 저렇게 할까?, 언제 할까? 물음표가 붙은 매 순간을
시간은 낼름낼름 받아먹으면서 점점 더 기운을 내서 빨리 가버린다.

아두이노를 이용하여 스마트 미러를 만들어보고자 시작한 것이 벌써 2달여가 지나가고 있다. 그 사이 많은 망설임과
다른 선택지에 밀려 별다른 진전도 없이 시간은 흘러갔다. 물론 그 사이 라즈베리파이로 방향 전환을 하여 Alexa도
한 번 테스트를 해보고 Android Things도 한 번 설치해보고 하긴 했으나 실질적인 도움이 되는 건 없었다.

이런 저런 상황을 보니 아무래도 직접 모든 것을 해결하기에는 역부족이다 싶어 그 유명하다는 스마트 미러용 오픈소스
Magic Mirror2를 설치해보기로 했다(2는 원래 윗첨자인데 안타깝게도 Ulyssess 편집기에는 첨자 기능이 없다…ㅠ.ㅠ)

설치와 실행이 너무도 간단하여 굳이 글로 정리하기도 민망하지만 간단한 특징들만 좀 정리해보도록 하겠다.

소스 위치

소스는 다음의 GitHub 경로에서 다운로드 받을 수 있으며 README에 필요한 내용들이 정리되어있다.

https://github.com/MichMich/MagicMirror#configuration

소스 구조

소스는 Node.js 기반의 javascript 코드로 작성이 되어있다. 많은 디렉토리와 파일들이 있으나 가장 중요한 것들은
다음과 같다.

js 디렉토리 : 가장 기본적인 앱 실행에 필요한 파일들이 들어있으며 defaults.js에는 기본 설정이 들어있다.

config 디렉토리 : 말 그대로 설정파일이 들어있다. 자동설치를 하면 달리 작업할 것이 없으나 수동 설치를 할 경우
config.js.sample 파일을 config.js 파일로 복사한 후 필요한 설정을 하면 된다. 앞서 말한대로 이 설정의 기본값들은
js/defaults.js에 코딩되어있다.

modules 디렉토리 : 각각의 기능을 담당하는 모듈들이 들어있다. 기본적으로 화면에 보여지는 모듈은 다음과 같다.
1. calendar : 날짜 및 기념일 과 휴일 표시. calendarlabs.com 서비스 이용
2. clock : 시간 표시
3. currentweather : 현재 날씨 표시. openweathermap.org 서비스 이용
4. weatherforecast : 1주일간의 일기 예보 표시. openweathermap.org 서비스 이용
5. newsfeed : 뉴욕 타임즈의 뉴스 피드 표시. nytimes.com 서비스 이용
6. compliments : ‘Hey there sexy!’ 등 뻘소리 뱉는 모듈…-.-

그밖에 다른 모듈로부터의 경고를 표시해주는 alert, 정적인 텍스트를 표시해주는 hello world, MagicMirror
자체의 버전 업데이트를 알려주는 updatenotification 등의 기본 모듈이 있다.

translations 디렉토리 : 다국어 지원을 위한 언어 파일들이 모여있는 곳. 하지만 사용되는 타이틀이 몇개 없어
다국어 지원의 의미가 별로 없다. 예를들어 한국어 파일인 kr.json의 내용은 전체 코드가 다음과 같다.

{
"LOADING": "로드 중 …",
"TODAY": "오늘",
"TOMORROW": "내일",
"DAYAFTERTOMORROW": "모레",
"RUNNING": "종료 일",
"EMPTY": "예정된 이벤트가 없습니다.",

"N": "북풍",
"NNE": "북북동풍",
"NE": "북동풍",
"ENE": "동북동풍",
"E": "동풍",
"ESE": "동남동풍",
"SE": "남동풍",
"SSE": "남남동풍",
"S": "남풍",
"SSW": "남남서풍",
"SW": "남서풍",
"WSW": "서남서풍",
"W": "서풍",
"WNW": "서북서풍",
"NW": "북서풍",
"NNW": "북북서풍",

"UPDATE_NOTIFICATION": "새로운 MagicMirror² 업데이트가 있습니다.",
"UPDATE_NOTIFICATION_MODULE": "MODULE_NAME 모듈에서 사용 가능한 업데이트 입니다.",
"UPDATE_INFO": "설치할 COMMIT_COUNT 는 BRANCH_NAME 분기에 해당됩니다."
}

그밖의 디렉토리들과 파일들은 자동을로 설치했다면 당장에 수정이 필요한 부분은 없다.

설치

나는 그냥 자동으로 설치 했다. 설치 방법은 GitHub 페이지의 README를 보는 것이 더 정확하고 빠를 것이다.
자동 설치는 콘솔 창에서 다음과 같이 입력한 후 엔터를 치면 된다.

bash -c "$(curl -sL https://raw.githubusercontent.com/MichMich/MagicMirror/master/installers/raspberry.sh)"

모든 설치가 자동으로 이루어지나 중간에 설치 확인하면서 ‘Y’를 한 번 입력해줘야 하고 마지막에 자동 실행 여부를
묻는 부분에서 ‘y/n’을 입력해 주어야 한다. 자동 실행 여부를 ‘y’로 입력해주면 설치 종료 후 바로 MagicMirror가
실행된다. MagicMirror가 실행되면 다음과 같은 화면이 표시된다.

실행과 종료

처음 자동실행을 했더니 바로 MagicMirror가 실행되면서 아무런 메뉴도 없고 키도 특별히 먹는 것이 없다보니
종료시키는 방법을 몰라 한참을 헤맸다.

일단 cmd+tab(나는 Mac을 쓰므로 이 조합이지만 다은 OS는 Ctrl-tab)을 누르면 설치를 진행했던 콘솔 창이
화면 앞으로 나타난다. 콘솔 화면은 아래 그림과 같은 내용이 떠있을 것이다.

MagicMirror는 PM2라는 툴로 시작과 종료를 한다. 각각 다음과 같은 명령어를 사용한다.

$> pm2 start MagicMirror
$> pm2 stop MagicMirror

이 명령어도 README에는 ‘pm2 start mm’이라고 적혀있어 좀 헤맸는데 나중에 위 이미지의 화면을 보니
name에 MagicMirror라고 되어있어서 이 이름으로 입력했더니 되었다…-.-

설정

설정 파일은 MagicMirror가 설치된 경로 아래에 config라는 디렉토리 바로 밑에 있다. 앞서 소스 구조에서 설명한
바와 같이 수동으로 설치할 경우 config.js.sample을 config.js로 복사하여 사용하면 되나 자동 설치할 경우에는
이 과정까지 모두 진행되어 바로 config.js 파일이 보일 것이다. 최초 코드는 다음과 같다.

/* Magic Mirror Config Sample
 *
 * By Michael Teeuw http://michaelteeuw.nl
 * MIT Licensed.
 */

var config = {
	port: 8080,
	ipWhitelist: ["127.0.0.1", "::ffff:127.0.0.1", "::1"], // Set [] to allow all IP addresses.

	language: "en",
	timeFormat: 24,
	units: "metric",

	modules: [
		{
			module: "alert",
		},
		{
			module: "updatenotification",
			position: "top_bar"
		},
		{
			module: "clock",
			position: "top_left"
		},
		{
			module: "calendar",
			header: "US Holidays",
			position: "top_left",
			config: {
				calendars: [
					{
						symbol: "calendar-check-o ",
						url: "webcal://www.calendarlabs.com/templates/ical/US-Holidays.ics"
					}
				]
			}
		},
		{
			module: "compliments",
			position: "lower_third"
		},
		{
			module: "currentweather",
			position: "top_right",
			config: {
				location: "New York",
				locationID: "",  //ID from http://www.openweathermap.org/help/city_list.txt
				appid: "YOUR_OPENWEATHER_API_KEY"
			}
		},
		{
			module: "weatherforecast",
			position: "top_right",
			header: "Weather Forecast",
			config: {
				location: "New York",
				locationID: "5128581",  //ID from http://www.openweathermap.org/help/city_list.txt
				appid: "YOUR_OPENWEATHER_API_KEY"
			}
		},
		{
			module: "newsfeed",
			position: "bottom_bar",
			config: {
				feeds: [
					{
						title: "New York Times",
						url: "http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml"
					}
				],
				showSourceTitle: true,
				showPublishDate: true
			}
		},
	]

};

/*************** DO NOT EDIT THE LINE BELOW ***************/
if (typeof module !== "undefined") {module.exports = config;}

이 기본 설정에 필요한 내용을 추가하거나 수정하여 사용하면 된다. 몇가지 팁을 정리하자면 다음과 같다.

1. calendarlabs.com의 한국 휴일 데이터 URL은 다음과 같다. 하지만 모두 영어로 표시된다…ㅠ.ㅠ
   webcal://www.calendarlabs.com/templates/ical/SouthKorea-Holidays.ics
2. openweathermap.org의 경우 서비스를 이용하기 위해서는 가입 후 appid를 발급받아야 한다.
   정상적인 appid를 입력해야 데이터가 화면에 표시된다.
3. newsfeed의 경우 개발자 문서에 언급된 사용 가능 뉴스는 뉴욕타임즈와 bbc밖에 없다.
4. 컨텐츠의 크기를 조절하는 zoom이라는 옵션이 있는데 왠지 적용되지 않는 것 같다.
5. language 옵션을 kr로 하면 한글 표시가 나오나 앞서 말한 바와 같이 설정된 텍스트가 거의 없어 ‘로딩중…’이나 바람 방향을 표시하는 ‘남서풍’ 정도만 한글을 볼 수 있다.

요약

아직 설치하고 실행만 해본터라 이정도에서 정리를 마치고자 한다. 진짜 중요한 부분은 모듈을 만드는 부분일
것이다. 개발자 문서에도 모듈은 만드는 부분에 대해 별도의 페이지를 할애하여 안내하고 있다. 새로운 모듈이
없이는 스마트 미러라고 하기에는 많이 부족하다(그래서 이름이 그냥 MagicMirror인 것 같다). 적어도 음성 명령
정도는 포함시켜주어야…^^;;;

또 언제가 될지는 모르겠지만 일단 만들고 싶은 모듈은 소니에서 제공하는 안드로이드용 건강 앱인 ‘LifeLog’
API를 이용하여 LifeLog 정보를 MagicMirror에 표시해 보는 것이다. 그러려면 일단 소스 분석부터 제대로 좀
해봐야 할 것 같지만…-.-

그리고 현재 5인치 LCD를 사용하는데 아무래도 LCD 사이즈를 좀 더 키워야 할 것 같다.

그럼 기약 없는 다음 어느 날에 후속 이야기를 적어보도록 하겠다…^^;;;