You-Together 회고

팀프로젝트 You-Together 📼

이번에 진행한 프로젝트는 사용자들이 함께 Youtube 영상을 보며 실시간으로 채팅을 하는 서비스를 제공한다. 예상보다 난이도가 있었고 중간중간 어려움이 많았던 프로젝트를 마치고 회고를 해보려고 한다.

프로젝트 시작

이번 프로젝트는 코드스쿼드 프론트엔드 동료의 권유로 시작했다. 그 친구는 프론트엔드의 개발 환경 설정을 완료한 상태에서 개인사정으로 프로젝트를 하차하게 되었고 나에게 프로젝트 합류를 권유하였다.

 

처음에는 프론트엔드 개발과 UI 디자인 등을 혼자 담당해야 하는 점에서 조금 부담을 느꼈지만, 이전에 진행했던 프로젝트 중에서 기간 등의 이유로 채팅 기능을 구현하지 못한 아쉬움을 가지고 있던 나에게 이번 프로젝트는 재미와 도전 두 가지의 목표를 이룰 수 있다는 점에서 프로젝트 참여를 결정했다.

 

나는 기존의 HTTP 통신과 다른 방식으로 서버와 통신을 하는 웹 소켓에 대한 도전 의식이 생겼다. 혼자 프론트엔드 개발을 진행해야 하기 때문에 걱정도 했지만, 평소 해보지 않은 것과 도전하여 실패하는 것은 다르다고 생각했기에 도전해보겠다는 의지가 불타올랐다.

 

그리고 '사용자들끼리 영상을 함께 보며 채팅을 하는 서비스'라는 프로젝트의 주제가 재미있고 신선하다고 생각했다. 기존과는 조금 다르게 실시간으로 영상 정보가 공유되면서 사용자들끼리 동일한 영상과 시간대를 보며 채팅을 하는 서비스는 개발자 입장에서도 재미있는 주제라고 생각했다.

 

다행히 첫 팀 미팅에서 내가 이 프로젝트에서 도전해보고 싶은 것들과 UI 디자인에 대한 나의 생각을 다른 팀원들이 이해를 해줬고, 좋은 사람들과 새로운 프로젝트를 시작하게 되었다.

배운 점

이번 프로젝트에서 가장 많이 배운 점은 모든 일이 내 원하는 대로 진행되지 않는다는 것이었다.

 

이전의 프로젝트뿐만 아니라 개발은 원래 내가 원하는 대로 한 번에 작동하지는 않는다는 걸 몸소 경험해본 적이 있지만, 이번 프로젝트는 이전의 나의 경험을 비웃기라도 하는 듯 내가 생각하는 방향으로 진행되지 않는 것이 많았다.

 

예를들면, 프로젝트에서 Youtube 영상을 표시할 라이브러리로 react-youtube를 선택했다. 우리 프로젝트는 Youtube 영상만을 함께 보는 서비스이기에 react-player보다는 크기가 작은 react-youtube 라이브러리를 선택했다.

 

react-youtube 라이브러리는 내부적으로 YouTube IFrame Player API를 사용하여 동영상을 로드하고 제어한다. 따라서 API를 통해 제공되는 다양한 메서드를 사용할 수 있지만, 우리 프로젝트에서 한 가지 원하는 추가 기능이 있었고 이를 위해서는 동영상 플레이어의 progress-bar라는 DOM 요소에 접근이 필요했다. 처음에는 플레이어가 Ready 상태가 되면 React의 useRef를 사용하여 progress-bar라는 DOM 요소에 접근해서 원하는 기능을 구현하려고 했으나, 여러 번의 실패를 거듭했고 찾아본 결과, YouTube IFrame Player는 보안 및 크로스 오리진 정책으로 인해 내부 DOM 요소에 직접 접근할 수 없다는 결론을 내렸다.

 

결국 처음 기획했던 기능을 조금 수정해서 완료하기는 했지만, 그 과정에서 개발 속도가 지연되고 많은 시도와 실패를 거듭하면서 역시 모든 일은 내가 원하는 대로 진행되지 않는다는 것을 다시 한번 깨달았다.

 

물론 아쉬움만 남은 것은 아니다. 프로젝트의 기획 단계에서 사용할 기술 스택과 라이브러리에 대한 철저한 조사가 필요하다는 것을 다시 배웠고 나에게 가치있는 경험이 되었다고 생각한다.

좋았던 점

팀 프로젝트의 재미는 언제나 다른 사람과 함께 작업할 수 있다는 점이다. 물론 프론트엔드 개발을 혼자 진행했지만, 전체 프로젝트와 관련해서 내가 모르는 부분과 어려움을 겪는 부분에 대해서 동료와 이야기를 할 수 있다는 점이 좋았다.

 

예를들어, 어려움에 부딪힌 부분에 대해서 동료의 새로운 관점을 통해서 해결 방법을 도출한 적도 있고, 또한 처음 기획과 달리 기술적으로 어려움에 부딪혀 기획을 수정해야 할 때, 나 혼자만의 결정이 아닌 동료들의 의견을 듣고 '우리' 프로젝트가 나아갈 방향을 정할 수 있다는 점이 좋았다.

 

그리고 이번 프로젝트를 하면서 가장 좋았던 점은, 프로젝트가 끝나고 백엔드 동료들이 다음 프로젝트를 구상하고 함께 할 수 있겠냐는 말을 들었을 때 가장 기분이 좋았다.

 

혼자서 프론트엔드 개발을 하면서, 팀원들이 기대하는 만큼 개발을 잘 해내지 못하거나 퀄리티가 부족하면 어쩌지라는 고민을 항상 했었는데, 나와 프로젝트를 진행하면서 좋은 기억이 있기 때문에 다음 프로젝트도 함께 하자는 말을 들었을 때 가장 뿌듯하고 기분이 좋았다.

아쉬운 점

아쉬운 점은 역시나 예상보다 개발 시간이 오래 걸렸다. 간단한 부분이긴 했지만, UI/UX를 포함한 디자인까지 전부 혼자 해야 했었고 Youtube Iframe Player의 내부 정책, 브라우저의 자동재생 정책 등 예상하지 못한 장애물들을 해결하면서 예상보다 개발 시간이 오래 걸렸다.

 

물론 기획 단계에 참여하지 못했다는 나름의 변명을 할 수도 있겠지만, 프론트엔드 개발자로서 설계와 기술에 대한 사전 조사가 중요하다는 것을 다시 한번 깨달았다.

시도해볼 것

프로젝트는 마무리가 되었고, 이제 새로운 프로젝트를 시작하면서 이전과는 다른 서비스를 구현해야 한다. 프론트엔드 개발도 혼자가 아니기 때문에 협업하는 것에 대해서도 고민을 해야 하고, 이전의 경험을 토대로 기획과 설계에 대한 많은 고민을 해서 이번 프로젝트에서의 아쉬움을 다음에는 남기지 않는 것이 목표이다.

마무리

코드스쿼드가 끝나고 여러 프로젝트들이 다양한 이유로 엎어지기도 하고 스스로 힘든 시간들을 보냈는데, 좋은 동료들과 프로젝트를 끝까지 완수해서 배포했다는 점에서 굉장히 만족스러운 기분이다. 이제 끝이 아닌 새로운 시작을 해야하는 상황에서 다음 프로젝트에는 이번에 느꼈던 좋았던 점은 가져가고 철저히 준비해서 아쉬운 점은 최소화할 수 있도록 해야겠다.💪