# 4도구 통합 워크플로우

> **이 챕터를 마치면** Cursor·Claude Code·Gemini CLI·Google Workspace CLI를 역할에 맞게 조합해 실전처럼 작업할 수 있어요.

네 도구를 각자의 강점에 맞게 쓰면 혼자서도 팀처럼 작업할 수 있어요.

```
기획 · 문서      →  Google Workspace CLI  (Docs, Sheets에서 스펙·데이터 가져오기)
기획 · UI 초안   →  Cursor               (시각적, 빠른 반복)
복잡한 기능 구현  →  Claude Code          (자율 실행, 멀티파일)
전체 품질 검토   →  Gemini CLI           (100만 토큰, 조감도)
UI 세부 조정     →  Cursor               (컴포넌트 수정)
```

---

## 실전 시나리오: 기획서 기반 인증 기능 추가

### Step 1. gws로 기획서 가져오기

Google Docs에 정리한 인증 스펙이 있다면:

```bash
gws docs get <doc-id> > /tmp/auth-spec.md
cat /tmp/auth-spec.md | claude "이 스펙대로 Next.js + Supabase Auth로 로그인/회원가입을 구현해줘.
  - lib/supabase.ts
  - app/actions/auth.ts
  - middleware.ts
  - app/auth/callback/route.ts
  Cursor로 만든 LoginForm.tsx와 연결되어야 해."
```

### Step 2. Cursor로 화면 설계

```
Cursor (Composer Cmd+I):
"로그인 페이지 UI를 만들어줘.
 이메일 + 비밀번호 인풋, 구글 소셜 로그인 버튼,
 '아직 계정이 없으신가요?' 링크 포함."
```

### Step 3. Claude Code로 인증 로직 구현

(Step 1에서 이미 진행했을 수 있음. 또는 Cursor UI 완성 후)

```bash
claude "Supabase Auth로 이메일 로그인과 Google 소셜 로그인을 구현해줘.
       LoginForm.tsx와 연결해줘."
```

### Step 4. Gemini CLI로 보안 검토

```bash
find . \( -name "*.ts" -o -name "*.tsx" \) \
  -not -path "*/node_modules/*" \
  | xargs cat \
  | gemini "방금 추가한 인증 시스템을 보안 관점에서 검토해줘.
            OWASP Top 10 기준으로 취약점이 있는지 확인해줘."
```

### Step 5. Cursor로 UI 마무리

```
Cursor (Inline Edit Cmd+K):
"로그인 실패 시 에러 메시지를 빨간 박스로 표시해줘"
```

---

## 기능 유형별 도구 선택표 (4도구)

| 작업 유형 | 추천 도구 | 비고 |
|-----------|-----------|------|
| 기획서·스펙 반영 | Google Workspace CLI → Claude Code | `gws docs get` 후 claude에 전달 |
| 스프레드시트 데이터 활용 | Google Workspace CLI → Claude Code | `gws sheets get` 후 JSON/시드 생성 |
| 새 페이지 UI 초안 | Cursor | 실시간 미리보기 |
| 폼·컴포넌트 수정 | Cursor | 빠른 인라인 편집 |
| API 연동·서버 로직 | Claude Code | 여러 파일 자동 처리 |
| 데이터베이스 스키마 | Claude Code | 타입·마이그레이션 연결 |
| 전체 코드 보안 리뷰 | Gemini CLI | 100만 토큰 조감도 |
| README·문서화 | Gemini CLI | 전체 맥락 파악 |
| Docs/Sheets와 코드 일치 검토 | Gemini CLI + gws | 스펙 문서 전달 후 비교 |

---

## 하루 개발 루틴 (4도구)

### 오전: 문서 확인 + 계획

```bash
# Docs에서 오늘 할 일 가져오기
gws docs get <sprint-doc-id> | claude "이 내용을 바탕으로 오늘 작업 계획을 세워줘. 어떤 파일을 만들지 제안해줘."
```

### 오후: 구현

