[프로젝트 공유] 프레임워크에 종속되지 않는 UI 컴포넌트를 만들어봤습니다 (Web Components)

안녕하세요.
프론트엔드 개발을 하면서 여러 프레임워크(React, Vue 등)를 오가다 보니,
항상 비슷한 고민이 반복되었습니다.

Select, Toast 같은 기본 UI 컴포넌트는
프레임워크가 바뀔 때마다 다시 구현해야 하는가?

UX와 동작은 거의 같은데,
프레임워크에 묶여 있다는 이유만으로 매번 새로 만드는 구조가
장기적으로 비효율적이라는 생각이 들었습니다.

그래서 개인 프로젝트로
프레임워크에 종속되지 않는 UI 컴포넌트를 Web Components 기반으로 만들어보았습니다.

프로젝트 개요

이번에 만든 것은 다음 두 가지입니다.

1. Select 컴포넌트

• Web Component 기반 (의존성 없음)

• 대용량 데이터 대응을 위한 가상 스크롤

• 다국어 검색 지원 (한글 초성, 일본어 로마자, 중국어 병음)

• 키보드 접근성 및 스크린 리더 대응

• CSS Variables 기반 테마 커스터마이징

• React / Vue / Angular 등에서 사용할 수 있도록 래퍼 제공

2. Toast 알림 컴포넌트

• 프레임워크에 의존하지 않는 Toast UI

• 다양한 위치/애니메이션 지원

• 중복 메시지 자동 그룹핑

• SSR 환경 고려

• 접근성(ARIA) 기본 지원

• 비교적 작은 번들 사이즈

Web Components를 선택한 이유

Web Components를 선택한 이유는 단순합니다.

• 브라우저 표준 기술

• 특정 프레임워크 라이프사이클에 의존하지 않음

• 장기적으로 유지 가능한 UI 로직 분리

• 여러 프로젝트/스택에서 재사용 가능

물론 단점도 있고,
프레임워크 전용 컴포넌트만큼의 DX가 항상 보장되지는 않지만
UI 프리미티브(Select, Toast 등) 에는 충분히 의미 있는 선택이라고 느꼈습니다.

공유하고 싶은 질문

• 실무에서 Web Components를 사용해보신 분 계신가요?

• 프레임워크가 바뀔 가능성이 있는 프로젝트에서
  UI 컴포넌트를 어떻게 관리하고 계신지 궁금합니다.

• 이런 접근 방식이 실무에서 현실성이 있을지 의견을 듣고 싶습니다.

아직도 실험적인 프로젝트이고,
피드백을 받아가며 개선해보려는 단계입니다.
편하게 의견 주시면 감사하겠습니다.

참고 링크

• Select 컴포넌트: https://www.npmjs.com/package/seo-select

• Toast 컴포넌트: https://www.npmjs.com/package/seo-toast