디자인시스템을 직접 만들어보면 첫 번째 갈림길이 생각보다 빨리 찾아온다. Ant Design 같은 완성형 컴포넌트 라이브러리를 기반으로 갈지, Radix UI 같은 헤드리스 라이브러리 위에 직접 쌓을지.
커뮤니티에서는 "헤드리스가 트렌드고 완성형은 레거시" 같은 얘기가 자주 보인다. 그런데 막상 직접 만들어보니 어느 쪽이 더 낫냐를 따질 문제가 아니더라. 뭘 만드느냐에 따라 답이 완전히 달라진다.
완성형은 그냥 된다
Ant Design, MUI, Chakra UI. 이런 라이브러리의 가장 큰 매력은 분명하다. 컴포넌트를 꺼내 쓰면 그냥 동작한다. Table, DatePicker, Modal처럼 복잡한 것도 import 한 줄이면 끝이다.
특히 어드민 대시보드나 사내 툴을 만들 때는 이 속도를 이기기가 어렵다. 디자인 가이드가 따로 없어도 일관된 화면이 나오고 접근성이나 키보드 조작 같은 것도 대부분 처리되어 있다. 일단 돌아가는 화면이 필요할 때 이만큼 빠른 선택은 없다.
솔직히 이 정도로 충분한 프로젝트도 꽤 많다. 브랜드 컬러만 바꾸면 되는 상황이라면 굳이 바닥부터 쌓을 이유가 없다.
근데 커스텀이 필요해지는 순간이 온다
문제는 브랜드 컬러만 바꾸면 되는 상황이 오래 가지 않는다는 거다. 프로덕트가 커지고, 디자이너가 합류하고, 우리만의 느낌이 필요해지는 때가 온다.
그때 완성형 컴포넌트가 막힌다. Select의 드롭다운 애니메이션을 바꾸고 싶은데 내부 구조가 닫혀 있다. DatePicker의 레이아웃을 조금 바꾸고 싶은데, 토큰으로 값을 바꾸는 건 돼도 원하는 지점을 정확히 바꾸기는 어렵다. CSS를 억지로 덮어쓰면 되기는 하는데 하필 라이브러리 버전을 올릴 때마다 깨진다.
라이브러리가 생각해둔 범위 안에서는 자유롭지만 그 밖으로 나가려는 순간부터 계속 씨름하게 된다. 내가 컴포넌트를 다루는 게 아니라 컴포넌트 구조에 맞춰서 디자인을 깎고 있더라. 그쯤 되면 뒷맛이 씁쓸하다.
헤드리스는 동작만 준다
헤드리스 UI 라이브러리는 생각이 아예 다르다. Radix UI, Headless UI, Ark UI 같은 라이브러리는 스타일을 아예 주지 않는다. 대신 컴포넌트가 어떻게 동작해야 하는지만 책임진다. 포커스 관리, 키보드 이동, WAI-ARIA 패턴. 눈에 안 보이지만 직접 만들어보면 도통 끝이 안 나는 것들이다.
겉모습은 전부 내가 만들어야 한다. 그래서 디자이너가 어떤 시안을 들고 와도 "이건 라이브러리 구조상 안 돼요" 할 일이 없다. Select가 카드 모양이든 모달이 시트처럼 올라오든, 동작은 헤드리스가 잡아주고 겉모습은 내가 자유롭게 입힌다.
브랜드가 중요한 B2C 프로덕트나 디자인시스템을 처음부터 직접 만들려는 팀이라면 이 자유는 없으면 곤란하다.
자유롭다는 건 다 직접 해야 한다는 뜻이다
헤드리스가 주는 자유는 공짜가 아니다. 스타일이 없다는 건 모든 스타일을 직접 만들어야 한다는 뜻이니까.
버튼 하나의 hover, focus, disabled 상태. Select가 열리고 닫히는 애니메이션. 모달 오버레이의 딤 처리. 완성형 라이브러리에서는 신경 쓸 필요 없던 걸 하나하나 챙겨야 한다. 디자인 토큰도 직접 설계해야 하고 컴포넌트끼리 생김새가 어긋나지 않게 계속 관리해야 한다. 이게 은근히 손이 많이 간다.
그래서 결국 시간이랑 사람이 있냐 없냐로 정리된다. 디자인시스템을 설계할 수 있는 사람이 팀에 있는지, 그만큼 시간을 쓸 여유가 있는지. 자유롭게 만들 수 있다는 것과 잘 만들 수 있다는 건 다른 얘기다.
어드민 하나 빠르게 찍어내야 하는 상황이라면 헤드리스부터 시작할 이유가 없다.
뭘 만들고 있느냐에 달렸다
완성형이 나쁜 것도 아니고 헤드리스가 무조건 나은 것도 아니다. 둘 다 장점이 분명하고 그 장점이 통하는 상황이 다를 뿐이다.
브랜드 커스텀이 크게 필요 없는 대시보드나 어드민이라면 완성형의 속도를 이길 방법이 거의 없다. 반대로 프로덕트의 겉모습을 직접 만들어야 하는 상황이라면 결국엔 헤드리스가 남는 장사다. 완성형 위에서 디자인을 억지로 구겨 넣느라 쓰는 시간이 처음부터 자유롭게 만드는 시간보다 길어지는 순간이 오니까.
그러니까 중요한 건 요즘 뭐가 트렌드인지가 아니라 지금 내가 뭘 만들고 있는지다. 여기에 솔직하게 답하면 고민이 짧아진다.
참고 자료
- Ant Design, 완성형 컴포넌트 라이브러리의 대표 사례
- Radix UI, 헤드리스 접근의 대표 사례