프로젝트
Markup
Vue3 퍼블리싱 100%
2024.08.26 ~ 2025.01.31
Vue.js 버전 3을 사용한 프로젝트에 참가
담당업무
기존에 작업되어 있던 프로젝트의 마크업을 전면 개편(컴포넌트의 단순화)
도전해 본 것들
Vue3를 실제 프로젝트에서 사용해 보면서 많은 것들을 배울 수 있었다. 확실히 혼자 인강을 보면서 하는 것과 실제 프로젝트에서 코딩을 하면서 정보를 확인하면서 익히는 과정은 차이가 날 수밖에 없는 것 같다. 굳이 이 차이를 표현하자면 긴장감이라고 할까.
프로젝트는 기존에 마크업을 담당하는 사람이 없이 진행된 프로젝트였다. 중간에 수정작업등이 필요했지만 비마크업 담당자들이 이것저것 손대면서 대응하던 소스여서 상당히 난해한 마크업이 여럿 존재하고 있었던 프로젝트다. 일례로 피그마에서 자동으로 생성시켜 주는 코드를 그대로 프로젝트에 적용하면서 작업을 진행하는 케이스였는데. example-123456와 같은 큰 의미가 없는 클래스들이 양산되어 있었고 클래스명은 다르지만 동일한 속성을 가진 CSS가 다수 존재했다. 또한 Vue.js 특성상 Vue 파일에 html, script, css를 공존시키는 경우가 있는데 css를 scss 형식으로 작업해 놓으면서 선언부에는 scss를 선언하지 않는 등 화면 렌더링에 오류를 유발하는 마크업까지 있었다.
무의미하게 depth를 깊게 한 컴포넌트 다수 존재해서 프론트를 담당하는 개발자와 상의하여 조금씩 병행하기도 했지만 크게 4번의 배포과정을 거치며 소스를 정리시켜 나갔다.
- 굳이 사용하지 않아도 되는 부분을 props 로 제어하는 컴포넌트들을 싹 걷어 내면서 depth를 간소화시키는 작업.
- 선언이 잘못되어 있거나 중복 선언되는 클래스들을 정리하는 작업
- 파일에 포함되어 있는 scss를 외부 폴더로 이동시키면서 각각의 Vue 파일에서 scss를 직접 연결시키는 코드 제거
- 반응형 작업
새로 배운 것들
마크업을 전문으로 하면서 프로젝트에서 프론트엔드를 직접 해 볼 수 있는 기회는 흔하지 않다. 일을 넘기지도 않거니와 그 뒷감당을 누군가는 해야 하기 때문에 정말 이상적인 환경이 아니라면 실질적으로는 거의 불가능에 가까운 이야기다. 그런 불가능한 일이 생겨서 이번에 프런트엔드 초급 일을 조금 해볼 수 있었다.
마크업을 하면서 선작업용으로 만드는 더미 데이터가 아닌 실제 데이터를 호출해서 작업하고 운영 배포까지를 해볼 수 있었다. 무척 귀한 시간이었으며 고려해야 할 것이 많은 일이었기에 어렵지만 재미있는 것을 많이 해볼 수 있었다. 인강 등을 통해 따라 하면서 하는 것과 실제 운영에 반영될 작업을 하는 건 작업에 대한 태도가 달라지기 때문에 일단 긴장되는 일이 많이 있었다. CRUD를 전부 한 번씩 해보는 것을 목표로 잡았었지만, 계약기간이 연장되지 않으면서 Create 부분까지만 해볼 수 있었던 것이 못내 아쉽다.
아쉬운 점
시간이.. 시간이 조금만 더 있었더라면..
각 단계를 거치면서 배운 것도 많이 있지만 계약기간의 문제로 남은 과제를 해결하지 못한 것이 못내 아쉽다. 여러 사정으로 오픈하지 못했던 서비스가 오픈될 경우 스타일 대응을 못하는 것과 분리시켰던 css를 Vue에 적합하도록 다시금 scope를 적용하여 정리시키는 작업까지 마무리를 하지 못한 것은 무척 아쉽다.
프리랜서를 하면서 가끔씩 느끼는 아쉬운 점이 이런 부분이라는 생각이 들었다. 계약 문제만 아니라면 좀 더 이상적인 형태로 만들 수 있었을 텐데라는 아쉬움은 항상 남는 것 같다.
프로젝트는 기본적으로 삼성SDS의 독자적인 OPUS 표준가이드를 기준으로 작업이 진행되었으며 익숙하지 않은 부분들도 있었지만 기존 개발된 페이지들이 이미 있었기 때문에 데이터와 연관된 Form 요소 대부분은 현재를 유지하면서 레이아웃과 관련된 부분과 모달, 스와이프등 일부영역에 대해 개발과 상의하여 Opus를 배제하고 순수하게 Vue.js를 사용하여 작업을 진행하기로 하였다. 시간이 허락했다면 Opus를 좀 더 제대로 적용했을 텐데 아쉽긴 하다.
마무리
항상 아쉬움이 남는다. 아쉬움이 남지 않도록 가열하게 달리는 방법도 있겠지만 나 혼자 달린다고 해결되는 일도 아니기에 어쩔 수 없다면 어쩔 수 없는 부분이겠다.
Vue3를 실전에서 사용하며 데이터를 다루고 스크립트로 제어하고 복잡하게 꼬여있던 파일을 해체하고 재구성하는 과정까지 단순 퍼블이 하는 일의 범위는 꽤 넘겨서 일했고, 개인적으로 가지고 있는 아쉬움이야 어쨌건 간에 최종적으로는 고객이 원하는, 만족스러워하는 수준까지는 만들었다는 것을 위안으로 삼는다.