# Show HN: Performative-UI – 디자인 트로프 기반 React 컴포넌트 라이브러리 > Clean Markdown view of GeekNews topic #30304. Use the original source for factual precision when an external source URL is present. ## Metadata - GeekNews HTML: [https://news.hada.io/topic?id=30304](https://news.hada.io/topic?id=30304) - GeekNews Markdown: [https://news.hada.io/topic/30304.md](https://news.hada.io/topic/30304.md) - Type: GN+ - Author: [neo](https://news.hada.io/@neo) - Published: 2026-06-09T10:06:46+09:00 - Updated: 2026-06-09T10:06:46+09:00 - Original source: [vorpus.github.io](https://vorpus.github.io/performativeUI/) - Points: 1 - Comments: 1 ## Topic Body - AI 스타트업용 **AI-native React 컴포넌트** 모음으로, 27개 컴포넌트와 MIT 라이선스를 제공 - 일반 공개 상태이며, 설치 명령은 **npm install performative-ui** - 구성은 **Atoms**, Primitives, Banners, Heroes, Backgrounds, Surfaces, Conversation, Social Proof, Pricing & Conversion으로 분류 - Prompt, TokenStream, LogoMarquee, PricingCard, WaitlistForm 같은 컴포넌트가 **프롬프트 입력창**, 토큰 스트림, 로고, 가격 카드, 대기자 명단 폼을 담당 - 각 컴포넌트 설명은 펀딩, 모델명, 로고, 숫자, 전환 UI 등 AI 스타트업 랜딩 페이지에서 쓰이는 **디자인 신호**를 짧은 문구로 표현 --- ### 개요 - Performative-UI는 일반 공개 상태의 AI 스타트업용 AI-native React 컴포넌트 모음이며, 27개 컴포넌트와 MIT 라이선스를 제공 - 설치 명령은 `npm install performative-ui` - 컴포넌트의 목적은 펀딩 라운드가 얼마나 초과 청약됐는지 신호하는 것 ### 컴포넌트 목록 - ## Atoms - [Sparkle](https://vorpus.github.io/performativeUI/#/components/sparkle): 어떤 명사에든 ✦를 붙여 두 배 빠르게 출시하는 요소 - [GradientText](https://vorpus.github.io/performativeUI/#/components/gradient-text): 이탤릭만으로는 10억 달러급으로 충분하지 않을 때의 그라디언트 텍스트 - [StatusDot](https://vorpus.github.io/performativeUI/#/components/status-dot): 그렇지 않을 때도 항상 초록색인 상태 점 - ## Primitives - [Button](https://vorpus.github.io/performativeUI/#/components/button): 클릭하도록 움직이게 만든 버튼 - [EyebrowPill](https://vorpus.github.io/performativeUI/#/components/eyebrow-pill): 더 할 말이 없을 때 모델명이 들어가는 위치 - [Prompt](https://vorpus.github.io/performativeUI/#/components/prompt): 제품 기능을 설명하는 대신 모든 AI 빌더가 배포하는 textarea - ## Banners - [StickyBanner](https://vorpus.github.io/performativeUI/#/components/sticky-banner): 유틸리티로 위장한 펀딩 뉴스 - ## Heroes - [Rotator](https://vorpus.github.io/performativeUI/#/components/rotator): “everything”이라고 말하는 것만으로는 충분히 야심 차지 않을 때의 회전 문구 - [WordRoll](https://vorpus.github.io/performativeUI/#/components/word-roll): 방문자가 타이핑을 기다리지 않아도 Rotator의 범위 과시를 제공 - [PromptHero](https://vorpus.github.io/performativeUI/#/components/prompt-hero): 가치 제안을 텍스트 입력으로 대체한 히어로 - [AsciiHero](https://vorpus.github.io/performativeUI/#/components/ascii-hero): 해커를 위해, 적절한 뉴스레터를 팔로우하는 사람들이 만든 ASCII 히어로 - ## Backgrounds - [Aurora](https://vorpus.github.io/performativeUI/#/components/aurora): 세 개의 blob으로 한 세대를 정의하는 배경 - [NodeGraphBackground](https://vorpus.github.io/performativeUI/#/components/node-graph): 개념상 신경망인 노드 그래프 배경 - [FloatingSparkles](https://vorpus.github.io/performativeUI/#/components/floating-sparkles): “마법은 스스로 출시되지 않음”이라는 떠다니는 반짝임 - ## Surfaces - [GlassCard](https://vorpus.github.io/performativeUI/#/components/glass-card): `Backdrop-filter: ambition` - [MockIDE](https://vorpus.github.io/performativeUI/#/components/mock-ide): 실제 코드는 오는 중이고, 이것은 예고편 - ## Conversation - [ChatBubble](https://vorpus.github.io/performativeUI/#/components/chat-bubble): 말풍선 안에 있다면 반드시 참이라는 채팅 버블 - [TokenStream](https://vorpus.github.io/performativeUI/#/components/token-stream): Server-sent events(SSE)는 2008년 HTML5 사양에 추가됐지만 2025년까지 사용되지 않았다는 토큰 스트림 - [ChatFAB](https://vorpus.github.io/performativeUI/#/components/chat-fab): 이제 탈출구가 없다는 채팅 FAB - ## Social Proof - [LogoMarquee](https://vorpus.github.io/performativeUI/#/components/logo-marquee): 들어본 모든 대상이 신뢰한다는 로고 마키, 서명하지 않은 대상까지 포함 - [LogoRow](https://vorpus.github.io/performativeUI/#/components/logo-row): 로고가 여섯 개뿐일 때 쓰는 정적 로고 - [StatCounter](https://vorpus.github.io/performativeUI/#/components/stat-counter): 올라가는 숫자가 그렇지 않은 숫자보다 낫다는 카운터 - [CommunityBadge](https://vorpus.github.io/performativeUI/#/components/community-badge): Stars는 새로운 MAU라는 커뮤니티 배지 - ## Pricing & Conversion - [PricingCard](https://vorpus.github.io/performativeUI/#/components/pricing-card): 가운데 카드가 빛나므로 그에 맞게 선택하는 가격 카드 - [BeforeAfter](https://vorpus.github.io/performativeUI/#/components/before-after): 왼쪽은 혼돈, 오른쪽은 우리 - [WaitlistForm](https://vorpus.github.io/performativeUI/#/components/waitlist-form): 직접 만들어낸 수요를 담는 대기자 명단 폼 - [Popover](https://vorpus.github.io/performativeUI/#/components/popover): 동의가 아니라 전환을 위해 만든 팝오버 ## Comments ### Comment 59237 - Author: neo - Created: 2026-06-09T10:06:47+09:00 - Points: 1 ###### [Hacker News 의견들](https://news.ycombinator.com/item?id=48445554) - 단순하고 핵심만 있는 사이트를 보여줬더니, 이런 **과시적 UI 요소**가 없어서 진지하게 받아들이지 않는다는 말을 여러 프로젝트에서 직접 들었음 유튜버 시청자들이 계속 구독 요청을 한다고 불평하는 것과 비슷함. 그렇게 하는 이유는 통계상 효과가 있기 때문임 - 결국 **첫인상**의 문제임. 웹사이트 디자인은 회사의 첫인상이고, 디자인이 깔끔하면 제품도 깔끔하고 견고할 거라고 믿게 됨 비싼 물건이 더 고품질이고 전반적으로 더 나을 거라고 생각하는 것과 비슷함. 이 사이트에서는 히어로 영역의 **ASCII 애니메이션**이 가장 좋은 컴포넌트인데, 정작 그 컴포넌트는 복사할 수 없음. 그 멋진 ASCII 히어로 덕분에 첫인상이 좋아져서 모든 컴포넌트를 훑어보게 됐음 - 운영하는 컨퍼런스에 **Substack 사이트**를 쓰고 있는데, 팝업과 여기저기 있는 구독 버튼이 예전엔 거슬렸지만 실제로 효과가 있음 트래픽이 낮은 사이트인데도 구독자가 0명에서 거의 1,000명까지 늘었고, 사람들에게 도달하는 가장 좋은 방법이 됨 [https://carolina.codes]() - 여기서 말하려는 건 스타트업 웹사이트가 화려하면 안 된다는 뜻은 아닌 듯함. 다만 모두가 **똑같이 생길 필요**는 없다는 얘기 같음 - **클릭베이트 썸네일**도 마찬가지임. 사람들은 싫어하지만, 정작 클릭베이트가 아닌 썸네일은 잘 누르지 않음 - YouTube의 **수익화 가이드라인**도 그걸 요구함 - 재미있는 건, 여기 나온 기법들이 한때는 고급 프론트엔드 개발자나 퍼블리셔만 할 수 있다고 여겨지던 것들이라는 점임 예전에는 실력의 상징이던 것이 이제 풍자의 대상이 된 걸 보면, 우리가 말하는 **고급 수준**이 결국 “남들이 못 하는 것”에서 나온다는 생각이 듦. 개인적으로는 ASCII 아트 애니메이션을 어떻게 구현할지 생각해본 적도 없었음 - 복잡한 그래픽 디자인을 실제로 구현할 수 있다는 데 자부심을 느끼던 입장에서는 약간의 **정체성 위기**가 생긴 것도 사실임 하지만 결국 AI가 아직 어려워하는 것을 찾아가게 만들고, 그게 이제 누구나 생성할 수 있는 것과 내 작업을 계속 구분해준다고 봄. 카메라가 등장한 뒤 사실주의에서 인상주의로 옮겨간 흐름과 비슷하게 느껴짐 - 예전에는 **작업 증명**처럼 기능했지만, 이후 저렴한 인쇄 회로가 시장에 쏟아져 나오면서 그 작업량이 사소해진 것과 비슷함 - “못 한다”보다는 **창의성**에 더 가까운 얘기라고 봄 - 이게 웃기면서도 정말 잘 만들어졌다는 점이 좋음 솔직히 몇몇 컴포넌트는 실제로 쓰고 싶고, 특히 **ASCII 아트**가 훌륭함 - 나도 같은 말을 하려 했음. 여기 있는 것들 중 몇 개는 확실히 나도 해본 적 있음 목록에 없는 것도 수십 개 떠오르지만, 다들 뭔지 아는 걸 이렇게 잘 정리해둔 걸 보니 신선함. 제작자에게 박수 보냄 - 가장 극단적인 **미덕 과시**는 완전히 브라우저 기본값으로 두고 스타일을 전혀 넣지 않는 것임 시리즈 A로 10억 달러를 받았으면서도 새끼손가락이 Shift 키까지 가기 귀찮아서 전부 소문자로 쓰는 것처럼 - [https://www.berkshirehathaway.com/]() - 댓글 쓸 때 올바른 대소문자, 쉼표, 문법, 철자를 거의 신경 쓰지 않게 됐는데, 주된 이유는 내가 **LLM이 아니라는 신호**를 주기 위해서임 - “미덕 과시”보다는 **역신호(counter-signaling)** 가 더 맞는 말일 수 있음: [https://en.wikipedia.org/wiki/Countersignaling]() “역신호는 어떤 속성을 가장 많이 가진 행위자가, 같은 속성을 중간 정도 가진 개인보다 그 속성을 증명하는 데 덜 투자하는 행동”이라는 뜻임 - 미덕 과시라기보다는 그냥 원조 아닌가? [https://www.berkshirehathaway.com/]() - Netscape가 제일 잘 알지 - 사실상 패러디 라이브러리인데도 전부 꽤 **전문적으로** 보임 - 나중에 아이디어와 영감을 얻으려고 확실히 북마크해둘 것임. 부끄럽다고 해도 상관없음 - 그렇다면 몇 년 뒤에는 “전문적”이라는 외형이 꽤 다르게 보일 것 같음 - 실제 제품에 이걸 쓰는 회사가 나올 확률은 얼마나 될까? - 과정을 조롱한다고 해서 그 과정이 **정교하지 않다**는 뜻은 아님 무언가를 농담으로 다루려면 대체로 그걸 서로 연결된 방식으로 이해하고 있어야 함 - 오히려 모든 어설픈 스타트업 페이지가 얼마나 **예측 가능하고 비슷한지** 보여주는 것일 수도 있음 - 짜증 나는 팝오버가 자기 문서를 스크롤할 때 왜 자동으로 나타나지 않는지 이해가 안 됨 **IntersectionObserver**가 더 필요함. 컴포넌트 속성 이름이 `selfArmTrigger` 같은 식이면 보너스 점수도 줄 수 있겠음 - “TokenStream – 서버 전송 이벤트(SSE)는 2008년에 HTML5 명세에 추가됐지만 2025년까지 쓰이지 않았다.” 1997년에 **청크 전송 인코딩**이 나왔던 걸 기억함. 그때부터 이미 오늘날 사람들이 LLM에서 보는 것처럼 텍스트 바이트나 HTML 조각을 쉽고 바로 스트리밍할 수 있었음 1997년에 이걸로 웹 기반 Telnet 클라이언트를 만들었고, 나중에는 웹용 텍스트 MOO/채팅도 만들었음. 둘 다 frameset을 써서 보낼 줄은 화면 아래에 두고, 들어오는 줄은 서버 측에서 일이 생길 때마다 서버가 보내며 새 줄이 들어올 때 클라이언트를 스크롤하게 했음 그 전에도 남용할 수 있는 기법들은 있었지만 신뢰성이 낮았음. 그래도 정말 아무도 안 쓴 기술 얘기라면 할 말이 많음 - **COMET**은 시대를 정말 앞서갔음. Sierra Online이 1995년에 웹채팅에 썼고, 수년 동안 단연 최고의 웹채팅이었음 - 이런 클리셰 전반은 이해하고, 내가 그냥 늙은 사람일 수도 있지만, Claude가 이런 UI를 내가 할 수 있는 것보다 100배 빠르게 뽑아내는 건 아직도 꽤 인상적임 어쩌면 AI 이전에는 내가 이 정도 품질의 UI조차 만들 수 없었기 때문일 수도 있음 (˶ˆᗜˆ˵) - 2017/18년 **ICO 붐** 때 토큰 판매 마케팅 사이트에는 애니메이션 그래프 노드 배경이 필수였음 [https://vorpus.github.io/performativeUI/#/components/node-gr...]() - 쓰고 싶은 사람들을 위해 GitHub 링크를 추가함. 나도 쓸 생각임 [https://github.com/vorpus/performativeUI]() - 잠깐, 내 README가 아직 충분히 과시적이지 않네. 별 개수 기록을 보여주는 차트를 추가해야겠음