1년동안 스마트스쿨 플랫폼을 유지보수 하면서.. (회고)

임동현·2023년 3월 27일
13

회고

목록 보기
1/2
post-thumbnail

시작하며

안녕하세요! 저는 대구소프트웨어마이스터고등학교의 스마트스쿨 플랫폼 '도담도담'을 유지보수하는 '바인드' 동아리의 전 웹 팀장을 맡았었는데요, 2기 선배들 부터 시작하여 지금 7기 (저는 6기입니다) 까지 유지보수 되어오는 지조있는(?) 프로젝트 도담도담을 2022년 1년동안 유지보수한 경험을 좀 많이 지났지만 회고를 해보려고 합니다. 하하.. 😂

두서없이 글을 써도 양해 부탁드립니다. 🙏

3월

3월에는 막 개학을 하고 온라인이 아닌 오프라인으로 동아리 친구들과 회의를 할 수 있었습니다 😆 이 때는 학교의 시작과 동시에 저희 동아리의 프로덕트가 막 시동을 거는 시기였기도 했고, 4년가량 유지보수되어 거대해진 레거시코드와, 학교 측의 계속되는 요구사항(도담티쳐), 활발히 사용되지 않는 기능들(자습실 신청, 분실물 신청) 등 도담도담의 많은 문제점들 때문에 앞으로 어떻게 움직여야할지에 대해 친구들과 많이 회의를 했던 것 같습니다.

회의를 통해 내린 결과는 우리가 추구했던 목표와 많이 달라진 도담도담을 중단하고 새로운 프로젝트를 시작하는 것이였고 그리하여 정말 '학생'들에게 즐거움과 도움을 줄 수 있는 서비스 Dpple 을 개발하기 시작했습니다.

회의는 동아리 산학 선생님(실제 실무에서 일하시는 분)과 동아리 팀원들로 구성되어 진행했는데, 당시 산학 선생님께서 위와 같은 결정을 내리셨을 때가 아직도 기억에 남네요..ㅎㅎ 뭔가 앞으로 엄청난 여정을 할 것 같은 느낌? 근데 그만큼 막막해했던 기억도 있는 것 같습니다.

4월


4월은 동아리의 방향성이 정해지고 프로덕트에 어떤 콘텐츠를 담을지 정하기 위한 아이디어 회의와 기획을 주도적으로 했던 시기였습니다. 그래서 아이디어 회의를 정말 많이 했었는데요. (역시 아이디어 모으는게 제일 힘든거 같습니다.) 어떻게 하면 "학생들을 도움과 즐거움을 줄 수 있을까?" 라는 질문을 핵심으로 하여 아이디어를 모았던 것 같습니다. 그리하여 다음과 같이 괜찮은 아이디어들이 나왔습니다.

  • 축랭 : 교내 축구 랭킹

  • 백랭 : 교내 백준 랭킹

  • ItMap : 취업하신 졸업생 선배들의 회사 위치를 나타내주는 지도

  • Diki : 교내 나무 위키

지금 봐도 핵심키워드에 맞게 잘 나온 아이디어인 것 같습니다 ㅎㅎ 👍


아이디어 회의만 한게 아니라 개발도 했었네요. 하하

5월

5월은 좀 혼란스럽게 지냈던 것 같네요..ㅎㅎ 3월, 4월 2개월동안 도담도담이 아닌 새로운 프로젝트인 디플을 진행했었는데요, 한가지 아까운 점이 있었습니다. 바로 도담도담의 DAU인데요, 도담도담은 대소고 스마트 스쿨플랫폼으로 전교생이 사용합니다. 따라서 학생들에게 익숙한 도담도담 대신 새로운 프로젝트를 내밀기는 쉽지 않아 보였습니다. 그리고 학교에서 개발을 하다보면 새로운 서비스를 개발하는 경험은 많이 있지만, 서비스를 학생들에게 배포하고 유지보수 하는 경험은 경험하기가 어렵습니다. 이런 점 때문에 도담도담 대신 새로운 프로젝트를 하는 것이 맞을까라는 의문점이 생겼고 팀원들도, 산학 선생님도 같은 마음이였습니다.

따라서 기존 방향성을 틀어 도담도담을 계속 진행하자 라는 방향성을 가지게 되었습니다.

그렇다고 예전에 힘들게 낸 아이디어..는 사라지는게 아니였고, 메인페이지에 추가시키기로 했습니다. 하지만 추가도 지금 레거시 코드에서는 어려운 작업이였기에, 기능을 추가하고 드랍하기 쉬운 구조로 마이그레이션 하는 것이 급선무였습니다.

