프로젝트
Markup
React 퍼블리싱 100%
2023.05.02 ~ 2023.09.27
KB라이프 차세대 프로젝트 참가
담당업무
이미 React를 사용하여 작업된 기 페이지들을 기준으로 수정 및 요구사항에 따른 신규페이지 작업을 진행. 개발자들의 업무 편의를 위해 기획서 기준의 페이지를 React를 사용한 마크업 업무를 담당하였다. 간만의 기간계 프로젝트였는데 대민서비스가 아닌 백오피스 계열은 대체로 디자이너를 크게 필요로 하지 않기 때문에 약간의 UI적인 부분을 겸하였다.
실제 프로젝트 오픈은 좀 더 뒤에 이루어지지만 마크업 작업은 일단락되어서 프로젝트에서 나오게 되었다. 폐쇄망 작업이고 외부오픈이 아닌 내부에서 사용되는 기간계 프로젝트라서 마크업보다는 개발적인 요소가 큰 프로젝트였다.
도전해 본 것들
무엇보다 React를 사용한 것이 가장 큰 도전이었다 할 수 있겠다. 계속해서 차세대 프로젝트에 참가할 수 있는 기회를 보며 조금씩 공부를 하던 것이 효과를 볼 수 있었던 좋은 기회였는데 혼자 공부하던 것들이 실전에서 얼마큼 효용성이 있는지 확인해 볼 수 있었던 귀중한 시간이었다.(처음 실전 프로젝트라서 가치가 있었다)
새로 배운 것들
역시 도전과 직결되는 실제 프로젝트에서 React를 다뤄본 것이 제일 크다. 그리고 React의 대표적인 프레임워크 중 하나인 Mui였다.
누구나 공감하듯 공부하는 것과 실제로 프로젝트에서 경험하는 건 큰 차이가 있다. 인강이나 책을 보며 혼자서 파고들던 내용들이 실제로 프로젝트에서 사용되는 것을 보며 초반에는 약간 멘붕상태였으나 다행히 흐름을 파악하니 보이는 것들이 있어 이것저것 적용해 보는 과정을 경험할 수 있었다.
그나마 다행이었던 것은 Mui를 사용하고 있지만 프레임워크에 대한 의존도가 낮고 순수하게 React를 사용하여 진행된 프로젝트여서 두 가지가 다른 점도 알 수 있었다. 역시 프레임워크용 Tag를 사용하는 것과 순수하게 사용하는 Tag의 차이점은 알아둘 필요가 있었다. 기본적인 것들을 사용할 수 있게 되니 프레임워크의 코드 구조나 사용법은 크게 시간을 필요로 하지 않았던 것 같다. 일부 Mui에 익숙한 개발자는 마크업 요청을 하지 않고 Mui로 작업 후 스타일 조정만을 요청하기도 해서 수월하게 작업을 하기도 했었다.
useState, useEffect, useRef 등의 Hook은 책이나 인강을 통해 배웠던 심플한 구조가 아니라 여러 개발자들과 함께 사용되는 유기적인 코드상에서 사용되는 차이점을 익힐 수 있었는데 기본적인 개념이 사전에 탑재되어 있지 않았다면 프로젝트에 지장을 줄뻔했다. 개발자마다 선언하는 방법도 약간씩 다르고 소스를 import 시키는 방식도 다르고 주석도 다르게 적용하다 보니 파일을 찾아 가는데 약간 애를 먹었던 것 같다.
아쉬운 점
이번 프로젝트에서 아쉬웠던 점은 어디나 있는 문제와 별 차이가 없었다. 고질적인 문제는 항상 있었으니까. 단지 지금까지의 프로젝트와의 차이점이라면 프로젝트에 대한 공헌도가 지금까지의 프로젝트보다 현저히 낮았던 부분이 아쉬웠다. 할당된 업무는 충실히 이행했고 요구사항에 대한 작업도 별다른 문제없이 진행했다. 개인적으로 가지고 있는 욕심 또는 이상보다 가지고 있는 낮은 실력에 따른 아쉬움에 다른 부분들은 문제가 되지 않았던 것 같다.
가지고 있는 지식수준에서 봤을 때 차이가 있겠지만 Redux는 실제로 가져다 사용하는 방식에는 문제가 없었다. 일부 페이지간 연결을 위해 dispatch 시키는 방법은 익숙해지는데 오래 걸리지 않았는데 개발자가 작업한 구조를 이해하면서 일정 부분 가능했었던 것 같다. 단지 근본적인 부분을 이해하는 데는 한계가 있었다. 이상하리만치 머리에 들어오지 않던 것들... router, store, screen 등등 소스를 따라 움직이면 어떤 식으로 연결되어 있는지는 알겠는데 가장 근간이 되는 것에 대한 이해력 부족에서 오는 약간의 좌절감이 흥미를 떨어뜨리는 결과까지 초래하고 있어서 아쉬웠던 것 같다. (프로젝트 종료 전 개발자에게 이런 내용을 상담하니 다른 프로젝트보다 기존에 작성된 Redux의 사용방식이 조금 꼬여있어서 초보자가 이해하기에는 어려움이 있을 수밖에 없는 구조였다고 했었는데 위안아닌 위안으로 삼았다..)
마무리
점점 프런트앤드의 업무 비중이 높아지는 것을 알 수 있다. 적어도 하나는 제대로 익혀두어야 하고 관련 언어들에 대한 지식이 선택에서 필수로 자리 잡아가고 있다.
프로젝트의 정식명칭은 'KB라이프생명보험 애플리케이션 운영 아웃소싱 프로젝트'이지만, 간단히 'KB라이프 차세대 프로젝트'라 할 수 있겠다. 차세대라고 하는 이유는 차세대로 지칭되는 프로젝트들이 Vue, React, Angulr를 기본 언어로 사용하고 있어서였다. 어쨌건, 새로운 언어를 사용해 볼 수 있는 새로운 기회를 좋은 분들과 좋은 환경에서 경험할 수 있었던 시간이었다.
아직 React 자체는 초보 수준이지만 그동안의 마크업 경험이 무시할 것은 아니라는 것을 확인할 수 있었다. 결국 화면에 보이는 각 DOM 요소들을 꾸미는 데는 아직도 마크업 경험이 필요하기 때문이었다. 차세대프로젝트용 언어의 특성상 컴포넌트에 대한 이해가 부족하다면 작업이 어려울 수밖에 없는 구조를 하고 있는데 컴포넌트 관리에 대해 계속 관심을 가지고 있었던 덕분에 적응에 무리가 없었던 것 같다. 예전 Vue를 경험했었던 것도 도움이 되었다.
점점 프로젝트들의 프레임워크 의존도가 높아지고 있는 것 같다는 생각이 든다. 일장일단이 있겠지만, 개발자들이 프레임워크를 숙지하고 있다면 마크업 작업자가 필요 없고 개발속도가 빠를 것 같다. 하지만, 일부 프로젝트를 제외하고 윗선의 결제를 필요로 하는 모든 프로젝트들은 디자인에 민감할 수밖에 없다. 백그라운드의 동작도 중요하지만, 프레임워크에 의존될 경우 디자인이 템플렛에 의존되거나 평범해지며 고객사의 브랜드아이덴티티를 나타낼 수 없는 경우가 발생하기 때문에 비주얼적인 부분을 무시할 수 없게 되고 이런 작업을 위해선 결국 프런트 작업자의 위치가 사라질 수는 없을 것 같아 보였다. 당분간은 마크업 엔지니어(퍼블리셔)의 위치는 괜찮을지도 모르겠지만, 최종적으로는 프런트앤드로 전향이 필수불가결이라 생각된다. 과제가 많이 남았다.