UI 컴포넌트의 설계가 중요한 이유

프론트엔드 개발에서 UI 컴포넌트는 개발자들이 기능 개발에만 온전히 집중할 수 있도록 해 줍니다. 요구사항에도 더 빨리 대응할 수 있게 되기 때문에 프론트엔드 개발의 생산성을 높여주는 토대 역할을 한다고 생각합니다.

건물을 지을 때 지반을 단단하게 다져야 건물이 쉽게 무너지지 않는 것처럼, UI 컴포넌트도 설계가 잘 되어 있어야 생산성이 높아지고 문제 발생의 가능성이 줄어듭니다. 그래서 UI 컴포넌트를 만들 때는 재사용성과 확장성은 물론이고 성능까지 고려해서 만들어야 합니다.

그렇기 때문에 노하우가 중요하고 전문성이 필요한 분야이지만, 생각보다 UI 컴포넌트를 단순히 재사용할 수 있는 CSS 모음집 정도로만 여기는 분들이 많은 것 같습니다. 개인적으로 아쉬움을 느끼는 부분입니다.

좋은 컴포넌트는 개발 속도를 향상시킨다

아래 그래프는 시간이 흐르며 소프트웨어의 품질에 따라서 어떤 차이가 발생하는지를 표현한 것입니다.

품질에 신경을 쓰면 초반에는 개발 속도가 늦어지지만, 유지보수와 기능 추가가 용이하기 때문에 시간이 흐르며 생산성이 점점 크게 높아집니다. 반면에 급하게 개발을 한다고 품질에 신경을 쓰지 않으면 장기적으로 생산성을 높이기 어렵습니다. 당장에는 더 빠르게 개발을 하는 것처럼 보이지만 시간이 흐르며 코드가 복잡해져서 유지보수가 점점 더 어려워지기도 하고, 기능 추가 및 변경에도 공수가 갈수록 더 많이 들게 되기 때문입니다. 이것이 좋은 컴포넌트가 중요한 이유입니다.

UI 컴포넌트도 마찬가지입니다. 설계를 초기에 잘 해두지 않으면 디자인 변경에 대응하기 힘들어집니다.

“헉... 이 컴포넌트는 만들 때는 디자인이 이렇게 바뀔 수 있다는 걸 고려한 게 아니라서 수정하기 어려운데… 어떡하지…?”

FE 개발자라면 이런 경험이 한번쯤은 있지 않을까요? 최근에 기능 개발을 하면서 비슷한 경험을 했습니다. 디자인 시안에 이전에 만들어놓은 UI 컴포넌트가 있어서 그대로 사용하면 될 줄 알았는데, 막상 쓰려고 하니까 그 컴포넌트를 쓰면 요구사항을 구현할 수가 없었습니다. 그래서 급하게 처음부터 UI를 만들어야 했습니다... 이럴 때는 당황스럽기도 하고, 기능 개발에만 온전히 집중하기도 어렵습니다. 이런 일이 일회성이라면 괜찮겠지만 여러 개발자들의 작업에 걸쳐서 반복적으로 발생한다면 생산성에 지장이 생길 수 밖에 없습니다. 그래서 잘 만들어진 UI 컴포넌트가 FE 개발 환경에 중요하다는 것입니다.

UI 컴포넌트도 지속적인 유지보수가 필요하다

회사에서는 시간이 곧 돈입니다. 그래서 보통은 UI 컴포넌트 설계같이 개발의 기초 체력을 향상시키는 부분보다는 매출을 발생시킬 수 있는 기능 구현이 최우선 목표가 되기 마련입니다. 현실적으로 UI 컴포넌트 설계를 개선하는 시간을 달라고 회사에 당당하게 말하기는 어렵죠… 설득을 하려면 이 개선을 통해 개발 효율이 몇%정도 향상될 거라고 명확한 근거를 제시해야 할 텐데, 이걸 명확하게 수치화하기가 곤란합니다. 그래서 이런 작업을 회사 차원에서 의지를 가지고 하는 곳은 매우 드물 수 밖에 없습니다. 시간과 자원의 여력이 있는지의 문제도 있을 테고요. 작업의 중요성을 아는 동시에 충분한 자원까지 가진 소수의 IT 대기업들이 아니고서야 이런 부분에는 소홀한 것이 어쩌면 당연할지도 모릅니다.

하지만 회사에 여력이 없거나 회사 차원에서 중요한 작업이 아니라고 여기는 것이 그럴만한 일이라고 해서 좋은 UI 컴포넌트의 가치가 사라지는 것은 아닙니다. 변화하는 디자인에 유연하게 대응할 수 있도록 설계에도 공을 들여야하고, 지속적인 유지보수가 필요합니다. 왜냐하면 저 자신과 팀원들이 모두 좋은 개발 환경에서 일을 할 수 있었으면 좋겠고, 또 회사의 생산성도 높아지기를 바라기 때문입니다. 이 글을 보시는 분들도 이 마이너한 영역에 관심을 갖고 계시기 때문에 글을 읽어주셨을텐데, 보편적으로 지지받기 어려운 길이지만 분명한 가치가 있으니 꼭 포기하지 않고 꾸준히 걸어가셨으면 좋겠습니다…!