그렇지만 모놀리식만 해본 저는 좋은 방법이 떠오르지 않았고, 5기,4기 선배들에게 물어본결과 모노레포 아키텍쳐와 마이크로 프론트엔드 아키텍쳐라는 좋은 아키텍쳐를 알게 됐고, 백엔드 인프라가 Nginx를 사용하고 있어서, Nginx 라우팅 + 마이크로 프론트엔드 아키텍쳐를 사용하는 것이 비용이 적을 것 같다고 판단되어 MFA를 채택했습니다.

그 외에도 MVP, OKR 등 프로젝트를 매니징 하는 과정에서 필요한 요소를 많이 배웠지만, 당시에는 기반을 갖추는 작업이 핵심 작업이였어서 별로 신경쓰지 않고 개발만 했던 기억도 있네요.. 하하 😂

5월에는 프로젝트 관련뿐 아니라 새로운 멤버 7기 인턴 면접에 대한 얘기도 했었습니다. 앞으로 함께할 새로운 사람을 뽑다는건 정말 중요한 일이라고 생각됩니다. 여태까지 잘 그래왔기에 바인드가 잘 유지돼 왔다고 생각되기도 하고요. 그래서 당시에 바인드 채용 과정 준비를 빡세게 준비했던 것 같습니다. 그래서 다른 회사들이 실제로 진행하는 채용과정을 비슷하게 진행했던 것 같습니다.

그에 비해 저희는(6기) 인턴 채용과정이 굉장히 단순했다는 점은 7기들한테 좀 미안하네요..ㅋㅋ

6월

6월에는 본격적으로 달렸던 시기였습니다🤦‍♂️ MFA를 통해 분리된 페이지 (메인페이지, 기상송 페이지, 일정 페이지, 분실물 페이지, 내정보 페이지) 그리고 새로 개발되는 서비스인 ITMAP 페이지 총 6개의 페이지를 웹팀(저포함) 3명에서 맡아서 작업했었습니다. 전에 모놀리식으로 구성 돼 있던 레포지토리에는 무려 2000 커밋이 기여 돼 있었는데 그렇게 큰 프로젝트를 3명이서 하려니 여간 쉬운게 아니였습니다..ㅋㅋ 그리고 그에다가 6월이 수행평가 시즌이기도 했어서 당시 저의 삶의질이 얼마나 처참했을지가 예상이 되네요

지금 다시 돌아보면 정말 열심히 달렸던 시기였네요 허허.. 멋지다 동현아

학교에서 올린 당시 브이로그도 있네요 ㅋㅋㅋ.. https://www.youtube.com/watch?v=lQOFfNAc1bg&t=423s

7월

7월은 개발도 개발이지만, 바인드 미래를 위해 5월에 계획했던 7기 인턴 채용을 적극적으로 진행하던 시기였습니다.

사실 6월에 할려고 했지만 너무 바빠서 미뤘습니다 ㅋㅋㅋ.. 좀 미안하네요

그래서 7월 초에 있었던 기말고사가 지나고 바로 도담도담 메인페이지에 채용 배너를 걸어 채용 신청을 받았습니다. 채용 과정은 다음과 같습니다.

과제 접수 (10) -> 기술 면접 (30) -> 인성 면접 (60) -> 채용

과제는 기술적인 부분을 그렇게 보지 않았습니다. 바인드 채용기준이 인성 위주로 뽑자 였기 때문이죠. 그래서 기초 html과 js의 실력이 되는지를 판단하기 위해서 바닐라JS로 기본 C(create), D(delete)만 되는 투두리스트 만들기가 과제였습니다.

그렇게 여러 친구들이 과제를 내줬고, 고맙게도 총 4명의 친구들이 웹 프론트엔드에 지원해줬습니다. 다음 넥스트 스텝으로 친구들이 내준 과제에 기반하여 기술면접을 진행했습니다. 기본적으로 기본 html, js 개념에 대한 질문 몇개를 물어봤고 과제와 관련하여 무엇에 근거하여 코드를 짰는지, 무엇을 고민했는지, 구글링에서 복붙한건 아닌지 등을 알기 위해 꼬리질문도 몇개 물어봤습니다.

당시 면접을 본 7기 친구들한테는 당시 상황이 굉장히 무섭고(?) 깐깐했을거라고 생각이 되는데요, 다 성장을 위해, 잘되라고 한 질문이였다는걸 알아줬으면 좋겠네요.. 하하

기술면접이 끝나고 몇일 후에 인성면접을 봤습니다. 인성면접은 이 친구가 바인드에 와서 잘 활동하고 협업할 수 있는 친구인지를 확인하는 중요한 면접인데요, 그래서 팀장만 면접에 참가해서 진행했습니다. 물론 저도 들어갔습니다. 허허

