카드 한쪽 액센트 바를 정적 검사로 막는 방법

1인 브랜드의 화면은 작은 반복에서 인상을 만들어요. 카드 왼쪽에만 색을 넣는 액센트 바는 빠르게 구분감을 주지만, 여러 화면에 누적되면 제품보다 템플릿이 먼저 보일 수 있어요. 콘텐츠 랜딩 페이지, 안내 카드, 기능 소개 영역에서 같은 장식이 반복되면 브랜드의 문장과 메시지도 비슷하게 느껴집니다.

직접 만들어 보니 디자인 규칙을 문서에만 적어 두는 방식은 오래가지 않았어요. 화면 하나를 급히 추가할 때 border-l-4 같은 클래스가 자연스럽게 들어가기 때문이에요. 그래서 “카드 한쪽의 굵은 색 띠는 쓰지 않는다”를 코드 검사 규칙으로 옮기는 편이 더 재현 가능했어요.

디자인 원칙→금지 패턴 정의→정적 검사→코드 리뷰

검사 대상은 보통 3가지예요.

• border-l-4처럼 왼쪽 테두리 두께를 직접 지정한 클래스
• border-left와 강조 색상을 함께 쓴 스타일
• 카드 안에 absolute, left-0, inset-y-0, 좁은 너비를 조합한 장식용 div

적용해 봤더니 단순 문자열 검색만으로도 첫 번째 후보를 빠르게 찾을 수 있었어요. 다만 border-l-4가 항상 문제인 것은 아니에요. 표, 입력 영역, 실제 경계선처럼 의미가 분명한 경우가 있으니 검사 결과는 자동 삭제가 아니라 리뷰 목록으로 보내는 편이 안전해요. 1개 규칙이 2가지 역할을 맡지 않도록, “카드 장식”과 “일반 테두리”의 판단 기준도 분리해 둡니다.

테스트해 보면 검사 규칙은 4개 패턴으로 시작해도 충분해요. 금지해야 할 클래스와 허용 사유를 한 파일에 기록하고, 새 컴포넌트가 추가될 때마다 검사 범위를 넓히면 돼요. 정규식은 코드 구조를 완전히 이해하지 못하므로, JSX 속성과 className처럼 범위를 좁혀 오탐을 줄이는 것이 좋아요.

• ✓반복 장식 감지
• ✓허용 사유 분리
• ✓리뷰 목록 유지

돌려 보니 이 규칙의 목적은 특정 CSS 문법을 벌주는 데 있지 않았어요. 카드마다 색 띠를 붙이는 대신 제목 크기, 여백, 정보의 우선순위로 차이를 만드는 연습이 남아요. 플랜비(plan-b)의 멤버·회비·출전 로테이션처럼 서로 다른 정보를 한 화면에 둘 때도, 장식보다 정보 구조가 먼저 읽히게 하는 기준으로 활용할 수 있어요.

브랜드는 로고만으로 유지되지 않아요. 반복되는 UI 선택을 줄이는 작은 정적 검사가 콘텐츠와 제품 화면의 결을 함께 지켜 줍니다.