[프로젝트 공유] 프레임워크에 덜 의존적인 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-selectToast 컴포넌트: https://www.npmjs.com/package/seo-toast
