이 글은 2023년 03월부터 06월까지, IoT 인공지능 융합전공 캡스톤 디자인에서 진행한 프로젝트에 대한 회고이다.
github에서 코드와 문서를 확인할 수 있다.
프로젝트 소개
우리 팀은 내가 속한 에코노베이션의 회원들이 모인 팀이기에 에코노를 잘못 뒤집어 코노에가 되었다.
팀원들 각자 관심 있는 분야인 인공지능, 프론트엔드, 백엔드로 나누어 프로젝트를 진행했다.
나는 그중 프론트엔드 개발과 시그널링 서버 개발, 프로젝트 디자인을 맡았다.
그리고 팀장으로서 회의 진행과 문서 작성, 과제물 제출을 맡았다.
프로젝트 주제
인공지능 기반 얼굴 인식 출석체크 웹 화상 채팅 서비스
프로젝트 주제는 각자 공부하고 싶었던 목표를 함께 도달할 수 있는 과제로 삼았다.
나는 개인적으로 브라우저에서 인공지능을 다루고, WebRTC를 사용하고 싶었기에 아주 만족스러운 주제였다!
아키텍처
플로우차트
프로젝트 기능은 간략하지만 프론트엔드에서 구현할 페이지가 많아서 결국 또 시간이 부족했다.
문서화
과거에 진행했던 프로젝트에서도 노션을 열심히 사용했지만, 이번 프로젝트에서 제대로 된 문서화를 진행한 것 같다.
깃허브 레파지토리에서 docs 디렉토리에 발표 자료와 브랜치 전략을 정리했으며, 프로젝트를 진행하며 공부한 것들을 블로그로 정리했다. 또한 노션 API 설계 페이지에서 API 명세서를 지속적으로 체크하며 백엔드와 프론트엔드 개발자가 소통했다.
항상 공부한 것이 휘발된다고 느꼈는데 블로그에 정리하니 조금 더 많이 찾아보게 되고 기억에 잘 남았다. 앞으로도 블로그에 정리는 꼭 해야지.
github docs
브랜치 전략
프로젝트 계획서
중간발표 자료
최종발표 자료
블로그
중첩된 컴포넌트에서 React Hook Form 현명하게 사용하기
리액트 Portal을 사용해 모달창을 생성하자
🍝 리액트에서 스파게티 WebRTC 코드 Class로 추상화하기 🍝
노션 API 명세
댓글 기능이 정말 유용했다 👀
시그널링 서버
처음에 우리 팀 백엔드 개발자님이 Django를 사용해 시그널링 서버를 만들었는데, 해당 시그널링 서버에 대한 문서 없이는 내가 서버가 어떻게 동작하는지 이해하기 어려웠다.
그래서 결국 내가 express를 사용해 시그널링 서버를 개발했다. 그래서 우리 팀은 시그널링 서버가 두 개다. ㅋㅋㅋ
웃긴 점은 단순히 강의 수강이나 복붙이 아니라 고민하며 시그널링 서버를 개발하고, WebRTC 통신 과정을 거치고 나니 Django 시그널링 서버가 이해가 되었다는 점이다...
하지만 덕분에 WebRTC가 어떻게 동작하는지 조금 더 잘 알게 되었으니 굿입니다.
tensorflowjs 그리고 face-api.js
인공지능 개발이 많이 늦어진 탓에, tensorflowjs에 사용하기 위한 json 파일을 캡스톤 마감 3일 전에 받았다.
3일 동안 열심히 씨름한 결과 알아낸 것은 인공지능 모델을 개발한 후 json 파일로 추출하더라도, 인공지능 모델을 배포해서 사용해야 한다는 것이다.
시간이 하루밖에 남지 않았던 나는 결국 face-api.js를 사용해 인공지능 얼굴 인식 기능을 구현할 수밖에 없었다.
우리가 생성한 얼굴인식 인공지능 모델은 우리 팀원들의 얼굴을 인식할 수 있게 만들어진 반면, face-api.js는 얼굴의 특징을 비교해 얼굴을 인식하기 때문에 이미지를 저장할 공간이 필요했다.
그러나 이미 프로젝트 발표 당일에 이미지를 저장하는 기능을 개발하는 것은 시간적으로 불가능했다. 게다가 모든 서버를 로컬에서 돌리고 있었기에, 배포까지 해야 한다는 점...
그래서 public에 이미지를 저장하는 마음에 안 드는 방식을 선택했다. 시간이 좀 더 있었다면 사용자가 회원가입 시에 이미지를 촬영 후 저장하고, 해당 이미지를 불러와 현재 카메라에 인식된 얼굴과 비교했을 텐데 아쉬움이 남는다.
프론트엔드 개발자는 사용자와 처음 만나는 얼굴 역할인 클라이언트 서버를 개발하는 만큼, 아무래도 다른 개발이 다 끝나야 마침표를 찍을 수 있다. 그만큼 일정을 잘 관리해야 하고 게다가 나는 팀장이었기 때문에, 조금 더 인공지능 개발자에게 압박을 줬어야 했다.
또 팀 프로젝트를 하게 된다면, 나부터 잘하고! 또한 모두를 신경 쓰며 일정을 관리할 필요가 있다.
WebRTC와 배포
앞서 🍝 리액트에서 스파게티 WebRTC 코드 Class로 추상화하기 🍝
에서 작성한 것처럼, 이번 프로젝트를 통해 WebRTC를 단순히 사용하는 것을 넘어 관련 코드를 추상화하며 클린코드에 가까워질 수 있었다.
그리고 이런 과정 속에서 WebRTC를 잘 이해하게 되었다. 다음에 또 WebRTC를 사용하면, 당연히 새로운 이슈는 있겠지만 겁이 나진 않을 것 같다!
다만 아쉬운 점은 화상채팅 기능을 이용하려면 HTTPS로 배포해야 한다는 것이다.
클라이언트 서버만 배포해야 한다면 직전이어도 배포를 진행했을 텐데, 화상채팅 서비스를 이용하려면 백엔드 서버, 시그널링 서버, 클라이언트 서버를 모두 배포해야 했다. 결국 두 개의 기기가 화상채팅하는 모습을 보여줄 수 없었다.
다만 상대 접속자의 마이크 및 카메라 온/오프 기능이 작동하는 것을 통해 제대로 작동하는 것을 확인할 수 있었다. 그래도 많이 아쉽....
또 WebRTC를 이용해 개발하게 된다면 배포 일정을 미리 고려하고, HTTPS로 배포할 것이다.
결론
아쉬운 점도 많았지만, 학습의 문서화, face-api를 사용해 클라이언트 서버에 인공지능 적용하기, 시그널링 서버 개발, WebRTC를 사용한 화상채팅 기능 개발 등 얻어가는 경험도 많은 프로젝트였다.
앞으로도 블로그에 배운 점을 작성하며 공부하고, 나뿐만 아니라 팀 전체의 일정을 관리해야겠다. 또한 몇 번의 프로젝트를 진행하며 비슷한 기술 스택(styled-components, recoil)을 고집했던 것 같아서 앞으로 다양한 라이브러리를 접하고 싶다.
