제품 개발 이후, 그 바깥의 AI - 버그 잡는 디자이너

채널톡 프로덕트 디자이너가 Codex와 Cursor를 활용해 비개발자도 직접 UI 버그를 수정하고 GitHub PR을 제출하는 워크플로우("가드닝")를 구축한 실전 기록이다. 수개월 백로그에 쌓인 1px 오차·컬러 불일치 등 사소한 UI 이슈를 Linear와 Cursor Agent 연동으로 디자인팀이 자율 처리하는 5단계 프로세스를 단계별 명령어 예시와 함께 공개한다.

핵심 포인트

비개발자 디자이너가 Codex → Cursor로 전환하며 실제 CSS·컴포넌트 버그 PR 제출 워크플로우 완성
초기 Codex 대참사 교훈: 파일 범위를 명확히 지정하지 않으면 관련 없는 전체 컴포넌트까지 수정
Cursor Plan 모드 필수: "수정 계획 먼저 짜줘" 후 실행 → 엉뚱한 파일 수정·연쇄 버그 방지
Linear @Cursor 멘션으로 Agent 자동 호출 → PR 생성 + 티켓-PR 연동 이슈 트래킹
PR 검토 기준: 변경 줄 수 과다·무관 파일 포함 여부 확인, 머지 권한은 개발자만 유지
핵심 역할 재정의: AI가 코드 실행, 디자이너는 "어떤 문제를 어떤 경험으로 개선할지"를 정의

상세 정리

문제 배경: 1px 간격 오차·컬러 명세 불일치·텍스트 잘림 등 사소한 UI 이슈가 수개월 백로그에 방치
Codex 첫 시도 실패: 메시지 스트림 수정 요청 → 전체 데스크 스트림을 건드린 PR 생성, 개발자 리뷰로 긴급 차단
성공 전환점: 컴포넌트 이름 + 정확한 파일 위치 + 수정 방향 명시하자 정확도 급상승
"가드닝(Gardening)" 명명: 제품의 잡초(UI 오류)를 뽑는 정원사 역할로 디자인팀 업무 공식화
Step 1 — Linear 티켓 작성: 현재 상태 스크린샷 + 기대 스펙(디자인 명세) + 재현 조건(해상도·데이터 조건) 포함
Step 2 — Cursor Plan 모드 선행: 수정 파일 위치 / 하드코딩 vs 디자인 토큰 / 다른 컴포넌트 영향 여부 확인
Step 3 — @Cursor 멘션 명령 예시: `padding 16px 20px → 12px 16px, 디자인 토큰 기준, 관련 파일: KnowledgeStatSection.styled.ts`
Step 4 — PR 검토: 변경 줄 수 과다 또는 무관 파일 포함 시 "이 파일 왜 수정됐어?" 재질의
Step 5 — 개발자 리뷰(2인 이상) 및 머지: 디자이너는 머지 권한 없음, 승인 후 티켓 자동 Done 처리
포기 기준: Cursor가 반복 실패 시 즉시 개발자 에스컬레이션 또는 티켓 포기 (가드닝은 부가 업무)