AI가 자꾸 그리는 한 변 액센트 바, 테스트 코드로 막은 브랜드 금지선

카드 왼쪽에 두꺼운 색 띠 하나. AI에게 화면을 맡기면 거의 매번 이 모양이 돌아와요. 위로 옮기라고 하면 위에, 아래로 하면 아래에 띠가 붙어요. 문제는 방향이 아니라 "한 변에만 두꺼운 띠"라는 패턴 자체예요. 어디서 본 듯한 인상을 주고, 1인 브랜드가 가장 피해야 할 '어디선가 본 AI 화면' 느낌을 만들어요.

프롬프트로는 안 막혀요

처음엔 지침 문서에 "왼쪽 액센트 바 금지"라고 적었어요. 적용해 봤더니 띠가 위로 올라갔어요. 좁은 문구를 글자 그대로 지킨 거죠. 금지선이 좁으면 우회를 유도한다는 걸 그때 배웠어요. 그래서 "상·하·좌·우 4방향 전부, 구현 형태 불문"으로 넓혔는데, 문서는 문서일 뿐이에요. 읽고 잊는 날이 생겨요.

브랜드 규칙은 취향이 아니라 계약이에요. 계약은 사람이 매번 확인하는 게 아니라 기계가 확인해야 지켜져요.

테스트 파일 1개로 끝냈어요

농구 동호회 운영 매니저 플랜비 저장소에 테스트 파일 1개를 넣었어요. 하는 일은 단순해요. 컴포넌트 소스를 훑어서 border-t-2, border-l-4 같은 Tailwind 클래스, borderTop: 3px 같은 인라인 스타일, absolute inset-x-0 top-0 h-[3px]처럼 가짜 띠를 만드는 조합을 찾아요. 하나라도 걸리면 테스트가 실패하고 커밋이 막혀요.

AI가 화면 생성→테스트가 소스 스캔→단측 띠 검출 시 커밋 차단→사유 주석 있을 때만 통과

예외는 딱 한 가지예요. 같은 줄에 allow-one-sided-accent: 사유 주석 1줄을 달면 통과시켜요. 사유를 적어야 하니까 "그냥 예뻐서"로는 못 넘어가요. 직접 만들어 보니 정규식 몇 줄이라 20분 정도면 충분했고, 새 도구 없이 기존 테스트 러너 위에서 그대로 돌아갔어요.

돌려 보니 달라진 것

돌려 보니 AI가 띠 대신 다른 방법을 찾기 시작했어요. 배경 틴트, 8px 색상 점, 전체 둘레 1px 테두리 같은 것들이요. 금지선이 명확하면 대안도 명확해져요. 테스트해 보면 카드마다 색이 다른 단측 보더도 똑같이 걸려요. 색이 다르다고 면제가 아니거든요.

• ✓프롬프트는 우회됨
• ✓테스트는 우회 못 함
• ✓예외는 사유 주석 1줄
• ✓대안은 틴트
• ✓점
• ✓둘레 보더

1인 브랜드에게 이게 왜 중요한가

혼자 만들면 디자인 리뷰어가 없어요. 내가 지치는 날, AI가 만든 화면을 그냥 통과시키는 날이 브랜드가 흐려지는 날이에요. 금지선을 코드에 박아 두면 그날에도 브랜드가 지켜져요. 문서에 적힌 규칙은 읽는 사람이 있을 때만 살아 있고, 테스트에 적힌 규칙은 커밋마다 살아 있어요.

첫 규칙으로 뭘 고를지 고민이라면, AI 산출물에서 가장 자주 보이는 패턴 하나를 고르세요. 저한텐 그게 한 변 액센트 바였어요.