```
Cursor: 검색 UI 컴포넌트 초안
Claude Code: 검색 API 라우트 + 서버 액션
gws: 필요 시 Sheets에서 설정값 가져와 반영
Cursor: UI와 API 연결 확인
```

### 저녁: 검토 + 커밋

```bash
git diff main | gemini "오늘 추가한 코드를 리뷰해줘. 개선할 점이 있으면 알려줘."
git add -A
git commit -m "feat: 검색 기능 추가"
```

---

## 비용·역할 요약 (4도구)

| 도구 | 비용 | 언제 쓸까 |
|------|------|-----------|
| Cursor | 월 $20 (Pro) 또는 무료 한도 | UI 작업·일상적 편집 |
| Claude Code | Claude Pro/Max 구독 포함 | 복잡한 기능 구현·문서 기반 구현 |
| Gemini CLI | **무료** (분당 60요청) | 리뷰·분석·문서화 |
| Google Workspace CLI | OAuth·Workspace 계정 기준 | Docs·Sheets·Drive 연동 |

---

## 한 줄 요약

> **Google Workspace CLI**로 문서·데이터를 가져오고, **Cursor**로 빠르게 보고, **Claude Code**로 깊이 만들고, **Gemini CLI**로 넓게 검토한다.

네 도구는 경쟁이 아닌 **보완 관계**예요. 각자의 강점을 살리는 것이 핵심이에요.

---

## 다음은?

기초 커리큘럼이 끝났어요. 배운 내용으로 실제 서비스를 만들어 보세요.

**추천 첫 프로젝트:**
- 개인 포트폴리오 사이트 (Cursor + Vercel)
- 간단한 Todo 앱 (Claude Code + Supabase)
- Docs 기반 스펙 → 코드 자동 반영 (gws + Claude Code)
- 팀 내부 도구 (네 도구 통합 워크플로우)

---

## 10장 보강 프로세스 적용: 통합 실전 운영 체크포인트

9장까지 적용한 기본샘플프로세스를 16챕터에 그대로 확장합니다.
핵심은 "도구를 모두 쓰는 것"이 아니라 **인증·구현·검증·회고를 한 사이클로 완료**하는 것입니다.

### 통합 실전 루프 (권장)

1. **문서 입력 확정** (`gws`)
2. **구현 실행** (`claude`, `cursor`)
3. **품질 검증** (`gemini`)
4. **리스크 점검** (보안/권한/시크릿)
5. **회고 기록** (무엇이 재사용 가능한가)

### 16챕터 실패 패턴 TOP 5

1. **단계 스킵(검증 없는 구현 완료 처리)**
   - 대응: 구현 후 검증 단계 필수 고정

2. **스펙 문서 기준점 미기록**
   - 대응: 사용한 문서 ID·시점 기록

3. **UI와 인증 흐름 불일치**
   - 대응: 로그인 성공/실패/리다이렉트 시나리오를 먼저 합의

4. **검토 결과의 미반영**
   - 대응: Gemini 결과를 수정 태스크로 즉시 변환

5. **회고 없는 반복 개발**
   - 대응: 매 사이클 종료 시 재사용 템플릿 추출

### 16챕터 체크리스트 (DoD)

- [ ] 4도구를 한 시나리오에서 순차 사용 완료
- [ ] 인증/리다이렉트/권한 흐름 점검 완료
- [ ] 검증 결과를 반영한 수정 커밋 완료
- [ ] 시크릿/환경변수 추적 여부 점검 완료
- [ ] 다음 프로젝트에 재사용할 통합 템플릿 정리 완료

> **다음 챕터 입력값:** 소셜 로그인 요구사항, 리다이렉트 정책, 세션 정책, 실패 시 사용자 메시지 규칙

