[Mui] 과연 UI 프레임워크는 최선의 선택일까?

 

개인적으로 mui, bootstrap 등의 UI프레임워크를 써보면서 불편함을 느꼈습니다.

Mui를 사용했을 때, api를 읽고 제가 원하는 기능을 추가적으로 커스텀해야하는 상황이 생겼었는데 이 과정에서 많은 고통을 겪게 됐습니다. 많은 개발자들이 UI 프레임워크를 갖다쓰는 이유로 완성도 높은 디자인과 빠른 아웃풋을 낼 수 있는 점(생산성)을 들 것이라 생각합니다. 

어떤 기능을 따로 추가적으로 붙이거나 디자인을 변동시키지 않는다면 UI 프레임워크는 좋은 선택이 될 수 있습니다. 저는 길게 봤을 때 좋은 선택이 아니라고 느꼈습니다. 

MUI에서 제공하는 컴포넌트를 갖다 썼을 때, 내가 원하는 대로 작동하지 않으며 그 이유를 찾기 어렵고 이 과정에서 시간이 많이 소요됐기 때문입니다. api를 뒤적이며 속성을 하나하나 적용하면서 테스트해봐도 원하는 대로 동작하지 않는데 그 이유가 불분명했기 때문에 결국 해당 직접 만드는 방향으로 진행하게 됐습니다. 

 

mui를 잘 사용하는 사람도 있는데 왜 나만 이렇게 불편할까 라고 느끼면서 개인적으로 많이 부족한가 생각하며 우울해하기도 했는데요. 제가 좋아하는 프론트엔드 개발자님의 관련 아티클을 찾을 수 있었습니다. 

웹에는 모달, 드롭다운, 툴팁과 같은 강력한 '표준 라이브러리'가 없습니다. 마우스 사용자, 키보드 사용자, 화면 리더 사용자에게 모두 잘 작동하는 모달을 구축하는 것은 매우 어렵습니다.

UI 프레임워크는 사용성과 접근성 측면에서 성공과 실패를 반복하고 있습니다. 일부 라이브러리는 실제로 이 측면에서 꽤 좋은 편입니다. 하지만 대부분의 경우 이는 부차적인 문제입니다.

--(중략)---

There are tools that precisely solve the most important accessibility challenges while remaining totally agnostic when it comes to cosmetics and styles.

-[You Don’t Need A UI Framework] from Josh Comeau-

 

본문에서는 UI 프레임워크는 '사용성과 접근성'에 떨어진다고 말하고 있는데요. UI 프레임워크가 가져다 주는 이점은 확실하지만 웹의 여러 환경을 고려했을 때, 원하는 대로 동작하지 않을 가능성이 크다는 것을 의미한다고 생각합니다. 

그래서 이 사용성과 접근성에 초점을 맞춘 대안을 제시하고 있습니다. 아래의 리스트는 리액트 위주입니다. 

• Reach UI
  A set of accessibility-focused primitives for React. Built by Ryan Florence, co-creator of React Router and Remix.
• Headless UI
  A set of unstyled, fully accessible UI components for React and Vue. Built and maintained by the Tailwind team.
• Radix Primitives
  A set of unstyled, accessibility-focused components for React. This library has a very broad set of included components, lots of really neat stuff!
• React ARIA
  A library of React hooks you can use to build accessible components from scratch.

Headless UI의 경우는 저도 들어본 바가 있고 오히려 이런 작은 단위를 가져다 쓰는 것이 편리하지 않을까 싶습니다. 테일윈드팀에서 제공하고 있다는 것은 처음알게 된 사실이네요:)