디자인 시스템 · CI 게이트 케이스스터디

홈페이지가 처음으로 하나의 얼굴을 가진 날 — CI 기계 게이트로 24개 파일을 하루에 통일하다

한 줄 답변

기업백년 홈페이지는 24개 HTML 파일레거시 팔레트 10종이 제각각 쓰이고 있었습니다. 2026년 6월 4일 하루, CI Option C(웜 모노크롬)로 전부 통일했습니다. 핵심은 사람이 눈으로 하나씩 점검한 것이 아니라, ai_tell_scanner.pydesign_checker.py(Gate3)라는 결정론 게이트가 "AI 디자인 티"를 잡아내고 기준 미달을 자동 차단한 것입니다. Gate3 점수는 0에서 100으로, ai_smell 등급은 HEAVY에서 0으로 수렴했습니다.

디자인을 맞춘다는 것은 색을 바꾸는 일이 아닙니다. 기준이 "검증된 코드"로 박혀 있느냐의 문제입니다. 홈페이지를 열 때마다 파일마다 다른 버튼 색, 다른 간격, 다른 폰트 굵기를 봤습니다. 누군가 AI에게 페이지를 만들어 달라 했고, AI는 매번 자기 판단으로 색을 골랐습니다. 의도가 아니라 구조의 부재가 만든 결과였습니다.

이 글은 24개 파일을 하루에 통일한 과정, 그리고 그것이 가능했던 이유인 기계 게이트의 설계를 기록합니다. 수치는 ANC 내부 운영 기록 기준이며, 외부 패턴은 1차 출처로 명기했습니다.

1. 문제: 24개 파일, 10개의 팔레트

2026년 6월 4일 감사를 시작했을 때, 홈페이지 HTML 파일 24개를 분류한 결과는 예상보다 심각했습니다. 공개 페이지 20개, 내부용 2개, 아카이브 5개로 나뉜 파일 각각에 레거시 민트 팔레트, 무관계한 블루 계열, 기본 회색이 뒤섞여 있었습니다.

브랜드가 여러 얼굴을 가지면 방문자는 같은 회사를 탐색하는 것인지 알 수 없습니다. Princeton 연구팀이 발표한 GEO 논문(Aggarwal et al., arXiv:2311.09735, KDD 2024)에 따르면 AI 검색 엔진은 콘텐츠의 일관성과 권위성을 인용 가중치에 반영합니다. 시각 일관성이 없는 사이트는 신뢰도 신호 자체가 분산됩니다.

항목통일 전통일 후출처
HTML 파일 수24개24개(구조 유지)ANC 운영 기록 2026-06-04
레거시 팔레트 종류10종0종ANC 운영 기록 2026-06-04
Gate3 점수0100design_checker.py 실측
ai_smell 등급HEAVY0(PASS)ai_tell_scanner.py 실측

2. AI 디자인 티란 무엇인가

AI가 생성한 디자인에는 공통 패턴이 있습니다. 지나치게 선명한 그라디언트, 필요 없는 글로우(glow) 효과, 균일하게 반복되는 카드 레이아웃, 배경색과 충돌하는 액센트 선택이 대표적입니다. 이것이 "AI 티"입니다.

ANC의 ai_tell_scanner.py는 CSS와 HTML 파일을 대상으로 이 패턴을 정규표현식으로 탐지합니다. 탐지 결과는 세 등급으로 나뉩니다.

이날 작업 전 공개 페이지 20개 중 다수가 HEAVY 등급이었습니다. 스캐너가 없었다면 이 사실 자체를 알 수 없었을 것입니다.

3. CI Option C: 색이 아니라 기준의 확정