<h1>4도구 통합 워크플로우</h1>
<blockquote>
<p><strong>이 챕터를 마치면</strong> Cursor·Claude Code·Gemini CLI·Google Workspace CLI를 역할에 맞게 조합해 실전처럼 작업할 수 있어요.</p>
</blockquote>
<p>네 도구를 각자의 강점에 맞게 쓰면 혼자서도 팀처럼 작업할 수 있어요.</p>
<pre><code>기획 · 문서      →  Google Workspace CLI  (Docs, Sheets에서 스펙·데이터 가져오기)
기획 · UI 초안   →  Cursor               (시각적, 빠른 반복)
복잡한 기능 구현  →  Claude Code          (자율 실행, 멀티파일)
전체 품질 검토   →  Gemini CLI           (100만 토큰, 조감도)
UI 세부 조정     →  Cursor               (컴포넌트 수정)
</code></pre>
<hr>
<h2>실전 시나리오: 기획서 기반 인증 기능 추가</h2>
<h3>Step 1. gws로 기획서 가져오기</h3>
<p>Google Docs에 정리한 인증 스펙이 있다면:</p>
<pre><code class="language-bash">gws docs get &lt;doc-id&gt; &gt; /tmp/auth-spec.md
cat /tmp/auth-spec.md | claude &quot;이 스펙대로 Next.js + Supabase Auth로 로그인/회원가입을 구현해줘.
  - lib/supabase.ts
  - app/actions/auth.ts
  - middleware.ts
  - app/auth/callback/route.ts
  Cursor로 만든 LoginForm.tsx와 연결되어야 해.&quot;
</code></pre>
<h3>Step 2. Cursor로 화면 설계</h3>
<pre><code>Cursor (Composer Cmd+I):
&quot;로그인 페이지 UI를 만들어줘.
 이메일 + 비밀번호 인풋, 구글 소셜 로그인 버튼,
 &#39;아직 계정이 없으신가요?&#39; 링크 포함.&quot;
</code></pre>
<h3>Step 3. Claude Code로 인증 로직 구현</h3>
<p>(Step 1에서 이미 진행했을 수 있음. 또는 Cursor UI 완성 후)</p>
<pre><code class="language-bash">claude &quot;Supabase Auth로 이메일 로그인과 Google 소셜 로그인을 구현해줘.
       LoginForm.tsx와 연결해줘.&quot;