인성면접은 동아리 활동을 하면서 (부당한 지시, 팀원간의 갈등 등)커뮤니케이션 관련 문제와 (일정 관리, 도담도담의 문제점을 평소에 파악하는지 등) 동아리 관리 관련 문제 등에 잘 대처하는지, 어떻게 생각하는지를 봤습니다. 총 6시간가량 15명의 친구들의 면접을 봤고 다들 질문에 대해 잘 답변해주었습니다 👍.

당시에 웹팀장(저) iOS 팀장 친구, 서버 팀장 친구, AOS 팀장 친구 총 4명에서 면접을 6시간동안 진행했는데, 정말정말정말 힘들었습니다. (그날 노사감선생님데이여서 놀려고 했는데 놀지도 못하고 곯아떨어졌습니다..)

후에 기술면접 질문을 잘 답한 대답의 개수와 인성면접 질문에 대해 바인드의 생각과 맞게 답한 대답의 비중을 기술면접과 인성면접의 점수 비중에 맞춰 점수로 매겨서 총 8명의 7기 바인더스 인턴을 뽑았습니다.

8월

8월은 방학이 시작되어서 애들과 직접적인 협업을 할 수는 없었는데요, 그에다가 백엔드팀에서 외부서버 제작이 덜 되어서 서버통신도 불가능한 상황이였습니다. 그래서 마땅히 할 수 있는 작업이 없어서 웹 성능관련해서 최적화 작업을 많이 했었습니다.

먼저 처음에 했던 작업은 제가 만들던 메인페이지의 번들량과 라이트하우스 점수를 알아봤습니다. 최적화하기 전 메인페이지의 스팩은 번들량 1.48MB, 라이트하우스 성능 점수 58점으로 처참했습니다 ㅋㅋㅋ...

그래도 다행히도 성능 점수의 문제점이 너무 큰 자바스크립트 번들량 때문이였어서 번들량만 줄이면 둘 다 해결되는 문제였습니다. 그래서 번들 애널라이저로 번들량을 분석해본 결과, 당시 외출,외박 신청 폼에서 MUI DatePicker를 사용하고 있었는데 이 라이브러리 번들이 엄청난 양을 차지하고 있었습니다. 그래서 어떻게 해결할까 라고 고민하면서 고뇌를 해본 결과, 큰 번들량 -> 웹팩 적용, MUI, 자체 컴포넌트 라이브러리로 대체 라는 결론이 나왔고 바로 실행에 옮겼습니다.

웹팩은 먼저 CRA로 만들어진 리액트 프로젝트를 eject 시켰습니다. 후에 esbuild + webpack5 환경을 적용해줬습니다. 빌드 부분에서는 벤더 파일을 분리시키고 esbuild 로더를 사용하여 빌드시간을 9.56초에서 3.57초로 줄일수 있었습니다 😎

웹팩을 적용하고 많은 이점이 생기니 좀 뿌듯했었습니다.

웹팩을 적용하고 기분좋게 컴포넌트 라이브러리 제작을 시작했습니다. 하지만 벌써 이름부터 어려워 보이지 않나요? 그래서 처음에 어떻게 시작해야할지 몰라서 레퍼런스부터 찾아봤습니다. 다행이게도 알렉스 아저씨가 친절하게 한시간짜리 영상을 올려주셔서 틀은 잡을 수 있었습니다.

https://dev.to/alexeagleson/how-to-create-and-publish-a-react-component-library-2oe

위 영상을 보며 따라하는 과정에서 정말 많은 난관이 있었습니다. rollup 번들러를 사용하였는데, 번들링을 하는 과정에서 svg 이미지, storybook 라이브러리가 번들링 되지 않는 문제도 있었고, 컴포넌트를 설계하는 과정에서 어떻게 해야 확장성 있게, 개발자가 잘 사용할 수 있을까 하고 고민해본 적도 있었네요..

지금 보면 다 의미있는 경험이였던 것 같습니다. 솔직히 저 때 기억은 잘 안나지만 어떤 문제는 2시간동안 구글링 했었던 기억도 있습니다 ^^

그렇게 힘든 여정을 거쳐 도담도담 웹 컴포넌트 라이브러리를 완성했습니다 🎉
https://github.com/Team-B1ND/DodamDodam_WEB_Component_Library
완성을 하고 메인페이지에 적용 해보니 최종 번들량이 1.48MB -> 1.19MB 줄여졌고, 라이트하우스 성능 점수도 58점에서 -> 87점으로 올랐습니다. 위에서 해결방안을 냈을때 꽤 쉽지않을 것 같다고 생각했는데, 막상 이렇게 좋은 성과가 있으니 제 자신이 너무 자랑스러웠습니다.

