<2021 해커톤~> #1. Sejong maps: 메인 컨텐츠 (1)

1. 서론

여기서 쓸 내용들은 앞서 #0 에서 썼지만,

다시 말하자면 '티쳐블 머신과 이를 활용한 컨텐츠'이다.

아직 인공지능의 ㅇ자도 모르는 우리가 쓸 수 있는 인공지능이라곤 티쳐블 머신 뿐이다.

그래서 티쳐블 머신의 이미지 학습을 활용해서 건물 사진이 어디 건물인지 알려주는 컨텐츠를 만들기로 했다.

 

내 나름대로 쓴 코드들이 전문가나 좀 했던 사람들이 봤을 땐 "아 이게 아닌데..." 싶은 코드들도 있을 것이다.

넓은 마음으로 이해해 주길 바라고, 저런 걸 만들었구나~의 과정을 봐줬으면 좋겠다.

 

2. 티처블 머신 사용 과정

과정들을 일일이 설명하면서 블로그를 쓰게되면 나는 작가를 하는 것이 맞다.

그래서 간단하게만 글로 쓰겠다.

 

1) 데이터 모으기

학교 건물들마다 100장씩 정도 찍었다. 학생들이 많이 찍을 법한 부분들 위주로 찍었고,

어려웠던 점은 비슷한 건물들이 있었는데, 잘 고려해서 찍어야했다.

 

2) 티쳐블 머신에 넣고 js 얻기

티쳐블 머신에 사진들을 넣고 class를 정리하여서 추출했고,

그렇게 js 코드를 얻었다.

 

3) js 로 수정

티쳐블머신에서 주는 js 코드는 start, 예측 버튼만 있어서

웹캠을 통해 그 결과값을 출력해주는 매우 간단한 기능을 한다.

이 코드를 가만히 둘 수 없던 나는 '조코딩'님의 영상들을 보면서

코드들을 다듬었다.

predict 함수가 결과값을 나타내는 중요한 함수이고,

저 함수를 통해서 나는 정보들(건물이름, 설명)을 좀 더 추가하고 싶어서 저렇게 수정했다.

 

 

3. 메인 컨텐츠

1) 여긴 어디?

위에 사진처럼 입력한 사진과 가장 유사한 건물을 알려주는 변수와, 그 건물의 정보들을 알려주는 것까지 썼고,

이를 활용해서 메인 컨텐츠 중 하나인 '여긴 어디?'를 만들었다.

 

약간 로봇? 처럼 버튼 누르면 키고 끄는 것을 JS로 구현했다.

켜고 끄는 기능 구현 코드

 

아래는 사용하는 과정이다.

2) 세종 챌린지

위에 '여긴 어디?'의 소재를 게임 형식으로 만든 것이다.

"여긴 어디?"는 진짜 저기가 어딘지 몰라서 검색하는 것이라면, "세종 챌린지"는 혹시 이것을 상용화하였을 때

학교를 돌아다니면서 즐길 수 있게 만든 것으로 하나의 소재로 두가지를 만드는 일석이조의 효과를 봤다.

 

익숙한 부분들이 보인다면 좋은 눈썰미다.

그대로 가져다 쓴 것이다. 그래도 내가 쓴 코드가 여러 곳에 잘 붙어있다는 것은 깔끔하게 썼다는 것이니 만족한다.

 

이 컨텐츠의 html, css는 다른 부원이 맡아서 글씨체도 바꾸고 잘 꾸며놓았으니, 한번 해보는 것을 추천한다.

 

4. 마무리

저기까지의 구현을 해커톤 끝나고 만들었다. 빨리 못만든 것이 아쉬웠지만,

인공지능을 사용해서 만들었다는 점에선 매우 뿌듯하다.