〔2021 오픈소스 SW 해커톤〕이노베이션 아카데미 학장상(2위) 수상 후기와 회고록

 

팀명: 'Python Hitchhiker'

출품작: 'Backend.AI 를 활용한 파이썬 라이브 코딩 쿡북 소프트웨어'

사용 오픈소스: 래블업 사의 인공지능 개발 플랫폼 'Backend.AI'

 

---

 

 

이번 해커톤에 참여하면서 '처음'으로 경험한 것이 참으로 많았다. 첫 해커톤 참여, 첫 팀 프로젝트, 첫 프론트엔드 개발 담당, 그리고 첫 팀장. 모든 것이 처음이었기에 너무나도 힘들었지만 그만큼 부딪히고 깨져가면서 나는 성장했다.

 

---

 

1. 개발 과정

 

  크게는 다섯 단계로 진행하였다. 1단계: 목업, 2단계: 협업 툴 결정, 3단계: 이슈 트래킹, 4단계: 라이센스 결정, 5단계: 배포.

  처음에는 팀원들의 기술 스택을 파악하여 프론트엔드와 백엔드 팀에 배치하였다. 그리고 우리 팀이 구체적으로 어떤 것을 만들고 싶은지 방향성과 틀을 정하는 목업 과정을 거쳤다. 그 이후에는 랜딩 페이지, 컨텐츠 페이지, 로그인 페이지는 어떻게 구성할지 세부적인 계획에 대한 스토리보드를 만들었다. 이 과정에서는 래블업 대표 신정규 멘토님께서 주신 실무적 관점에서의 조언이 많은 도움이 되었다. 예를 들면 사용자가 사이트에 머무는 시간을 늘리기 위한 전략으로, 첫 페이지에서 소개글을 작성하는 대신 코드 실행 창을 바로 보여주는 것이었다. 그래서 로그인을 하지 않고도 3번 문제까진 풀어보게 하고, 그 다음부터는 로그인을 요구하여 회원가입을 유도하는 전략이다.

 

 

 

그 다음에는 협업 툴로써 '노션'과 '깃허브'를 활용하기로 결정했다. 노션은 일정을 관리하고, 개발 과정에서 도움될만한 자료 정리, 회의록을 작성하는 용도로 사용했다. 깃허브는 소스 코드를 올리고 이슈 트래킹하는 용도로 사용했다. 이슈 트래킹 과정은 해야할 일 목록을 세분화하여 깃허브의 이슈로 발행(New issue)하고, 적합한 팀원을 할당(assign), 코드를 수정하고 나면 관련 이슈에 댓글로 링크, 마지막으로 팀원들의 리뷰를 거쳐 문제가 없으면 통합(merge)하는 절차를 거쳤다. 

 

 

이슈 트래킹(Issue Tracking)

 

  모든 개발 과정이 끝난 다음에는 사용할 라이센스를 결정했는데, 여기에는 올리브카카오의 라이센스 검증 서비스가 많은 도움이 되었다. 처음에는 우리가 사용한 소스 중에 시퀄라이트(sqlite)의 컴포넌트 하나가 GNU 라이센스를 사용하고 있었기 때문에 우리도 역시 GNU 를 사용하기로 했었다. 하지만 우리 프로젝트의 목적이 '기업이 쉽고 간단하게 코딩 실습 웹사이트를 제작하도록 돕는 보일러 플레이트'라는 것을 고려하면 적합한 라이센스가 아니었다. 왜냐하면 GNU 를 사용한 오픈소스를 활용한 사람 역시 모든 소스 코드를 공개할 의무가 있기에 이윤을 추구하는 기업의 입장에서 중요한 컨텐츠나 소스가 유출될 위험이 있기 때문이었다. 따라서 최종적으로 문제가 되었던 시퀄라이트의 컴포넌트를 삭제하여 충돌 문제를 해결한 이후, MIT 라이센스를 사용하는 것으로 결정하였다. 마지막으로 깃허브의 release 태그를 이용하여 v1.0.0 을 배포하였다.

 

v1.0.0 배포

 

---

 

2. 아쉬운 부분

  처음으로 팀 프로젝트의 팀장을 담당했다보니 체계적인 협업 시스템을 구축하는 것에 시간이 조금 소요되었다. 맨 처음부터 노션에 규칙을 정리해두어 팀원들 모두가 따랐더라면 혼란 없이 원활한 협업이 가능했을텐데 하는 아쉬움이 있다. 예를 들면, 이슈의 제목이나 내용을 작성하는 규칙을 정해두지 않았다는 것이나, 나는 자바스크립트 ES6 문법을 따르며 2칸의 들여쓰기를 사용했지만 다른 팀원은 그렇지 않아서 var 변수를 사용하고 4칸을 들여썼다는 점 등이 있다. 그래서 앞으로 협업을 하게 된다면 eslint, prettier 등의 툴을 이용해 코딩 컨벤션을 미리 정해두고 시작하고 싶다. 

  그리고 팀원들과 소통에 있어 가장 큰 어려움을 겪었다. 특히 대부분의 협업을 온라인으로 진행했다보니 팀원에게 도움을 요청하거나 확인해야 하는 사항이 있을 때에 바로 소통할 수 없는 것이 불편했다. 이 점을 개선하기 위해서 매일 오전 10시부터 게더타운에서 모이고, 두 번의 고정 회의 시간을 제외하면 각자 자유롭게 개발하다가 할 말이 있으면 마이크를 켜고 소통하였다. 깃허브의 이슈 기능을 이용해서 이슈 트래킹을 시작한 이후부터는 각각의 팀원들에게 업무를 분담하여 지시하고, 마일스톤을 통해 현재 프로젝트 진행 상황을 확인할 수 있었기에 조금 더 원활하게 소통할 수 있었다. 이번에는 깃허브를 이용하여 이슈 트래킹하였지만, 짧은 단위로 작업 계획을 세워 팀과 협업하는 애자일 방식으로는 jira 를 추천한다는 강연을 들어서 다음에는 jira 를 사용해보려고 한다.

 

