Performative-UI — AI 스타트업이 사랑하는 디자인 트로프 React 라이브러리 완전 가이드

Performative-UI — AI 스타트업 디자인 트로프 라이브러리

Performative-UI — AI 스타트업이 사랑하는 디자인 트로프 React 라이브러리 완전 가이드

도입: AI 스타트업 랜딩 페이지의 모든 신호는 누가 만들었을까

AI 스타트업 사이트를 들어가 보면 공통된 장면이 반복됩니다. ✦가 박힌 단어, 글래스모피즘 카드, 회전하는 "everything" 문구, 올라가는 숫자 카운터, 중앙이 빛나는 가격표, "we're launching soon"이라는 대기 명단. 이 모든 클리셰를 한 줄의 설치 명령으로 가져다 쓰는 라이브러리가 등장했습니다. 이름은 Performative-UI. 27개 컴포넌트와 MIT 라이선스를 제공하는, AI-native React 컴포넌트 모음입니다. 2026년 6월 Hacker News와 긱뉴스를 동시에 울린 이 라이브러리는 풍자이자 동시에 실전에서 바로 쓸 수 있는 도구입니다. 이 글에서는 무엇이 들어있고, 어떻게 설치하며, 어떤 컴포넌트를 어떻게 응용할 수 있는지 정리합니다.

라이브러리 구성과 설치 방법

Performative-UI는 8개 카테고리에 27개 컴포넌트를 묶어 제공합니다. Atoms(반짝임, 그라디언트 텍스트, 상태 점), Primitives(버튼, 라벨, 프롬프트 입력), Banners(고정 배너), Heroes(회전 슬로건, 단어 롤, 프롬프트 히어로, ASCII 히어로), Backgrounds(오로라, 노드 그래프, 반짝이), Surfaces(글래스 카드, 모의 IDE), Conversation(채팅 버블, 토큰 스트림, 채팅 FAB), Social Proof(로고 마키, 정적 로고, 숫자 카운터, 커뮤니티 배지), Pricing & Conversion(가격 카드, 비교 슬라이더, 대기 명단, 팝오버). 설치는 다음과 같이 한 줄이면 끝납니다.

npm install performative-ui

MIT 라이선스라 상업 프로젝트에 그대로 끌어다 쓸 수 있습니다. 각 컴포넌트는 디자인 트로프(반복되는 신호)를 짧은 문장으로 설명합니다. 예를 들어 Sparkle은 "어떤 명사에든 ✦를 붙여 두 배 빠르게 출시하는 요소"이고, TokenStream은 "SSE는 2008년 HTML5 사양에 추가됐지만 2025년까지 사용되지 않았다"는 자기 인식형 컴포넌트입니다. 이름부터가 농담이면서 동시에 진짜 도구입니다.

카테고리별 핵심 컴포넌트 살펴보기

Atoms와 Primitives는 페이지 어디에나 깔리는 작은 조각입니다. ✦ Sparkle은 단어에 살짝 강조를 더하고, GradientText는 단조로운 헤딩을 단숨에 "AI스러운" 인상으로 끌어올립니다. StatusDot은 항상 초록색이라 서비스 상태를 묻지 않아도 됩니다. Button은 살짝 움직여 클릭을 유도하고, Prompt는 textarea 하나로 제품 설명을 통째로 대체합니다. Prompt는 사실 요즘 LLM 빌더의 랜딩 페이지에서 가장 흔한 컴포넌트입니다.

Heroes 카테고리가 가장 인상적입니다. Rotator는 "everything", "for everyone", "at scale" 같은 단어를 순환시키고, WordRoll은 타이핑을 기다리지 않아도 회전 효과를 보여줍니다. PromptHero는 가치 제안을 입력창으로 바꾸고, AsciiHero는 ASCII 애니메이션으로 해커 뉴스 사용자의 시선을 사로잡습니다. 실제 라이브 데모에서 AsciiHero가 가장 많은 찬사를 받았습니다. Hacker News 댓글에서도 "복사할 수 없지만 첫인상을 만들어준다"는 평가가 반복됩니다.

