AI가 특정 작업에 특화되어 작동한다면? 서브에이전트
서브에이전트는 에이전트가 판단해서 부릅니다. 쉽게 말해 에이전트는 넓고 일반적인 프롬프트 작업을 담당하고, 특정한 역할을 부여받은 서브에이전트는 에이전트가 ‘그 일을 해야 된다’라는 판단이 서면 서브에이전트를 불러 그 일을 하게 만듭니다. 앞서 총 책임자와 전문가로 예를 든 이유가 그겁니다. 에이전트와 서브에이전트는 총 책임자가 전문가를 불러 작업을 위임하는 방식으로 동작합니다.
중요한 건 여러분이 서브에이전트를 언제 활용하면 좋은지입니다. 이것을 잘 판단해야 여러분이 지불한 금액을 효율적으로 사용할 수 있습니다. 서브에이전트는 보통 다음과 같은 상황에 쓰면 좋습니다.
한 채팅 세션에 여러 작업이 섞일 것 같을 때
특정 파트를 집중해서 작업하고 싶을 때
이 외에도 여러 상황들이 있지만 바이브 코딩을 입문하는 단계에서는 이 정도만 알면 충분합니다. 아마 ‘한 채팅 세션에 여러 작업이 섞인다’라는 말이 좀 어려울 겁니다. 쉽게 말해서 프로젝트에 화면, 데이터베이스, 테스트와 같은 3가지 큰 작업 줄기가 있을 때 여러분의 프롬프트 한 줄이 이 3가지 작업에 모두 영향을 끼칠 가능성이 있는 상황을 이야기합니다. 예를 들어 ‘회원 가입 기능에 이메일 중복 확인 기능을 추가하고 싶어’와 같은 프롬프트를 입력하면 대체로 이런 상황이 벌어집니다.
화면 : 이메일 입력란을 구성하고, 중복 여부를 사용자에게 보여주는 코드 작업 필요
테스트 : 중복/비중복 테스트 케이스 작업 필요
데이터베이스 : 이메일이 이미 있는지 검사하는 코드 작업 필요
여러분은 하나의 기능을 추가한다고 생각하겠지만 실제로는 이렇게 3개의 작업 줄기에서 코드가 수정됩니다. 그러므로 이럴 때는 서브에이전트가 등장해서 각 부분을 맡아 작업하면 집중도가 높아져서 결과물이 좋아집니다. 서브에이전트를 활용하면 채팅을 3개로 분할해서 각 채팅별로 작업을 진행하게 하는 효과가 있어서 컨텍스트가 섞이지 않아 결과물이 좋아집니다. 마치 붓을 하나만 쓰면 점점 붓이 더러워지니까 각 색을 칠하기 위해 별도의 붓을 준비하는 것과 같은 이치입니다.
서브에이전트 만들어보기
그럼 서브에이전트를 만들겠습니다. 서브에이전트 역시 커서에서 바로 만들 수 있습니다. 이때 서브에이전트별로 서로 다른 모델을 지정할 수도 있습니다. 역할에 맞는 모델을 설정하면 작업 속도나 토큰 효율을 챙길 수 있습니다.
01 커서 설정에서 [Rules, Skills, Subagents]를 누르면 Subagents 항목이 보입니다. [+ New]를 누르면 서브에이전트를 만들 수 있도록 에이전트 채팅 창이 열립니다.
02 이제 원하는 서브에이전트를 프로젝트 영역에 만들고 싶다고 하면 됩니다. 전역으로 만들어도 되지만 그러면 불필요한 상황에 에이전트가 서브에이전트를 부를 수도 있으니 가급적이면 프로젝트 영역에 서브에이전트를 만듭시다. 앞으로 다양한 웹 애플리케이션을 만들 예정이므로 연습 삼아 프런트엔드 디자인을 전문가처럼 작업하는 서브에이전트를 만들어달라고 해봅시다. 이때 모델은 디자인을 잘한다고 알려진 모델인 Gemini 3 Pro를 사용하라고 지정해봅시다.
[Note] 이때 ‘프런트매터에 model을 이용하라’는 것이 이해가 되지 않을 수 있는데, 다음 과정에서 자연스럽게 설명하겠습니다.
[나] : 프런트엔드 디자인을 전문적으로 담당해서 전문가처럼 작업하는 서브에이전트를 프로젝트에 만들어줘(전역으로 만들지마). 모델은 Gemini 3 Pro를 사용할 수 있도록 프런트매터에 model을 이용해서 설정해줘.
[AI] : 프런트엔드 디자인 전문가 서브에이전트를 만들어 드리겠습니다. 먼저 에이전트 디렉터리가 있는지 확인하겠습니다. ...생략...
03 그러면 Subagents 항목에 추가한 서브에이전트가 보일 겁니다.
04 항목을 클릭하면 자세한 내용을 볼 수 있는데, ➊ 프런트매터라고 지정했던 모델은 GUI로 수정할 수 있는 형태입니다. ➋ 프런트매터는 쉽게 말해 마크다운으로 작성한 문서의 머릿글 같은 것인데, 커서는 이것을 여러분이 쉽게 수정할 수 있도록 버튼식으로 만들어보여줍니다.
이미 잘 입력된 상태이므로 크게 손댈 것은 없습니다. 이제 남은 것은 간단한 앱을 만들 때 이 서브에이전트가 동작하는지 살펴보는 겁니다.
05 테스트용 앱을 만드는 것이므로 간단한 구성만 보기 위해 커뮤니티의 랜딩 페이지를 만들어보자고 하겠습니다.
[나] : 애플 제품을 좋아하는 사람들의 모임, 애사모 커뮤니티의 랜딩 페이지를 만들어보자. 기술은 Next.js를 사용해서 만들고, 디자인 라이브러리는 Shadcn을 사용하면 좋겠어.
그럼 커서는 기본적인 프로젝트 준비는 에이전트로 수행하고, 디자인 작업을 수행할 때는 서브에이전트를 불러 작업할 겁니다. 서브에이전트를 사용하는 도중에는 별도의 서브에이전트 이름이 뜨면서 진행 상황을 간략히 보여주는 박스가 뜹니다.
06 박스 왼쪽의 [>]를 눌러서 펼쳐보면 서브에이전트의 작업 진행 상황이 보입니다.
07 작업 후 사이트를 확인하면 잘 만든 것 같습니다.
아무래도 서브에이전트에 여러 요건이 있으니 일반적인 에이전트 작업보다는 훨씬 나을 겁니다. 단순히 프런트엔드 디자인 작업을 해야 하고, 이미 명확한 방향이 정해졌다면 구체적인 규칙을 넣을 수 있는 스킬이 더 적합할 수 있지만 애매한 방향성을 가지고 있거나, 디자인 자체를 어찌 할지 모를 때는 역할만 부여하고 유연하게 작업하는 서브에이전트도 좋은 대안입니다.
08 만약 서브에이전트를 에이전트가 부르는 것이 아니라 여러분이 직접 부르고 싶다면 어떻게 해야 할까요? 그럴 때는 ➊ 채팅 창에서 슬래시 /를 누르면 서브에이전트 목록을 명시해서 작업을 지시할 수 있습니다. /frontend-designer를 입력 또는 선택 후 [Agent] 모드로 ‘중간에 있는 특징 섹션만 수정해보자’라고 이야기하면 에이전트가 서브에이전트를 더욱 정확하게 호출하여 작업을 수행해줍니다.
지금까지 AGENTS.md부터 스킬, 서브에이전트의 개념을 알아보고 사용했습니다. 각 기능을 언제, 어떻게 사용하는지 감이 잡혔나요? 앞으로 실습하면서 각 기능은 필요할 때마다 적절하게 만들어 사용하겠습니다.
끝으로 한 가지 당부하자면 이 기능들은 적절히 사용했을 때 빛을 발한다는 걸 알아두기 바랍니다. 불필요한 기능을 남발하면 오히려 간단하게 처리할 수 있는 일도 복잡하게 처리하거나, 토큰을 낭비하게 되므로 적절한 상황에 사용하기 바랍니다.
[마무리 요약]
에이전트가 프로젝트의 전반적인 진행을 담당하는 총 책임자라면, 서브에이전트는 디자인이나 테스트와 같은 특정 과업을 집중적으로 수행하여 각 파트의 전문성을 보완하는 전문가입니다.
서브에이전트는 에이전트가 판단하여 호출하거나 사용자가 직접 호출하여 사용할 수 있습니다.
서브에이전트를 활용하면 하나의 채팅 세션에서 여러 작업의 맥락을 독립적으로 유지하여 복잡한 요구사항도 정확하게 구현할 수 있습니다.
서브에이전트 생성 시 프런트매터 설정을 통해 각 역할에 가장 적합한 AI 모델을 개별적으로 지정할 수 있습니다.