badcn/ui
shadcn/ui를 패러디한 적대적 UI 컴포넌트 라이브러리. 만우절 해커톤에서 기획하고, 당일 내 npm 패키지 배포까지 완료했습니다.
주요 기여
해커톤 당일 내 npm 배포(badcn-ui@0.1.3, 4버전 릴리즈) 완료. 16개 hostile-ui 컴포넌트 라이브러리.
만우절 해커톤에서 '하루쯤은 오직 웃음을 위해 개발하자'는 컨셉 아래, AI 바이브 코딩을 전제로 한 프로젝트를 기획해야 했습니다.
좋은 UX의 원칙을 역으로 활용해, '세련되게 생겼지만 의도적으로 불편한' 컴포넌트 라이브러리를 npm에 배포하는 것.
Vite + React 18 + TypeScript + Tailwind CSS로 초기 세팅 후, AccordionOfChaos, HoverProgressButton, MarkSenseGrid 등 hostile-ui 컴포넌트를 구현. vite.lib.config.ts로 ESM/CJS 듀얼 출력 + 타입 선언 빌드를 설정하고, package.json exports/peerDependencies를 구성해 npm publish로 배포했습니다.
해커톤 제한 시간 안에 라이브러리 빌드 설정(ESM/CJS 듀얼), exports 필드, 버전 관리까지 완결하는 것이 도전이었습니다.
AI를 코드 생성 도구로 활용하되, 컴포넌트 설계와 인터랙션 로직은 UX 안티패턴에 대한 이해를 바탕으로 팀이 직접 기획·검증했습니다.
npm 라이브러리 배포를 처음부터 끝까지 경험하면서 '소비하는 개발'에서 '제공하는 개발'로 시야가 넓어졌습니다. 좋은 UX를 역으로 비트는 과정에서 오히려 UX 원칙(예측 가능성, 제어감, 피드백)의 중요성을 더 깊이 이해하게 되었습니다.