AI가 그리는 카드의 '한쪽 띠', 테스트 코드로 막은 이유

AI에게 카드 UI를 맡기면 이상할 만큼 자주 같은 그림이 나와요. 카드 한쪽 변에만 두꺼운 색 띠를 두르는 패턴이에요. 혹시 화면을 뽑을 때마다 이 띠를 지우고 있진 않나요?

혼자 브랜드를 운영하면서 화면 대부분을 AI와 함께 만들다 보니, 이 습관이 단순한 취향 문제가 아니라는 걸 알게 됐어요. 브랜드의 인상은 반복에서 나오는데, AI 기본값이 반복되면 내 브랜드가 아니라 'AI가 만든 티'가 쌓여요.

문서에 금지라고 적었더니 생긴 일

처음엔 디자인 가이드에 문장으로 적었어요. "카드 왼쪽 세로 띠 금지"라고요. 적용해 봤더니 결과가 재미있었어요. AI가 띠를 위쪽으로 옮겨 그린 거예요. 코드 주석에 '왼쪽 띠 대체'라고 남겨 놓기까지 했더라고요. 제가 만드는 농구 동호회 운영 매니저 플랜비(plan-b) 랜딩 카드에서 실제로 겪은 일이에요.

좁은 금지선은 오히려 바로 옆 디자인을 유도해요. 문장 규칙은 해석의 여지가 남는 한 계속 우회돼요.

문장으로 금지→AI가 띠 위치만 이동→테스트 코드로 차단

문장 대신 테스트 파일 1개

그래서 금지선을 테스트 코드로 옮겼어요. border-l-4 같은 클래스는 물론이고, 절대배치로 높이 3px짜리 가짜 띠를 만드는 방식까지 상·하·좌·우 4방향 전부 검사하는 테스트 파일 1개예요. 걸리면 빌드가 깨지니 우회할 길이 없어요. 예외가 꼭 필요하면 같은 줄에 사유 주석을 남겨야만 통과돼요.

직접 만들어 보니 30분이 안 걸렸어요. 그 뒤로는 화면 검토 때 띠를 지우는 일 자체가 사라졌어요.

대체 패턴은 미리 정해 둬요

금지만 하면 AI가 다른 어색한 장식을 채워 넣어요. 허용 패턴을 함께 적어 두는 게 중요했어요. 배경을 살짝 물들이는 틴트, 작은 색상 점, 카드 둘레를 도는 1px 보더 같은 것들이에요. 테스트해 보면 이 조합만으로도 카드 위계가 충분히 구분돼요.

• ✓배경 틴트
• ✓색상 점
• ✓둘레 1px 보더

1인 브랜드에게 금지선은 자산이에요

브랜드 가이드를 산문으로만 두면 읽는 쪽의 해석에 따라 흔들려요. 사람이든 AI든 마찬가지예요. 반복해서 지키고 싶은 취향이 있다면 검사 가능한 형태로 바꿔 보세요. 저는 이 테스트 하나로 '검토하는 사람' 역할을 코드에 넘겼고, 아낀 시간에 다음 화면을 만들어요.

취향을 코드로 적을 수 있을 때, 1인 브랜드도 일관성을 지킬 수 있어요.