Frog UI는 여러 조직과 프로젝트에서 디자인 시스템과 UI 라이브러리를 직접 설계,운영해 오며 쌓인 수많은 성공과 실패 경험을 바탕으로 만들어졌습니다.
그 과정에서 “다양한 프레임워크에 사용 할 수 있게 만들것”, “각 프로젝트에 최적화된 시스템을 쉽게 만들 수 있을 것”, “실제로 사용하는 개발자의 사용하기 쉬울 것” 이라는 세 가지 원칙이 자연스럽게 정리되었고, Frog UI는 이 원칙들을 구현하기 위한 실험이자 결과물입니다.
프레임워크의 제약을 받지 않을 것
Frog UI의 핵심은 프레임워크 독립적인 CSS 레이어입니다. 스타일과 컴포넌트 동작을 분리해서, Vue,React,기타 어떤 UI 레이어와도 결합할 수 있도록 설계했습니다.
- 컴포넌트 구조와 토큰, 유틸리티 클래스는 순수 CSS와 시맨틱 네이밍을 기준으로 구성합니다.
- Vue/React 전용 라이브러리(BE-UI)는 Frog UI를 그대로 사용할 수 있도록 만든 헤드리스 래퍼일 뿐, 특정 프레임워크에 묶여 있지 않습니다.
- 새로운 프레임워크나 렌더링 모델이 등장해도, 스타일 시스템은 그대로 재사용될 수 있도록 의존성을 최소화합니다.
이 원칙으로 사용자는 프레임워크의 기술 보다 스타일의 코어 기술을 이용해 화면과 UX를 만드는것에 좀 더 집중 할 수 있습니다.
프로젝트에 최적화된 시스템을 만들 수 있을 것
흔히 사용되는 외부 라이브러리는 높은 완성도를 제공하는 대신 커스텀을 통해 프로젝트에 맞춰서 사용해야 합니다. 그러한 오버라이트 과정은 많은 제한으로 인해 브랜드 아이덴티티를 온전히 적용하기 쉽지 않습니다.
Frog UI는 완성된 라이브러리라기보다, 각 프로젝트에 최적화된 디자인 시스템을 적용 할 수 있도록 만들어 주는 도구라고 할 수 있습니다.
- 컬러, 타이포그래피 등 핵심 디자인 토큰을 변경하는 것만으로도, 브랜드와 제품 특성에 맞는 테마를 구성할 수 있습니다.
- 공통 컴포넌트 구조는 유지하면서, 상태·레이블·복합 패턴 등은 각 조직의 도메인에 맞게 확장하도록 설계했습니다.
- 특정 UI 키트에 종속되지 않고, 필요한 부분만 가져와 사내 컴포넌트 라이브러리로 흡수할 수 있도록, 구조와 클래스 네이밍을 단순하고 예측 가능하게 유지합니다.
목표는 “Frog UI 적용을 통해 자신들만의 시스템을 가진 프로젝트”를 만드는 것입니다.
시스템 사용자가 사용 하기 쉽도록 할 것
Frog UI는 시스템을 사용하는 개발자가 빠르고 편하게 작업할 수 있도록, 다음과 같은 경험을 중요하게 생각합니다.
- 클래스 이름만 보고도 역할을 이해할 수 있는 시맨틱 네이밍과 일관된 토큰 구조.
- 명확한 예제와 패턴, 실서비스에서 자주 사용하는 조합을 중심으로 제공되는 문서.
- Vue/React 헤드리스 컴포넌트와 결합했을 때, 상태,이벤트,접근성을 과도한 보일러플레이트 없이 다룰 수 있는 API 설계.
- 팀이 자신들의 코드 컨벤션과 빌드 도구에 맞게 쉽게 통합할 수 있도록, 의존성과 설정을 최소화한 패키지 구조.
Frog UI가 지향하는 좋은 DX란? “토큰, 요소들의 명확한 시멘틱 정의를 통해 시스템 도입 순간 사용자의 과도한 선택을 줄이고 직관적으로 요소들을 조합 하도록 하여 빠르고 안정적으로 화면을 만들수 있게 하는것” 입니다.