#18/28 [매직미러 HowTo] / 스텝 3

스텝3. 매직미러 업그레이드하기

  매직미러에 포토 앨범을 두 종류 넣고 지금까지 추가한 모듈들의 배경색을 바꿔도 보겠습니다. 그리고 부팅이 될 때마다 자동으로 매직미러를 실행하도록 설정을 해 주도록 하겠습니다. 포토 앨범은 구글포토 서비스와 공유폴더를 이용한 포토앨범의 두 가지입니다. 

  

MMM-GooglePhotos

  포토 앨범의 첫 번째 입니다. 많은 분들이 안드로이드 스마트 폰을 쓰고 계시기 때문에 Google Photo를 사용는 분들 역시 많습니다. 그래서 포토 앨범의 첫 번째는 Google Photo를 화면 가득 일정 시간마다 사진을 바꿔가면서 전자 액자 형식으로 디스플레이 해 보려고 합니다. 매직미러 홈페이지에서 Modular로 들어가 GooglePhoto로 검색해 보면 MMM-GooglePhotos를 찾을 수 있습니다.

 

$cd ~/MagicMirror/modules    $git clone https://github.com/eouia/MMM-GooglePhotos.git    $cd MMM-GooglePhotos    $npm install

구글 포토 설치

  GooglePhotos라는 git 주소를 빼고나면 다른 명령어 들은 앞서서 다 한번씩은 사용해 봤던 명령어들입니다. 여기까지는 이미 해 봤었던 과정이라 과감하게 스크린 샷은 넣지 않았습니다. 다들 어느 정도 익숙해 지셨으리라 생각합니다.

 

  다음 단계는 구글 서비스 API가 들어있는 token.json 이라는 파일을 만들어야 하는 과정을 소개하고 있습니다. 모듈이 시작될 때마다 아이디와 비밀번호를 입력하는 번거로움을 없애기 위해 고안된 방법이겠습니다.  

구글 뿐만 아니라 여러 웹서비스 업체들에서는 외부에서 해당 서비스를 사용할 수 있는 방법을 API라는 형태로 제공을 합니다. 홈페이지에서 보여지는 웹서비스에 접속해서 사용하는 방법 이외에 같은 서비스를 다른 방법으로도 사용할 수 있게 함으로써 사업을 확대하고자 하는 것입니다. 

 

  우리는 구글 포토를 쓸 것이기 때문에 구글 포토 서비스 API 세트가 들어있는 token.json이라는 파일을 접속 정보를 포함해서 만들어야 합니다. 만들어 주는 것 자체는 구글이 하고 우리는 안내하는 방법대로 따라하기만 하면 됩니다. 

웹서비스이다보니 매직미러의 GooglePhoto 사이트에서 소개하는 것은 오래된 방식입니다. 그래서 현재 구글에서 어떻게 해당 서비스를 신청하고 필요한 파일을 받아오는지 설명을 드리겠습니다. 홈페이지가 또 바뀔 수는 있겠습니다만 하는 방법은 유사할 것으로 생각되니 잘 따라오시기 바랍니다. 꽤나 길고 복잡합니다. 구글 계정의 설정에 따라서 안내나 버튼들이 영어 또는 한글로 나올 수 있는 점은 참고하시기 바랍니다.

 

구글 서비스 API 받아오기

우선 Google API Console로 접속을 합니다. 주소는 https://console.developers.google.com/ 입니다.

 

 

그림 117. Google Cloud Platform

 

  구글 클라우드 플랫폼으로 연결이 됩니다. 국가는 기본적으로 선택이 되어 있으니 서비스 약관들을 동의하면 다음으로 계속 진행을 할 수 있습니다.  다음 화면에서는 우측 상단의 “프로젝트 만들기"로 들어갑니다. 만일에 프로젝트 만들기가 보여지지 않는다면 좌측 상단의 “My First Project”를 선택하고 우측 상단에서 새 프로젝트를 클릭합니다. 

 

 