---

 

3. 배운 점

  그동안 프론트엔드, 백엔드 개발자가 정확히 어떤 일을 하는지 두루뭉술하게만 알고 있었는데, 이번에 확실히 이해하게 되었다. 자바스크립트 스터디에 참여하면서 토이 프로젝트를 몇 개 진행했었는데, 사실은 프론트엔드 개발을 해본게 아니라 웹 퍼블리싱 작업에 가까웠었구나 하는 생각이 들었다. 이번 해커톤을 하면서 실제로 서버를 구축하여 도메인에 접속하면 구동하는 웹 사이트를 만들었기에 새로운 지식을 많이 습득하였다.

  프론트와 백엔드가 나뉘어 작업하면서, ajax 통신을 이용해 클라이언트로부터 서버에 body 데이터를 보내고, 서버로부터 response 를 받아 json 형식의 데이터를 사용하는 fetch() 방식을 처음으로 써보았다. 이 과정에서 책으로만 익혔을 때에는 명확히 이해하지 못했던 비동기적 프로그래밍 기법 async, await 가 실제로 어떻게 작용하는지 생생하게 이해하였다. 새벽 내내 버그의 원인을 파악하다가 if 문이 fetch() 안에 있는 .then 내부에 있지 않고 밖에 나와있어서 발생한 순서 차이 때문이었다는 사실을 깨닫고 유레카!를 외쳤던 기억이 생생하게 난다. 또 백엔드 팀에서 post, put, get, delete 메서드를 구현해주면 그것을 프론트 단에서 이용하는 REST api 방식을 처음 써보면서 백엔드 팀과 역할을 나누어 협업하는 법을 배웠다.

  혼자 토이 프로젝트를 했을 때에는 로컬 스토리지까지만 사용했었는데, 이번에 세션 스토리지도 사용해보았다. sessionStorage.setItem(), getItem(), removeItem() 메서드를 사용해 세션 스토리지의 데이터를 관리하였다. 사실 보안적인 측면에서는 세션 스토리지에 모든 데이터를 저장하고 다루는 것이 아니라, 클라이언트 측에서 쿠키로 저장하고 있는 세션 id 를 서버에 주고 데이터를 받아오는 것이 이상적이었으나, 시간 부족으로 인하여 구현하지 못했다. 이 부분은 해커톤이 종료된 이후에 가능하다면 개선하려고 한다.

  그밖에도 오픈소스인 부트스트랩을 활용하며 그리드(grid) 시스템이나 반응형 웹사이트에 대한 이해가 늘었다. 그동안은 간단한 CSS 와 flex 정도만 사용했었는데 이번에 UI, UX 측면에서도 많은 것을 배웠다.

  마지막으로 최종 발표를 하기 전에 멘토님께 받았던 피드백이 많은 도움이 되었다. 가장 처음에는 우리의 프로젝트가 왜 필요한지 스토리 라인을 들려주어 당위성을 알리고, 관중들이 집중하여 발표를 듣도록 유도하는 전략을 알려주셨다. 그리고 10분이라는 시간 제한이 있었기에 내가 타임오버 되는 점을 우려하여, 앞부분 스토리라인에서 빠르게 화면을 전환하면서 템포를 높이는 방식을 통해 다른 내용을 다룰 때에도 상세한 내용은 ppt 에 적어두되 발표에서는 중요 내용만 빠르게 다루고 넘어가도록 조언을 들었다. 그동안 해왔던 학교 과제 발표와는 확실히 달라야한다는 것을 배웠고, 현업자의 시선에서 주신 현실적인 피드백을 받을 수 있어서 정말 감사했다.

 

---

 

  마지막까지 밤을 새면서 발표를 준비하고, 최선을 다했던 대회였기에, 이전의 나보다 훨씬 성장했다는 점에서 이미 커다란 선물을 받았는데, 이렇게 최종 결과에서도 이노베이션 아카데미 학장상을 수상하게 되어서 감사하다. 그동안 노력한 것이 결실을 맺고 인정 받았다는 것이 정말 기쁘다. 열흘동안 잠도 잘 못 자고 에너지를 쏟아부은만큼 힘들었지만 그만큼 많이 배웠기에 나중에 또 이런 좋은 기회가 생기면 꼭 다시 참여하고 싶다!

  해커톤 공지가 올라왔을 당시 내가 아직 자바스크립트를 잘 다루지 못하는데, 참여해도 괜찮을까? 고민하다가 결국 신청하였는데, 결론적으로 정말 잘한 선택이었다. 역시 모든 일은 할까말까 고민된다면 무조건 하는게 낫다! 내 경험상 하고 후회하는 것보다 안 해서 후회한 것이 훨씬 아쉬웠기 때문에 이런 결정을 내렸던 것이다.

  Just do it! 일단 하면, 뭐라도 된다.