프론트엔드 팀에 게이트키핑 도입하기

HANUI·
프론트엔드품질관리CI/CD팀협업DX

최근 OpenClaw의 게이트키핑 아키텍처 글을 읽었어요. 31만 스타 프로젝트의 품질 관리법인데, 읽으면서 생각했어요.

"이거 우리 팀에도 바로 적용할 수 있잖아."

저는 프론트엔드 6인 팀에서 일하고 있어요. 6명이면 코드 리뷰도 하고, PR도 올리고, 가끔 충돌도 나고 — 품질 관리가 슬슬 필요해지는 규모예요. 근데 "품질 관리"라고 하면 거창하게 들리잖아요. 사실 핵심은 간단해요.

기계가 잡을 수 있는 건 기계가 잡고, 사람은 기계가 못 하는 판단만 한다.

왜 필요한가 — 6인 팀의 현실

6명이 같은 코드베이스에서 작업하면 이런 일이 생겨요.

  • dashboard 폴더에 만든 훅을 logs 페이지에서 import하고 있어서, 파일 위치를 옮겨달라는 리뷰가 달림
  • A가 만든 styled 컴포넌트를 B가 다른 도메인에서 갖다 쓰면서 의존성이 꼬임
  • 공통 컴포넌트인 줄 알고 import했는데, 특정 페이지 전용 레이아웃 스타일이 들어있었음
  • 누군가 거대한 라이브러리를 추가했는데 아무도 번들 사이즈를 안 봄

코드 리뷰에서 매번 같은 지적이 반복돼요. "이 파일은 여기 있으면 안 돼요", "이 import 경로는 도메인이 다른데요" — 리뷰어가 아키텍처 경계를 사람 눈으로 지키고 있는 거예요.

게이트키핑은 이걸 해결해요. 단계별로 자동 검문소를 세워서, 사람이 볼 때쯤엔 진짜 중요한 것만 남겨놓는 거예요.

1단계: 커밋 전 — 스타일 논쟁을 없애기

팀에서 가장 흔한 리뷰 코멘트가 뭔지 아세요?

  • "여기 세미콜론 빠졌어요"
  • "import 순서 정리해주세요"
  • "들여쓰기가 탭이네요, 스페이스로 바꿔주세요"

이걸 사람이 지적하고 있으면 시간 낭비예요.

lint-staged + husky를 세팅하면, 커밋하는 순간 자동으로 포맷팅이 맞춰져요. 세미콜론, 들여쓰기, import 순서 — 전부요.

팀원 6명이 각자 다른 에디터 설정을 써도 상관없어요. 커밋하면 전부 같은 포맷으로 나가니까요.

세팅 시간: 10분. 이후 코드 리뷰에서 포맷팅 관련 코멘트가 0개가 돼요.

2단계: push 전 — "이거 빌드 돼?"

팀원이 PR을 올렸는데 CI에서 빌드가 깨지면 어떻게 되나요?

  1. CI 실패 알림이 옴
  2. "아 빌드 깨졌네, 수정할게요" 커밋 추가
  3. 리뷰어가 다시 봄
  4. 시간 낭비

push 전에 로컬에서 빌드를 한 번 돌리면 이게 안 생겨요.

이 한 줄이 잡아주는 것들:

  • TypeScript 타입 에러
  • import 경로 오류 (없는 파일 참조)
  • SSR 호환성 (window is not defined)
  • 환경 변수 누락

"빌드 돌려보고 push 해주세요"라고 팀 규칙을 정하는 것만으로 CI 실패율이 확 줄어요.

3단계: CI — 팀 전체가 믿을 수 있는 자동 검사

push하면 CI가 돌아가요. 여기서부터가 팀에게 중요한 부분이에요.

리뷰어가 빌드를 직접 돌려볼 필요가 없어요. CI가 초록불이면 "이 코드는 빌드되고, 린트 통과하고, 테스트도 통과했다"는 거예요.

6인 팀에서 CI가 해줄 수 있는 것들:

  • 빌드 + 타입 체크 — 기본 중의 기본
  • 린트 — ESLint 규칙 위반 잡기
  • 테스트 — 기존 기능이 안 깨졌는지 확인
  • 번들 사이즈 체크 — 누군가 무심코 추가한 무거운 라이브러리 감지
  • 접근성 검사 — WCAG AA 기준 위반 자동 탐지

