22.09.18 1차 작성
22.09.25 2차 작성
22.10.03 수정
📽 시연 영상
"수어 인식" 기능을 테스트 해보는 AI 담당 팀원의 시연 영상
🔥 2022년 공개SW 개발자대회
대학 동기가 같이 참여해보지 않겠냐고 제안하여 2022년 공개SW 개발자대회에 참가하게 되었다.
주최: 과학기술정보통신부, 주관: 정보통신산업진흥원
대략적인 일정: 8월 3일까지 참가 접수, 9월 15일까지 출품작 접수, 9월 21일과 22일에 1차 평가
참가자격: 학생 부문과 일반 부문 2가지, 참가부문: 자유과제, 지정과제, 향상과제 3가지
🚀 프로젝트 시작
7월 26일 총 4명이 모여 시작하게 되었다. 팀원은 전부 대학교 동기들이며 AI 1명, 안드로이드 1명, 백엔드 1명, 프론트엔드 1명(나)으로 구성되었다.
아이디어를 자유롭게 이야기해보다가 몸이 불편한 사람들에게 도움이 되는 서비스 개발쪽으로 방향이 잡히게 되었고, 최종적으로 청각장애인을 위한 실시간 수어 인식 회의 플랫폼을 개발하게 되었다.
🛠 개발 진행
회의 4일 뒤에 7월 30일 코로나 확진으로 일정에 차질이 생겼다. 그 이후에도 동아리에서 진행하는 토이 프로젝트도 있었고,, 다들 일정이 있어서 정말 촉박하게 개발이 진행되었다.
그나마 다행인 것은 노마드코더의 줌 클론코딩이라는 무료 강의가 있었고, WebSockets와 WebRTC 등 핵심 이론들을 보다 쉽게 학습할 수 있었다. (어렵다. 다시 복습하며 정리할 필요가 있다..)
메인 페이지와 회의 페이지를 구현하는 것이 나의 역할이었으며, 구글 미트를 모티브로 하여 최대한 미니멀하게 구현하였다. 메인 페이지에는 로그인(닉네임 입력) 기능과 회의 참여 및 시작하기 버튼, 프로젝트를 소개하는 이미지와 내용을 담았고, 회의 페이지에는 캠 또는 화면공유에 사용할 화면, 채팅창 그리고 여러 버튼들(마이크, 캠, 수어 인식, STT 인식 등의 on, off 버튼) 정도로 구성하였다.
채팅창 기능 구현(특히 스크롤 하단 고정!!), 하나의 video 화면을 더블 클릭하면 그 화면을 확대해 주며 나머지 video 화면은 숨김 처리하는 기능(다시 더블 클릭하면 기존 상태로 돌아오기) 구현 등이 가장 기억에 남는다. MediaDevices와 WebRTC를 사용하고, 이를 통해 실시간 통신을 하는 프로젝트는 처음이라 되게 재밌게 개발하게 되었다.(물론 무엇을 하든 대부분 처음 해보는 것이긴 하다.ㅎㅎ)
🎇 소감
첫 공모전 참가였는데 아쉬움이 매우 컸다.. 각자의 상황과 일정으로 인해 개발 기간이 너무 짧아서 부랴부랴 개발하게 되었고, 디테일하게 완성하지 못하게 되었다. 특히 안드로이드 파트의 경우 WebRTC 적용이 되지 않아 어플은 제출을 아예 못한게 너무 아쉬웠고, 제출 하루 전 날 부랴부랴 도메인도 구매하여 AWS를 통한 배포를 시도했으나 결국 실패하여 로컬 상에서만 동작이 가능한 것도 너무 아쉬웠다..😥
아쉬운 부분도 있었지만, 만족스러운 부분도 2가지 있었다!
첫 번째는 jQuery를 사용하지 않고 바닐라 JS로만 구현을 해냈다는 것이다. 저번에 첫 프로젝트를 진행할 때는 jQuery를 많이 사용하였기에, 이번에야말로 순수 JS로만 구현을 해야지 다짐하고 임했다. 프로젝트가 진행될수록 "이 부분은 jQuery 사용하면 쉽게 할 수 있을 것 같은데.." 하는 부분들이 있었지만 다짐대로 잘 마무리하였다. 물론 '완벽하게 JS를 다룬다!' 이건 아니지만 JS만을 사용하여 완성했기 때문에 자신감은 더 붙게 된 것 같다. 리액트 등을 사용하기 위해서는 기본이 되는 JS를 잘 사용할 줄 알아야 한다는 말을 많이 들어서 순수 JS 구현을 고집했고, 목표를 이루어 기분이 좋다.
두 번째는 트러블 슈팅을 기록으로 남겼다는 것이다. 이번 프로젝트를 진행할 때 저번 프로젝트에서 사용했던 문법이나 방법 등을 응용해서 사용한 부분들이 있는데, 기록으로 남겨놓지 않아 코드를 다시 찾아보고 읽어보고 진행하게 되었다.. 사실 저번 프로젝트를 진행할 때는 바로바로 기록으로 남겨놓지 않아 나중에 정리하려고 보니 기억이 잘 나지 않아 정리를 할 수가 없었다. 그래서 이번에는 키워드와 참고했던 내용 등을 간략하게나마 바로바로 정리해놓고 다시 복습하며 블로그에 기록해나갔다. 지금 다시 읽어봐도 그때 오류를 해결하던 과정들이 떠오르며, 혹여나 나중에 동일한 오류를 겪더라도 쉽게 해결해낼 수 있겠다는 생각이 들어 뿌듯하다.
💬 결과 발표
아쉽게도 1차에서 탈락하게 되었다.. 제출 마감시간 단 1분을 남겨놓고 겨우 시연 영상을 제출하는 등 시간에 쫓기며 부랴부랴 진행했던 부분들이 생각나며 아쉬웠지만 오히려 짧은 시간에 깊게 몰두하며 이만큼 만들어냈다는 성취감도 느낄 수 있었다.. 다음번엔 좀 더 여유를 가지고 완성도 있게 진행해 보고 싶다.😂 나의 첫 공모전은 이렇게 끝!
'Project > I'm Hear' 카테고리의 다른 글
[트러블슈팅, JS] - ⭐스크롤을 항상 아래로⭐ (0) | 2022.09.12 |
---|---|
[트러블슈팅, CSS] - 내용이 요소의 크기를 벗어나면 스크롤 기능 (0) | 2022.09.11 |
[트러블슈팅, JS] - div 클릭 시 div의 text 내용 복사 (2) | 2022.09.10 |
[트러블슈팅, JS] - 버튼 클릭 시 페이지 이동 (0) | 2022.09.10 |
[트러블슈팅, JS] - getUserMedia() 관련 에러 (2) | 2022.09.10 |