임팩트: AI 도구가 생성하는 저품질 코드(slop)를 사전 차단하는 다층 방어 시스템을 설계·구축. 정적 분석(ESLint), 아키텍처 경계(dependency-cruiser), 데드코드 탐지(knip), 컨벤션 자동 검사(커스텀 스캐너), PR 크기/복잡도 경고(SPI Score)를 CI 파이프라인에 통합.

정량 지표: as any 8건 제거, 미사용 export 52개 제거, 컨벤션 규칙 14개 자동 검사화, 아키텍처 구역 3개 정의, PR 파이프라인 12단계 품질 게이트

면접 훅: AI 도구 도입 후 코드 품질이 하락하는 문제를 인식하고, 정적 분석·아키텍처 경계·컨벤션 스캐너·CI 품질 게이트를 결합한 다층 방어 시스템을 설계해서 AI 생성 코드에도 시니어 수준 품질을 강제한 경험입니다.

배경 (Situation)

이마트 모바일 웹 프론트엔드 모노레포(Vue 3 + TypeScript) 환경에서 AI 도구(Cursor, Copilot, Claude) 도입 후 코드 생성 속도는 빨라졌지만, as any 남발, 미사용 export 누적, 컨벤션 무시, 컴포넌트 중복 생성 등 품질 하락 징후가 발견되었습니다. 레거시 코드베이스는 Vue 2에서 3으로 마이그레이션 중이었고, ESLint flat config가 미적용된 상태였습니다. 테스트 커버리지가 부재했으며, 기존 리뷰 프로세스로는 AI slop을 감지할 수 없었습니다. 솔로 설계 후 팀 리뷰(김태남, 허지선 2명 리뷰어)를 거쳤으며, 문제 인식부터 시스템 설계, 구현, CI 통합, 문서화까지 E2E 오너십을 전체 주도했습니다.

AI Slop 방어 체계/
  • Layer 1 — 정적 분석
    • ban-ts-comment
    • no-explicit-any
  • Layer 2 — 아키텍처 경계
    • dependency-cruiser
    • Core/Product/Sandbox 구역
  • Layer 3 — 데드코드 탐지
    • knip (미사용 export/dep)
  • Layer 4 — 컨벤션 스캐너
    • scan.mjs (14개 규칙)
  • Layer 5 — PR 품질 게이트
    • SPI Score
    • 12단계 CI 파이프라인

문제 (Task)

AI 생성 코드가 인간 리뷰를 우회하여 품질 저하를 유발하는 구조적 문제를 해결해야 했습니다. 단일 도구가 아닌 여러 계층에서 동시에 품질을 강제하는 시스템적 접근이 필요했고, 리뷰어 부담을 줄이면서도 AI slop이 머지되지 않도록 자동화된 가드레일을 구축해야 했습니다.

AS-IS (AI 도구 도입 후)

장점

  • 코드 생성 속도 향상

고려할 점

  • as any 남발
  • 미사용 export 누적
  • 컨벤션 무시
  • 컴포넌트 중복
  • 리뷰어 과부하

TO-BE (다층 방어 체계)

장점

  • AI 생성 코드에도 시니어 수준 품질 강제
  • 리뷰어가 비즈니스 로직에 집중

고려할 점

  • 초기 설정 비용
  • 레거시 코드 정리 필요

판단과 행동 (Action)

Layer 1에서는 정적 분석을 강화했습니다. ESLint에 ban-ts-comment와 no-explicit-any를 활성화하고, dependency-cruiser로 아키텍처 경계(Core/Product/Sandbox)를 강제했습니다.

Layer 2에서는 데드코드 탐지를 도입했습니다. knip을 적용하여 미사용 export/dependency를 CI에서 hard-fail 처리하도록 설정했고, 초기 52개의 미사용 export를 일괄 제거했습니다.

Layer 3에서는 컨벤션 자동 검사를 구축했습니다. 커스텀 Node.js 스캐너(scan.mjs)를 개발하여 타입 네이밍, 선언 순서, 매직넘버, transform 패스쓰루 등 14개 규칙을 AST 없이 정규식 기반으로 검사하도록 했습니다.

Layer 4에서는 PR 크기/복잡도 경고를 적용했습니다. SPI(Slop Probability Index) 점수 산출 스크립트를 작성하여 AI slop 확률이 높은 PR을 조기에 감지하도록 했습니다.

Layer 5에서는 AI 스킬을 통합했습니다. dev-quality-gate 스킬을 만들어 AI 에이전트가 코드 생성 시 컨벤션을 사전 인지하도록 규칙을 컨텍스트에 주입했습니다.

실패/피봇도 있었습니다. 초기에 scripts를 .ai/skills/와 front/scripts/에 중복 배치했다가 리뷰에서 지적받고, 관심사 분리(SKILL용 vs CI용)를 재설계하면서 공통 유틸 shared.mjs를 추출했습니다.

🚫

as any

8건 제거

🗑️

미사용 export

52개 제거

📏

컨벤션 규칙

14개 자동화

🏗️

아키텍처 구역

3개 정의

결과 (Result)

정량적으로 as any 8건 제거, 미사용 export 52개 제거, 14개 컨벤션 규칙 자동 검사화, 12단계 CI 품질 게이트 구축, 아키텍처 구역 3개 정의를 달성했습니다.

정성적으로는 AI 도구 사용 시에도 코드 품질 저하를 구조적으로 방지할 수 있게 되었습니다. 리뷰어가 컨벤션이나 타입 문제 대신 비즈니스 로직에 집중할 수 있는 환경이 마련되었습니다.

팀/조직 차원에서는 팀 전체가 AI 도구를 안심하고 사용할 수 있는 안전망을 확보했습니다. 문서화된 컨벤션과 자동 검사를 통해 온보딩 비용도 감소했습니다.