프로젝트를 확장한 뒤에, 유지보수를 하면서 고민했던 경험을 정리해보려고 합니다.

프로젝트 참여와 확장

(TeamSolution 프로모션 이미지, 출처 : 3SECONDZ)

제가 참여할 2019년 말 당시에는, TeamSolution 프로젝트는 최대 5인으로 구성된 팀 단위 운용을 기준으로 한 실시간 텔레메트리 관제 서비스로 개발이 진행되고 있었습니다.

어느 정도 서비스를 위한 동작 기반이 구축되어있었고, 저는 참여 초반에 프로젝트 구조 파악과, 완료되지 않은 CSS 스타일링 작업 (특히 반응형 레이아웃)을 진행하였습니다.

첫번째 확장, RaceSolution

그렇게 프로젝트 알고리즘을 파악하며 작업하던 중, 경기 관제를 위해 TeamSolution 프로젝트를 확장하여 RaceSolution이라는 솔루션을 개발, 국내 모터스포츠 경기 SUPERRACE에 서비스하게 됩니다.

처음 5인 관제 시스템에서, 20여 명이 참가하는 SUPERRACE에 대응하기 위해 기존 알고리즘에서 분기하는 방식으로 코드 파일을 복제하여 경기를 위한 알고리즘을 덧대어 구성하기 시작했습니다.

두번째 확장, SolutionMaster

이후에 좀 더 관리 기능을 강화하고, 전반적인 기능을 개선한 R&D 및 기관용 솔루션 SolutionMaster를 개발하게 되었습니다.

이 때 역시 RaceSolution 알고리즘 코드에서 분기하는 방식으로 코드 파일을 복제하여 알고리즘을 추가하여 개발을 진행하였습니다.

예정된 문제들

다들 그렇듯, 촉박한 시간 내에 프로젝트 런칭을 해야 하는 상황에 놓인 것은 같았지만, 일단 작업 해놓고 리팩토링을 하자는 생각으로 진행했었습니다. 그러나 현실은 시간에 쫒겨 새로운 프로젝트, 그 다음 새로운 프로젝트, 또 다른 프로젝트가 연속되는 상황에 리팩토링은 쉽지 않았습니다.

분기 되었던 서로 다른 서비스 코드 내에서 동일한 알고리즘을 가진 코드를 수동으로 직접 수정하며 발생하는 에러와 사이드 이펙트 몇 가지 이슈를 추려보면 다음과 같습니다.

복제된 알고리즘 코드에 퍼져있는 동일한 서비스 코드들
분기된 뒤에, 동일 코드였던 것들이 각 서비스 별로 변형된 코드에 적용되며 사이드 이펙트 발생
일관적이지 않은 유사 컴포넌트의 인터렉션 알고리즘 코드
단순 오타, 누락 등으로 인한 휴먼 에러
기타 유지보수 상에 발생한 이슈

리팩토링을 위한 설계, 그리고...

모듈화 설계.png (Figma로 정리한 설계 정보와 PT 자료)

첫번째 확장 이후, 운영 중 발생한 여러 이슈들로 인해 개발팀 내부에서 모듈화 필요성에 대한 공감이 있었고, 개인적인 코드 개선 욕심도 있었습니다.

그래서 당시 시점까지 개발된 모든 서비스 코드와 알고리즘을 분석하여, 솔루션에 공통적으로 활용하는 components 파트와 core 알고리즘 파트, 그리고 솔루션 별로 각각 사용되는 components 파트와 optional 알고리즘 파트를 구분하여 관리할 수 있게 설계를 마쳤고, 틈틈이 개발팀 내부에 PT하며 진행 상황을 공유하였습니다.

프로젝트 스케쥴이 다소 여유로웠던 겨울에 작업을 실제로 진행하였으나, 항상 우선순위에서 밀려서 겨울에 1~2개월 정도 진행을 하였습니다.

도중에 진행했던 Lap VS Lap에서, 설계해두었던 컴포넌트/모듈화 코드를 처음 적용해서 서비스 런칭까지 하였습니다.

2022년 겨울에 드디어 메인 서비스인 TeamSolution, SolutionMaster의 모듈화 작업에 꽤 진전이 있었으나 내부 사정으로 결국 모듈화 작업을 마무리짓지 못했습니다.

느낀 점

우선, 처음부터 재사용 코드에 대한 고민을 좀 더 신경쓰게 되었습니다. "나중에 해야지" 방법은, 그 "나중"이 영원히 오지 못할 수도 있다는 것을 깨달았고, 처음에 요구사항에서 최대한 재사용성과 확장성을 고려하게 되었습니다.

그리고 설계 내용에 대한 피드백으로 들었던 것이, EJS로 이렇게까지 활용할 수 있으면 리액트를 사용해보는게 좋겠다였습니다. 안그래도 리액트 활용에 대한 갈망이 있어서 주말에 혼자 간단하게 공부하고 있던 중에, 피드백을 듣고 좀 더 적극적으로 활용하게 되었습니다.

저 피드백 이후, 2022년 말에는 메인 서비스 이외의 프로젝트에서 Vite를 이용한 가상 DOM의 운용, 리액트로 자사 홈페이지 리뉴얼 프로젝트까지 실무에서 활용했었습니다.

Vite환경에서 가상DOM을 활용한 것은 HL Klemove 납품을 위한 시각화 대시보드 프로젝트였습니다.

또한 Vite + React를 활용한 홈페이지 리뉴얼 프로젝트는 컴포넌트와 인터렉션까지 진행되었으나 스타일링 단계에서 내부 사정으로 중단되어 개인적으로 많이 아쉬웠습니다.