오픈소스 UI 디자인 도구 'Impeccable 3.5' 출시… 모델별 'AI 슬롭' 잡는다

생성형 AI로 웹페이지를 만들면 누구나 한 번쯤 마주치는 익숙한 스타일이 있습니다. 어김없이 등장하는 베이지색 배경, 어색하게 벌어진 자간, 얇은 테두리에 번진 그림자입니다.

오픈소스 프론트엔드 디자인 도구 Impeccable 팀이 수천 개의 생성 데이터를 분석한 결과, 74%의 페이지가 AI 특유의 크림색 배경을 기본값으로 사용했고 76%는 과도한 자간을 적용했으며 90% 이상은 기본적인 명도 대비 기준조차 맞추지 못했습니다.

이에 Impeccable은 5월 29일 3.5 버전을 공개하고, 모든 모델에 동일한 지침을 전달하던 기존 방식을 버렸습니다. 각 모델이 보이는 고유한 디자인 결함에 맞춰 전용 규칙을 빌드 타임에 컴파일하는 방식을 도입한 것입니다.

모델별 단점을 정밀 타격하는 규칙 시스템

Impeccable 3.5는 GPT-5.5와 Codex 등 주요 모델별로 자주 발생하는 결함을 분석해 맞춤형 규칙을 적용합니다. 다른 환경에는 노출되지 않는 개별 맞춤 가이드라인이 모델마다 주어지는 구조입니다.

약 190개의 샘플 편향을 분석해 AI 특유의 뻔한 패턴을 대거 금지했습니다. 뉴트럴 톤에서의 크림색 배경 사용을 전면 금지하고, 대문자 아이브로우 텍스트, 번호가 매겨진 섹션 표시기, 3개 이상의 폰트 사용을 제한하며 엄격한 대비 기준을 세웠습니다.

새 프로젝트와 기존 코드베이스를 구분하는 지능도 갖췄습니다. 기존 프로젝트에서는 기존 디자인 토큰과 컴포넌트를 유지하는 것을 최우선으로 삼고, 새 프로젝트에서는 엄선된 129가지 앵커 컬러 중 하나를 바탕으로 색상 팔레트를 구성해 뻔한 색상 조합을 피합니다.

화면에서 바로 수정하고 소스에 반영하는 라이브 모드

이번 버전의 핵심 기능인 '라이브 모드'는 베타 단계로 전환됐습니다. 에디터와 대화창을 오갈 필요 없이 실제 화면에서 직접 UI를 다듬을 수 있습니다.

새로운 Steer 바에 텍스트나 음성으로 수정 사항을 지시하면 에이전트가 전체 페이지를 파악해 즉시 변경합니다. 특정 요소를 선택해 문구를 고치거나 스타일을 조정한 뒤 적용하면, 서브에이전트가 실제 소스 코드를 찾아서 직접 수정해 줍니다.

성능 개선을 위해 기존의 jsdom을 걷어내고 자체 CSS 캐스케이드 해석기를 도입했습니다. 160개 파일 기준 처리 속도가 6.8초에서 0.34초로 약 20배 빨라졌으며, 41개의 안티패턴 탐지 규칙이 가볍게 구동됩니다.

왜 중요한가

그동안 AI가 작성한 프론트엔드 코드는 기능은 작동할지언정 디자인 완성도가 떨어져 사람이 일일이 손봐야 하는 번거로움이 컸습니다. Impeccable 3.5는 거대언어모델의 뻔한 미적 감각을 엔지니어링 규칙으로 보정하는 현실적인 대안을 보여줍니다.

Cursor, Codex, Claude Code 등을 사용하는 개발자라면 즉시 도입을 고려해볼 만합니다. 특히 브라우저에서 직접 시각 요소를 수정하고 소스로 되돌리는 워크플로는 1인 개발자나 소규모 팀의 작업 속도를 크게 높여줍니다.

모든 모델에 동일한 프롬프트를 주는 대신 모델별 결함을 개별 공략한 점은 영리한 접근입니다. 다만 파운데이션 모델의 버전 업그레이드가 잦은 만큼, 모델별로 맞춤형 규칙을 지속해서 테스트하고 유지 보수해야 하는 부담은 과제로 남습니다.