본문 바로가기
카테고리 없음

프론트엔드 개발자의 AI 에이전트 '삽질기'.....

by yuraming 2026. 6. 28.

 최근 사내에서 AI 활용법에 대한 팀 세션이 있었습니다.

각 팀마다 1인이 대표로 발표하는 시간인데 약간의 주목 공포증이 있어 떨렸지만..!

솔직하고 진지하게. 그동안 Claude와 함께 '삽질'하며 깨달은 점들과,
이를 바탕으로 구축한 나만의 AI 에이전트 팀 & 자동화 프로세스를 공유하는 시간을 가졌습니다.

처음에는 AI가 멍청한 결과물을 낸다고 생각했는데,
지나고 보니 극과 극의 결과물을 만드는 건 결국 '지시 방식'이라는 걸 느꼈고.
매일 깨달음을 얻고 있는 제 AI 활용 삽질기이자 블로그에도 기록해 봅니다...

 


 

 

1. AI는 내가 빼먹은 전제를 '자기 마음대로' 채운다

초기에 클로드를 쓰면서 크게 당황했던 두 가지 사건이 있었습니다.

- #1: 그냥 "해줘."

클로드에게 "새 작업 브랜치 만들어줘"라고 했습니다. 당연히 기본 브랜치인 develop을 Base로 만들 줄 알았습니다.
하지만 클로드는 제가 기존에 작업 중이던 다른 이슈 브랜치 위에서 새 브랜치를 따버렸습니다. 
그것도 모른 채 PR을 올렸다가 엉뚱한 커밋들이 통째로 딸려 들어가는 바람에 애를 먹었습니다. 저는 '무엇을 할지'만 말했지, '어디서 시작할지'를 빠뜨렸고, 클로드는 그 빈칸을 제멋대로 채운 것이었습니다.

- #2: 디자인 통째로 던지기 vs 기획서 통째로 던지기

화면 개발을 할 때 피그마 이미지를 툭 던지며 "이대로 만들어줘" 했더니, 기능만 대충 돌고 세부 디자인 싱크가 엉망이었습니다.
'내용이 부족한가?' 싶어 반대로 기획서(FRD)를 통째로 넘겼더니, 이번엔 과다한 정보 때문에 결과물이 산으로 가거나, 시간이 너무 오래걸렸습니다. (토큰 사용량도....)

💡 깨달음: 넓게 던질수록 정확해지는 게 아니라, 좁고 분명하게 지시할수록 정확한 결과물이 나온다.
여러 번의 시행착오 끝에 기획을 기능 단위로 쪼개어 .md 파일로 만들고 개별 작업을 시켰습니다.
그러자 정확도가 급격히 상승했고, 추가적으로 결과물을 고치는 일이 거의 없어졌습니다.

 

 

 


 

2. 나만의 'AI 에이전트 팀',기획 분석부터 UI 개발, 검증까지

최근에는 업무 프로세스를 기능 단위로 쪼개어 연쇄적으로 동작하는 'AI 에이전트 워크플로우'를 구축했습니다.
이제 제 클로드는 하나의 팀으로 각 분야의 전문가 팀원처럼 움직입니다.

[기획서 분석 스킬] ──> [UI 개발 스킬 (MCP)] ──> [기획 검증 스킬]
   (FRD -> MD)         (피그마 기반 UI 구현)        (동작/기획 일치 확인)

a. 기획서 분석 에이전트

피그마의 FRD(기획서)를 기반으로 화면 요구사항을 기능별로 나누어 '기획 분석 MD 문서'를 생성하는 스킬.
AI가 마음대로 전제를 채우지 못하도록 명확한 가이드를 먼저 만드는 단계.

b. UI 개발 에이전트 (Figma MCP)

앞서 만든 MD 문서와 Figma MCP(Model Context Protocol)를 연동해 실제 코드를 작성하는 스킬.
디자인 시스템 컴포넌트와 스타일을 정확하게 인지한 상태에서 UI를 개발하기 때문에 높은 싱크로율.

c. 동작 및 기획 검증 에이전트

개발이 완료되면 실제 구현된 동작이 처음 구현하고자 했던 기획과 일치하는지 교차 검증하는 스킬.
사람이 놓치기 쉬운 엣지 케이스까지 찾을 수 있음.

이렇게 팀을 짜서 일하기 시작하니, 변수명 고민이나 귀찮은 다국어 처리, 단순 UI 마크업에 들던 시간이 말도 안되게 줄어들었습니다.

 


 

3. 루틴한 업무도 자동화로: Daily QA & 배포 자동화

개발 속도가 빨라지니 자연스레 테스트와 배포 레이어도 자동화하고 싶어졌습니다.

- 브라우저 스크립트를 이용한 Daily QA 자동화

매일 아침 반복적으로 진행하던 데일리 QA의 스트레스를 줄이기 위해, 브라우저에서 직접 구동되는 '테스트 자동화 스크립트'를 만들고
팀원들에게 공유했습니다.
클릭 몇 번으로 주요 시나리오를 브라우저가 직접 돌며 테스트해 주니 오전에 버그를 잡아내는 속도가 달라졌습니다.

- 배포 자동화 (CI/CD)

기능 개발 후 빌드하고 배포 환경에 올리는 과정까지 완전히 자동화했습니다. 이제 개발 후,
만들어둔 클로드 스킬을 사용하면, 코드리뷰-커밋푸시-빌드-인프라 배포까지 수행합니다.

별 것 아니지만 귀찮고 사람이 해야할 일을 자동화 해나가고 있습니다.

 


 

 

 

내가 컨텍스트를 좁고 명확하게 지시해 줄 때, AI가 무서울만큼 엄청난 생산성을 보여주는 것 같습니다.

처음 개발을 시작했을 때, 지금의 업무 방식은 상상도 하지 못했었습니다.
몇달전 팀에서 클로드 코드를 적극 활용하게 되었을 때도, 이 정도의 퍼포먼스가 날 것이라고도 생각하지 못했던 것 같습니다.

이제는 프론트엔드 개발자를 넘어 더 큰 시야를 가지고 개발의 전반적인 부분을 신경쓰고 프롬프트 엔지니어링, 하네스 엔지니어링 등 
어떻게 업무를 더 효율적이게 하는가가 중요한 것 같습니다.

진짜 AI의 빠른 발전이 가끔은 두렵지만 그래도 인간으로서 해야하는 영역이 있기에 더 분발해야겠다는 생각이 들고 있습니다.

화이팅...!