현재 내가 개발 및 운영하고 있는 고객상담시스템 프로젝트의 진행과정을 남겨보고자 한다.
프로젝트 간단 소개
내가 개발 및 운영하고 있는 시스템은 고객상담시스템이고 그 중에서 frontend의 개발을 맡고 있다. frontend는 vue3 기반이고 AWS 환경에서 운영되고 있다.
2021년경 파일럿 프로젝트로 시작하여 vue2 기반으로 frontend 를 직접 구현하고 운영해 본 결과, 시스템의 유용성을 인정받아(?) 2022년 정식 프로젝트로 시작하게 되었다.
문제의 시작
이 프로젝트가 정식프로젝트가 되면서 frontend의 기본 개발을 frontend 개발자인 내가 아닌 외주업체에 의뢰를 하게 되었는데, 이 때부터 이 프로젝트가 잘못되어가고 있음을 느꼈다.
우리 프로젝트 조직 내에서는 디자이너가 없었기 때문에 외주업체의 디자인 작업물을 받아오는 것은 납득할만 하였으나, frontend UI 및 기본구현도 외주업체에 의뢰를 하게 되었다. (개발자인 나는 권한이 없으므로)
외주업체는 frontend 구현에 사용할 템플릿을 선택해 달라고 우리 개발팀으로 메일을 보냈었는데, 속으로 왜지? 하면서도 일단은 개발이 진행되어야 하므로 템플릿을 선정하여 회신하였다. (그리고 그 템플릿은 나중에 나의 업무량을 기하급수적으로 늘려주었다..)
선정된 템플릿과 그들이 작업한 산출물을 기반으로 frontend의 개발환경이 아래와 같이 대략 정해졌다. (패키지 버전은 대략 기억나는 대로만..)
- vue 3.0
(당시 vue3 정식버전이 배포된 초반이었다) - vue3-styled-component
- ant-design-vue 2.x
- vue-router
- vuex
- vue3-perfect-scrollbar
- 외주업체에서 구매한 유료 템플릿 (이하 SD템플릿)
- 기타 npm 패키지...
프로젝트 Bring-up
어쨌든 외주업체에서는 그들이 설계한 디자인 가이드라인에 맞는(?) front 기본 구현내용을 우리에게 공급하기 시작했다. 외주업체의 구현내용을 마이그레이션하는 작업은다음과 같은 순서로 진행되었다.
- 외주업체에서 Private Github 저장소에 코드 push
- 내가 해당코드 pull 이후 기능구현코드와 migration 이후 사내 bitbucket 저장소에 push
- 1-2반복, conflict 발생시 모두 잡아야 함
그리고 예상대로 외주업체는 정상적인 코드를 주지 않았다. 일단 개발을 요구했던 화면을 모두 만들어내지 못했다. 기본적으로 퍼블리싱에 실패 하였고, 개발기간도 초과되었다. 더 이상 기다릴 수 없었던 나는 외주업체가 전달한 코드를 베이스로 구현되지 못한 기능을 일단 구현하였다. 특히 시간대 변경기능을 통합하는 게 가장어려웠었는데, 이를 지원하는 캘린더 컴포넌트가 (내가 알기로는) v-calendar 가 유일하였기 때문이었다.
그렇게 기본 기능을 구현하기 위해 임의로 vue 버전을 3.2로 올리자, 외주업체에서 구현했던 기본 레이아웃이 모두 틀어져 버리게 되었다. 확인해 보니 SD 템플릿의 코드가 새로운 vue 버전과 다르게 동작하여 발생한 문제로 확인되었는데, 근본원인까지 수정할 수는 없어서 일단 임시로 문제가 되는 부분만 CSS로 수정한 채로 서비스가 시작되었다.
(다음편에서 계속)