October 31, 2024

UI 라이브러리의 역사

오늘날 웹 생태계에는 다양한 UI 라이브러리가 널리 쓰이고 있습니다. 하지만 2000년대 초반까지만 해도 이런 도구들은 거의 찾아볼 수 없었습니다. 그 당시 웹 개발자들은 버튼, 폼, 레이아웃과 같은 기본적인 UI 요소를 모두 직접 구현해야 했고, 그 결과 세련된 웹사이트를 만드는데 많은 시간과 비용이 소모되었습니다.

UI 라이브러리의 등장은 웹 개발 방식에 큰 변화를 가져왔습니다. 이제 개발자들은 디자인적인 부분을 신경쓰지 않아도, UI 라이브러리를 사용해 빠르게 세련된 웹사이트를 만들 수 있게 되었습니다. 그로인해 웹 개발 생산성이 크게 향상되었습니다. 이 글에서는, 웹 개발 생산성 향상에 큰 기여를 한 UI 라이브러리들이 과거부터 현재까지 어떻게 변화해오고 있는지 1세대에서 4세대로 구분해 살펴보겠습니다.

1세대: Bootstrap의 등장

Twitter의 개발자 Mark Otto와 Jacob Thornton이 내부 프로젝트에서 빠른 프로토타이핑을 위해 개발한 Bootstrap이 오픈소스로 공개되며 웹 개발 커뮤니티에서 폭발적인 반응을 얻었습니다.

Bootstrap은 .btn, .card와 같은 미리 정의된 CSS 클래스를 제공하여 개발자가 이 클래스를 HTML에 적용하기만 해도 일관성 있는 디자인을 손쉽게 구현할 수 있게 했습니다.

Bootstrap 예시 이미지
Bootstrap 예시: '.card', '.card-body', '.btn'과 같은 클래스를 HTML에 적용해 사용합니다.

Bootstrap이 성공을 거두면서 다양한 테마와 스타일을 가진 UI 라이브러리들이 연이어 등장했고, 웹 개발 방식에 새로운 흐름을 만들어냈습니다.

대표적으로 Bootstrap, Semantic UI가 있습니다.

Bootstrap과 Semantic UI
왼쪽: Bootstrap(2011년 8월 첫 릴리즈), 오른쪽: Semantic UI (2013년 9월 첫 릴리즈)

2세대: 컴포넌트형 UI 라이브러리

초기 UI 라이브러리들은 주로 CSS 클래스 기반으로 스타일링을 했습니다. 그러나 이 방식은 HTML에 여러 태그와 클래스명을 반복적으로 추가해야 했고, 프로젝트가 커질수록 유지보수가 어려워졌습니다.

이때 Vue, React, Angular 같은 SPA(Single Page Application) 프레임워크들이 등장하면서 컴포넌트 기반 개발이 주류가 되었고, UI 라이브러리들도 <Card />, <Button />처럼 컴포넌트 형태로 제공되기 시작했습니다.

Material UI 예시 이미지
Material UI 예시: 복잡한 HTML 없이 '<Card />' 컴포넌트에 속성만 추가해 사용합니다.

이러한 컴포넌트형 UI 라이브러리는 코드의 재사용성과 유지보수성을 크게 높였으며, 더 직관적인 코드 구조로 개발 생산성을 향상시켰습니다. 대표적인 예로 Material UI, Element UI, Vuetify가 있습니다.

3세대: 커스터마이징, Tailwind CSS 친화형 UI 라이브러리

UI 라이브러리들이 웹 개발 생산성을 크게 높이며 웹 개발의 필수 요소가 되었습니다. 하지만 각 UI 라이브러리들은 고유의 스타일을 가지다 보니 원하는 디자인을 자유롭게 반영하기 어렵다는 문제가 존재했습니다. 이로 인해 개발자들은 UI 컴포넌트를 더 자유롭게 커스터마이징할 수 있는 기능을 원하게 되었습니다.