그림 118. 프로젝트 이름 설정

 

  [그림 118]과 같이 프로젝트 이름을 설정을 합니다. 저는 My-MagicMirror로 설정을 했고 조직은 선택할 필요가 없습니다. 조직은 개인이 만드는 서비스라기 보다는 기업에서 만드는 것이 아닐까 추측을 해 봅니다. 만들기가 완료되고 나면 [그림 118]의 두 번째 그림과 같이 보입니다. 화면의 중앙 상단을 보시면 ‘+ ENABLE APIS AND SERVICES’를 찾을 수 있습니다. API라는 것은 Application Programming Interface의 약자로서 우리가 서비스를 우리가 만든 프로그램에서 이용할 수 있게 해 주는 다양한 기능을 가지고 있는 것입니다. 

클릭해서 다음으로 갑니다. 

 

 

그림 119. Google Photo Library

구글 포토 라이브러리 사용

  환영 메시지가 나타납니다. 구글을 쓰면서도 구글 클라우드 서비스에 접속은 처음하게 되니 어색합니다. 탐색메뉴에서 확인을 눌러 활성화를 합니다. 우리가 사용할 서비스는 Google Photo Service입니다. 그러나 화면에서 찾을 수가 없기 때문에 검색창에 Google Photo를 입력합니다. 입력하는 순간 리스트에 Photo Library API가 나타납니다. 이것을 선택해서 다음으로 이동을 해 봅니다.

 

 

그림 120. Photo Library API 사용하기 설정

 

  Photo Library API 페이지이고 아래에 ‘사용’ 버튼이 있습니다. 사용 버튼을 눌러 API를 활성화 합니다. 

그리고 나서 다음 페이지로 넘어가면 상단 중앙부에 ‘API 사용 중지’를 할 수 있는 링크가 나타나는 것으로 보아 API가 활성화 된 것으로 이해하면 되겠습니다. 다음으로 사용자 인증 정보가 필요하므로 화면 우측에 보이는 ‘사용자 인증 정보 만들기’ 버튼을 클릭해 줍니다. 그러면 [그림121]과 같이 프로젝트에 사용자 인증 정보 추가라는 창을 볼 수 있습니다.

 

 

그림 121. 인증정보 추가

사용자 인증정보 만들기

  프로젝트 사용자 인증 정보를 추가하기 위해서 몇가지 선택을 해야만 합니다. ‘필요한 사용자 인증정보 추가’ 중에서 첫번째는 우리가 사용을 할 Photo Library API를 선택해 줍니다. 다음은 API를 호출할 위치를 선택해 줘야하는데 여기서는 ‘기타UI’를 선택합니다. 매직미러가 있으면 좋았을텐데 하고 생각을 해 봅니다만 범용적이지 않기 때문에 리스트엔 없는 것 같습니다. 다음에는 액세스 할 데이터에서 ‘사용자 데이터’를 선택해 줍니다. 사용자의 사진에 접근해야 하기 때문입니다. 

‘어떤 사용자 인증정보가 필요한가요’를 클릭해서 다음으로 넘어갑니다. OAuth 동의화면 설정이라는 창이 뜨면 동의 화면 설정을 눌러줍니다.

 

 

그림 122. OAuth 생성 화면

OAuth 권한

  [그림 122]은 다시 한번 구글 클라우드 서비스의 생성에 대해서 추가적으로 묻고 있습니다. 다음은 OAuth 허가 화면이 나타나는데 여기서는 외부를 선택해 줍니다. 

OAuth는 인터넷 사용자들이 비밀번호를 입력하지 제공하지 않고도 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는 개방형 표준이라고 합니다. OAuth 생성을 위해 Create 버튼을 클릭해서 다음으로 넘어갑니다.

 

 

