우리가 매일 만드는 그 'UI 클리셰' 박물관 — Performative-UI

무슨 일이냐면요

살짝 웃기면서도 뜨끔한 프로젝트가 하나 나왔어요. Performative-UI라는 React 컴포넌트 라이브러리인데요, 평범한 라이브러리가 아니에요. 이건 "요즘 웹사이트들이 다들 똑같이 갖다 쓰는 UI 클리셰(틀에 박힌 디자인 관습)"를 모아놓은 일종의 풍자 모음집이에요. 실용을 위한 게 아니라, "우리 이런 거 너무 많이 쓰지 않나요?" 하고 거울을 들이미는 작품에 가깝죠.

'디자인 트로프'가 뭐냐면

트로프(trope)는 원래 영화나 소설에서 '뻔하게 반복되는 클리셰'를 가리키는 말이에요. 악당이 꼭 마지막에 주절주절 계획을 설명한다든가 하는 거요. Performative-UI는 이걸 웹 디자인에 적용했어요. 우리가 사이트를 만들 때 별생각 없이 반복하는 패턴들을 콕 집어내서 컴포넌트로 박제해놓은 거죠.

어떤 것들이 있냐면, 우리 모두가 한 번쯤 만들어봤을 법한 것들이에요.

불필요한 AI 반짝이(sparkle) 아이콘 — 뭔가 'AI 기능'처럼 보이게 하려고 붙이는 그 별 모양 아이콘이요.
가짜 긴박감 — "단 3자리 남았습니다!", "5분 안에 구매하세요" 같은 인위적인 압박 장치.
거대한 쿠키 동의 배너 — 화면 절반을 가리는 그 팝업.
의미 없이 미끄러지는 부드러운 스크롤 애니메이션처럼, 멋있어 보이려고 넣지만 실제론 사용성을 해치는 장식들.

이런 걸 진지한 컴포넌트 라이브러리 형식으로 정리해놓으니까, 보는 순간 "어… 나 이거 지난주에 만들었는데" 하고 뜨끔하게 되는 거예요. 풍자의 힘이죠.

이게 왜 의미 있냐면

단순한 농담 같지만, 사실 꽤 날카로운 비평이에요. 요즘 웹은 디자인 시스템과 컴포넌트 라이브러리(예: shadcn/ui, Material UI)가 워낙 잘 갖춰져 있어서, 다들 비슷한 부품을 조립해 사이트를 만들어요. 효율은 좋아졌는데 그 대가로 세상의 모든 사이트가 점점 똑같이 생겨가는 현상이 생겼죠. 거기에 '전환율을 높인다'는 명목으로 다크 패턴(사용자를 슬쩍 속이거나 압박하는 설계)까지 관행처럼 끼어들어요. Performative-UI는 그 관성을 비웃으면서, "우리가 만드는 게 정말 사용자를 위한 건가, 아니면 그냥 남들 다 하니까 따라 하는 건가"를 되묻게 해요.

비슷한 맥락의 작업으로는, 나쁜 UI를 일부러 모은 'User Inyerface' 같은 게임이나, 다크 패턴을 고발하는 deceptive.design 같은 사이트들이 있어요. Performative-UI는 그 비판을 개발자에게 가장 익숙한 언어인 'React 컴포넌트'로 풀어냈다는 점이 재치 있고요.

한국 개발자에게

실무에서 이걸 import해 쓰진 않겠죠. 하지만 가치는 분명해요. 기획에서 "여기 긴박감 좀 넣어주세요", "AI 느낌 나게 반짝이 하나 달죠" 같은 요청이 올 때, 한 번쯤 "이거 혹시 클리셰 아닐까? 사용자한테 진짜 도움이 될까?"를 자문하게 만들어주거든요. 좋은 개발자는 시키는 대로 만드는 사람이 아니라, 무엇을 만들지 말아야 할지 아는 사람이기도 하니까요. 가볍게 둘러보면서 우리 서비스에 박제된 클리셰가 몇 개나 있는지 세어보는 것도 재밌을 거예요.