---
description: "풀스택 웹 애플리케이션 구축. React, TypeScript, Next.js, Tailwind CSS 기반 SaaS/랜딩 페이지/웹사이트 개발. Use when: 랜딩 페이지, SaaS, 웹사이트 구축, 인증, 결제 연동."
---

# 3. 풀스택 빌더 (GLM-5 최적화)

## 트리거 시스템

### 진입 트리거
- "랜딩 페이지", "SaaS", "웹사이트 구축"
- "인증", "결제 연동", "이메일 워크플로우"
- "InsuWiki", "개발", "프로그래밍"
- 파일 형식: React, TypeScript, Next.js, Tailwind CSS

### 진출 트리거
- 파일 구조 작성 완료
- 핵심 로직 구현 완료
- 배포 준비 완료
- "다음 기능으로 이동" 명령

### 다루지 않는 것
- 디자인 시스템 구축 (별도 에이전트)
- 복잡한 백엔드 아키텍처
- 데이터베이스 최적화

---

## GLM-5 특성 활용

### 실무용 코드 작성
- 튜토리얼 X, 실제 배포 가능한 코드
- 주석이 달린 코드
- 모든 종속성 포함

### 풀스택 개발
- 프론트엔드 + 백엔드 통합
- 인증, 결제, 이메일 연동
- 데이터베이스 설계

### 효율적 구현
- 체계적 파일 구조
- 환경 변수 설정 가이드
- 배포 지침 포함

---

## 워크플로우

### Phase 1: 리서치 (아직 구현하지 마)

**프롬프트:**
```
"시니어 풀스택 개발자 역할을 해 주세요.

[InsuWiki] 또는 [제품 유형] 랜딩 페이지를 구축하기 위해, 다음을 research.md에 분석하십시오:

1. **제품 요구사항**
   - 핵심 가치 제안
   - 타겟 사용자
   - 주요 기능

2. **기술 스택**
   - 프론트엔드: React 18, TypeScript, Tailwind CSS, Framer Motion
   - 백엔드: Next.js API Routes
   - 인증: NextAuth.js
   - 결제: Stripe
   - 이메일: ConvertKit 또는 Resend
   - 데이터베이스: PostgreSQL

3. **파일 구조 설계**
   - 컴포넌트 구조
   - API 경로
   - 데이터베이스 스키마

**중요: 아직 코드를 작성하지 마십시오.**"
```

**제이회장님 검토 포인트:**
- InsuWiki 요구사항에 맞는가?
- 보험/연금 업계에 적합한가?
- 기술 스택이 적절한가?

### Phase 2: 계획 (아직 구현하지 마)

**프롬프트:**
```
"분석을 바탕으로, plan.md에 구현 계획을 작성하십시오:

**프론트엔드 요구사항:**
1. 히어로 섹션
   - 매력적인 헤드라인 ([보험/연금 관련 핵심 가치])
   - 서브헤드라인
   - CTA 버튼

2. 기능 섹션
   - 아이콘 + 제목 + 설명
   - 6가지 장점

3. 가격 비교표
   - 3단계 (무료, 기본, 프리미엄)
   - 중간 단계 강조

4. 사회적 증거 섹션
   - 고객 후기 카드
   - 회사 로고

5. FAQ 아코디언
   - 8가지 일반적인 질문
   - 보험/연금 관련

6. 이메일 수집 양식
   - 실시간 유효성 검사

7. 모바일 반응형 디자인
   - 모바일, 태블릿, 데스크톱

8. 애니메이션
   - React 18, TypeScript, Tailwind CSS, Framer Motion

**백엔드 요구사항:**
1. Stripe 결제 연동
   - 웹훅 처리
   - 구독 서비스

2. 이메일 목록 관리
   - ConvertKit 또는 Resend API

3. 사용자 인증
   - NextAuth.js
   - 이메일 + Google OAuth

4. PostgreSQL 데이터베이스
   - 사용자 스키마
   - 구독 스키마

5. API 경로
   - 사용자 가입
   - 결제 처리
   - 구독 관리

**결과물:**
1. 전체 파일 구조
2. 환경 변수 설정 가이드
3. Vercel 배포 지침
4. 주석이 달린 코드
5. Package.json 파일

**중요: 아직 구현하지 마십시오.**"
```

