VibeCSS

VibeCSS는 보고 있는 페이지 위에 AI 기반 편집 레이어를 얹는 브라우저 확장 프로그램이다. 페이지에 이미 있는 스타일을 읽고, 제목을 키우거나 버튼 색을 바꾸는 식의 자연어 요청을 그 결과를 만들어내는 실제 CSS 규칙으로 바꾼다. 개발자 도구를 열어 알맞은 선택자를 찾고 싶지는 않지만, 무엇이 잘못 보이는지 혹은 무엇을 보고 싶은지는 설명할 수 있는 사람을 겨냥한다.

이 도구가 해결하는 핵심 문제는 시각적 아이디어와 그것을 구현하는 코드 사이의 간극이다. 실제 운영 중인 사이트에서 작은 변경을 하려면 보통 요소를 검사하고, 해당 규칙을 찾고, 보기 좋아질 때까지 값을 시험해야 한다. VibeCSS는 이 반복을 한 문장으로 압축한다. 변경을 그때그때 미리 보고, 머릿속 그림과 페이지가 맞을 때까지 다듬으면 된다.

가장 큰 한계는 적용 범위다. 변경은 브라우저 세션의 페이지에 적용되므로, 내 소유가 아닌 사이트를 영구적으로 편집하는 것이 아니라 실시간 미리보기로 동작한다. 실험, 프로토타이핑, 빠른 시각 조정을 위한 것이지 운영 중인 코드베이스를 편집하기 위한 것이 아니다. 또한 페이지가 정상적으로 로드되고 AI가 의도한 요소를 제대로 짚어야 한다. 지시가 모호하면 결과를 다시 다듬게 된다.

시작하기

1. Chrome 웹 스토어에서 VibeCSS 확장 프로그램을 설치하고 도구 모음에 고정한다.
2. 조정할 웹사이트를 열고 VibeCSS 아이콘을 클릭해 편집 레이어를 켠다.
3. "헤더를 고정해 줘", "더 어두운 배경을 써 줘"처럼 쉬운 말로 변경을 설명한다.
4. 페이지에서 업데이트를 확인하고 보기 좋아질 때까지 지시를 다듬는다.
5. 다른 곳에서 재사용하고 싶으면 생성된 CSS를 복사한다.