프론트엔드 팀에 게이트키핑 도입하기
최근 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에서 빌드가 깨지면 어떻게 되나요?
- CI 실패 알림이 옴
- "아 빌드 깨졌네, 수정할게요" 커밋 추가
- 리뷰어가 다시 봄
- 시간 낭비
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 컴포넌트 라이브러리. 공공 웹 개발을 더 쉽게.