Vue.js 컴포넌트 개발 과정 기록

rlaqltmxm·2021년 11월 9일
0

Vue.js

목록 보기
1/1
post-thumbnail

현재 재직중인 회사에서 나의 주요 업무인 Vue 기반의 UI 컴포넌트 개발 작업을 하면서 들었던 생각들에 대한 기록이다.


막상 처음 디자인이 주어지고 개발을 시작하면 시안에 맞게 마크업과 스타일을 찍어내는 작업은 간단하게 느껴진다. 간단하게 작업한 것에 비해 여러 화면에서 쓰이는 컴포넌트의 경우 노력에 비해 성과가 큰 것처럼 느껴져서 개발 과정도 즐거운 편이다.

모르겠으면 일단 벤치마킹을 함

Bootstrap, Vuetify 등 괜찮은 예제들을 찾자면 끝도 없어서 이 부분은 다행이었다. 벤치마킹을 해볼까 하는 생각이 드는 때는 대부분 두 경우 중 하나였다. 보통 어떻게 쓰나, 혹은 보통 어떻게 짜나.

전자의 경우 어느정도 표준이 있는 경우가 많아서 비교적 해결하기 쉬운 질문이다. 반면에 후자의 경우는 그렇지 않아서 결정장애인 나에게 까다로운 문제였는데, 예를 들면 이름짓기부터 시작해서 쪼개기, 합치기 등. 이 모든 작업을 할 때 나는 선배 개발자님께서 해주신 말 한마디를 기억한다. 모든 코드는 짜는 순간부터 레거시다.!

나만의 작고 소중한 스토리북

이런저런 시행착오를 겪으면서 디자인 시스템이라는 것에 관심이 생겼다. 배운 이론을 실무에 적용하는 것과 반대로, 일을 하다보니 이것이 어떤 정의된 시스템의 일부라는 것을 깨달아서 아차했던 순간이라고 해야 하나?

나의 UI 컴포넌트 개발 과정 전후에 storybook이라는 것을 떼놓을 수 없는데 요즘엔 정말 이것이 없을 때는 어떻게 개발을 했을까라는 생각이 든다. 나만의 작고 소중한 스토리북.. 물론 이렇게 스토리북이라는 백지에 그냥 예쁘게 배치해놓는 것과 실제 사용할 때는 또 (아주 많이) 다르기 때문에 방심해선 안된다.

이거는 로직상 시안대로 구현하기 어려워요.

이런 때야말로 정신이 혼미해지고 시니어 개발자 분들에게 대신 결정해달라고 하고 싶은 순간이다. 제니퍼라는 제품의 디자인이 작은 컴포넌트 단위부터 시작해서 점점 바뀌어가고 있는데, 이 새로운 디자인이 나로서는 정말 마음에 들고 그래서 더욱 완성도있게 잘 구현하고 싶다.

하지만 가끔 내 역량때문인지, 아니면 실제로 구현에 한계가 있기 때문인지 모르겠는 문제가 생겨서 완벽히 시안대로 뽑아낼 수 없을 때가 있다. 그 날은 그 이유가 역량 부족에 가깝다고 생각이 들어서 아주 우울한 기분이었다. 디자이너님께서는 그것으로 인해 기능 구현이 복잡해져서 시간을 할애해야 할 정도는 아닌 정도의 사소한 디테일이라고 위로해주셨다.


무엇보다 가장 즐거운 이유는 신입인 나에게 요청사항이 생긴다는 것이다. 타입 또는 기능 추가부터 시작해 변경 시에 발생 가능한 위험을 예측하는 일까지, 과정이 힘들어도 해결해내는 날에는 퇴근길 발걸음이 아주 가벼웠다. 나에게도 어떤 디펜던시가 생겼다.

새로운 스펙이니 기술이니, 이렇게 짜는 건 안티패턴이고 이런 방법이 성능에 좋더라, 등. 나는 아직까지 그럴 듯하게 써진 글만 보면 불나방처럼 달려들어 꽂혀서는, 이걸 꼭 적용해서 이전과는 다른 신세계를 보여주겠다는 주니어스러운 멋진 포부가 종종 존재감을 발휘한다. 그리고 마침내 작렬히 실패하고 나서야 그 신세계를 열기에 내가 얼마나 부족한지 또는 그것이 사실 신세계는 커녕 신기루에 가까운 것이었는지를 깨닫는다. 너무 비유가 거창했나? 아무튼 한순간 정신차려 보면 삽질하고 있다. 실패를 거듭하면서 얼른 불나방이 아닌 개발자가 되어야지, 더 잘해져야지 다짐한다.

profile
Software Engineer @LINE+

0개의 댓글