9월

9월은 발등에 불이 떨어지는 시기였습니다. 위 8월에서 인프라 구축만 하고 개발에 관한 얘기가 없는거 보면 아시듯이, 개발이 하나도 진행이 되지 않았습니다... 이유는 백엔드 친구들의 빡빡한 방학 일정 때문이였는데요, 백엔드 친구들이 여러 대회도 나가고 바쁜 일정을 보내느라 백엔드 개발에 소홀하여 저희 프론트엔드도 개발을 할 수가 없었습니다. 그에다가 10월 중순에 저희 도담도담을 ICT 전시회에 전시했어야 했는데요 말그대로 발등에 불이 떨어졌었습니다 ㅋㅋㅋ.. 백엔드 친구들은 상황에 심각성을 알고 밤을 새가면서 개발을 하더라구요 ㅋㅋ..

당시 백엔드 친구의 커밋입니다..

당시 저도 상당히 달렸네요..

이때 열심히 달린 덕분에 기능의 50%는 완성할 수 있었습니다.

10월

10월은 어느정도 작업이 안정화가 되고 막판 스퍼트를 달리던 시기였습니다. 그래도 여유롭지는 않았습니다. 왜냐면 수행평가 시즌이였기 때문이죠. 허허
메인페이지 개발을 거의 다 끝내고 일정페이지 작업을 시작했습니다. 다른 친구들도 ITMAP 개발과 기상송 개발을 끝내가고 있었습니다.



이 쯤에서 저희 산학선생님께서는 5월쯤 말하셨던 데이터 수집을 강조하셨습니다. 산학선생님께서는 위에서 말했던 도담도담의 문제점 중 하나, 활발히 사용되지 않는 기능(자습실 신청, 분실물 등)들에 대해 대처하지 못했던 이유가 사실은 데이터가 수집되지 않았기 때문이라고 말씀해주셨습니다.

보통의 기업은 어떤 기능을 릴리즈 할 때 그 기능에 대한 OKR(Objective Key Result)을 먼저 세웁니다. 그리고 릴리즈와 동시에 데이터를 수집하는데 수집한 데이터의 수치가 OKR에 미치지 못하면 그 기능을 과감히 드랍시켜버리죠.

바인드에서는 이부분을 제대로 하지 못했던 것입니다. 그래서 이번에 데이터 수집의 기반도 마련해보자 라고 산학선생님께서 말씀해주셔서 메인페이지에는 GA, Amplitude를 심었고, 자체 로깅 API를 만들어 적용했었습니다.

11월

11월은 새로운 도담도담 배포와 그에 대한 유저 피드백을 받았던 시기였습니다. 그리고 ICT 전시도 했었습니다.

10월 말까지 메인페이지, 일정페이지, 기상송페이지, ITMAP, 내정보페이지의 작업을 끝내고 11월 초에 정식 배포를 했습니다 🎉 그와 동시에 오류도 굉장히 많을거라고 예상해서 구글 폼으로 오류 제보를 받기도 했었습니다.

정말 많은 에러 제보를 받았었네요.. (이때 정말 많이 핫픽스를 했었습니다.. 하하) 다시 한번 에러제보 해주신분들께 감사드립니다. 근데 어떻게 보면 저도 제대로 신경쓰지않고 개발했다는 걸 알 수 있네요... 반성합니다 🥲

그렇게 배포를 했는데 치명적인 문제가 발생했었습니다. 바로 크롬의 정책 변경인데요, 2022년 중순부터 점점 크롬에서 http 즉 ssl 인증서 적용이 안된 사이트를 막고 있었습니다. 그래서 저희 도담도담은 크롬으로 들어갈 수 없었습니다. 저희가 개발하는동안 서비스 되고 있던 예전 도담도담은 캐싱때문에 계속 돌아갈 수 있었던 것이죠.

학교 애들이 제일 많이 사용하는 브라우저인 크롬에서 도담접속이 되지않는것은 치명적인 문제였고 빨리 고쳐야했습니다. 하지만 당시 이문제를 해결하던 백엔드 친구 한 명의 말을 들어보면 SSL 인증서 적용이 그렇게 빨리 되는 것처럼 보이지는 않더라구요. 그렇게 SSL과 싸웠던 기억이 있네요, 결국 그 친구는 11월 중으로도 SSL 문제를 해결하지 못햇습니다.

다행히 23년 2월중으로 친구가 SSL 적용을 성공해서 지금은 학생들이 크롬으로 도담도담을 잘 사용하고 있습니다 👍