**제이회장님 검토 포인트:**
- InsuWiki에 필요한 기능이 모두 포함되었는가?
- 보험 설계팀이 활용할 수 있는가?
- 개발팀이 효율적으로 일할 수 있는 구조인가?

### Phase 3: 파일 구조 작성 (아직 구현하지 마)

**프롬프트:**
```
"전체 파일 구조를 plan.md에 작성하십시오:

```
project/
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/[...nextauth]/
│   │   │   ├── stripe/
│   │   │   └── subscribe/
│   │   ├── components/
│   │   │   ├── Hero.tsx
│   │   │   ├── Features.tsx
│   │   │   ├── Pricing.tsx
│   │   │   ├── Testimonials.tsx
│   │   │   ├── FAQ.tsx
│   │   │   └── EmailForm.tsx
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── lib/
│   │   ├── stripe.ts
│   │   ├── auth.ts
│   │   └── email.ts
│   └── styles/
│       └── globals.css
├── prisma/
│   └── schema.prisma
├── public/
├── .env.local
├── package.json
└── README.md
```

각 파일의 역할을 설명하십시오.

**중요: 아직 구현하지 마십시오.**"
```

### Phase 4: 핵심 컴포넌트 구현 (아직 구현하지 마)

**프롬프트:**
```
"핵심 컴포넌트별 구현 계획을 plan.md에 추가하십시오:

**1. Hero.tsx**
- 목적: 첫인상, CTA
- 상태: 설계 완료
- 의존성: Tailwind, Framer Motion

**2. Features.tsx**
- 목적: 6가지 장점
- 상태: 설계 완료
- 의존성: Lucide Icons

**3. Pricing.tsx**
- 목적: 가격 비교표
- 상태: 설계 완료
- 의존성: Stripe 연동

**4. Testimonials.tsx**
- 목적: 사회적 증거
- 상태: 설계 완료
- 의존성: 없음

**5. FAQ.tsx**
- 목적: 질문 답변
- 상태: 설계 완료
- 의존성: 아코디언 UI

**6. EmailForm.tsx**
- 목적: 이메일 수집
- 상태: 설계 완료
- 의존성: React Hook Form, Zod

각 컴포넌트의 핵심 로직을 설명하십시오.

**중요: 아직 구현하지 마십시오.**"
```

### Phase 5: 최종 검토 및 승인

**제이회장님 작업:**
1. `research.md` 검토 → 메모 추가
2. `plan.md` 검토 → 메모 추가
   - "여기 Next.js 14 사용해야 해, 13 아니야"
   - "Stripe 테스트 모드로 시작해"
   - "이메일은 Resend가 더 나을 것 같아"
3. 1~6회 반복
4. 모두 동의 → "implement it all"

### Phase 6: 구현

**프롬프트:**
```
"implement it all

파일 구조부터 시작해서 각 구성 요소를 체계적으로 구축하십시오.

실제로 배포하여 작동시킬 수 있는 실무용 코드를 작성하십시오."
```

---

## 반대 프레임 (Anti-Pattern)

### ❌ 게으른 버전 (금지)

**코드:**
- 튜토리얼용 예제 코드
- "TODO: implement this"
- 복사붙여넣기식 코드
- 주석 없음

**구조:**
- 파일 구조 없음
- 환경 변수 미정의
- 배포 지침 없음

**접근:**
- "일단 작동하게"
- 최적화 무시
- 보안 고려 X

### ✅ 반대로 만들기

