[프로젝트 공유] 프레임워크에 덜 의존적인 UI 컴포넌트를 만들어봤습니다

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

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

UI 동작과 UX는 거의 같은데,
프레임워크에 묶여 있다는 이유로
매번 새로 만드는 구조가 과연 효율적인지 의문이 들었습니다.

그래서 개인 프로젝트로
프레임워크에 덜 의존적인 UI 컴포넌트를 Web Components 기반으로 만들어보았습니다.

🔧 어떤 것을 만들어봤나요?

크게 두 가지 컴포넌트입니다.

1⃣ Select 컴포넌트

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

• 대용량 데이터 처리를 위한 가상 스크롤

• 한글 초성 / 일본어 / 중국어 검색 지원

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

• CSS Variables 기반 스타일 커스터마이징

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

2⃣ Toast 알림 컴포넌트

• 프레임워크에 종속되지 않는 Toast UI

• 여러 위치와 애니메이션 지원

• 중복 메시지 자동 그룹핑

• SSR 환경 고려

• 접근성(ARIA) 기본 지원

🤔 Web Components를 선택한 이유

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

• 브라우저 표준 기술이라 장기 유지에 유리

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

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

• UI 프리미티브(Select, Toast 등)에 적합하다고 판단

물론 프레임워크 전용 컴포넌트만큼의 DX는 아닐 수 있지만,
장기적인 관점에서는 충분히 의미 있는 시도라고 생각했습니다.

💬 커뮤니티 분들께 여쭤보고 싶습니다

• 실무에서 Web Components를 사용해보신 경험이 있으신가요?

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

• 이런 접근 방식이 현실적인 선택일지 의견을 듣고 싶습니다.

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

🔗 참고 링크

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

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