그림 123. OAuth 생성

 

  인증을 위해서 입력이 필요한 사항들이 있습니다. 많지는 않고 앱이름(Application Name)과 사용자 이메일 주소와 개발자 연락처 정보의 이메일 주소 뿐 입니다. Application Name은 MyMagicMirror로 설정하고 다음으로 이동을 합니다. ‘앱 등록 수정’ 화면이 나타난다면 저장 후 계속을 선택해 다음 그리고 다음으로 넘어갑니다. 그러면 [그림 123]의 우측과 같이 Internal과 External 선택화면이 나옵니다. 우리 계정만 있으면 누구나 쓸수 있도록 External로 설정하고 Create를 통해서 생성을 했습니다. 

 

 

 

그림 124. 자격증명(Credentials) 만들기

 

  이제 자격증명을 만들어야 합니다 왼쪽의 사용자 인증정보(Credentials)를 클릭하면 상단에서 ‘+사용자 인증 정보만들기’ 혹은 ‘CREATE CREDENTIALS’이 나타납니다. 이를 선택하고 OAuth 클라이언트(Client) ID를 선택합니다. 

이 ID를 통해서 구글 포토의 데이터에 접근을 한다고 합니다. 다음 화면으로 넘어가 애플리케이션 유형(Application Type)을 설정해야 하는데 우리한테 맞는 것은 아쉽게도 없습니다. 그래서 유사한 ‘TV 및 입력 제한 기기’ 또는 ‘TVs and limited input device’를 선택하고 만들기(Create)를 클릭 합니다. 

 

 

그림 125. OAuth client 생성

 

  다음은 OAuth client 이름이 필요합니다. 이름은 MyMagicMirror-Client로 정하고 Create를 누르면 OAuth client가 다음 [그림125]의 우측 그림과 같이 생성이 됩니다.  생성이 된 데이터는 아직까지 우리가 사용하고자 하는 것은 아닙니다. 조금 더 추가적인 작업이 필요합니다.

 

그림 126. Json 파일 다운로드

 

  사용자 인증정보(Credentials)가 생성이 된 화면입니다. 여기에서 OAuth 2.0 Client IDs에 보시면 우리가 만든 ID가 보이고 맨 오른쪽에 다운로드 아이콘이 보입니다. 이 다운로드 아이콘을 클릭해서 json 파일을 다운로드 받습니다. 그리고 다운로드 받은 파일의 이름을 credentials.json으로 변경을 하고 

 

~/MagicMirror/modules/MMM-GooglePhotos

 

에 복사를 해 주세요.

복사를 한 후에는 터미널을 열어

 

$cd ~/MagicMirror/modules/MMM-GooglePhotos    $node generate_token.js

 

와 같이 실행을 해 줍니다. 

node는 외부 명령어를 실행해 주는 커맨드로 generate_token.js에 들어 있는 명령들을 실행하게 됩니다. 

 

 

 

그림 127. Token.json 만들기

 

  실행이 되면 잠시 후에 [그림127]과 같이 코드 붙여넣기를 하라는 화면이 잠시 나타나고 바로 브라우저가 열리면서 아이디를 선택할 수 있는 창이 뜹니다. 아이디를 선택해서 들어갑니다.

 

 

 

그림 128. 구글 포토 권한 주기

구글 포토라이브러리 로그인 하기

  아이디를 선택하고 들어가면 [그림128]의 첫번째 그림 같이 뭔가 잘못된 듯한 느낌이 듭니다. 왜냐하면 검증되지 않은 App이라고 뜨기 때문이죠. 겁먹지 마시고 좌측 하단부에 고급설정 또는 Advanced를 누르면 페이지가 조금 아래로 확장되면서 Go to MyMagicMirror라고 나타납니다. 우리가 만든 App이 구글에서 검증 된 것이 아니기 때문에 조심하라는 경고를 준 것이 아닌가 싶습니다. 그나마 우리가 만들었던 App Name이 보여서 다행입니다. MyMagicMirror을 선택해서 이동을 하면 구글 포토의 앨범과 구글 포토 라이브러리의 접근을 허락하겠냐고 물어봅니다. 모두 허용한다는 뜻의 허용 또는 Allow를 선택해 줍니다. 그럼 마지막의 그림과 같이 선택한 기능을 모두 허락한다는 버튼이 나타납니다. 클릭해 주세요.

 