**코드 금지:**
```
- "TODO" → 실제 구현
- 튜토리얼 코드 → 실무용 코드
- 주석 없음 → 명확한 주석
- 복사붙여넣기 → 맞춤형 구현
```

**구조 강제:**
```
- 파일 구조 없음 → 체계적 구조
- 환경 변수 미정의 → 명확한 가이드
- 배포 지침 없음 → 단계별 지침
```

**접근 방식:**
```
- "일단 작동하게" → 확장 가능한 코드
- 최적화 무시 → 성능 고려
- 보안 고려 X → 보안 모범 사례
```

---

## 검증 게이트

### Tier 3 체크리스트

**AI 냄새 체크:**
- [ ] 튜토리얼 코드처럼 보이지 않음
- [ ] "TODO" 없음
- [ ] 실제 배포 가능한 코드
- [ ] 주석이 명확함

**실용성 체크:**
- [ ] 모든 종속성 포함
- [ ] 환경 변수 설정 명확
- [ ] 배포 지침 구체적
- [ ] 보험/연금 업계에 적합

**기술적 체크:**
- [ ] TypeScript 타입 안전
- [ ] React 18 기능 활용
- [ ] Tailwind CSS 최적화
- [ ] Framer Motion 애니메이션 부드러움
- [ ] Stripe 결제 안전
- [ ] NextAuth.js 인증 견고
- [ ] PostgreSQL 스키마 합리적

---

## GLM-5 최적화 포인트

### 1. 실무용 코드
- 튜토리얼 X
- 실제 프로덕션 레벨
- 배포 가능

### 2. 풀스택 통합
- 프론트엔드 + 백엔드
- 인증 + 결제 + 이메일
- 데이터베이스

### 3. 효율적 구현
- 체계적 파일 구조
- 재사용 가능한 컴포넌트
- 확장 가능한 아키텍처

---

## 개발팀 통합

### 팀장 (GLM-5)
- 전체 아키텍처 설계
- 핵심 로직 구현
- 배포 및 유지보수

### 팀원 (경량 모델)
- 개별 컴포넌트 구현
- 테스트 코드 작성
- 문서화

---

## KPI

### 개발 수준
- 구현 속도
- 코드 품질
- 버그 발생률

### 배포 수준
- 배포 성공률
- 로딩 속도
- 사용자 만족도

---

## InsuWiki 특화

### 기능 요구사항

**1. 지식창고**
- 보험/연금 관련 지식 베이스
- 카테고리별 정리
- 검색 기능

**2. 약관 분석**
- PDF 업로드
- 자동 분석
- 핵심 내용 추출

**3. Reflect.ai 메모장**
- 고객 상담 메모
- AI 기반 분석
- 패턴 인식

### 기술 스택 조정

**프론트엔드:**
- Next.js 14 (App Router)
- React 18
- TypeScript
- Tailwind CSS
- Framer Motion
- React Hook Form
- Zod

**백엔드:**
- Next.js API Routes
- Prisma ORM
- PostgreSQL

**인증:**
- NextAuth.js
- 이메일 + Google OAuth

**결제:**
- Stripe (구독)

**이메일:**
- Resend (ConvertKit 대신)

**파일 처리:**
- Uploadthing (PDF 업로드)
- PDF 파싱 라이브러리

**AI:**
- OpenAI API (약관 분석)
- 또는 GLM API

---

## 다음 단계

1. **InsuWiki 요구사항 정의**
   - 핵심 기능
   - 타겟 사용자
   - 기술 스택

2. **프로토타입 범위 결정**
   - MVP 기능
   - 우선순위

3. **개발 환경 설정**
   - Next.js 프로젝트 생성
   - 환경 변수 설정

4. **구현 시작**
   - "implement it all" 준비

---

## 레드팀 검증

**질문:**
- "이 기술 스택이 과도하게 복잡하지 않은가?"
- "더 간단한 대안은 없는가?"
- "유지보수 비용이 합리적인가?"
- "보안에 취약한 부분은 없는가?"