같은 얼굴이 반복되는 이유
생성 모델은 자기가 본 것의 가운데를 낸다. 공개 웹에 가장 많이 쌓인 화면은 지난 몇 년의 SaaS 랜딩 페이지와 대시보드 템플릿이고, 그것들이 서로 닮아 있으니 학습한 모델의 기본값도 그 가운데로 모인다. 그래서 다른 회사, 다른 모델, 다른 프로젝트인데 결과가 같은 얼굴을 한다.
이건 모델이 못 만들어서가 아니다. 지시가 없을 때 무엇을 고를지에 대한 기본값이 하나뿐이라서 생기는 현상이다. 기본값을 바꾸지 않는 한 프롬프트를 아무리 다듬어도 같은 자리로 돌아온다.
그래서 필요한 것은 더 좋은 형용사가 아니라 목록이다. 무엇이 반복되는지 이름을 붙여 두면, "촌스럽다"는 감각이 "이 열한 가지를 고쳐라"는 작업 지시로 바뀐다. Impeccable이라는 오픈소스 도구가 그 목록을 규칙으로 만들어 두었다. Anthropic이 공개했던 frontend-design 스킬에서 출발한 프로젝트다.
반복되는 표시와 대신 할 것
아래는 검사기가 실제로 이름을 붙여 잡아내는 항목들이다. 규칙 이름이 있다는 게 핵심이다. 이름이 있으면 리뷰에서 "좀 이상해요" 대신 "이건 카드 속 카드예요"라고 말할 수 있고, 고칠 방향도 함께 정해진다.
표의 오른쪽 열이 대안이다. 대부분은 요소를 더하는 게 아니라 빼는 쪽이다. 색 띠를 지우고, 그라디언트를 단색으로 되돌리고, 카드 껍데기를 벗기고 여백으로 구분한다. 화면이 심심해질까 걱정되지만, 실제로는 그 자리에서 정보가 먼저 보이기 시작한다.
폰트 항목은 오해가 잦다. Inter가 나쁜 활자라는 뜻이 아니라, 너무 많은 곳에 쓰여 더는 그 화면을 구별해 주지 않는다는 뜻이다. 검사기가 함께 지목하는 목록에는 Roboto, Geist, Plus Jakarta Sans, Space Grotesk, Fraunces가 들어 있다. 브랜드가 정한 폰트라면 예외로 기록해 두면 된다.
| 반복되는 표시 | 왜 문제인가 | 대신 무엇을 |
|---|---|---|
| 카드 왼쪽 굵은 색 띠 | AI가 만든 화면에서 가장 알아보기 쉬운 표시 | 띠를 지우거나 훨씬 옅은 악센트로 |
| 제목에 얹은 그라디언트 | 장식일 뿐 의미를 전달하지 않는다 | 단색으로. 강조는 크기와 굵기로 |
| 보라에서 파랑으로 흐르는 배경 | AI 산출물의 대표적 색 조합 | 브랜드가 정한 색 한 벌을 쓴다 |
| 색 배경 위 회색 글자 | 대비가 무너져 흐릿해 보인다 | 흰색이나 배경의 짙은 계열로 |
| 사방으로 퍼진 색 발광 그림자 | 기본으로 멋져 보이려는 장치 | 중립적인 그림자로 높이만 표현 |
| 카드 안에 또 카드 | 테두리가 겹쳐 시각적 소음이 된다 | 여백과 얇은 구분선으로 나눈다 |
| 제목 위 작은 대문자 라벨 | 제목이 이미 하는 일을 반복한다 | 지우고 제목에 녹여 쓴다 |
| Inter 등 흔한 폰트 | 너무 흔해 화면을 구별해 주지 못한다 | 브랜드 활자를 정하거나 덜 쓰인 얼굴로 |
| streamline·supercharge 같은 상투어 | 무엇을 하는 제품인지 사라진다 | 동사와 명사를 구체적으로 쓴다 |
눈이 아니라 명령으로 확인한다
검사는 npx impeccable detect 한 줄이다. 파일이나 폴더, 또는 주소를 주면 걸린 항목을 규칙 이름과 함께 알려준다. LLM을 부르지 않으므로 API 키가 필요 없고, 같은 입력에는 같은 결과가 나온다.
확인 삼아 위 표의 표시들을 일부러 채워 넣은 HTML 한 장을 만들어 돌려 봤다. 17건이 나왔다. 그다음 지적받은 항목만 고쳤다. 색 띠를 지우고, 제목 그라디언트를 단색으로 바꾸고, 배경을 단색으로, 본문 글자 색은 대비가 나오도록 올리고, 중첩 카드를 얇은 구분선으로 풀고, 폰트를 바꿨다. 레이아웃 구조와 정보의 순서는 건드리지 않았다.
다시 돌리니 0건이었다. 아래 이미지가 그 전후다. 오른쪽이 더 나아 보인다면, 바뀐 것은 감각이 아니라 규칙 위반 열한 종이다.
한 가지 덧붙이면, 검사 방식은 대상에 따라 갈린다. HTML은 연결된 CSS까지 묶어 정적 분석하고, JSX 같은 파일은 패턴 매칭이며, 주소를 주면 실제 브라우저로 렌더된 화면을 본다. 그래서 소스 스캔이 깨끗해도 배포된 주소에서 걸리는 항목이 따로 있을 수 있다.
규칙을 다 따를 필요는 없다
목록은 판결문이 아니라 점검표다. 브랜드가 이미 Inter를 쓰기로 정했다면 그건 위반이 아니라 결정이다. 이럴 때는 파일 안에 impeccable-disable 주석을 넣어 그 자리만 면제하거나, 저장소 설정에 예외를 기록해 둔다. 어느 쪽이든 이유를 함께 적게 되므로, 다음 사람이 "왜 여기만 다르지"라고 묻지 않아도 된다.
일부 항목은 애초에 실패로 세지 않는다. 참고용으로 분류된 항목들은 목록에 나오되 종료코드를 바꾸지 않아 자동화를 막지 않는다. 자동화에 넣을 때는 이 구분을 먼저 확인하는 편이 좋다.
결국 이 목록의 쓸모는 취향을 통일하는 데 있지 않다. 매번 다르게 표현되던 지적을 같은 이름으로 부르게 만드는 데 있다. 이름이 같아지면 리뷰가 짧아지고, 같은 지적이 두 번 반복되지 않는다.