React와 라즈베리파이로 스마트 미러 만들기! - 1

예전에 라즈베리파이랑 물려서 뭐든 해보겠다는 10인치 작은 모니터를
처분하려다가,

어느날 스마트 미러를 알게되었습니다

 

..음..
이런저런 걸 보다보니.

딱 내 새로운 toy 프로젝트로 딱이란 생각이 들어서

한번 만들어보도록 할까요~

 

스마트 미러를 처음보고 하이테크 기술인줄 알았으나,

간단한 원리가 숨어있었습니다.

 

사실 하프미러는 주위에도 자주 볼수 있는데 

[사진]

그 일례로 하프미러 케이스이런 것들이있습니다.

 

 

준비물은 다음과 같습니다

라즈베리파이 3b+ (버전이 높으면 높을수록 좋음 암튼 좋음)

디스플레이 ( 모니터든, 암거나 상관없음)

one-way mirror

검색결과 얘는 만들거나, 사거나 둘 중 하나가 있습니다.

 

1. 만든다 

장점 : 저렴하다

단점 : 귀찮다 

 

제가 가진 디스 플레이가 만약 컸으면 해볼만합니다.

만드는 방법
1.  필름,아크릴판 유리를 하나사고 
2. 아크릴판,또는 유리판을 재단후에
3. 비닐물을 뿌리고 접착후 헤라로 밀어서 기포제거 

 

만약 제가 안쓰는 모니터로 크게 만든다면 다음엔 필름을 사서 만들겠습니다. 

 

2. 주문한다

장점 : 비쌈

단점 : 안귀찮음

 

....a4사이즈를 재단하려고하니 얼추 만원정도를 이득보는것밖에 없어서

그냥 완제품을 주문하기로 했습니다!

 

여기서 좀만 더 말하자면 
조금더 완성성있는 스마트 미러를 만드려면 투과율이 35%되는 미러로 구매하면됩니다.
나는 프로토 타입 및 집에서 사용하는 웹뷰용 모니터가 따로있으므로 
3만원 짜리 가성비 a4로 구매를 했습니다. ^^;


ui를 만드는 것을 여러가지 방법이 있는데
뭐 인터넷에 나도는 소스를 이용하다든가, 직접 만들거나 하면 됩니다.
인터넷에 돌아다니는 소스를 활용하자하니 

완성도는 뛰어나곘으나 커스터마이징이 힘든게 있었고
내 디스플레이가 워낙작아서 UI수정하기가 너무 힘들어보였습니다.

목표는 다음과 같다. 
1. 컴포넌트 UI위치를 내마음대로 커스터마이징 가능할것
2. 여러 컴포넌트를 사용자 맘대로 추가 삭제하는게 용이할것 
3. 이뻐야할 것~(중요) 

또한 토이프로젝트니까
모든 소스는 내가 작업하기로 마음먹고, 

연습용 코드인데다 숙련도가 부족하여 사실 참고용으로는 그렇게 좋진않을수있으나

나름 삽질을 거치고있네요... 한참멀었습니다..

요즘 리덕스랑 타입스크립트를 공부중이라, 딱 기술스택을 이렇게 정하기로 했습니다

스마트 미러에 들어갈 컴포넌트를 생각해보자하니

뭐 대강 기상정보, 시간, 명언, 네이버 실시간 검색어 정도를 넣을 생각입니다
주요 기술 스택은 다음과 같다 
UI : react  redux-toolkit, redux-saga, typescript, module react-grid-layout, 
SERVER: node.j
crawing : python