21-1 KUCC 해커톤 대회

KUCC 동아리의 깃헙에 우리의 Repository를 생성한 뒤 각각 branch를 나눠서 작업하였다. 사실 backend와 frontend, 그리고 머신러닝 부분을 각각의 branch에서 완성한 뒤 Pull-Request를 통해 합치는 것이 가장 좋은 방법이었겠지만 나를 제외한 다른 팀원들이 Github 사용이 다소 미숙했던터라 Pull-Request는 사용하지 않고 각자의 branch를 pull해서 각자 merge하는 방식으로 진행했다. 다행히 각자가 작업하는 부분이 다르다보니 merge 할 때 충돌나는 곳이 없어 큰 문제는 없었다.

또, 깃헙 칸반보드를 이용해 개발해야될 것, 개발 진행 중인 것, 개발 완료된 것을 정리해보았다. 처음에는 시간 여유가 있어 칸반보드에 차근차근 잘 정리하였는데 나중되니 너무 시간이 부족해서 칸반보드를 잘 활용하지 못했다. 시간적 여유가 충분한 프로젝트의 경우에는 칸반보드를 이용하는 것이 프로젝트 버전 관리에 매우 좋을 것이라는 생각이 들었다.

처음에는 주제에 대해 활발하게 토론을 진행하였다. 본인은 이전에 세션을 진행할 때, 세션의 출석을 체크하는데 여러가지 문제들이 있었음을 알고 있었기 때문에 세션의 출석을 편하게 체크할 수 있도록 하는 프로그램을 만들자고 제안하였다. 그리고 그 의견에 팀원들의 다양한 의견들이 여러가지 살들이 붙으면서 결론적으로 수업을 진행하는 Zoom의 사진을 캡쳐해서 업로드하면 그 사진의 얼굴들을 인식해서 이름을 판별해주고 자동으로 출석이 인정되도록 하는 시스템을 만들기로 하였다.

한 분이 파이썬, 머신러닝 분야를 다룰 수 있으셨던 것을 제외하면 본인을 포함한 나머지 3명은 React, Redux, Node.js, Next.js 등 백과 프론트 단을 조금씩 다룰 수 있었다. 20학번 2명이 서로 같은 곳에서 작업을 하고 있었기 때문에 Backend 부분을 맡았고, 본인이 Frontend 부분을, 나머지 한 분이 파이썬 작업을 맡았다. 앞으로 편의를 위해 20학번 2명을 백엔드 개발자, 본인을 프론트엔드 개발자, 나머지 한 분을 머신러닝 개발자라고 칭하겠다.

본인은 각각의 Components 제작 및 Redux, Redux-saga를 이용한 액션 및 Reducer 생성에 힘을 쏟았다. 이 부분을 최근에 집중해서 공부했었기 때문에 어렵지 않게 코드를 짤 수 있었다.

조금씩 작업이 진행되면서 아래 사진과 같은 얼굴 인식이 가능케 됐다.

(자세한 코드는 글 상단의 Github 주소에서 확인해주세요. 작성했던 코드들을 전부 다루기엔 코드의 양이 너무 많습니다.)

이때까지만 하더라도 모든 것이 쉽게 진행될 줄 알았는데, 여러가지 문제들이 산재돼있었다. 먼저, 팀원 중 누구도 파이썬과 노드 서버를 연결해본적이 없다는게 문제였다. 공부했던 내용을 바탕으로 child process를 이용하면 파이썬 파일을 실행할 수 있다고 알고 있었는데 추가적으로 파이썬에서 JSON으로 넘겨준 데이터를 백 서버로 넘겨주는 부분에서 계속해 오류가 발생했다. 이 부분을 해결하기 위해 별의별 방법들을 다 사용해보았지만 결국 실패했다는 점이 이번 프로젝트의 가장 아쉬운 점으로 남는다.

본인은 MYSQL만을 사용해본 반면, 백엔드 개발자 둘은 몽고 DB만을 다뤄봤었다. db의 경우엔 대개 백엔드 개발자들의 영역이기 때문에 백엔드 개발자들이 잘 알고 있는 몽고 DB를 이용해 작업을 했고, 각각의 api 주소도 백엔드 개발자들이 짰다.

그런데 서로 처음봐 어색했던 것과 더불어 모두가 협업이 처음이었기 때문에 분명 마이크와 카메라를 다 켜뒀음에도 불구하고 아무런 대화없이 수시간 개발이 진행됐다. 백엔드와 프론트엔드 개발자 간의 소통은 필수적이다. 왜냐하면 만드는 table들의 구조도 서로 알아야할 뿐더러 프론트엔드에서 백엔드 라우터로 보내주는 api 주소도 서로 맞춰야하기 때문이다. 그런데 이런 것을 제대로 의견 공유를 하지 않은채로 각자의 개발이 계속 진행됐다.

본인은 로그인을 할 때, 만약에 로그인이 실패하면 error를 전송해줄 것으로 판단했기 때문에 (또, 이전까지 백엔드 서버를 그렇게 만들어왔기 때문에) Redux & Redux-saga에서 error가 있으면 LOG_IN_FAILURE를, 없으면 LOG_IN_SUCCESS action을 dispatch 해주는 방식으로 코드를 짜놨다. 또, Reducer의 intialState인 me 객체에 로그인 정보를 담아 예를 들어 me.id, me.imagePath 등으로 로그인한 유저의 정보들을 불러와서 자유롭게 활용할 수 있게끔 해두었다.