12월

벌써 마지막 12월이네요, 12월에는 7기 인수인계 및 컨퍼런스를 진행했었습니다.
뭔가 12월은 우리가 해왔던 것을 정리하고 마무리하는 시기였던 것 같습니다 🥲

7기 친구들에게 바인드 깃허브 계정, gmail 계정, docker 계정 등 여러 계정들을 인수 인계 해주고 메인페이지, 일정페이지, 기상송페이지, 내정보 페이지 등 여러 페이지들의 핵심 스택과 기본 구조를 알려줬습니다.

그렇게 7기들에게 인수인계를 해가던 중 안드로이드 팀장 친구가 하나 제안을 하게 됩니다. 교내에서 컨퍼런스를 개최해보자 라고요. 조금 갑작스럽긴 했지만, 좋은 경험이 될 것 같아서 찬성했습니다. 컨퍼런스 발표자는 기술적 지식을 공유하고 싶은 모든 교내 학생 중 아무나였고, 그렇게 CNS(교내 원서 접수 서비스 운영 동아리)에서도 몇명 발표를 하기로 했고 임베디드를 공부하는 친구도 발표에 참여했습니다. 그래서 다음과 같이 컨퍼런스가 열리게 됩니다.

https://b1nd.notion.site/B1CODE-074f3ceae2894d8293df2c18d76a8c02

  • 세션1 : 임베디드 꿀팁
  • 세션2 : Node.js에서 Spring을 향해
  • 세션3 : Spring에서 MSA를 구성하는 방법
  • 세션4 : Corutine을 활용한 비동기 처리
  • 세션5 : 다시 세상 모든 알레르리 환자를 위하여
  • 세션6 : RxFlow로 iOS 퍼블리셔 벗어나기
  • 세션7 : 2000 커밋 레포, MFA로 산산조각 내기

좋은 내용의 주제들이 많이 나왔었습니다. 저는 세션중에서 7번째 세션 2000커밋 레포, MFA로 산산조각 내기 를 발표했었습니다. 학교에 프론트엔드를 지망하는 친구들이 많아서 제일 마지막으로 발표하게 되었네요 허허.. 발표를 준비하는 과정에서 MFA에 대해 더 깊게 공부한 것 같습니다. 발표 대상자가 1학년이 대부분이여서 이해하기 쉽게 설명해야 했고, 그런 부분에서 더 세세히 알려고 노력했던 것 같습니다.

https://www.youtube.com/watch?v=idoZ4KSmivs
좀 부끄럽긴 하지만, 당시 유튜브 영상입니다 ㅋㅋㅋ... 그렇게 컨퍼런스를 성공적으로 끝내고 마지막 바인더스 회식으로 다같이 고기를 먹었습니다. 😂

마치며

이렇게 두서없이 1년동안 바인드에서 활동했던 얘기로 회고를 해봤는데요, 먼저 굉장히 뭔가를 많이 했다?ㅋㅋㅋ 라는게 느껴집니다.

동아리 활동을 하다보니 서로 웃고 싸우고, 싸우면 운동장 한바퀴 돌면서 화해하고 정말 많은 일들이 있었는데 그때마다 저희 6기만의 분위기로 잘 지냈던 것 같네요.

솔직히 고등학교에서 친구들끼리 동아리 활동을하면서 플랫폼을 운영하며 유지보수 할 수 있는 기회가 그렇게 많을 것 같다고 생각되지 않습니다. 그래서 더 값진 기억이라고 생각됩니다.

7기 친구들도 인턴 과정 동안 함께 해준 부분도 잊지못할 경험이 될 것 같습니다. 개인적으로 함께해줘서 고맙네요. 7기 친구들 덕분에 배운부분도 있는 것 같고요.

앞으로도 바인드가 스마트 스쿨 플랫폼 뿐 아니라 그 너머를 유지보수하고 발전해나갔으면 좋겠습니다.

글을 마치며 좀 두서없이 쓴 긴글 읽어주셔서 감사합니다. 🥳

profile
깊게 알기 위해 노력하는 주니어 프론트엔드 개발자입니다 😎

5개의 댓글

comment-user-thumbnail
2023년 3월 27일

키키

답글 달기
comment-user-thumbnail
2023년 3월 27일

😍👍

답글 달기
comment-user-thumbnail
2023년 4월 3일

멋있네요 👍👏

답글 달기
comment-user-thumbnail
2023년 4월 5일

👍

답글 달기
comment-user-thumbnail
2023년 4월 16일

존경하는 팀원, 누구보다 열심히 달린 팀원 👍

답글 달기