SOCLE 방법론
5단계 순차적 디지털 제품 생성 프레임워크. 각 단계는 구체적인 산출물을 생성하며, 다음 단계의 입력으로 사용됩니다.
원칙
첫 번째 보이는 기능을 구축하기 전에 전체 기반을 준비합니다. 각 결정은 순서대로 단 한 번 이루어집니다. 기술적 기반은 나중에 구축할 내용까지 포함하여 한 번에 마련됩니다. 개발은 짧은 증분 단위로 진행되며, 각 증분은 완전히 완료되어 배포된 후에 다음 단계로 넘어갑니다.
5단계
S — 구조화 (Structurer)
중요한 결정부터 시작합니다. 누구를 대상으로 하는지, 어떤 문제를 해결하는지, 어떤 기술을 사용할지, 어떻게 측정할지. 순서대로 하나씩 결정하며, 각 결정이 다음 결정의 문을 엽니다.
이 단계의 산출물:
- 한 문장으로 된 제품 비전
- 대상 사용자 (1차 및 2차 페르소나)
- 해결하는 문제 (구체적이고 측정 가능하게)
- 확정된 기술 스택
- 선택된 시각적 방향
- 식별된 수익화 모델 (프리미엄이더라도, 나중에라도)
- 제품 이름
진행 방법:
- 폐쇄형 질문(열린 브레인스토밍이 아닌)으로 프레이밍 질문을 합니다.
- 각 결정을 다음 결정으로 넘어가기 전에 확정합니다.
- 확정된 결정들을 테이블로 정리합니다.
- 경쟁사와 차별화 요소를 식별합니다.
취해야 할 전체 결정 목록은 references/structurer-checklist.md를 참조하세요.
O — 도구화 (Outiller)
한 번에 전체 기반을 준비합니다. 데이터베이스, 페이지, 인증, 추적, 규칙. 나중에 구축할 내용까지 모두 준비됩니다.
이 단계의 산출물:
- 최종 라우트 구조 (URL은 더 이상 변경되지 않음)
- 완전한 데이터베이스 스키마 (V0.1에서 사용되지 않는 테이블까지 모두)
- CSS 디자인 토큰 (변수, 타이포그래피, 색상, 간격)
- 애니메이션 변형 (Framer Motion 또는 동등)
- 분석 태그 계획 (이벤트, 전환 퍼널)
- CI/CD 파이프라인 (린트, 타입 체크, 테스트, 자동 빌드)
- CLAUDE.md 파일 (Claude Code용 프로젝트 지침)
- CURRENT_INCREMENT.md 파일 (첫 번째 증분의 범위)
- 미들웨어 설정 (인증, 리디렉션, 보안 헤더)
- 문서화된 환경 변수
진행 방법:
- 전체 라우트 구조 생성 (마케팅, 인증, 앱, 관리자, API)
- enum, 인덱스, RLS, 트리거가 포함된 완전한 SQL 스키마 작성
- 디자인 시스템 설정 (globals.css + tailwind.config.ts)
- 프로젝트 컨텍스트 파일 생성 (CLAUDE.md, ARCHITECTURE.md 등)
- 프로젝트 스캐폴딩, 모든 의존성 설치, 첫 커밋, 배포
각 파일의 템플릿은 references/outiller-templates.md를 참조하세요.
C — 구축 (Construire)
짧은 증분 단위로 진행합니다. 각 증분은 완전한 무언가를 제공하며, 보여주고, 테스트하고, 사용할 수 있습니다. 처음부터 끝까지 작동하는 진정한 제품 조각입니다.
원칙:
- 각 증분은 CURRENT_INCREMENT.md에 명시된 닫힌 범위를 가집니다.
- 각 증분은 테스트 가능한 완료 기준을 가집니다.
- 각 증분은 명시적으로 범위 밖의 항목 목록을 가집니다.
- 작업은 순서가 정해져 있으며, 각 작업은 이전 작업에만 의존합니다.
- 각 작업은 코딩 → 테스트 → 확인 → 커밋 주기를 따릅니다.
증분 구조:
# V0.X — [증분 이름]
## 목표
[이 증분이 끝났을 때 사용자가 할 수 있는 일]
## 작업 (순서대로)
[세부 사항이 포함된 번호 목록]
## 완료 기준
[구체적인 확인 목록]
## 범위 밖
[이 증분에 포함되지 않는 모든 항목의 명시적 목록]
각 작업 후 체계적 확인:
- 타입 체크 통과
- 테스트 통과
any타입 없음- Props 타입 지정됨
- API 입력 값 검증됨
- 커밋은 conventional commits 규칙 따름
L — 전달 (Livrer)
각 조각은 다음 단계로 넘어가기 전에 온라인에 올라가 실제 사용자에게 제공됩니다. 피드백이 일찍 도착하고, 조정도 그만큼 빠릅니다.
원칙:
- 각 증분은 완료되는 즉시 프로덕션(또는 프리뷰)에 배포됩니다.
- 배포는 자동입니다 (main에 push = Vercel 배포).
- 프로덕션 오류는 즉시 감지됩니다 (모니터링, 에러 바운더리).
- 분석 이벤트는 첫 번째 증분부터 활성화됩니다.
- 이전 증분이 안정화된 후에만 다음 증분을 시작합니다.
배포 체크리스트:
- CI에서 빌드 통과
- 프로덕션에서 콘솔 오류 0개
- 페이지에 메타데이터 (title, description) 있음
- 반응형 작동 (모바일 확인)
- 분석 이벤트 추적됨
- URL 접근 가능하고 작동함
E — 확장 (Élargir)
제품이 자연스럽게 성장합니다. 새로운 기능은 기존 기능 위에 올라가고, 디자인은 진화하며, 통합이 연결됩니다. 처음부터 기반이 준비되어 있었기 때문에 구조는 안정적으로 유지됩니다.
원칙:
- 새로운 증분은 이전 증분을 무효화하지 않습니다.
- DB 테이블은 이미 준비되어 있습니다 (O 단계에서 추가됨).
- CSS 변수를 사용하면 컴포넌트를 건드리지 않고 스타일을 변경할 수 있습니다.
- 라우트는 안정적입니다 (URL이 변경되지 않음).
- 코딩 규칙은 첫 번째 증분부터 마지막 증분까지 동일합니다.
증분 추가 시:
- CURRENT_INCREMENT.md를 새 범위로 업데이트합니다.
- 기반(O 단계)이 필요를 충족하는지 확인합니다.
- 테이블이나 라우트가 누락된 경우: 재구축이 아닌 마이그레이션을 통해 추가합니다.
- V0.1과 동일한 규칙에 따라 코딩, 테스트, 배포합니다.
새 프로젝트에 SOCLE 적용 방법
전체 시퀀스
1. 구조화
│ 프레임 질문 (폐쇄형 질문)
│ 확정된 결정 테이블
│ 비전, 대상, 스택, 수익화
↓
2. 도구화
│ 모든 기반 파일 생성
│ 라우트, DB, 토큰, 분석, CI/CD
│ 스캐폴딩, 배포, 첫 번째 빈 커밋
↓
3. 구축 (V0.1)
│ 첫 번째 증분: 최소 핵심
│ 인증 + 핵심 기능 하나 + 내보내기
│ 테스트, 커밋, 배포
↓
4. 전달 (V0.1)
│ 프로덕션에 배포, 실제 사용자 테스트
│ 분석 활성화, 오류 모니터링
│ V0.2로 넘어가기 전에 안정화
↓
5. 확장 (V0.2, V0.3, ...)
│ 각 증분은 C → L 순서를 따름
│ 기반이 성장을 흡수
│ 재구축 없음
생성할 프로젝트 파일 (O 단계)
| 파일 | 역할 |
|---|---|
CLAUDE.md | Claude Code 지침: 규칙, 워크플로우, 확인 사항 |
CURRENT_INCREMENT.md | 현재 증분 범위, 순서화된 작업, 완료 기준 |
ARCHITECTURE.md | 최종 라우트, 파일 구조, 데이터 흐름 |
DB_SCHEMA.sql | 완전한 데이터베이스 스키마 |
DESIGN_TOKENS.md | CSS 변수, Tailwind 설정, 애니메이션 변형 |
AGENT_PROMPTS.md | 프로젝트가 AI 에이전트를 사용하는 경우 시스템 프롬프트 |
ROADMAP.md | 계획된 모든 증분 개요 |
복잡성 감사 (S와 O 사이)
O 단계로 넘어가기 전에 프로젝트의 모든 구성 요소를 목록화하고 복잡성을 평가합니다. 높은 복잡성 구성 요소 수가 5개를 초과하면 더 많은 증분으로 나눕니다. 규칙: 각 증분은 최대 3~5개의 새로운 구성 요소를 포함합니다.
| 구성 요소 | 복잡성 | 예정된 증분 |
|---|---|---|
| [이름] | 낮음 / 중간 / 높음 | V0.X |
프로젝트가 대성당(20개 이상의 구성 요소, 높은 복잡성 6개 이상)과 같다면 범위를 재검토합니다. V0.1을 한 사람이 1~2주 내에 구현할 수 있을 때까지 단순화합니다.
권장 기술 스택
SOCLE 방법론은 모든 스택에서 작동합니다. 사용자가 선호도가 없는 경우 기본 스택은 다음과 같습니다.
| 계층 | 기술 |
|---|---|
| 프레임워크 | Next.js 14+ (App Router) |
| 언어 | TypeScript (strict) |
| 스타일링 | Tailwind CSS + shadcn/ui |
| 애니메이션 | Framer Motion |
| 상태 관리 | Zustand |
| 인증 | Supabase Auth |
| 데이터베이스 | Supabase (PostgreSQL) |
| 검증 | Zod |
| 테스트 | Vitest + Testing Library |
| CI/CD | GitHub Actions |
| 배포 | Vercel |
사용자가 다른 스택을 사용하는 경우 O 단계의 템플릿을 그에 맞게 조정합니다. SOCLE 원칙은 어떤 스택에서도 동일하게 유지됩니다.
어조와 자세
사용자와 함께 SOCLE을 적용할 때:
- 전문적이고 성숙하며 대화체 어조
- 명확하고 직접적으로 유용한 문장
- 비개발자와 대화할 때는 설명되지 않은 기술 용어 사용 금지
- 우월감을 드러내는 자세 금지
- 수사적 구성 금지 ("이것은 X가 아니라 Y입니다" 같은 표현)
- 함께 안내하고, 전달하고, 나아갑니다.