~/csslab.dev/notes $ ls

// note

FSD 레이어 경계를 린터로 강제 — 사람 리뷰 대신 규칙으로

  • 대규모 프론트엔드 SaaS를 FSD(Feature-Sliced Design)로 신규 구축 — 레이어가 상위에서 하위로만 향해야 하는 구조

증상

  • 급하면 ../../../로 상위 레이어를 직접 당겨옴 — 경계가 말로만 있으니 무너짐
  • 생성된 API 타입·내부 구현을 아무 데서나 직접 import해 캡슐화가 붕괴
  • 리뷰어가 눈으로 잡는 방식이라 누락됨

원인

  • 레이어 경계가 문서·구두 약속으로만 존재
  • 린터에는 계층 방향을 표현할 수단이 없음 — 계층 이름과 순서가 프로젝트마다 다르니 기본 규칙으로 제공될 수 없는 축

조치

먼저 린터로 할 수 있는 만큼만.

  • 깊은 상대경로 차단 — 3단계 이상 상대경로를 막아 alias를 강제. import 출처가 어느 레이어인지 경로에 드러남
  • 직접 import 차단, 공개 재export 경유 — 생성 타입·내부 모듈은 도메인별 공개 지점을 통해서만. "어디서 규칙을 끄는가"가 곧 "어디가 공개 진입점인가"의 선언이 됨
  • level은 경고로 시작 — 규칙이 무거우면 다들 꺼버리므로 얇게 시작해 실제로 새는 구멍만 막음

유도만으로는 역방향 import가 계속 새어 들어와, 계층 방향을 직접 정의하는 도구로 승격.

  • 앱마다 규칙을 복붙하지 않도록 경로 패턴 한 벌로 앱 3개를 커버하고, 순환 참조도 같은 곳에서 함께 검사
  • 경고 가시화에서 커밋 훅 차단으로 올림
  • 이미 있던 위반을 한 번에 다 막으면 개발이 멈춤 → 기존 위반은 목록으로 동결하고 신규만 차단. 동결분은 이후 전량 해소해 0에서 시작
  • 위반이 많이 쌓인 레거시 앱 하나는 게이트에서 빼두고 위반 수를 줄인 뒤 편입

결과

  • 도입 5주 후 재검사 — 앱 2개 1,210모듈·3,465의존성에서 위반 0건
  • FSD 전환으로 세운 구조가 역방향 import로 되돌아가지 않게 유지됨

AI CLI가 생성하는 코드에도 같은 기준을 적용한 쪽 → AI 코드 생성 규칙