프론트엔드 UI 라이브러리를 사용하는 이유
프론트엔드 UI 라이브러리를 사용하는 이유
최근에 진행한 noveloper 프로젝트에서는 UI 라이브러리인 mantine을 사용하였습니다.
외에도 저는 지금까지 진행해온 대부분의 프로젝트에서 bootstrap, shadcn, daisyUI, NextUI 와 같은 프론트엔드 UI 라이브러리를 사용해왔습니다.
그렇다면 왜 이러한 라이브러리를 사용했을까요?
바퀴를 재발명할 필요는 없다.
직접 모든 컴포넌트들을 구축하고 처음부터 스타일링 하는 것은 쉬운 일이 아닙니다.
만약 CSS를 이용하여 디자인적으로 훌륭한 컴포넌트들을 만들었다고 할 지라도 디자인 뿐만 아니라 브라우저 호환성, 접근성, 반응형 디자인, 성능과 같은 사항들을 모두 고려해야 합니다.
UI 라이브러리들에서는 이런 것들을 고려하여 테스팅하고 컴포넌트들을 개발하고, 커뮤니티를 통해 유지보수 되므로 혼자서 모든 것을 처리하는 것보다 효율적으로 해결할 수 있습니다.
(mantine은 24.7k의 스타를 가졌지만 이슈는 단 24개인 것을 보니 얼마나 유지보수가 잘 되고 있는지 알 수 있습니다.)
또한, 미리 만들어져 있는 컴포넌트를 사용하여 프로젝트를 빠르게 프로토타이핑 할 수 있습니다.
프론트엔드 개발자와 디자이너
저는 디자인을 잘 하지 못합니다.
하지만 프론트엔드 개발자로서 유저들에게 깔끔한 UI를 제공하는 것은 항상 고민되는 부분이였습니다.
서로 다른 UI 컴포넌트들이 일관성을 가지게 하는 것은 쉬운일이 아닙니다.
UI 라이브러리는 일반적으로 일관된 디자인을 가지고 있으며, 깔끔하고 정돈된 디자인을 보이기 때문에 베이스 디자인으로 삼기에 훌륭합니다.
디자인 시스템과 커스터마이징
그렇다고해서 UI 라이브러리를 사용한 모든 프로젝트가 같은 디자인을 가지게 되는 것은 아닙니다.
대부분의 라이브러리들에서는 컴포넌트 별 커스터마이징 기능과 더불어 프로젝트 전체에 대해서 커스터마이징 할 수 있도록 테마를 수정하는 기능을 제공하기 때문에 각 프로젝트에 맞는 디자인 시스템을 구축할 수도 있습니다.
예를들어, 인프랩의 디자인시스템 구축 에서는 왜 디자인 시스템을 오픈소스인 mantine을 베이스로 개발했는지에 대한 이유를 알아볼 수 있습니다.
단점
그렇다면 UI 라이브러리를 사용하는것은 항상 옳을까요?
다음과 같은 단점들에 대해서도 생각해 볼 필요가 있습니다.
오픈 소스: 오픈 소스들은 언제나 유지 보수가 중단될 수 있는 위험을 가지고 있습니다. 또한, 오픈 소스의 개발 방향이 프로젝트가 원하는 방향과 다를 수 있습니다.번들 크기: 라이브러리의 모든 컴포넌트가 코드에 포함되어 성능 문제가 발생할 수 있습니다.종속성: 해당 UI 라이브러리가 다른 라이브러리에 종속성을 가지고 있다먼 버전 업데이트시 문제가 발생할 수 있습니다.학습 곡선: 해당 라이브러리에 대해 팀이 학습하는 시간이 필요합니다.
따라서 팀원간의 대화를 통해 프로젝트의 요구사항을 고려하여 UI 라이브러리에 대한 선택을 하는 것이 좋아보입니다.
결론
프로젝트를 진행하면서 다양한 UI 라이브러리를 사용해왔지만 그 이유로 단순히 편하다 라고만 생각했었습니다.
이번 글을 포스팅하며, 다른 개발자들의 UI 라이브러리 사용에 대한 생각들을 알아보고 정리하며 머릿속으로 생각했던 이유들이 깔끔하게 설명되는 것 같습니다.