VibeBurst: AI가 모든 웹사이트의 분위기를 재설계하도록 하는 Chrome Extension을 만들었습니다

Source: Dev.to

The Community

GitHub 앞에서 6시간째 바라보고 있으면 “똑같아” 하는 느낌, 다들 아시죠? 모든 사이트가 같은 분위기, 같은 지루한 UI. 운이 좋으면 다크 모드. 특정 사이트만을 위한 테마 확장 프로그램을 만든 사람도 있겠죠. 멋지네요.

그런데 전체 사이트에 한 번에 미적 감각을 입힐 수 있다면 어떨까요? 예를 들어 새벽 2시의 사이버펑크 GitHub, 왜 안 되겠어요. 문서에 글라스모피즘, 혹은 브루탈리스트 Hacker News—사실 이미 그런 느낌이긴 하지만요.

맞아요, 제가 만든 것이 바로 그거예요.

What I Built

VibeBurst는 Chrome 확장 프로그램입니다. 아이콘을 클릭하고 테마를 선택하면 AI가 전체 페이지를 맞춤 CSS로 다시 스타일링합니다. 모든 것을 깨뜨리는 일반적인 스타일시트가 아니라, 페이지를 읽고 해당 사이트에 맞는 CSS를 생성합니다.

The four themes

• ⚡ Cyberpunk — 어두운 배경, 네온 시안·마젠타 글로우, 모노스페이스 폰트
• 🔮 Glassmorphism — 서리 낀 유리 느낌, 부드러운 퍼플·틸, 가볍고 통풍이 좋은 디자인
• 🧱 Brutalist — 최대 대비, 순수한 검정·흰색, 굵은 레드 악센트, 장식 없음
• 🌅 Retro Wave — 따뜻한 80년대 석양 그라데이션, 네온 핑크·스카이 블루, 신스웨이브 향수

Regenerate를 눌러 새로운 스타일을 받아보세요. Reset을 눌러 원래대로 돌아갑니다. 그게 전부입니다.

Demo

다양한 웹사이트에서 어떻게 동작하는지 보여주는 간단한 데모와 스크린샷입니다.

Code

GitHub repository:

How I Built It

Stack: Plasmo + TypeScript + React 로 확장 프로그램을 만들고, llama-3.3-70b-versatile 를 사용한 Groq API 로 CSS를 생성했습니다. 별다른 트릭은 없어요.

AI 부분은 솔직히 가장 쉬운 단계였습니다. 어려웠던 부분은 CSS가 페이지를 파괴하지 않게 하는 것이었죠.

초기 버전은 엉망이었습니다. * selector가 모든 것을 망쳤고, 너비·높이를 건드리면 레이아웃이 사라졌습니다. 대비가 안 맞아 텍스트가 읽히지 않았죠. 여러 차례 시도 끝에 레이아웃을 깨뜨릴 수 있는 모든 요소를 제거하는 sanitizeCSS 함수를 만들어서 삽입하기 전에 정리했습니다.

대부분의 사이트는 의미론적 HTML을 거의 사용하지 않고, 불투명한 클래스 이름을 가진 “ 요소들로 가득합니다. header 나 nav 를 타깃으로 해도 Google 같은 사이트에서는 거의 효과가 없습니다. 그래서 실제 스타일시트를 스캔해 background-color 를 지정하는 모든 클래스를 찾아내고, JS‑가 동적으로 삽입한 스타일도 잡아야 했습니다.

핵심 돌파구: 클래스 셀렉터에 색을 직접 선택하게 하지 않았습니다. 의미론적 요소(body, h1, button 등)를 스타일링하게 하고, 생성된 body 배경색을 모든 사이트‑특정 클래스에 프로그래밍적으로 적용했습니다. 그때 비로소 페이지가 어색하게 보이는 일이 사라졌습니다.

JavaScript은 전혀 건드리지 않았습니다. 페이지는 동일하게 동작하고, 오직 외관만 바뀝니다.

주말에 만든 프로젝트를 통해 CSS 특이성은 고통스럽고, 웹 테마링은 생각보다 어렵다는 것을 배웠습니다. 😅

전체적으로 훌륭한 학습 경험이었습니다. 짧은 주말 챌린지를 마련해 주신 Dev Team에게 감사드립니다! 👩‍💻