Show HN: Performative-UI – 디자인 트로프 기반 React 컴포넌트 라이브러리

 (vorpus.github.io)
1P by GN⁺ | ★ favorite | 댓글 1개
  • 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: 어떤 명사에든 ✦를 붙여 두 배 빠르게 출시하는 요소
    • GradientText: 이탤릭만으로는 10억 달러급으로 충분하지 않을 때의 그라디언트 텍스트
    • StatusDot: 그렇지 않을 때도 항상 초록색인 상태 점

  • Primitives

    • Button: 클릭하도록 움직이게 만든 버튼
    • EyebrowPill: 더 할 말이 없을 때 모델명이 들어가는 위치
    • Prompt: 제품 기능을 설명하는 대신 모든 AI 빌더가 배포하는 textarea

  • Banners

  • Heroes

    • Rotator: “everything”이라고 말하는 것만으로는 충분히 야심 차지 않을 때의 회전 문구
    • WordRoll: 방문자가 타이핑을 기다리지 않아도 Rotator의 범위 과시를 제공
    • PromptHero: 가치 제안을 텍스트 입력으로 대체한 히어로
    • AsciiHero: 해커를 위해, 적절한 뉴스레터를 팔로우하는 사람들이 만든 ASCII 히어로

  • Backgrounds

    • Aurora: 세 개의 blob으로 한 세대를 정의하는 배경
    • NodeGraphBackground: 개념상 신경망인 노드 그래프 배경
    • FloatingSparkles: “마법은 스스로 출시되지 않음”이라는 떠다니는 반짝임

  • Surfaces

    • GlassCard: Backdrop-filter: ambition
    • MockIDE: 실제 코드는 오는 중이고, 이것은 예고편

  • Conversation

    • ChatBubble: 말풍선 안에 있다면 반드시 참이라는 채팅 버블
    • TokenStream: Server-sent events(SSE)는 2008년 HTML5 사양에 추가됐지만 2025년까지 사용되지 않았다는 토큰 스트림
    • ChatFAB: 이제 탈출구가 없다는 채팅 FAB

  • Social Proof

    • LogoMarquee: 들어본 모든 대상이 신뢰한다는 로고 마키, 서명하지 않은 대상까지 포함
    • LogoRow: 로고가 여섯 개뿐일 때 쓰는 정적 로고
    • StatCounter: 올라가는 숫자가 그렇지 않은 숫자보다 낫다는 카운터
    • CommunityBadge: Stars는 새로운 MAU라는 커뮤니티 배지

  • Pricing & Conversion

    • PricingCard: 가운데 카드가 빛나므로 그에 맞게 선택하는 가격 카드
    • BeforeAfter: 왼쪽은 혼돈, 오른쪽은 우리
    • WaitlistForm: 직접 만들어낸 수요를 담는 대기자 명단 폼
    • Popover: 동의가 아니라 전환을 위해 만든 팝오버

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 단순하고 핵심만 있는 사이트를 보여줬더니, 이런 과시적 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가 아직 충분히 과시적이지 않네. 별 개수 기록을 보여주는 차트를 추가해야겠음
답변달기