AI가 만든 프론트엔드 코드를 리뷰할 때 보는 기준

AI 코딩 도구는 프론트엔드 개발에서 꽤 강력합니다. React 컴포넌트를 만들고, TypeScript 타입을 붙이고, CSS를 작성하고, 테스트 초안까지 만들어 줍니다. 특히 반복적인 UI 작업이나 기존 패턴을 따라가는 작업에서는 생산성이 확실히 좋아집니다.하지만 AI가 만든 코드를 그대로 머지해도 되는지는 다른 문제입니다. 겉으로는 동작하는 것처럼 보여도 요구사항을 일부 놓치거나, 상태 관리를 복잡하게 만들거나, 접근성과 테스트가 빠져 있는 경우가 많습니다.이번 글에서는 AI가 만든 프론트엔드 코드를 리뷰할 때 확인하면 좋은 기준을 정리해보겠습니다. React와 TypeScript 프로젝트를 기준으로 설명하지만, Vue나 다른 프레임워크에서도 대부분 비슷하게 적용할 수 있습니다.1. 요구사항을 제대로..

Agents.md로 AI 코딩 도구에게 팀 컨벤션 알려주기

AI 코딩 도구를 쓰다 보면 처음에는 꽤 놀랍습니다. 요구사항을 말하면 컴포넌트도 만들고, 테스트도 작성하고, 리팩터링 방향도 제안합니다. 그런데 실무 프로젝트에 조금만 깊게 들어가면 곧 이런 문제가 생깁니다.우리 팀의 폴더 구조를 자꾸 무시한다.테스트 실행 방법을 매번 다시 알려줘야 한다.사용하지 않는 라이브러리나 패턴을 제안한다.작은 수정인데도 너무 넓은 범위를 바꾼다.PR에서 리뷰어가 싫어하는 스타일을 반복한다.이 문제는 AI 성능만의 문제가 아닙니다. AI에게 프로젝트의 기준과 맥락을 전달하는 방식이 아직 정리되지 않았기 때문에 생기는 문제에 가깝습니다. 최근 글에서 다룬 Spec-Driven Development가 “무엇을 만들지”를 명확히 하는 접근이라면, Agents.md는 “이 프로젝트에서..

AI 코딩 에이전트 작업 단위 쪼개기: 실패를 줄이는 요청 설계법

AI 코딩 에이전트를 쓰다 보면 처음에는 자연스럽게 큰 요청을 하게 됩니다.관리자 페이지의 회원 관리 기능을 만들어줘.말로 보면 간단하지만, 실제로는 API 타입 정의, 목록 화면, 검색, 페이지네이션, 권한 처리, 에러 처리, 테스트, 스타일 정리까지 여러 작업이 섞여 있습니다. 사람 개발자라면 중간중간 판단하면서 쪼개서 진행하지만, AI에게 한 번에 맡기면 그 판단을 AI가 대신하게 됩니다.문제는 여기서 시작됩니다. 결과물은 빠르게 나오지만 요구사항 일부가 빠지거나, 기존 패턴과 다른 구조가 생기거나, 리뷰해야 할 파일이 너무 많아집니다. 이전 글에서 AGENTS.md, Spec-Driven Development, 테스트 주도 흐름, AI 코드 리뷰 체크리스트를 다뤘다면 이번 글에서는 그보다 더 작은..

AI 코딩 에이전트에게 큰 일을 맡기기 전에: 작은 PR 단위로 작업 쪼개기

AI 코딩 에이전트를 쓰다 보면 가장 먼저 체감하는 장점은 속도입니다. “로그인 기능 만들어줘”, “관리자 페이지 붙여줘”, “이 버그 고쳐줘”처럼 요청하면 코드 초안이 빠르게 나옵니다.하지만 실무 프로젝트에서는 빠른 생성보다 중요한 것이 있습니다. 바로 수정 범위를 통제하는 것입니다.AI가 한 번에 너무 큰 작업을 맡으면 다음 문제가 자주 생깁니다.요구하지 않은 파일까지 수정한다.기존 프로젝트 구조와 다른 패턴을 만든다.핵심 기능은 만들었지만 예외 처리가 빠진다.리뷰해야 할 변경량이 너무 커진다.실패했을 때 어디서부터 되돌려야 할지 애매해진다.그래서 AI 코딩 에이전트를 실무에 잘 쓰려면 “큰 기능을 한 번에 맡기는 능력”보다 작고 검증 가능한 작업으로 쪼개는 능력이 더 중요합니다.이 글에서는 AI 에..

MCP 서버를 만들 때 먼저 정해야 할 것들: 도구 설계와 권한 체크

MCP(Model Context Protocol)는 AI 에이전트가 외부 도구와 데이터를 사용할 수 있게 해주는 표준 프로토콜입니다. GitHub 이슈를 조회하거나, 사내 API를 호출하거나, 로컬 문서를 검색하거나, 배포 상태를 확인하는 식의 작업을 AI에게 맡길 수 있습니다.이전 글에서는 MCP가 무엇인지, 그리고 간단한 MCP 서버를 어떻게 만들 수 있는지 살펴봤습니다. 그런데 실제 프로젝트에 MCP를 붙이려고 하면 코드 작성보다 먼저 고민해야 할 문제가 생깁니다.AI에게 어떤 도구를 열어줘야 할까?어디까지 실행하게 해도 안전할까?실패했을 때는 어떻게 처리해야 할까?민감한 데이터는 어떻게 막아야 할까?MCP 서버는 단순히 API를 감싸는 코드가 아닙니다. AI 에이전트에게 “무엇을 할 수 있는지”를..

AI 코딩 에이전트를 사용하면 개발 속도는 확실히 빨라집니다. 요구사항을 설명하면 컴포넌트, API 호출 코드, 테스트 코드, 리팩토링까지 빠르게 만들어 줍니다. 특히 반복적인 CRUD, 폼 처리, 타입 정의, 테스트 초안처럼 구조가 어느 정도 정해진 작업에서는 체감 효과가 큽니다.하지만 AI가 만든 코드가 빠르다고 해서 그대로 머지해도 된다는 뜻은 아닙니다. 오히려 AI 코드는 사람이 작성한 코드보다 더 조심해서 봐야 할 때가 많습니다.요구사항을 일부만 반영했을 수 있습니다.기존 프로젝트 규칙과 다른 패턴을 만들 수 있습니다.정상 케이스만 처리하고 예외 케이스를 놓칠 수 있습니다.테스트는 통과하지만 실제 UX가 어색할 수 있습니다.관련 없는 파일을 함께 수정했을 수 있습니다.이전 글에서 Vibe Cod..