CI Option C는 단순한 색 조합이 아닙니다. 기업백년 대표가 직접 "이 시안으로 진행"이라고 확정한 유일한 기준입니다. 웜 베이지 배경(#fafaf8), 딥 그린 액센트(#8b6f47), 서피스 화이트(#ffffff)가 핵심 삼원색입니다. 이 값들이 CSS 변수로 고정되면, 이후 생성되는 모든 AI 디자인은 이 변수를 참조해야 합니다.

"기준이 코드로 박히지 않으면 매번 협의를 반복한다. 협의는 기준이 없다는 증거다."— ANC 디자인 시스템 운영 원칙

Gate3의 첫 번째 체크는 CSS 변수값이 CI Option C 기준과 일치하는지입니다. 값 하나라도 다르면 바로 rc=1이 반환됩니다. 디자이너의 눈이 아니라 diff 비교가 기준을 지킵니다.

4. 통일 과정: 스크립트가 파일을 가로질러 적용했다

전략은 두 단계였습니다. 첫째, 레거시 팔레트를 정의한 인라인 스타일과 파일 내 CSS를 일괄 탐지·제거하는 스크립트를 작성했습니다. 둘째, 공통 base.css를 CI Option C 기준으로 재정의하고, 24개 파일이 이를 참조하도록 head 태그를 표준화했습니다.

스크립트는 Nova가 설계하고 반복 실행했습니다. 각 파일에 대해 Gate3를 독립적으로 실행해 통과 여부를 확인했고, 실패한 파일은 로그에 쌓아 다음 수정 루프에 자동 피드백됐습니다. 수동 점검이 없어도 어느 파일이 기준에서 벗어났는지 정확히 알 수 있었습니다.

출처: ANC 내부 운영 기록(2026-06-04) · ai_tell_scanner.py·design_checker.py(Gate3) 실측 · Aggarwal et al., GEO: Generative Engine Optimization, arXiv:2311.09735, KDD 2024

5. 결정론 게이트: 기계는 거부권, 사람은 승인권

Gate3가 PASS를 반환하기 위해 충족해야 하는 조건은 다음과 같습니다. CI Option C 팔레트 변수 일치, ai_smell 등급 PASS, 모바일 뷰포트 메타 존재, H1 태그 단일 존재, 내부링크 최소 2개. 이 중 하나라도 미충족이면 rc=1이 반환되고 파이프라인이 멈춥니다.

외부에 공개되는 파일은 Gate3 통과 이후에도 Nova가 최종 확인합니다. 기계가 기준을 지키는 역할을 맡고, 사람은 최종 방출을 승인하는 역할을 맡습니다. 이것이 ANC 전체에 흐르는 원칙, "기계는 거부권, 사람은 승인권"입니다.

"자동화는 사람을 없애는 것이 아니라 사람을 마지막 자리에 세우는 구조다."— ANC 운영 원칙

이날 작업 후 ANC는 릴리스 게이트 규칙을 명문화했습니다. 외부 송출 시 Nova 검수를 필수 단계로 결선한 것입니다. 게이트가 먼저 걸러내고, 사람이 마지막으로 확인하는 이중 구조입니다.

자주 묻는 질문

Q. CI Option C가 뭔지 더 쉽게 설명해 주세요.

색과 간격과 폰트를 딱 하나의 기준으로 못 박은 것입니다. 어떤 AI가, 어떤 순서로 파일을 만들어도 그 기준을 쓰지 않으면 게이트가 통과시키지 않습니다. 기준이 문서가 아닌 코드에 있다는 것이 핵심입니다.

Q. ai_tell_scanner가 못 잡는 AI 티도 있나요?

있습니다. 정규표현식 기반이라 새로운 패턴은 업데이트가 필요합니다. 그래서 Nova가 외부 공개 전 마지막으로 한 번 더 확인하는 이중 구조를 유지합니다. 기계는 알려진 패턴을 빠르게 잡고, 사람은 새로운 패턴을 감지합니다.

Q. 파일이 수백 개였다면 하루에 가능했을까요?

스크립트는 파일 수에 비례해 처리 시간이 늘 뿐, 방식은 달라지지 않습니다. 오히려 파일이 많을수록 수동 점검 대비 기계 게이트의 이점이 커집니다. 핵심은 변수 맵을 단일 파일에 집중시키는 설계를 먼저 하는 것입니다.

N
Nova — 기업백년 경영지원실 디자인 실장. CI 컴플라이언스 게이트(Gate3)와 ai_tell_scanner를 설계·운영하며, 전사 시각 자산의 일관성과 품질 기준을 관할한다. 디자인을 '감각의 영역'이 아닌 '검증되는 기준'으로 운영하는 것이 주 철학이다.
기업백년이 이 시스템을 구축한 이유: 우리 오너 고객들의 가업이 다음 세대에도 이렇게 자율로 돌아가길 바라서입니다. 우리 회사 승계 준비 상태 확인하기 →
다음 단계