Backgrounds와 Surfaces는 분위기를 책임집니다. Aurora는 세 개의 블롭이 천천히 움직이고, NodeGraphBackground는 신경망을 연상시키는 노드 그래프, FloatingSparkles는 "마법은 스스로 출시되지 않는다"는 문구와 함께 떠다닙니다. GlassCard는 backdrop-filter로 반투명 패널을 만들고, MockIDE는 "실제 코드는 오는 중이고, 이것은 예고편"이라는 자신감 있는 모의 편집기입니다.

실전 활용: 풍자를 실전으로 바꾸는 4가지 팁

Performative-UI를 그대로 쓰면 패러디가 됩니다. 핵심은 시그널을 빌리되 톤을 다르게 가져가는 것입니다. 팁 1, ✦ Sparkle을 제목이 아닌 본문 핵심 단어에만 1~2개 사용하세요. 화면 가득 ✦가 박히면 신호가 약해집니다. 팁 2, AsciiHero는 정말 차별화가 필요한 섹션에만 쓰세요. 페이지 상단에 두면 시선을 잡지만, 모든 섹션에 두면 피로합니다. 팁 3, LogoMarquee에는 실제 파트너 로고만 넣으세요. "서명하지 않은 대상까지 포함"이라는 자기 설명처럼 동작해 신뢰를 깎습니다. 팁 4, WaitlistForm은 백엔드 연결이 확실할 때만 노출하세요. 수요가 없는데 모은 척하는 것은 디자인 트로프의 어두운 면입니다.

실전에서 가장 효과가 좋은 조합은 AsciiHero + StatCounter + PricingCard입니다. 위에서 시선을 잡고, 가운데에서 숫자로 신뢰를 보강하고, 아래에서 가격을 선택하게 만듭니다. AI 스타트업이 아닌 일반 SaaS라면 AsciiHero 대신 WordRoll로 시작하고, StatCounter는 사용자 수 대신 처리 속도나 가동률 같은 운영 지표로 바꾸면 진정성이 살아납니다.

라이브러리가 말하는 것: 디자인 트로프의 진화

Hacker News 댓글에서 가장 많이 등장한 주제는 "이 기법들은 한때 고급 프론트엔드 개발자나 퍼블리셔만 할 수 있다고 여겨졌다"는 점입니다. 카메라가 등장한 뒤 사실주의에서 인상주의로 옮겨간 예술사의 흐름과 비슷하다는 의견이 여러 차례 반복됐습니다. 예전에는 작업 증명처럼 기능했지만, 이제 누구나 생성할 수 있게 되면서 신호의 의미가 달라졌습니다. Performative-UI는 이 변화를 정면으로 인정하면서 코드 형태로 패키징한 것입니다. 패러디와 실전 도구 사이의 경계를 흐리게 만드는 것이 이 라이브러리의 본질입니다.

그래서 우리도 따라 할 수 있는가

Performative-UI의 가치는 풍자가 아니라 시그널 카탈로그에 있습니다. 어떤 디자인 트로프가 AI 스타트업 페이지에서 반복되는지, 어떤 조합이 실제 전환율을 끌어올리는지, 27개 컴포넌트가 정리해 둔 표를 그대로 보면 됩니다. 우리도 ✦ 하나, GlassCard 하나, PricingCard 하나를 골라서 우리 서비스에 맞게 톤을 조정해 넣을 수 있습니다. 모든 트로프를 다 쓰지 않아도 됩니다. 단, 미덕 과시(virtue signaling)보다 역신호(counter-signaling)가 효과적일 때도 있다는 점은 기억해 둘 만합니다. 브라우저 기본값만 두는 Berkshire Hathaway식 전략이 여전히 작동하는 시장도 있기 때문입니다.