그림 129. Sign in

 

드디어 최종화면이 나타났습니다. 여기 나타난 코드가 중요합니다.

 

화면에 나타난 코드를 복사합니다. 잘 복사하셔서 터미널에 코드 넣는 부분에 붙여넣기를 합니다. 메뉴에서 붙여 넣기 또는 Ctrl + Shift + v 단축키를 사용합니다.

 

그리고 엔터를 쳐주면 token.json 파일이 드디어 생성됩니다. 이젠 구글 포토를 사용할 준비가 모두 끝이 났습니다. 

Config 작성

  길고 긴 길을 달려왔습니다. 이제는 우리에게 친숙한 config 설정 작업이 남았습니다. 그러면 구글 포토에 저장된 사진을 라즈베리파이가 보여주게 됩니다.

 

그림 130. Config 샘플

 

  MMM-GooglePhotos의 홈 페이지에서 Configuration의 내용을 마우스로 드래그를  이용해 복사해서 config.js에 모듈 중 weather 위쪽에 복사를 해 넣습니다. 위치는 어디든 상관없습니다. 모듈과 모듈 사이에 넣어줘도 되고 맨 앞, 또는 맨 뒤의 모듈에 넣어줘도 됩니다. 

그리고 [그림 130]과 같이 Configuration을 수정을 해 줍니다.

 

그림 131. 수정된 config

 

  우선 position을 “fullscreen_below”로 변경을 했습니다.  이유는 사진이 전체 화면에 보여지길 원하기 때문입니다. 매직미러를 실행 중에 Ctrl + Shift + I를 눌러 개발환경으로 들어가면 있는 엘리먼트 화면에서 마우스를 이동해 보면 fullscreen_below가 어느 영역인지 확인 하는 방법을 앞서 다룬적이 있습니다. 

다른 것들과 같이 top_로 시작하거나 bottom_으로 시작을 하면 일부분에만 사진이 보여져 전자액자의 컨셉과는 거리가 멉니다.  다음은 앨범 이름을 넣어줍니다. 

구글 포토앨범 만들기

앨범 이름은 구글 포토에서 직접 만드셔야 하는데 스마트 폰에서 구글 포토를 여시고 맨 하단부 라이브러리에서 새 앨범을 클릭하시면 원하시는 사진들로 앨범을 만들 수 있습니다.

 

그림 132. google photo

 

  그리고 사진은 랜덤으로 보고 싶어서 sort 항목을 random으로 변경을 했습니다.  

구글 포토 앨범

  드디어 실행을 해 보면 다음과 같이 나타납니다. 인터넷을 통해 사진을 받아오는 것이라 시간이 좀 걸립니다.  그리고 interval이 1000 *60으로 되어 있는데 단위가 1/1000초이므로 1분마다 사진이 변경이 됩니다.

 

그림 133. 구글 포토와 매직미러

 

화면 가득 사진이 나타나고 우리가 앞서서 작업했던 모든 모듈들도 잘 나타납니다.

추가 아이디어

  매직미러에 포토 앨범까지 잘 작동을 합니다. 이 정도만 되어도 시중에서 구매하는 포토앨범 보다 활용도가 높아 보입니다. 

 

  지금까지는 기능을 넣고, 한글 작업을 하는 위주로 따라해 봤는데 위의 그림처럼 보여지기만 하면 좋게지만 사진의 흰색 부분이 많아지면 글씨들이 보이지 않는 문제가 발생합니다. 물론 최종적으로는 사진이 보일 때, 여타 다른 모듈들은 아예 보이지 않도록 만들 예정입니다. 지금 만들어 놓은 상태에서 각 모듈들의 글자가 잘 안보이는 문제를 화면에 보이는 구성요소 색상을 수정하는 방법을 통해서 매직미러 기능을 조금 더 수정해 보도록 하겠습니다.