특히 접근성 검사는 사람이 하면 빠뜨리기 쉬운데, 기계는 안 빠뜨려요. 색상 대비, aria 속성, 키보드 접근 — 매 PR마다 자동으로 돌아가요.

4단계: PR 리뷰 — 진짜 중요한 것만 보기

1~3단계를 거치면 리뷰어 앞에 도착하는 코드는 이미 이런 상태예요.

  • ✅ 포맷팅 완벽
  • ✅ 타입 에러 없음
  • ✅ 빌드 성공
  • ✅ 테스트 통과
  • ✅ 접근성 기본 검사 통과

리뷰어는 기계가 못 잡는 것만 보면 돼요.

  • 이 컴포넌트 구조가 맞는가?
  • 비즈니스 로직이 기획 의도와 일치하는가?
  • 더 나은 방법이 있는가?
  • 나중에 유지보수할 때 문제 없는가?

6인 팀에서 효과적인 PR 습관 하나를 추천하면요 — "테스트하지 않은 것"을 적는 거예요.

"다 테스트했습니다"보다 "이건 못 했습니다"가 리뷰어에게 훨씬 유용해요. 리뷰어가 뭘 집중해서 봐야 하는지 바로 알 수 있거든요.

5단계: 배포 — 사람이 버튼을 누르기

OpenClaw 글에서 가장 인상적이었던 원칙이에요.

"되돌릴 수 없는 행동 앞에서는 멈춘다."

6인 팀에서도 배포는 자동화하면 안 되는 영역이에요. main에 머지하면 자동 배포? 위험해요.

  • 금요일 오후에 누가 머지했는데 버그가 있으면?
  • 핫픽스인 줄 알았는데 사이드 이펙트가 있으면?

"머지 → 스테이징 자동 배포 → 사람이 확인 → 프로덕션 수동 배포"

이 흐름이면 충분해요. 프로덕션 배포 버튼은 사람이 누르는 거예요.

보너스: Jira/Confluence 연동

우리 팀은 Jira + Confluence를 쓰고 있어요. 게이트키핑이랑 연결하면 더 강력해져요.

GitHub + Jira 연동으로 되는 것들:

  • PR을 올리면 Jira 티켓 상태가 자동으로 "In Review"로 변경
  • CI가 통과하고 머지되면 "Done"으로 자동 전환
  • 커밋 메시지에 FRONT-123 같은 티켓 번호만 넣으면 Jira에서 해당 커밋이 바로 연결됨

Confluence에서 되는 것:

  • 배포 히스토리를 자동으로 페이지에 기록
  • "이번 스프린트에 뭐가 배포됐지?" — Confluence 페이지 하나 보면 끝
  • PR 템플릿의 "확인하지 않은 것" 항목을 QA 체크리스트로 자동 생성

세팅은 GitHub Marketplace에서 Jira Software + GitHub 앱을 설치하면 돼요. 10분이면 끝나요.

포인트는 이거예요 — 사람이 Jira 보드를 직접 옮기는 게 아니라, 코드가 흐르면 티켓도 따라 흘러가는 거예요. "이거 지금 어디까지 됐어요?" 질문이 사라져요. Jira 보면 되니까요.

6인 팀에 맞는 세팅 정리

단계뭘 하는가세팅 시간효과
1. 커밋 전자동 포맷팅10분스타일 논쟁 제거
2. push 전로컬 빌드 체크팀 규칙만CI 실패 감소
3. CI빌드+린트+테스트+접근성반나절리뷰 전 자동 검증
4. PR 리뷰기계가 못 잡는 것만PR 템플릿리뷰 품질 향상
5. 배포수동 프로덕션 배포워크플로우 설정사고 예방
보너스. Jira 연동티켓 상태 자동 전환10분상태 추적 자동화

전부 합쳐도 하루면 세팅할 수 있어요. 한 번 세팅하면 매일 알아서 돌아가고요.

결론

게이트키핑은 거창한 게 아니에요. **"기계가 잡을 수 있는 건 기계에게 맡기자"**가 전부예요.

6인 팀이라면 오늘 당장 1단계(lint-staged)부터 넣어보세요. 내일 코드 리뷰에서 "세미콜론 빠졌어요" 코멘트가 사라져요. 그게 시작이에요.

"꼼꼼히 보자"는 다짐은 3일이면 무너져요. 시스템은 안 무너져요.


관련 링크

HANUI

KRDS 기반 React 컴포넌트 라이브러리. 공공 웹 개발을 더 쉽게.