Read Original
#Design

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

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

Summary

백로그의 잡초 뽑는 디자이너? AI로 완성하는 '가드닝' 워크플로우

채널톡 디자이너가 Cursor와 Linear로 UI 버그를 직접 잡게 된 실무 비하인드

디자인 시스템이 완벽해도 실제 제품에는 사소한 버그가 쌓이기 마련입니다. 개발자의 손길을 기다리는 대신 AI를 활용해 디자이너가 직접 코드를 수정하고 PR을 올리는 혁신적인 '가드닝' 협업 방식을 소개하며 실무 적용 노하우를 공유합니다.

  • 01디자이너의 Git 연동 및 코딩 진입장벽을 AI 에이전트로 극복
  • 02Cursor Plan 모드를 활용해 안전하게 수정 범위를 파악하고 오류 방지
  • 03Linear 티켓 댓글로 AI를 호출하여 자동으로 GitHub PR을 생성하는 자동화
  • 04개발자 2인 리뷰 체계를 유지하여 코드 안정성과 디자인 퀄리티를 동시 확보
  • 05사소한 버그를 방치하지 않고 스스로 해결하는 '가드닝' 문화의 성공적 정착

RECOMMENDATION

UI 디테일을 직접 사수하고 싶은 프로덕트 디자이너와 단순 반복적인 스타일 수정 업무에서 해방되고 싶은 프론트엔드 엔지니어들에게 적극 추천합니다.

The Problem

개발자들이 핵심 기능 구현에 집중하는 동안 폰트 크기나 여백 등 사소한 UI 오류들이 우선순위에서 밀려 백로그에 방치되고 제품 퀄리티가 저해되는 문제가 발생했습니다.

The Solution

Cursor의 Agent 기능을 Linear 및 GitHub와 연동하여, 디자이너가 코드 수정 계획을 짜고 자동으로 PR을 생성할 수 있는 '가드닝' 프로세스를 구축했습니다.

The Result

백로그에 방치될 뻔한 수많은 UI 이슈들을 디자이너가 직접 해결함으로써 제품의 시각적 완성도를 높였으며, 비개발 직군의 기술적 자기효능감을 고취하고 개발자의 단순 수정 업무를 경감했습니다.

Trade-off

AI가 엉뚱한 파일을 수정하거나 범위를 벗어난 변경을 할 위험이 있어 개발자의 최종 코드 리뷰 리소스가 필수적이며, 복잡한 구조에서는 정확도가 떨어지는 한계가 있습니다.

03

Key Concepts

Concept · 01

Cursor

AI 기능이 에디터 자체에 내장된 코드 편집기로, 코드 작성부터 수정 계획 수립 및 에이전트 실행까지 지원하는 차세대 IDE입니다.

  • Plan 모드를 통해 수정 전 변경 파일과 스타일 적용 방식을 미리 검토함
  • Agent 기능을 활용해 디자이너의 자연어 명령을 코드로 변환하고 PR을 생성함
Concept · 02

Linear

빠르고 효율적인 협업을 지원하는 현대적인 이슈 트래킹 도구로, 강력한 API와 자동화 기능을 제공합니다.

  • 킬버그 워크플로우를 통해 제보된 버그를 자동으로 티켓화함
  • 티켓 댓글에서 AI 에이전트를 호출하고 GitHub PR과 연동하여 진행 상황을 추적함
Concept · 03

Gardening (가드닝)

제품에 쌓이는 사소한 UI 오류를 '잡초'로 규정하고, 디자이너가 정원사가 되어 이를 직접 정리하는 활동을 의미합니다.

  • 디자이너가 주도적으로 제품의 시각적 완성도를 유지하는 프로세스로 정의됨
  • AI를 도구로 사용하여 기술적 장벽 없이 백로그를 해소하는 실천 방안임