앗, 제가 또 Vibecoded 했어요. 도와주세요! — A CSS Refiner
Source: Dev.to
위에 제공된 텍스트를 한국어로 번역하려면 실제 번역할 내용이 필요합니다.
번역하고 싶은 본문(코드 블록 제외)을 알려주시면, 원본 형식과 마크다운을 그대로 유지하면서 한국어로 번역해 드리겠습니다.
이런, 다시 vibecoded 했어요
제가 어떻게 여기까지 오게 되었는지 말씀드릴게요.
저는 큰 프로젝트를 진행하고 있었어요 — 여러분이 중요하게 생각하는 부분(아키텍처, 구조, 로직)에 집중하고 나머지는 AI에게 맡기는 그런 프로젝트 말이죠. 어느 순간 관리 패널이 필요해졌습니다. 머릿속에 대략적인 아이디어는 있었지만, “AI에게 초안을 맡겨보자”고 생각했어요.
솔직히 말해서? 시각적인 결과물이 제가 직접 만들었을 때보다 더 좋았어요. 레이아웃 아이디어도 견고하고 확장 가능했죠. 그래서 저는 계속 진행했고, 그 아키텍처의 전체적인 부분을 AI에게 맡겼습니다.
잘 작동했어요 — 그런데 어느 순간 그렇지 않게 되었습니다.
AI가 벽에 부딪혔을 때
시간이 지나면서 AI는 작은 기능조차 추가하는 데 어려움을 겪기 시작했습니다. 원래는 쉬워야 할 일들이 고통스러워졌습니다. 그래서 저는 이전에 해야 했던 일을 했습니다: 실제로 코드를 살펴본 것이죠.
코드는 엉망이었습니다.
제가 끼어들어 리팩터링을 시작했습니다. 거대한 단일 파일 코드를 적절한 파일들로 나누고, 아키텍처 리뷰를 진행했습니다. 각 파일에서는 변수를 맨 위에, 메서드를 아래에 배치하고, “AI가 마음대로 붙인” 것이 아니라 논리적으로 정렬했습니다. 작업이 필요했지만, 코드베이스는 다시 관리 가능해졌습니다.
그리고 나서 저는 CSS를 살펴보았습니다.
15,000+ Lines of CSS Chaos
스타일시트가 15,000줄이 넘게 늘어났습니다. 같은 색상이 세 가지 다른 방식으로 작성되고, 중복된 블록이 여기저기 흩어져 있습니다. 빈 규칙도 있고, 같은 브레이크포인트에 대한 미디어 쿼리가 파일 전체에 산재해 있습니다. 스타일 가이드 없이 AI가 CSS를 생성했을 때 기대할 수 있는 바로 그 혼란이었습니다.
그때 아이디어가 떠올랐습니다: what if I could vibecode a tool to fix this?
저는 CSS, JavaScript, PHP를 충분히 잘 알고 있어 직접 손으로 만들 수도 있었지만, AI와 작업하는 핵심은 속도입니다. 저는 고수준의 결정에 집중하고, 구현은 AI에게 맡깁니다. 이 프로젝트는 완벽한 실험이었습니다: AI에게 명확한 가이드라인과 집중된 범위를 제시하고, 빠르게 유용한 결과물을 만들 수 있는지 확인해 보는 것이었습니다.
CSS Refiner가 탄생했습니다
결과: 브라우저 기반 CSS 분석기와 7개의 특화된 도구.
Analyzer – 감지 항목
- Empty Rules – 선언이 없는 선택자
- Color Normalize – 일관되지 않은 색상 형식 → 통합된 출력
- Duplicates – 선택자 간 동일한 선언 블록
- Media Queries – 중복된
@media블록 → 병합 - Fuzzy Values –
14pxvs15px— 거의 동일해 의문을 제기 - Near‑Duplicates – 선언의 80 % 이상을 공유하는 선택자
- Design Tokens – CSS 커스텀 프로퍼티가 되어야 할 반복값
Auto‑Refine은 안전한 분석기를 루프에 연결해 변화가 없을 때까지 실행합니다. 한 번 클릭, 완료.
모든 변경 사항은 visual diff로 표시됩니다 — 적용하기 전에 정확히 무엇이 수정되는지 확인할 수 있습니다.
실험은 (대부분) 성공했다
명확한 가이드라인—적절한 파일 구분, 정의된 아키텍처, 구체적인 모듈 책임—을 제공했을 때 AI는 빠르고 깔끔하게 결과물을 내놓았습니다. 이전 프로젝트에서 얻은 핵심 교훈이 그대로 적용되었습니다: AI는 구현에 뛰어나지만, 구조는 직접 관리해야 합니다.
아키텍처를 자유롭게 맡겨두면 엉망이 되었고, 경계를 설정해 주었을 때는 정말 효율적이었습니다.
전체 개발 과정을 DEVELOPMENT.md 에 문서화했습니다—7번의 반복 작업, AI가 성공한 부분, 실패한 부분, 그리고 제가 직접 개입해 수정한 내용들.
The Stack
- Vanilla JavaScript — ES5 IIFE, 프레임워크 없이, 트랜스파일러 없이
- PHP — i18n 부트스트래핑 전용 (번역 JSON 로드)
- CSS — 테마를 위한 커스텀 프로퍼티
- Dependencies: zero
npm 없음. 빌드 단계 없음. 로드할 것이 없기 때문에 빠르게 로드됩니다.
Try It
- Live demo — CSS를 붙여넣고 Analyze를 클릭하세요. 로그인 필요 없고, 설치도 필요 없습니다.
- 직접 호스팅하고 싶으신가요? PHP 7.4+와 의존성 없이 바로 사용할 수 있습니다 — GitHub에 있는 설치 안내를 확인하세요.
다음은?
필요한 기능을 수행합니다. 하지만 직접 사용해 보면서 “이것도 X를 해야 할 것 같은데” 라고 생각한다면 — 이슈를 열어 주세요, PR을 제출하거나, 레포에 ⭐️를 눌러 주세요. 누군가가 같은 문제를 겪고 있다는 걸 알 수 있게요.
링크
AI가 코드를 작성하고, 나는 결정을 내립니다. 가끔은 그게 아주 잘 맞아떨어집니다.