공개 문서
content/courses/12-integrated-workflow.mdx
아래는 content/courses/12-integrated-workflow.mdx 와 동일한 원문입니다. Markdown과 HTML 변환 결과를 각각 복사할 수 있습니다.
공개 문서 원문 (Markdown)
---
title: "3도구 통합 워크플로우"
slug: "12-integrated-workflow"
description: "Cursor + Claude Code + Gemini CLI를 역할에 맞게 조합하는 실전 패턴"
order: 12
date: "2026-03-10"
level: 2
draft: false
---
# 3도구 통합 워크플로우
> **이 챕터를 마치면** Cursor·Claude Code·Gemini CLI를 역할에 맞게 조합해 실전처럼 작업할 수 있어요.
세 도구를 각자의 강점에 맞게 조합하면 혼자서도 팀처럼 작업할 수 있어요.
```
기획 · UI 초안 → Cursor (시각적, 빠른 반복)
복잡한 기능 구현 → Claude Code (자율 실행, 멀티파일)
전체 품질 검토 → Gemini CLI (100만 토큰, 조감도)
UI 세부 조정 → Cursor (컴포넌트 수정)
```
---
## 실전 시나리오: 인증 기능 추가
새 프로젝트에 로그인/회원가입을 추가하는 전체 과정입니다.
### Step 1. Cursor로 화면 설계
```
Cursor (Composer Cmd+I):
"로그인 페이지 UI를 만들어줘.
이메일 + 비밀번호 인풋, 구글 소셜 로그인 버튼,
'아직 계정이 없으신가요?' 링크 포함."
```
빠르게 UI 초안을 잡습니다. 실시간으로 보면서 수정합니다.
### Step 2. Claude Code로 인증 로직 구현
```bash
claude "Supabase Auth로 이메일 로그인과 Google 소셜 로그인을 구현해줘.
- lib/supabase.ts: Supabase 클라이언트
- app/actions/auth.ts: 서버 액션 (login, signup, logout)
- middleware.ts: 보호된 라우트 설정
- app/auth/callback/route.ts: OAuth 콜백 처리
Cursor가 만든 LoginForm.tsx와 연결되어야 해."
```
Claude Code가 자율적으로 4-5개 파일을 생성·수정합니다.
### Step 3. Gemini CLI로 보안 검토
```bash
find . \( -name "*.ts" -o -name "*.tsx" \) \
-not -path "*/node_modules/*" \
| xargs cat \
| gemini "방금 추가한 인증 시스템을 보안 관점에서 검토해줘.
OWASP Top 10 기준으로 취약점이 있는지 확인해줘."
```
### Step 4. Claude Code로 발견된 문제 수정
```bash
# Gemini CLI가 발견한 문제를 Claude Code로 수정
claude "Gemini CLI가 아래 보안 이슈를 발견했어:
1. middleware.ts에서 /api 경로가 보호되지 않음
2. auth 서버 액션에 rate limiting 없음
이 두 가지를 수정해줘."
```
### Step 5. Cursor로 UI 마무리
```
Cursor (Inline Edit Cmd+K):
"로그인 실패 시 에러 메시지를 빨간 박스로 표시해줘"
```
---
## 기능 유형별 도구 선택표
| 작업 유형 | 추천 도구 | 이유 |
|-----------|-----------|------|
| 새 페이지 UI 초안 | Cursor | 실시간 미리보기 |
| 폼 · 컴포넌트 수정 | Cursor | 빠른 인라인 편집 |
| API 연동 · 서버 로직 | Claude Code | 여러 파일 자동 처리 |
| 데이터베이스 스키마 | Claude Code | 타입 · 마이그레이션 연결 |
| 전체 코드 보안 리뷰 | Gemini CLI | 100만 토큰 조감도 |
| README · 문서화 | Gemini CLI | 전체 맥락 파악 |
| 간단한 버그 수정 | 셋 다 가능 | 상황에 따라 |
| 리팩토링 | Claude Code | 멀티파일 일관성 유지 |
---
## 하루 개발 루틴
### 오전: 계획 + 설계
```bash
# Claude Code로 오늘 작업 계획 세우기
claude "오늘 검색 기능을 추가하려고 해.
현재 프로젝트 구조를 보고 어떤 파일을 만들어야 할지 계획을 세워줘."
```
### 오후: 구현
```
Cursor: 검색 UI 컴포넌트 초안
Claude Code: 검색 API 라우트 + 서버 액션
Cursor: UI와 API 연결 확인
```
### 저녁: 검토 + 커밋
```bash
# Gemini CLI로 오늘 작업 전체 리뷰
git diff main | gemini "오늘 추가한 코드를 리뷰해줘.
개선할 점이 있으면 알려줘."
# 이상 없으면 커밋
git add -A
git commit -m "feat: 검색 기능 추가"
```
---
## 도구 전환 시 컨텍스트 이어가기
세 도구 간에 컨텍스트를 자연스럽게 넘기는 방법입니다.
```bash
# Cursor에서 작업한 내용을 Claude Code에 전달
claude "Cursor로 만든 SearchBar.tsx가 있어.
@components/SearchBar.tsx 파일을 보고
이 컴포넌트에 맞는 서버 액션을 작성해줘."
# Claude Code 작업 결과를 Gemini CLI로 검토
git diff | gemini "Claude Code가 방금 수정한 코드를 리뷰해줘."
```
---
## 비용 최적화
| 도구 | 비용 | 언제 쓸까 |
|------|------|-----------|
| Cursor | 월 $20 (Pro) 또는 무료 한도 | UI 작업 · 일상적 편집 |
| Claude Code | Claude Pro/Max 구독 포함 | 복잡한 기능 구현 |
| Gemini CLI | **무료** (분당 60요청) | 리뷰 · 분석 · 문서화 |
**절약 팁:**
- 간단한 수정 → Cursor 인라인 편집 (컨텍스트 소모 적음)
- 복잡한 기능 → Claude Code (정확성 우선)
- 리뷰 · 분석 → Gemini CLI 무료 한도 최대 활용
---
## 한 줄 요약
> **Cursor**로 빠르게 보고, **Claude Code**로 깊이 만들고, **Gemini CLI**로 넓게 검토한다.
세 도구는 경쟁이 아닌 **보완 관계**입니다. 각자의 강점을 살리는 것이 핵심입니다.
---
## 다음은?
이제 기초 커리큘럼이 완료되었습니다.
배운 내용으로 실제 서비스를 만들어보세요.
**추천 첫 프로젝트:**
- 개인 포트폴리오 사이트 (Cursor + Vercel)
- 간단한 Todo 앱 (Claude Code + Supabase)
- 팀 내부 도구 (세 도구 통합 워크플로우)
**Google Workspace(Docs·Sheets) 연동까지 다루고 싶다면** → [16. 4도구 통합 워크플로우](./16-integrated-workflow)에서 Cursor · Claude Code · Gemini CLI · **Google Workspace CLI**를 함께 쓰는 패턴을 배워요.
---
## 9장 보강 프로세스 적용: 3도구 핸드오프 표준안
이 챕터는 "도구를 많이 쓰는 것"이 아니라 **도구 간 문맥 전달 품질**을 높이는 데 목적이 있습니다.
### 권장 핸드오프 포맷
각 단계 종료 시 아래 3줄을 남기면 다음 도구에서 재작업이 줄어듭니다.
1. **무엇을 했는가**
2. **무엇이 남았는가**
3. **다음 도구가 바로 실행할 명령**
### 12챕터 실패 패턴 TOP 5
1. **역할 중복**
- 대응: Cursor(UI), Claude(구현), Gemini(검토) 책임 고정
2. **중간 산출물 미기록**
- 대응: 단계마다 요약 3줄 작성
3. **검토 없이 다음 단계 진행**
- 대응: 최소 diff/실행 확인 후 핸드오프
4. **도구 전환 시 파일 참조 누락**
- 대응: `@파일` 또는 명시 경로를 항상 포함
5. **비용 최적화 미흡**
- 대응: 고난도만 Claude, 대량검토는 Gemini 중심
### 12챕터 체크리스트 (DoD)
- [ ] 도구별 역할 분담표 고정 완료
- [ ] 단계별 핸드오프 3줄 기록 완료
- [ ] 최소 1회 통합 시나리오(설계→구현→검토→수정) 실행 완료
- [ ] 비용/속도 관점의 도구 선택 근거 기록 완료
- [ ] 다음 단계(4도구 통합) 입력값 정리 완료
> **다음 챕터 입력값:** gws 연동 대상 문서/시트 목록, OAuth 상태, 파이프 명령 템플릿
공개 문서 변환 코드 (HTML)
<hr>
<h2>title: "3도구 통합 워크플로우"
slug: "12-integrated-workflow"
description: "Cursor + Claude Code + Gemini CLI를 역할에 맞게 조합하는 실전 패턴"
order: 12
date: "2026-03-10"
level: 2
draft: false</h2>
<h1>3도구 통합 워크플로우</h1>
<blockquote>
<p><strong>이 챕터를 마치면</strong> Cursor·Claude Code·Gemini CLI를 역할에 맞게 조합해 실전처럼 작업할 수 있어요.</p>
</blockquote>
<p>세 도구를 각자의 강점에 맞게 조합하면 혼자서도 팀처럼 작업할 수 있어요.</p>
<pre><code>기획 · UI 초안 → Cursor (시각적, 빠른 반복)
복잡한 기능 구현 → Claude Code (자율 실행, 멀티파일)
전체 품질 검토 → Gemini CLI (100만 토큰, 조감도)
UI 세부 조정 → Cursor (컴포넌트 수정)
</code></pre>
<hr>
<h2>실전 시나리오: 인증 기능 추가</h2>
<p>새 프로젝트에 로그인/회원가입을 추가하는 전체 과정입니다.</p>
<h3>Step 1. Cursor로 화면 설계</h3>
<pre><code>Cursor (Composer Cmd+I):
"로그인 페이지 UI를 만들어줘.
이메일 + 비밀번호 인풋, 구글 소셜 로그인 버튼,
'아직 계정이 없으신가요?' 링크 포함."
</code></pre>
<p>빠르게 UI 초안을 잡습니다. 실시간으로 보면서 수정합니다.</p>
<h3>Step 2. Claude Code로 인증 로직 구현</h3>
<pre><code class="language-bash">claude "Supabase Auth로 이메일 로그인과 Google 소셜 로그인을 구현해줘.
- lib/supabase.ts: Supabase 클라이언트
- app/actions/auth.ts: 서버 액션 (login, signup, logout)
- middleware.ts: 보호된 라우트 설정
- app/auth/callback/route.ts: OAuth 콜백 처리
Cursor가 만든 LoginForm.tsx와 연결되어야 해."
</code></pre>
<p>Claude Code가 자율적으로 4-5개 파일을 생성·수정합니다.</p>
<h3>Step 3. Gemini CLI로 보안 검토</h3>
<pre><code class="language-bash">find . \( -name "*.ts" -o -name "*.tsx" \) \
-not -path "*/node_modules/*" \
| xargs cat \
| gemini "방금 추가한 인증 시스템을 보안 관점에서 검토해줘.
OWASP Top 10 기준으로 취약점이 있는지 확인해줘."
</code></pre>
<h3>Step 4. Claude Code로 발견된 문제 수정</h3>
<pre><code class="language-bash"># Gemini CLI가 발견한 문제를 Claude Code로 수정
claude "Gemini CLI가 아래 보안 이슈를 발견했어:
1. middleware.ts에서 /api 경로가 보호되지 않음
2. auth 서버 액션에 rate limiting 없음
이 두 가지를 수정해줘."
</code></pre>
<h3>Step 5. Cursor로 UI 마무리</h3>
<pre><code>Cursor (Inline Edit Cmd+K):
"로그인 실패 시 에러 메시지를 빨간 박스로 표시해줘"
</code></pre>
<hr>
<h2>기능 유형별 도구 선택표</h2>
<table>
<thead>
<tr>
<th>작업 유형</th>
<th>추천 도구</th>
<th>이유</th>
</tr>
</thead>
<tbody><tr>
<td>새 페이지 UI 초안</td>
<td>Cursor</td>
<td>실시간 미리보기</td>
</tr>
<tr>
<td>폼 · 컴포넌트 수정</td>
<td>Cursor</td>
<td>빠른 인라인 편집</td>
</tr>
<tr>
<td>API 연동 · 서버 로직</td>
<td>Claude Code</td>
<td>여러 파일 자동 처리</td>
</tr>
<tr>
<td>데이터베이스 스키마</td>
<td>Claude Code</td>
<td>타입 · 마이그레이션 연결</td>
</tr>
<tr>
<td>전체 코드 보안 리뷰</td>
<td>Gemini CLI</td>
<td>100만 토큰 조감도</td>
</tr>
<tr>
<td>README · 문서화</td>
<td>Gemini CLI</td>
<td>전체 맥락 파악</td>
</tr>
<tr>
<td>간단한 버그 수정</td>
<td>셋 다 가능</td>
<td>상황에 따라</td>
</tr>
<tr>
<td>리팩토링</td>
<td>Claude Code</td>
<td>멀티파일 일관성 유지</td>
</tr>
</tbody></table>
<hr>
<h2>하루 개발 루틴</h2>
<h3>오전: 계획 + 설계</h3>
<pre><code class="language-bash"># Claude Code로 오늘 작업 계획 세우기
claude "오늘 검색 기능을 추가하려고 해.
현재 프로젝트 구조를 보고 어떤 파일을 만들어야 할지 계획을 세워줘."
</code></pre>
<h3>오후: 구현</h3>
<pre><code>Cursor: 검색 UI 컴포넌트 초안
Claude Code: 검색 API 라우트 + 서버 액션
Cursor: UI와 API 연결 확인
</code></pre>
<h3>저녁: 검토 + 커밋</h3>
<pre><code class="language-bash"># Gemini CLI로 오늘 작업 전체 리뷰
git diff main | gemini "오늘 추가한 코드를 리뷰해줘.
개선할 점이 있으면 알려줘."
# 이상 없으면 커밋
git add -A
git commit -m "feat: 검색 기능 추가"
</code></pre>
<hr>
<h2>도구 전환 시 컨텍스트 이어가기</h2>
<p>세 도구 간에 컨텍스트를 자연스럽게 넘기는 방법입니다.</p>
<pre><code class="language-bash"># Cursor에서 작업한 내용을 Claude Code에 전달
claude "Cursor로 만든 SearchBar.tsx가 있어.
@components/SearchBar.tsx 파일을 보고
이 컴포넌트에 맞는 서버 액션을 작성해줘."
# Claude Code 작업 결과를 Gemini CLI로 검토
git diff | gemini "Claude Code가 방금 수정한 코드를 리뷰해줘."
</code></pre>
<hr>
<h2>비용 최적화</h2>
<table>
<thead>
<tr>
<th>도구</th>
<th>비용</th>
<th>언제 쓸까</th>
</tr>
</thead>
<tbody><tr>
<td>Cursor</td>
<td>월 $20 (Pro) 또는 무료 한도</td>
<td>UI 작업 · 일상적 편집</td>
</tr>
<tr>
<td>Claude Code</td>
<td>Claude Pro/Max 구독 포함</td>
<td>복잡한 기능 구현</td>
</tr>
<tr>
<td>Gemini CLI</td>
<td><strong>무료</strong> (분당 60요청)</td>
<td>리뷰 · 분석 · 문서화</td>
</tr>
</tbody></table>
<p><strong>절약 팁:</strong></p>
<ul>
<li>간단한 수정 → Cursor 인라인 편집 (컨텍스트 소모 적음)</li>
<li>복잡한 기능 → Claude Code (정확성 우선)</li>
<li>리뷰 · 분석 → Gemini CLI 무료 한도 최대 활용</li>
</ul>
<hr>
<h2>한 줄 요약</h2>
<blockquote>
<p><strong>Cursor</strong>로 빠르게 보고, <strong>Claude Code</strong>로 깊이 만들고, <strong>Gemini CLI</strong>로 넓게 검토한다.</p>
</blockquote>
<p>세 도구는 경쟁이 아닌 <strong>보완 관계</strong>입니다. 각자의 강점을 살리는 것이 핵심입니다.</p>
<hr>
<h2>다음은?</h2>
<p>이제 기초 커리큘럼이 완료되었습니다.
배운 내용으로 실제 서비스를 만들어보세요.</p>
<p><strong>추천 첫 프로젝트:</strong></p>
<ul>
<li>개인 포트폴리오 사이트 (Cursor + Vercel)</li>
<li>간단한 Todo 앱 (Claude Code + Supabase)</li>
<li>팀 내부 도구 (세 도구 통합 워크플로우)</li>
</ul>
<p><strong>Google Workspace(Docs·Sheets) 연동까지 다루고 싶다면</strong> → <a href="./16-integrated-workflow">16. 4도구 통합 워크플로우</a>에서 Cursor · Claude Code · Gemini CLI · <strong>Google Workspace CLI</strong>를 함께 쓰는 패턴을 배워요.</p>
<hr>
<h2>9장 보강 프로세스 적용: 3도구 핸드오프 표준안</h2>
<p>이 챕터는 "도구를 많이 쓰는 것"이 아니라 <strong>도구 간 문맥 전달 품질</strong>을 높이는 데 목적이 있습니다.</p>
<h3>권장 핸드오프 포맷</h3>
<p>각 단계 종료 시 아래 3줄을 남기면 다음 도구에서 재작업이 줄어듭니다.</p>
<ol>
<li><strong>무엇을 했는가</strong></li>
<li><strong>무엇이 남았는가</strong></li>
<li><strong>다음 도구가 바로 실행할 명령</strong></li>
</ol>
<h3>12챕터 실패 패턴 TOP 5</h3>
<ol>
<li><p><strong>역할 중복</strong></p>
<ul>
<li>대응: Cursor(UI), Claude(구현), Gemini(검토) 책임 고정</li>
</ul>
</li>
<li><p><strong>중간 산출물 미기록</strong></p>
<ul>
<li>대응: 단계마다 요약 3줄 작성</li>
</ul>
</li>
<li><p><strong>검토 없이 다음 단계 진행</strong></p>
<ul>
<li>대응: 최소 diff/실행 확인 후 핸드오프</li>
</ul>
</li>
<li><p><strong>도구 전환 시 파일 참조 누락</strong></p>
<ul>
<li>대응: <code>@파일</code> 또는 명시 경로를 항상 포함</li>
</ul>
</li>
<li><p><strong>비용 최적화 미흡</strong></p>
<ul>
<li>대응: 고난도만 Claude, 대량검토는 Gemini 중심</li>
</ul>
</li>
</ol>
<h3>12챕터 체크리스트 (DoD)</h3>
<ul>
<li><input disabled="" type="checkbox"> 도구별 역할 분담표 고정 완료</li>
<li><input disabled="" type="checkbox"> 단계별 핸드오프 3줄 기록 완료</li>
<li><input disabled="" type="checkbox"> 최소 1회 통합 시나리오(설계→구현→검토→수정) 실행 완료</li>
<li><input disabled="" type="checkbox"> 비용/속도 관점의 도구 선택 근거 기록 완료</li>
<li><input disabled="" type="checkbox"> 다음 단계(4도구 통합) 입력값 정리 완료</li>
</ul>
<blockquote>
<p><strong>다음 챕터 입력값:</strong> gws 연동 대상 문서/시트 목록, OAuth 상태, 파이프 명령 템플릿</p>
</blockquote>