Agent와 함께 일하는 새로운 방식
지금까지는 아마 옆에 앉은 파트너처럼 Agent와 작업했을 것입니다: 질문하고, 지켜보고, 응답하는 방식이죠. 병렬로 빌드하는 것은 다른 관계입니다. 기능을 **작업(task)**으로 Agent에게 넘기면, Agent는 당신이 다른 일을 하는 동안 백그라운드에서 그것을 빌드합니다. 사실 일상생활에서도 이미 이런 방식으로 일하고 있습니다. 세탁기가 끝날 때까지 그 앞에 서 있지는 않죠. 빨래를 시작하고, 요리를 하러 갑니다. 작업도 마찬가지로 동작합니다: 하나를 시작하고, 그것이 실행되는 동안 다른 것을 시작하거나, 다른 것을 검토하거나, 메인 대화에서 Agent와 계속 채팅할 수 있습니다. 이는 당신의 역할을 바꿔놓습니다. 하나의 빌드를 지켜보는 승객에서, 여러 빌드를 지휘하는 감독이 되는 것입니다.작업이 실행되는 동안 앱은 안전합니다
모두가 가장 먼저 묻는 질문: 보고 있지 않는 사이 백그라운드 작업이 내 앱을 망가뜨리지는 않을까? 아닙니다. 각 작업은 프로젝트의 자체 복사본에서 작업합니다. 작업의 결과물을 검토하고 적용하기로 선택하기 전까지는 앱이 변경되지 않습니다. 각 작업은 또한 자체 Agent를 가지며 프로젝트의 전체 컨텍스트를 물려받으므로, 같은 설명을 반복할 필요가 없습니다. 작업은 서로 독립적이므로, 첫 번째 작업이 실행 중인 순간에도 바로 다음 작업을 시작할 수 있습니다.병렬로 빌드하기
1
프로젝트를 열고 사이드바 고정하기
기본 Build 레이아웃에서 시작하세요: 왼쪽에 Agent 채팅, 오른쪽에 Preview가 있습니다. 전역 사이드바를 펼치고 고정하여 프로젝트의 작업 컨트롤과 상태 업데이트가 계속 보이도록 하세요.
2
프로젝트에서 작업 만들기
사이드바에서 프로젝트를 펼친 다음, 이름 옆의 + 버튼을 선택하세요. 백그라운드 작업을 시작하는 가장 빠른 방법입니다.
3
하나의 명확한 결과 설명하기
작업에 명확한 결과 하나를 부여한 다음 전송하세요. Agent는 프로젝트를 살펴보고 메인 버전을 변경하지 않은 채 계획을 제안합니다.
4
계획을 검토하고 승인하기
범위, 구현 단계, 완료 기준, 관련 파일, agent 모드를 확인하세요. 계획이 의도에 맞을 때만 Start building을 선택하세요.
5
나머지 작업 만들고 승인하기
한 번에 하나씩 이 과정을 반복하세요. 독립적인 작업에는 각각 별도의 결과를 부여하세요. 의존적인 작업은 필요로 하는 기능이나 프로젝트 구조를 기준으로 설명하여 Agent가 선행 작업을 인식할 수 있도록 하세요.새 작업이 다른 작업이 아직 빌드 중인 무언가를 필요로 하면, Agent는 계획에서 선행 작업을 명시하고 해당 작업이 완료되고 승인된 후에 새 작업을 시작하도록 예약합니다.
6
Agent가 작업 일정을 관리하게 하기
보드를 열어 Drafts, Active, Ready, Done을 확인하세요. 독립적인 작업은 여유가 있을 때 실행됩니다. 의존적인 작업은 무엇이 막고 있는지 표시하며 선행 작업이 적용될 때까지 대기 상태로 남습니다.
7
준비된 작업을 검토하고 적용하기
각 Ready 작업을 열어 결과와 테스트 결과를 확인하고 Preview에서 기능을 사용해 보세요. 기대에 부합하면 Apply를 선택하세요. 선행 작업을 적용하면 그것에 의존하는 작업들이 자동으로 잠금 해제됩니다.
8
메인 버전 확인하기
적용할 때마다 기본 Build 화면으로 돌아가세요. Preview로 메인 버전에서 결과를 사용해 보고, 구현 요약, 점검 사항, 경고, 또는 아직 처리해야 할 사항이 있는지 Agent 채팅에서 확인하세요.
실제 예시: 네 가지 기능을 동시에
카페 오픈 사이트를 상상해 보세요. 다음 네 가지 개선 사항을 집중적으로 추가하고 싶습니다:- 접근성을 위한 skip link와 안정적인 랜드마크 ID
- 이 ID를 활용하는 간결한 섹션 내비게이션
- 접근성 기반 위에 구축되는, 개선된 뉴스레터 양식 피드백
- 문서 head만 변경하는 Open Graph 메타데이터
작업을 작게 나누기
병렬 빌드를 가능하게 하는 스킬은 기능을 작고 독립적인 작업으로 나누는 것입니다. 작은 작업은 더 빨리 끝나고, 검토하기 쉬우며, 서로 간섭할 가능성도 낮습니다. 유용한 규칙: 작업 설명에 “그리고”가 들어간다면 분할을 고려하세요.- 좋은 예: “이벤트 페이지 추가”, “문의 양식 추가”
- 너무 큰 예: “이벤트와 등록과 이메일 알림과 관리자 화면 추가”
- 다크 모드 토글 추가
- 고객 리뷰 섹션 추가
- 고객이 리뷰에 답글을 달 수 있게 하기
- 앱을 프랑스어로 번역
정답
정답
작업 1, 2, 4는 서로 독립적이며 모두 동시에 실행할 수 있습니다. 작업 3은 작업 2에 의존합니다: 리뷰가 존재하지 않으면 답글을 달 대상이 없기 때문입니다. 이를 직접 알아챌 필요는 없습니다. Agent가 의존성을 감지해서 두 작업의 순서를 대신 정해줍니다.
변경사항을 안전하게 적용하기
각 작업은 프로젝트의 격리된 사본에서 동작합니다. 하나의 작업을 적용하면 메인 버전은 변경되지만, 다른 작업들은 여전히 이전 버전을 기반으로 하고 있을 수 있습니다. 두 작업이 같은 파일을 변경하면, Apply를 선택한 후 Ready 카드에 일시적으로 Resolving conflicts가 표시될 수 있습니다. Agent가 병합과 결과 재확인을 마칠 때까지 기다리세요. 파일을 직접 해결할 필요는 없습니다.
매니저처럼 검토하기
병렬 빌드는 당신을 매니저로 만들며, 매니저가 흔히 저지르는 실수는 확인하지 않은 작업을 승인하는 것입니다. 지켜야 할 규율은 한 번에 하나씩 진행하는 단순한 루프입니다:1
작업 결과 테스트하기
완료된 작업을 열고 기능을 사용해 보세요. 사용자처럼 클릭하며 살펴보세요.
2
적용하기
만족스럽다면 변경사항을 메인 앱에 적용하세요.
3
메인 버전 확인하기
적용된 기능이 앱에 이미 있는 변경사항과 함께 잘 작동하는지 확인하세요.
4
반복하기
모든 작업이 반영될 때까지 다음 준비된 작업을 테스트하고 적용하세요.
순차적으로 진행해야 할 때
병렬 빌드는 도구이지 규칙이 아닙니다. 다음과 같은 경우에는 메인 대화에서 한 번에 하나씩 진행하세요:- 두 아이디어가 같은 화면을 다룰 때. “홈페이지 재설계”와 “내비게이션 변경”은 충돌합니다. 순서대로 진행하세요.
- 탐색 중일 때. 디자인 작업에서는 한 번의 시도 결과가 다음에 원하는 것을 바꿔놓습니다. 탐색은 작업 지시가 아니라 대화입니다.
- 작업을 한 문장으로 설명할 수 없을 때. 간단히 표현할 수 없다면, 아직 위임할 준비가 되지 않은 것입니다.
한계 안에서 작업하기
플랜에 따라 동시에 실행할 수 있는 백그라운드 작업 수가 결정됩니다. 추가 작업은 대기열에 들어가며 여유 슬롯이 생기면 시작됩니다. 현재 한도는 작업 시스템을 참고하세요. 주의력도 하나의 한계입니다. 작업 두 개로 시작하세요. 검토가 편하게 느껴지면 세 개를 시도해 보세요. 모든 단계를 감독할 필요는 없지만, 적용하기 전에 각 결과를 테스트해야 합니다.다음 단계
- 작업 시스템: 작업이 동작하는 방식에 대한 전체 참조.
- Plan 및 Build 모드: 작업이 계획으로 시작하는 이유.
- 바이브 코딩 101: 작업을 나누는 것을 자연스럽게 만드는, 작게 나누어 빌드하는 마인드셋.