Show HN: Performative-UI – 디자인 트로프 기반 React 컴포넌트 라이브러리
요약
디자인 트로프(Trope)를 활용하여 사용자에게 첫인상의 신뢰를 주는 React 컴포넌트 라이브러리 'Performative-UI'를 소개합니다. ASCII 애니메이션과 같은 과시적 UI 요소가 제품의 품질 인식을 높이는 데 기여함을 강조합니다.
핵심 포인트
- 과시적 UI 요소는 제품의 신뢰도와 첫인상을 결정하는 중요한 역할을 함
- ASCII 아트와 같은 독특한 컴포넌트가 사용자 경험과 탐색을 유도함
- 디자인 기법의 변화는 AI 시대에 창의성의 영역으로 이동 중임
- 단순한 기능 구현을 넘어 디자인적 장치를 통한 심리적 효과 활용
단순하고 핵심만 있는 사이트를 보여줬더니, 이런 과시적 UI 요소가 없어서 진지하게 받아들이지 않는다는 말을 여러 프로젝트에서 직접 들었음
유튜버 시청자들이 계속 구독 요청을 한다고 불평하는 것과 비슷함. 그렇게 하는 이유는 통계상 효과가 있기 때문임
결국 첫인상의 문제임. 웹사이트 디자인은 회사의 첫인상이고, 디자인이 깔끔하면 제품도 깔끔하고 견고할 거라고 믿게 됨
비싼 물건이 더 고품질이고 전반적으로 더 나을 거라고 생각하는 것과 비슷함. 이 사이트에서는 히어로 (Hero) 영역의 ASCII 애니메이션이 가장 좋은 컴포넌트인데, 정작 그 컴포넌트는 복사할 수 없음. 그 멋진 ASCII 히어로 덕분에 첫인상이 좋아져서 모든 컴포넌트를 훑어보게 됐음
운영하는 컨퍼런스에 Substack 사이트를 쓰고 있는데, 팝업과 여기저기 있는 구독 버튼이 예전엔 거슬렸지만 실제로 효과가 있음
트래픽이 낮은 사이트인데도 구독자가 0명에서 거의 1,000명까지 늘었고, 사람들에게 도달하는 가장 좋은 방법이 됨 https://carolina.codes
여기서 말하려는 건 스타트업 웹사이트가 화려하면 안 된다는 뜻은 아닌 듯함. 다만 모두가 똑같이 생길 필요는 없다는 얘기 같음
클릭베이트 (Clickbait) 썸네일도 마찬가지임. 사람들은 싫어하지만, 정작 클릭베이트가 아닌 썸네일은 잘 누르지 않음
YouTube의 수익화 가이드라인도 그걸 요구함
재미있는 건, 여기 나온 기법들이 한때는 고급 프론트엔드 (Frontend) 개발자나 퍼블리셔만 할 수 있다고 여겨지던 것들이라는 점임
예전에는 실력의 상징이던 것이 이제 풍자의 대상이 된 걸 보면, 우리가 말하는 고급 수준이 결국 “남들이 못 하는 것”에서 나온다는 생각이 듦. 개인적으로는 ASCII 아트 애니메이션을 어떻게 구현할지 생각해본 적도 없었음
복잡한 그래픽 디자인을 실제로 구현할 수 있다는 데 자부심을 느끼던 입장에서는 약간의 정체성 위기가 생긴 것도 사실임
하지만 결국 AI가 아직 어려워하는 것을 찾아가게 만들고, 그게 이제 누구나 생성할 수 있는 것과 내 작업을 계속 구분해준다고 봄. 카메라가 등장한 뒤 사실주의에서 인상주의로 옮겨간 흐름과 비슷하게 느껴짐
예전에는 작업 증명처럼 기능했지만, 이후 저렴한 인쇄 회로가 시장에 쏟아져 나오면서 그 작업량이 사소해진 것과 비슷함
“못 한다”보다는 창의성에 더 가까운 얘기라고 봄
이게 웃기면서도 정말 잘 만들어졌다는 점이 좋음
솔직히 몇몇 컴포넌트는 실제로 쓰고 싶고, 특히 ASCII 아트가 훌륭함
나도 같은 말을 하려 했음. 여기 있는 것들 중 몇 개는 확실히 나도 해본 적 있음
목록에 없는 것도 수십 개 떠오르지만, 다들 뭔지 아는 걸 이렇게 잘 정리해둔 걸 보니 신선함. 제작자에게 박수 보냄
가장 극단적인 미덕 과시는 완전히 브라우저 기본값으로 두고 스타일을 전혀 넣지 않는 것임
시리즈 A로 10억 달러를 받았으면서도 새끼손가락이 Shift 키까지 가기 귀찮아서 전부 소문자로 쓰는 것처럼
과정을 조롱한다고 해서 그 과정이 정교하지 않다는 뜻은 아님
무언가를 농담으로 다루려면 대체le 대체로 그걸 서로 연결된 방식으로 이해하고 있어야 함
오히려 모든 어설픈 스타트업 페이지가 얼마나 예측 가능하고 비슷한지 보여주는 것일 수도 있음
짜증 나는 팝오버 (Popover)가 자기 문서를 스크롤할 때 왜 자동으로 나타나지 않는지 이해가 안 됨 IntersectionObserver가 더 필요함. 컴포넌트 속성 이름이 selfArmTrigger 같은 식이면 보너스 점수도 줄 수 있겠음
“TokenStream – 서버 전송 이벤트(SSE, Server-Sent Events)는 2008년에 HTML5 명세에 추가됐지만 2025년까지 쓰이지 않았다.”
1997년에 청크 전송 인코딩(Chunked Transfer Encoding)이 나왔던 걸 기억함. 그때부터 이미 오늘날 사람들이 LLM에서 보는 것처럼 텍스트 바이트나 HTML 조각을 쉽고 바로 스트리밍할 수 있었음
1997년에 이걸로 웹 기반 Telnet 클라이언트를 만들었고, 나중에는 웹용 텍스트 MOO/채팅도 만들었음. 둘 다 frameset을 써서 보낼 줄은 화면 아래에 두고, 들어오는 줄은 서버 측에서 일이 생길 때마다 서버가 보내며 새 줄이 들어올 때 클라이언트를 스크롤하게 했음
그 전에도 남용할 수 있는 기법들은 있었지만 신뢰성이 낮았음. 그래도 정말 아무도 안 쓴 기술 얘기라면 할 말이 많음
COMET은 시대를 정말 앞서갔음. Sierra Online이 1995년에 웹채팅에 썼고, 수년 동안 단연 최고의 웹채팅이었음
이런 클리셰 전반은 이해하고, 내가 그냥 늙은 사람일 수도 있지만, Claude가 이런 UI를 내가 할 수 있는 것보다 100배 빠르게 뽑아내는 건 아직도 꽤 인상적임
어쩌면 AI 이전에는 내가 이 정도 품질의 UI조차 만들 수 없었기 때문일 수도 있음 (˶ˆᗜˆ˵)
AI 자동 생성 콘텐츠
본 콘텐츠는 GeekNews의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기