</code></pre>
<h3>Step 4. Gemini CLI로 보안 검토</h3>
<pre><code class="language-bash">find . \( -name &quot;*.ts&quot; -o -name &quot;*.tsx&quot; \) \
  -not -path &quot;*/node_modules/*&quot; \
  | xargs cat \
  | gemini &quot;방금 추가한 인증 시스템을 보안 관점에서 검토해줘.
            OWASP Top 10 기준으로 취약점이 있는지 확인해줘.&quot;
</code></pre>
<h3>Step 5. Cursor로 UI 마무리</h3>
<pre><code>Cursor (Inline Edit Cmd+K):
&quot;로그인 실패 시 에러 메시지를 빨간 박스로 표시해줘&quot;
</code></pre>
<hr>
<h2>기능 유형별 도구 선택표 (4도구)</h2>
<table>
<thead>
<tr>
<th>작업 유형</th>
<th>추천 도구</th>
<th>비고</th>
</tr>
</thead>
<tbody><tr>
<td>기획서·스펙 반영</td>
<td>Google Workspace CLI → Claude Code</td>
<td><code>gws docs get</code> 후 claude에 전달</td>
</tr>
<tr>
<td>스프레드시트 데이터 활용</td>
<td>Google Workspace CLI → Claude Code</td>
<td><code>gws sheets get</code> 후 JSON/시드 생성</td>
</tr>
<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>Docs/Sheets와 코드 일치 검토</td>
<td>Gemini CLI + gws</td>
<td>스펙 문서 전달 후 비교</td>
</tr>
</tbody></table>
<hr>
<h2>하루 개발 루틴 (4도구)</h2>
<h3>오전: 문서 확인 + 계획</h3>
<pre><code class="language-bash"># Docs에서 오늘 할 일 가져오기
gws docs get &lt;sprint-doc-id&gt; | claude &quot;이 내용을 바탕으로 오늘 작업 계획을 세워줘. 어떤 파일을 만들지 제안해줘.&quot;
</code></pre>
<h3>오후: 구현</h3>
<pre><code>Cursor: 검색 UI 컴포넌트 초안
Claude Code: 검색 API 라우트 + 서버 액션
gws: 필요 시 Sheets에서 설정값 가져와 반영
Cursor: UI와 API 연결 확인
</code></pre>
<h3>저녁: 검토 + 커밋</h3>
<pre><code class="language-bash">git diff main | gemini &quot;오늘 추가한 코드를 리뷰해줘. 개선할 점이 있으면 알려줘.&quot;
git add -A
git commit -m &quot;feat: 검색 기능 추가&quot;
</code></pre>
<hr>
<h2>비용·역할 요약 (4도구)</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>
<tr>
<td>Google Workspace CLI</td>
<td>OAuth·Workspace 계정 기준</td>
<td>Docs·Sheets·Drive 연동</td>
</tr>
</tbody></table>
<hr>
<h2>한 줄 요약</h2>
<blockquote>
<p><strong>Google Workspace CLI</strong>로 문서·데이터를 가져오고, <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>Docs 기반 스펙 → 코드 자동 반영 (gws + Claude Code)</li>
<li>팀 내부 도구 (네 도구 통합 워크플로우)</li>
</ul>
<hr>
<h2>10장 보강 프로세스 적용: 통합 실전 운영 체크포인트</h2>
<p>9장까지 적용한 기본샘플프로세스를 16챕터에 그대로 확장합니다.
핵심은 &quot;도구를 모두 쓰는 것&quot;이 아니라 <strong>인증·구현·검증·회고를 한 사이클로 완료</strong>하는 것입니다.</p>
<h3>통합 실전 루프 (권장)</h3>
<ol>
<li><strong>문서 입력 확정</strong> (<code>gws</code>)</li>
<li><strong>구현 실행</strong> (<code>claude</code>, <code>cursor</code>)</li>
<li><strong>품질 검증</strong> (<code>gemini</code>)</li>
<li><strong>리스크 점검</strong> (보안/권한/시크릿)</li>
<li><strong>회고 기록</strong> (무엇이 재사용 가능한가)</li>
</ol>
<h3>16챕터 실패 패턴 TOP 5</h3>
<ol>
<li><p><strong>단계 스킵(검증 없는 구현 완료 처리)</strong></p>
<ul>
<li>대응: 구현 후 검증 단계 필수 고정</li>
</ul>
</li>
<li><p><strong>스펙 문서 기준점 미기록</strong></p>
<ul>
<li>대응: 사용한 문서 ID·시점 기록</li>
</ul>
</li>
<li><p><strong>UI와 인증 흐름 불일치</strong></p>
<ul>
<li>대응: 로그인 성공/실패/리다이렉트 시나리오를 먼저 합의</li>
</ul>
</li>
<li><p><strong>검토 결과의 미반영</strong></p>
<ul>
<li>대응: Gemini 결과를 수정 태스크로 즉시 변환</li>
</ul>
</li>
<li><p><strong>회고 없는 반복 개발</strong></p>
<ul>
<li>대응: 매 사이클 종료 시 재사용 템플릿 추출</li>
</ul>
</li>
</ol>
<h3>16챕터 체크리스트 (DoD)</h3>
<ul>
<li><input disabled="" type="checkbox"> 4도구를 한 시나리오에서 순차 사용 완료</li>
<li><input disabled="" type="checkbox"> 인증/리다이렉트/권한 흐름 점검 완료</li>
<li><input disabled="" type="checkbox"> 검증 결과를 반영한 수정 커밋 완료</li>
<li><input disabled="" type="checkbox"> 시크릿/환경변수 추적 여부 점검 완료</li>
<li><input disabled="" type="checkbox"> 다음 프로젝트에 재사용할 통합 템플릿 정리 완료</li>
</ul>
<blockquote>
<p><strong>다음 챕터 입력값:</strong> 소셜 로그인 요구사항, 리다이렉트 정책, 세션 정책, 실패 시 사용자 메시지 규칙</p>
</blockquote>