Replit의 디자인 시스템, RUI 구현하기

Replit은 소수의 엔지니어와 디자이너가 수백만 명의 사용자를 지원하기 위해 생산성을 극대화할 수 있는 도구에 투자해 왔다. 그 결과물로 디자인 시스템인 RUI를 구현했다.

기존에는 디자이너의 업무 과중, 제품 전반의 UI 불일치, 그리고 Avatar 컴포넌트가 7개나 존재할 정도로 코드 재사용이 어려운 문제가 있었다. 이를 해결하기 위해 90%의 요구사항을 충족하면서도 사용하기 쉽고, 필요할 때 CSS의 강력한 기능을 온전히 활용할 수 있는 시스템을 목표로 삼았다.

RUI 구축을 위해 다음과 같은 다양한 기술적 접근 방식을 검토했다:

• styled-jsx: 구현은 쉽지만 컴포넌트 재발명을 유도하고 컴포지션이 어렵다.
• Styled Components: 타입 지원과 가독성이 뛰어나지만 빠른 프로토타이핑에는 번거롭다.
• Tailwind: 생산성이 높고 제약된 스타일링을 제공하지만 학습 곡선이 존재한다.
• Style props (Chakra UI 방식): 타입 안정성은 높으나 도메인 로직과 스타일이 섞이고 CSS 제어가 어렵다.
• CSS prop (Emotion 방식): 직관적인 컴포지션이 가능하지만 Babel 설정이 필요하고 코드가 길어질 수 있다.