마스코트 캐릭터(이름은 없어요. 뭐... 왕눈이정도로 부를까요?)
https://github.com/dev2820/eye-guardian
본 프로젝트는 숭실대학교 컴퓨터학부 소프트웨어공모전 출품작이며 더 이상의 업데이트는 없음을 알려드립니다. 프로그램의 자세한 설명은 위 링크 참조
사용 스택
vue.js
electron.js
후기
인생 최초 공모전 팀프로젝트이자, 최초로 만들어본 데스크탑앱입니다. 저 포함 3명의 팀원에, 개발 기간은 3주 정도로, 기획 3~4일, 개발 14일, 마무리(보고서작성등) 3일정도 소요한 것 같습니다. 방학기간에 개발한지라 다른 공부할 것들도 있었고 팀원들과 굵고 짧게 가자고 미리 방향을 맞췄기 때문에 거의 2주간 10시간정도씩 투자해서 개발했던 것 같습니다. 사실 개발 기간은 더 짧아질 수 있었는데, 한번 프레임워크를 바꾸면서, 사용하는 api를 바꾸면서 시간이 더 걸린 점도 있습니다.
저의 역할은 전체 구조 디자인 및 프론트 구현이었습니다.
팀원들은 웹 스터디를 같이 하던 팀원들이었고 모두가 웹 개발 기간이 짧지만(팀원들은 웹 기술 입문이 이번 방학부터였습니다) 제가 가장 웹 개발 경험이 많아 제 주도로 프로젝트가 굴러가게되었습니다.
저는 풀스택을 지향하지만, 경험은 프론트 구현이 더 많았기 때문에 제가 전체적인 디자인(UI/UX) 및 foreground 구현을 맞기로 했고, 팀원들은 background에서 돌아갈 얼굴처리와 관련된 핵심 로직들을 짜기로 했습니다.
우리는 웹에 친숙했기 때문에 electron.js를 선택했습니다.
데스크탑앱을 만들 프레임워크의 선택은 큰 고민 없이 electron.js를 선택했습니다. 웹 스터디를 하던 팀원들과 만들게된 데스크탑앱인데, 어찌보면 당연한 수순이죠. 제가 react보다 vue에 더 익숙해서 vue를 쓰기로 했고, 처음엔 electron-vue를 통해 앱을 만들기로 했습니다.
electron-vue 사용 경험은 별로였습니다.
하지만 electron-vue는 vuex 사용에 큰 장애를 겪었고 이리저리 알아보다(구글에 자료가 많이 없어서 왜 안되는지 찾는것부터 고생이었습니다.) 결국 electron-vue의 electron.js 버전이 낮아서 생긴 문제임을 알고 고심끝에 만들던 것들을 버리고 vue-cli plugin electron builder로 갈아탔습니다. 프로젝트가 끝나고서야 느끼지만, electron.js를 잘 알지 못해서 더 고생한 점도 있었습니다. 사실 vue.js로 빌드한 결과를 electron.js로 앱으로 포팅만 하면 되는데 말이죠. 허허
다행히 vue-cli plugin electron builder는 잘 돌아갔습니다.
하지만 문제는 foreground에서만 생기는게 아니죠. background에서도 당연 문제에 직면합니다. 백그라운드를 맞기로한 팀원들은 당장 opencv부터 문제에 직면합니다. opencv4nodejs를 통해 웹캠에 비춰진 얼굴을 처리하려고 했는데, 당장 opencv설치, nodejs와 연동에 있어 장애에 부딛칩니다. 분명 깔라는데로 깔고 하라는데로 했는데... 왜않되
face-api는 반은 성공, 반은 실패했습니다.
opencv를 결국 버리고 다음으론 face-api 라는 라이브러리를 이용하려 했는데, 아쉽게도 face-api가 제공하는 api엔 저희가 원하는 기능이 애매~하게 지원됐습니다. 얼굴(특히 눈) 부분의 위치좌표를 알아내고 싶었는데, 얼굴이 있는지, 없는지 정도 기능을 지원하더라구요. 그래도 얼굴의 크기정보를 알아낼 수 있어서, 화면과 얼굴 사이 거리를 계산하는데 이용할 수 있었습니다.
더 좋은걸 놔두고 빙글빙글 돌고 있었습니다.
근데, 그냥 tensorflow.js에서 제공하는 라이브러리들이 더 좋더라구요. 얼굴의 눈,코,입 등의 좌표도 알려주고. 결국 돌고돌아 마지막엔 tensorflow.js의 라이브러리를 사용해 프로그램을 완성했습니다.
마지막 commit을 push할때 그 상쾌함을 아시나요.
마지막엔 다들 녹초가 되어서 조금씩 적당히 타협하게 되더라구요. 그래도 프로젝트를 끝마치고 마지막 commit을 생성할 때 뿌듯한 기분을 다들 아실겁니다. 마치 달리기 후 몸은 지치지만 정신은 상쾌해지는 것처럼 말이에요.
좋았던 점
인생 첫, 공모전을 위해 준비한 팀 프로젝트이자, 첫 팀장역이었습니다. 당연히 멋진 경험이죠. 공모전은 아쉽게 1차 탈락이었지만, 전혀 미련이 남지 않는 3주였습니다.
이런저런 라이브러리, 프레임워크 사용을 도전해본 점도 좋았습니다. electron.js도 처음 써봤고, tensorflow.js의 라이브러리를 가져와 써본것도 처음이고, Web RTC로 웹캠 정보를 불러오는 것도 처음 해봤습니다. vue.js를 다룰 줄 안다, javascript를 쓸 줄 안다, 정도 빼놓고 거진 새로운것들 투성이었습니다. 그만큼 많이 알아가는 것 같습니다.
아쉬웠던 점
미련이 안남는다 했지만... 이것도 더 신경썼으면 좋았을텐데! 하는 점은 있습니다. github을 제대로 활용 못한 점이 사실 좀 아쉬워요. 제가 완전히 팀의 관리자 역할만 수행했다면, 팀원들의 commit도 관리하고, 애자일식으로 좀 더 계획적으로 프로젝트를 진행했을텐데 팀장이자 개발자로 일하자니 부치는 부분은 있었습니다. 사실 어쩔 수 없는 부분이죠. 역량부족이니까요. 더 공부해서 역량을 키워야겠어요.