그런데 이번 백엔드 개발자들이 작성한 백엔드 서버 코드는 로그인이 실패하면 Error를 발생시키는 것이 아니라 message: '로그인 실패'와 같이 message를 전송해줬다. 또, me 객체에 로그인 id를 제외하곤 어떤 정보도 넣어주지 않았다. 더 나아가 api 주소를 짜는 방법도 서로 완전히 달랐다. 그래서 Redux에서 쏴주는 api 주소가 일치하지 않는 경우가 많았고, 이후에 이를 수정해주는데에만 많은 시간을 할애해야했다.

이번에 깨달은 점은 개발에서 중요한 것은 코드를 치기 시작하는 것이 아니라 개발 전에 치밀하게 구상을 하는 것이라는 것이다. 개인으로 개발을 진행할 때는 개발을 하면서 개발의 흐름을 수정해갈 수 있지만 협업 과정에서는 그것이 쉽지 않다. 따라서 개발을 시작하기 전에 최대한 많은 대화를 나누고 DB의 테이블, API 주소, 데이터 구조 등을 미리 정확하게 맞춰놓는 것이 중요하다. 이번에 깨달은 점을 기반으로 앞으로 협업에서는 본격적인 시작 전에 최대한 많은 소통을 할 예정이다.

사실 이것도 소통의 문제점의 연속이지 않을까싶다. 본인의 코드 스타일과 백엔드 개발자들의 코드이 완전히 달랐다. 아래 코드를 보면 이해가 쉽지 않을까 싶다.

이번에 협업한 백엔드 개발자들의 경우 세미콜론(;)을 잘 붙이지 않았고, eslint를 사용하지 않아 여러모로 코딩 스타일이 본인과 다소 상이했다. 물론 eslint.rc를 모두가 사용했으면 코드 스타일이 한 가지로 통일이 됐겠지만 코드를 짜는 것에만 신경 쓰기에도 머리 아픈 시점 상황 속에서 처음 써보는 eslint를 쓰며 코드 스타일까지 신경쓰면 백엔드 개발자들이 많이 힘들 것 같았다. 1박 2일이라는 한정된 시간 동안 진행되는 해커톤이었기 때문에 더더욱 그럴거 같다는 생각이 들어 그냥 다른 코드 스타일로 계속해서 개발을 진행했다.

하지만 만약 앞으로 협업을 하게 된다면 팀원들 모두에게 eslint를 쓸 것을 권할 것 같다. 본인만 그런지는 모르겠지만 세미콜론 없으면 어딘가 간지러운 것처럼 느껴지는 듯하고... 띄어쓰기가 이상하게 돼있으면 막 가슴이 불편하다... (이건 병인거 같기도?) 어찌됐건 큰 문제는 아니었지만 만약 이후 회사에 들어가게 된다면 회사 개발팀과 코드 스타일을 맞추는 일부터 할 것 같다.

결과적으로 Python에서 얼굴인식 코드를 구현하는데엔 성공했지만 Node와 Python 머신러닝 코드를 연결하는데에는 실패하였다. 하지만 파이썬이 연결돼 얼굴 인식이 성공했다고 가정한 뒤, 세션원들의 이름을 백엔드 서버로 전송해 세션원들의 이름과 세션 날짜를 선택하고, 해당 날짜의 출석이 됐는지 안됐는지를 확인하는 시스템까지는 구현하였다. 또, MongoDB를 이용한 로그인 또한 성공하였다. 그 결과, KUCC 동아리로부터 '멘토단 특별상'을 비롯해 소정의 상금을 받게됐다.

팀원들 모두가 개발을 공부한지 얼마되지 않았고 협업을 한 경험이 전무하다보니 우여곡절이 너무나도 많았다. 하지만 그만큼 많이 배우고 성장할 수 있었던 시간이라고 생각한다. Slack 채널과 gather.town을 이용하는 것부터 시작해서 Github의 브랜치를 나눠 merge하는 작업까지 어느 것 하나 쉽지 않았지만 이번 협업을 계기로 보다 자유자재로 사용할 수 있게 됐다. 앞으로 회사에 들어가서 협업하는데에 필요한 지식과 경험을 많이 쌓을 수 있었다. 또, 타팀들의 작품들을 보면서 정말 대단한 실력을 가진 사람들이 많다는 것을 다시금 느꼈고, 더 열심히 공부해야하겠다는 자극을 정말 많이 받을 수 있었다.

기존에 알던 팀원들이 아니었다보니 서로 친해질 수 있도록 하기 위해 gather.town의 화이트보드를 이용해서 나에 대한 진실 + 거짓을 섞어서 맞춰보는 시간을 가졌다. 덕분에 어색함을 풀 수 있었다.

gather.town에서 맵에 여러 함정들을 깔아놓은 뒤, 달리기를 진행해서 1등부터 6등까지 상품을 주는 이벤트를 진행했다. 게임은 절대로 지지 않는다는 신념을 가진 나이기 때문에 전체 4등 안에 들었고, 베라 파인트를 받을 수 있었다 ㅎㅎ

gather.town의 화이트 보드를 이용해 같은 팀원들끼리 협의해 나눠진 사진의 동물이 무엇인지 맞추도록 하는 게임이었다. 모든 팀이 '햄스터'를 맞췄고, CU 3000원 쿠폰을 받게 됐다!

귀여운 KUCC gather.town 단체 사진!