이런 흐름 속에서, Tailwind CSS의 인기도 상승하면서, 손쉽게 스타일을 조정하고 커스터마이징할 수 있고, Tailwind 친화적인 UI 라이브러리들이 등장하기 시작했습니다.

Tailwind CSS 다운로드 수 그래프
2021년부터 Tailwind CSS 다운로드 수가 상승세를 보이고 있다.

컴포넌트형

기존 2세대 컴포넌트형 UI 라이브러리는 기능과 스타일이 강하게 결합되어 있어 커스터마이징이 어려웠으며, 스타일을 변경하려면 라이브러리 소스 코드를 수정해야 했습니다.

이런 문제들을 해결하기 위해 등장한 것이 Headless 스타일의 UI 라이브러리 입니다. Headless 스타일 UI 라이브러리는 컴포넌트의 기능만을 제공하고, 스타일은 개발자가 직접 정의할 수 있도록 만들어졌습니다. 이를 통해 개발자는 컴포넌트의 기능을 만들어야 되는 비용을 아끼면서 스타일은 자유롭게 할 수 있게 되었습니다. 대표적인 예로 Headless UI와 Radix UI가 있습니다.

Radix UI 예시 이미지
Radix UI 예시: 컴포넌트 형식으로 사용하면서, 각 컴포넌트에 스타일을 위해 Tailwind CSS의 유틸리티 클래스를 사용하고 있습니다.

Tailwind CSS 친화형

Tailwind CSS의 인기가 상승하면서 Bootstrap 처럼 클래스 속성으로 스타일을 정의하지만, Tailwind CSS 유틸리티 클래스를 사용해서 스타일을 정의하는 UI 라이브러리입니다. 대표적인 예로 Daisy UI, Versoly UI, preline가 있습니다.

Daisy UI 예시 이미지
Daisy UI 예시: 1세대 Bootstrap과 사용법이 비슷하지만 Tailwind CSS의 유틸리티 클래스를 사용하고 있습니다.

4세대: 코드베이스 설치형 UI 라이브러리

2세대 UI 라이브러리는 커스터마이징에 제약이 많았고, 3세대 UI 라이브러리는 자유롭게 커스터마이징할 수 있지만, 모든 스타일을 개발자가 직접 관리해야 하는 어려움이 있었습니다. 이 문제를 해결하기 위해 등장한 것이 바로 shadcn/ui입니다.

shadcn/ui 로고

shadcn/ui는 기존의 node_modules UI 라이브러리를 설치 방식 대신, shadcn/ui에서 각 UI 컴포넌트에 자신들의 테마를 입힌 컴포넌트 코드를 제공하면 웹 개발자는 해당 UI 컴포넌트 코드를 자신의 코드베이스에 직접 복사해 사용하는 방식입니다. 자신의 코드베이스에 UI 컴포넌트 코드가 포함되기 때문에 개발자는 컴포넌트의 스타일과 기능을 자유롭게 조정할 수 있게 되었습니다. 그리고 Tailwind CSS를 기반으로 스타일링이 되어있어 Tailwind CSS에도 굉장히 친화적입니다.

shadcn/ui는 자체 개발된 컴포넌트가 아닌, 다른 UI 라이브러리의 컴포넌트를 활용하여 그 위에 shadcn/ui 테마를 적용하고 관련된 UI 컴포넌트 코드를 제공합니다. 주로 Radix UI의 컴포넌트를 사용하지만, 특정 컴포넌트에 얽매이지 않고 상황에 따라 다른 UI 라이브러리를 활용하기도 합니다.

또한, shadcn/ui는 단순히 컴포넌트를 제공하는 것에 그치지 않고, CLI 도구를 통해 개발 경험(DX)도 향상 시켰습니다. shadcn/ui CLI를 통해 필요한 UI 컴포넌트를 손쉽게 코드 베이스에 추가할 수 있어, UI 컴포넌트 코드를 복사, 붙여넣기 한다거나 의존성 있는 라이브러리들을 모두 설치해야 되는 과정없이 빠르게 shadcn/ui의 UI 컴포넌트를 사용할 수 있게 했습니다.