# Source Sync Architect

> 소스코드 분석을 통해 기능 중심의 통합 문서(Master README)를 생성하고, 화면(Frontend), 백엔드(Backend), 주요 개념(Core Concepts)별 상세 기술 문서를 실시간으로 동기화합니다. 기능 요약, 스크린샷, API 스펙, 테스트 시나리오를 하나로 묶어 관리합니다.

- Skill: `lsw417/source-sync-architect` (Agent Skill, multi-file: 6 files)
- Install (CLI): `npx skillmds@latest add lsw417/source-sync-architect`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lsw417/source-sync-architect/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: lsw417 (https://skillmd.com/u/lsw417)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/lsw417/source-sync-architect

---


# Source-Sync Architect

이 스킬은 **'기능(Feature)'**을 중심으로 한 통합 문서화 엔진입니다. 각 기능의 목적과 시각적 증거를 담은 메인 문서와, 코드에서 직접 추출된 상세 기술 명세(영역별 문서)를 유기적으로 연결하여 관리합니다.

## 핵심 가치
- **Feature-Centric**: 개별 파일이 아닌 '사용자 기능' 단위로 모든 정보(화면, API, 모델, 테스트)를 통합합니다.
- **Master-Detail Structure**: 한눈에 보는 요약(Master README)과 코드 기반의 깊이 있는 명세(Detail Docs)를 병행합니다.
- **Living Document**: 코드 변경 시 관련 영역의 문서가 즉각 동기화되어 문서와 실제 구현의 격차(Drift)를 없앱니다.

## 수행 프로세스 (Workflow)

### 1. 기능 패키지 구조 (Directory Structure)
모든 기능은 `docs/features/{sequence}_{feature_name}/` 하위에 패키징됩니다.
- `README.md`: 메인 통합 문서 (개요, 스크린샷, 핵심 요약)
- `frontend.md`: 화면 아키텍처, Props/State, E2E 테스트 상세
- `backend.md`: 상세 API 명세, 데이터 모델, 단위 테스트 상세
- `concepts.md`: 핵심 비즈니스 로직, 용어 사전, 정책 시각화

### 2. 하이브리드 동기화 모드
- **초기화 (Initialize)**: 새로운 기능을 만들 때 4종의 문서를 동시에 스캐폴딩합니다.
- **부분 동기화 (Partial Sync)**: 특정 영역(예: 백엔드) 코드만 변경된 경우, 전체 문서가 아닌 해당 상세 문서(`backend.md`)만 정밀 갱신합니다.
- **통합 업데이트 (Full Update)**: 기능 완성 후 메인 README의 스크린샷과 상태 배지를 일괄 업데이트합니다.

## 영역별 문서화 및 추출 규칙

#### A. 메인 통합 문서 (Master README)
- **내용**: 개발 의도, 기능 설명, **최신 스크린샷(Playwright)**, 영역별 상세 문서 링크, 전체 구현 상태 배지.
- **템플릿**: `references/feature_main_template.md`

#### B. 화면 상세 (Frontend Detail)
- **내용**: UI 컴포넌트 트리, 핵심 상태값, **E2E 테스트 시나리오 및 성공 기준**.
- **템플릿**: `references/frontend_sync_template.md`

#### C. 백엔드 상세 (Backend Detail)
- **내용**: **구체적 API 명세(Header, 상세 I/O)**, DB 모델 리니지, **단위 테스트 목적 및 성공 기준**.
- **템플릿**: `references/backend_sync_template.md`

#### D. 주요 개념 상세 (Concept Detail)
- **내용**: 비즈니스 정책(Policy), 용어 사전, Mermaid 기반 로직 시각화.
- **템플릿**: `references/concept_template.md`

## 활용 가이드
- "신규 기능 '결제 시스템'에 대한 통합 문서를 만들어줘"라고 요청하면, 메인 README와 3종의 상세 문서를 생성합니다.
- "코드 수정했으니 백엔드 명세만 최신화해줘"라고 요청하면 `backend.md`를 정밀 갱신하고 메인 README의 상태를 업데이트합니다.

## 참조 템플릿
- [메인 통합 문서 템플릿](references/feature_main_template.md)
- [화면 상세 템플릿](references/frontend_sync_template.md)
- [백엔드 상세 템플릿](references/backend_sync_template.md)
- [주요 개념 템플릿](references/concept_template.md)