💐 완성작을 보고싶으면 https://soraji.github.io/work/2022/01/02/vuework/ 💐

문제 인지

레거시 어플리케이션을 보면서 ‘참 이것도 문제다’ 싶었던게 한두개가 아니었다.

그치만 어떻게 해결해야할지 몰라 어쩌지는 못하고 있던 와중

기효님한테 온/오프라인 Vue.js 수업을 듣고나니 이제는 어떻게 수정하면 되겠다는 식의 전체적인 윤곽이 보이기 시작했다.

그래서 회의시간에 각잡고 제안을 한번 해봤다.(이때 일이 커질것 같다는 생각은 들었는데 잘만 하면 엄청 좋은 기회가 될거라 생각했다)

안그래도 회사에서도 이 레거시에 대한 문제점을 인식하고 있었고,

계속해서 바꿔야한다는 얘기가 나오고 있는 상황이었지만 인원이 없다는 이유로 진행하지 못하고 있었는데 내가 먼저 제안을 하니 상당히 좋아하셨다.

회사에서는 모든 지원을 해줄테니 한번 프로토타입을 만들어보라고 했다.

마음에 들면 아예 프로젝트를 시작해보자고 말이다.

회사에서는 현재 레거시의 화면을 Vue.js로 만들어보라고 얘기하셨다.

새 프로젝트를 진행할 수 있는 실력이 되는지, Vue.js라는 프레임워크는 어떻게 돌아가는건지 확인하고 싶으셨던것 같다.

사실 제안만 해놓고 ‘저는 실력이 안되서 못합니다’ 라고 하면 안되니까,

이미 제안했을 당시에는 Vue.js로 어느정도 웹 사이트를 구현할 수 있을정도였다.

Vue.js로 레거시를 만들고 ‘이렇게 만들어집니다’ 라는걸 보여드리고 몇번의 회의 끝에 Vue.js를 도입해보자고 결론이 났다.

vuework

팝업창으로 뜨는 어플리케이션 팝업이 없어져 가는 추세에서 팝업창을 유지하게 되면 UX가 낮아진다.
반응형이 아닌 고정형이라 텍스트 크기를 키우고 싶거나 더 많은 양의 정보를 보고 싶은 유저에게 보여줄 수 없었다
레거시 같은 UI는 한 페이지에 모든 정보를 보여줄 수 있다는 장점이 있을 수 있겠지만, 작은 화면에서는 UI에서 보여줄 수 있는 데이터가 한정적이라 UX가 낮아진다. 실제로 심심치 않게 회원사에서 이 화면 비율에 대한 문의가 오곤 했다.
개발 생산성도 너무 낮았다. 레거시는 모델1 구조로 되어있었는데, 비즈니스 로직이 워낙 복잡한 분야여서 몇십만줄 되는 파일만 50개가 넘었다

기여도

회사에서는 모든 권한을 줄테니 서비스 개발에 착수했으면 좋겠다고 했고, 나는 새로운 프로젝트 전체 테크리더가 되었다…

3명 밖에 안되는 개발킴에서 테크리더라는게 사실 무슨 의미인가 싶지만,

이러나 저러나 모든 권한을 얻어서 내가 처음부터 끝까지 모든 과정을 해봤다는게 의미있었다.

기획, 디자인, 프엔개발, 백엔api개발, 배포까지.. 처음부터 끝까지 내가 다 관여하고 마무리지었다.

문제점에 따른 해결방안을 구상해보았다.

팝업창과 고정형UI, 작은 모니터에 따른 UX는 새로운 UI기획으로 해결할 수 있을거라고 생각했다(=프론트엔드)

모델1 아키텍처로 구성된 레거시코드는 MVC패턴으로 우선 분리를 시켜야 했다(=백엔드)

기획과 디자인은 대표님과 같이 했지만,

지금와서 드는 생각은 디자이너를 구해서 진행했으면 더 예쁘지 않았을까 하는 아쉬움이 좀 남는다

우선 프엔을 시작하기에 앞서 백엔드가 더 먼저 필요했다.

물론 UI도 중요하지만 데이터를 뿌리면서 프엔UI를 잡아가야했기 때문이었다.

이 백엔드가 사실 어디서부터 잡아야하는가 고민이 많았다.

레거시 코드만 몇 십만줄이 넘어가는데, 이걸 REST API로 바꾸기 위해서는 어떤방법이 있는지,

MVC로 어떻게 분리해야하나,

classic ASP를 JSON으로 어떻게 분리해야하는지 결국에는 찾아냈다.

그래서 결국 기존 레거시 로직들을 살리되 JSON으로 REST API를 만들었다

REST API로 받아온 백엔드 데이터를 가지고 프엔 작업을 시작했다.

UI작업을 마치고 우선 가장 이슈였던 반응형을 완성했다.

한페이지로 구성되기 때문에 레거시가 가지고 있던 문제를 한번엥 해결할 수 있었다.

vuework

Vue.js에서 기존 레거시에 가지고 있는 모든 기능을 전부 재구현했다.

2년동안 정말 많은 문제와 에러들이 있었지만 결국은 전부 해결했다

💐 완성작을 보고싶으면 https://soraji.github.io/work/2022/01/02/vuework/ 💐