UI 라이브러리에 대한 경험

#UI 라이브러리에 대한 경험

마음에 드는 UI 라이브러리가 있으신가요?

처음 UI 라이브러리를 접한 것은 Material UI였고 그 다음은 tailwindcss 지금은 shadcn/ui입니다.

Material UI를 사용하면 디자인 직관이 없어도 스타일이 입혀진 UI 구성요소를 이용해 멋진 웹페이지를 작성할 수 있고, tailwindcss의 utility classes는 편리했으며 shadcn/ui는 내가 원하는 UI 구성요소만 꺼내 쓸 수 있으면서도 코드의 소유도 가질 수 있으니 다른 UI 라이브러리보다 더 자유로워서 좋은 개발자 경험이였습니다.

웹 생태계는 정말 정말 빠르게 변하고 발전하는 것 같습니다. 2023년에는 Material UI, 2024년에는 shadcn/ui가 UI 트렌드의 기준인 느낌이 들었습니다.

UI 구성요소를 제공해주는 라이브러리들은 정말 편리합니다. 아코디언, 모달, 툴팁 과 같이 구현하기 까다롭거나 귀찮은 일들을 이미 UI 라이브러리들이 해결해주고 우리는 그냥 구성요소를 가져다 사용하면 됩니다.

UI 라이브러리가 제공해주는 구성요소를 어느정도 많이 접해보면서 궁금한 점이 생겼습니다. UI 라이브러리가 제공해주는 UI 구성요소들 대부분은 javascript 번들이 포함되어 있는데, 해당 javascript는 UI의 동작과 상태를 위해 사용될 것입니다.

UI를 구현하는데 필수적으로 javascript 번들이 필요한걸까요?

interactive-html에 포함되는 HTML 태그(<details/>, <dialog/>)와 CSS만으로도 일부 UI 패턴은 javascript 번들을 포함하지 않고도 구현 가능할 것 같습니다. 툴팁이나 아코디언이 HTML과 CSS만 사용해서 구현 가능한 대표적인 UI 패턴이라고 생각합니다.

하지만 UI 라이브러리는 보통 <div/> 태그에서 role로 접근성과 호환성을 지원하며 UI 동작은 javascript로 동작을 처리하는게 대부분입니다.

javascript 번들이 포함된 UI 구성요소를 나쁘다고 하는 것이 아닙니다. 하지만 javascript가 없으면 더욱 좋지 않을까요? javascript가 필요한 UI는 javascript가 실행되기까지 UI가 완전히 대화형이 되는 것 사이의 지연시간이 생기는 등 문제가 있습니다. (이 문제를 Time to interactive(TTI)라고 합니다)

그렇다고 해서 CSS와 시맨틱 태그도 문제가 없는 것은 아닙니다.

호환성 문제로 브라우저마다 지원되지 않을 수 있고 확장성을 생각했을때 암묵적인 CSS와 시맨틱 태그보단 풍부하게 표현이 가능한 javascript로 동작하도록 하는게 편한 건 사실이니까요.

그럼에도 저는 해당 UI 패턴에 맞는 시맨틱 태그와 CSS를 이용해 구현했으면 하는 입장입니다. 암묵적 ARIA가 담긴 시맨틱 태그를 기반으로 UI 패턴을 만드는 것이 웹 표준을 따라가며 올바른 방향으로 가는 좋은 방법이라 생각합니다.

최대한 JS를 지양하고 CSS 문법과 HTML만을 이용하여 APG에 설명되어있는 UI 패턴을 만족하는 UI 컴포넌트를 구현해보는 시간을 가지는 것도 좋을 듯 합니다.