1) React + Teachable machine 프로젝트 - 닮은꼴 정치인 찾기 개요

* 이번 사이드 프로젝트로는 React 와 구글에서 만든 간단한 인공지능 모델을 만드는 사이트 Teachable Machine을 통해서 나와 닮은 꼴 정치인을 찾는 프로젝트 과정을 소개하려고 한다.

과거 유튜브 조코딩 채널을 통해서 웹기반으로 Teachable machine을 통해서 프로젝트를 만드는 것을 보고 다음에 꼭 해봐야겠다고 생각하던 걸 실행하기로 하였다. 해당 유튜브를 참고 하면서 React를 기반으로 카카오 애드핏을 넣는 것 까지 차례대로 작성할 예정이다.

https://www.youtube.com/playlist?list=PLU9-uwewPMe2-vtJAgWB6SNhHcTjJDgEO 

실전 수익형 웹, 앱 서비스 동물상 테스트 만들기

 

프로젝트 수행 순서는 아래와 같다.

* Teachable Model 생성

1) 이미지 수집 :

--> python selinium을 통해 이미지를 크롤링하여 수집

2) 이미지 분류 :

--> Teachable machine에 학습을 시키려면 이미지 가공이 필요하다. 기본적으로 구글에 검색어를 해서 나오는 사진들을 유명 정치인들의 정면 얼굴사진이 아닌 경우도 많이 해당한다. 그러므로 학습에 방해가 되는 사진들을 제거해주어야 한다.

3) 모델 생성 : 

--> Teachable Machine을 통해 이미지를 학습하고, model.json 파일 또는 클라우드에 업로드를 시킨 뒤 url을 통해 모델을 불러올 수 있다. 여기서는 클라우드를 통해 머신을 불러오도록 하였다. React에서 해당 모델을 사용하기 위해서 teachable machine/image 라이브러리를 사용하였다. 

https://www.npmjs.com/package/@teachablemachine/image

@teachablemachine/image

 

* React를 통해 프로젝트 제작 

React (자바스크립트)를 통해서 프로젝트 제작. 요새는 타입스크립트 템플릿을 많이 사용하는 데, 내 경우에는 아직 타입스크립트를 잘알지 못하여, 기존 자바스크립트를 사용하여 만들었다. 다음 기회에는 타입스크립트를 배워 타입스크립트로 프로젝트를 진행할 예정이다.

아래와 같이 프로젝트 진행 전 디자이너 ( 동생 ) 와 얘기를 하고 어떤식으로 만들 것인지 구성을 통해 아래와 같이 디자인을 완성하였다. 기본적으로 디자인과 동일하게 만들기 위해서 제플린 사이트를 사용한다. 제플린 사이트를 사용하면 기본적인 디자인을 자동으로 CSS로 변경해주고, 색상, 픽셀 등과 같이 정확한 정보가 수치로 표시되어 있어서 사용하기 편하다. 추가로 이번 프로젝트에서는 카카오 메시지와 Navigator.share()의 Web Share API를 통하여 공유하기 기능을 추가하였다.

https://zeplin.io/

Zeplin

 

* 배포 (Firebase Hosting 사용 )  + 카카오 애드핏 광고 적용

완성후에 배포는 Firebase hosting을 사용하였다. netlify의 선택지도 있지만 Firebase가 속도면에서 더 빠른 것 같았다. 배포후에는 카카오 애드핏을 적용하여 광고를 등록하였다. 

 

* 완성 코드 

https://github.com/leeminq1/politic_test

GitHub - leeminq1/politic_test

 

* 사이트 url 

https://politictest-8f628.firebaseapp.com/

나와 닮은 정치인은?