System Planner

어드민 시스템을 세계 최고 수준으로 고도화하기 위한 전략 + 화면 기획 스킬. 시스템/도메인 전체 관점에서 전략 기획 + 화면 기획을 통합 수행하며, improve 단계에서 개선 항목별 화면 레이아웃을 산출한다. 프로토타입 생성은 별도 프로토타입 생성 스킬/도구에 위임한다.

서브커맨드

사용법

/system-planner require {시스템/도메인명} [--source {URL}] [--file {경로}]
/system-planner audit {시스템명} [--url {URL}] [--login] [--deep] [--req-doc {경로}] [--source {URL}]
/system-planner benchmark {도메인명} [--vendors {벤더목록}] [--focus {초점}] [--req-doc {경로}] [--source {URL}]
/system-planner gap {시스템/도메인명} [--audit-doc {경로}] [--benchmark-doc {경로}] [--req-doc {경로}] [--source {URL}]
/system-planner improve {시스템/도메인명} [--scope {범위}] [--priority {우선순위}] [--prototype {html|live}] [--req-doc {경로}] [--source {URL}]

옵션 상세

분석 프레임워크

5차원 5점 척도로 모든 분석(audit, gap)을 수행한다. 상세 기준은 references/framework.md 참조.

실행 흐름

require (요구사항 정의)

0. --source 시: 요청 추적 도구에서 작업 조회 (제목, 설명, 코멘트, 첨부파일) → 요구사항 소스로 활용
1. 대상 시스템/도메인 확인
2. 요구사항 수집
   - --source: 요청 추적 도구에서 추출 → 요구사항 구조화
   - --file: 기존 파일 읽기 → 요구사항 구조화
   - 기본: 사용자 입력 텍스트를 요구사항으로 정리
3. 요구사항 구조화 (배경/목적, 기능 요구사항, 비기능 요구사항, 제약 조건, 참조 자료, 분석 지시사항)
4. requirement 문서 저장
   → {출력 디렉토리}/requirement/{YYYY-MM-DD}-{시스템}-{scope}-requirement.md

—req-doc 공통 로직

모든 서브커맨드(audit, benchmark, gap, improve)에서 requirement 문서를 참조하는 공통 로직:

1. --req-doc 지정 시: 해당 파일 읽기
2. 미지정 시: 출력 디렉토리의 requirement/ 에서 동일 시스템/도메인의 최신 문서 자동 탐색
3. 문서 발견 시: 해당 요구사항을 분석 컨텍스트로 활용
4. 없으면: 요구사항 없이 기존 방식대로 진행 (하위 호환)
   - 단, improve 파이프라인에서는 require 서브커맨드 자동 실행

audit (현행 어드민 분석)

0. --source 시: 요청 추적 도구에서 작업 조회 → 기획 컨텍스트로 활용
0-1. requirement 확인 (--req-doc 공통 로직)
   → 있으면: 명시된 화면/기능 중심으로 분석 (전체 분석도 수행하되 해당 영역 심층 분석)
1. 대상 시스템 확인
2. --login 시: 브라우저 열기 → "로그인 완료 후 확인해주세요" → 대기
3. Playwright로 어드민 화면 전체 분석
   - 메인 네비게이션 구조 파악
   - 주요 화면별 스크린샷 + DOM 구조 분석
   - 화면 목록 + 기능 인벤토리 작성
4. --deep 시: 코드베이스 분석
   - 사용자가 제공한 경로 또는 도구로 접근하여 소스코드 분석
   - Frontend: 라우트 구조, 컴포넌트 패턴, 상태 관리
   - Backend: API 구조, 도메인 모델, 서비스 패턴
5. 5차원 평가 수행
6. 강점/약점 도출
7. audit 문서 저장

benchmark (글로벌 벤치마킹)

0. --source 시: 요청 추적 도구에서 작업 조회 → 기획 컨텍스트로 활용
0-1. requirement 확인 (--req-doc 공통 로직)
   → 있으면: 기능 요구사항 키워드 기반으로 벤치마킹 초점 자동 설정
1. 도메인/기능 영역 확인
2. WebSearch로 글로벌 트렌드 조사
   - "{도메인} CRM best practices {연도}"
   - "{도메인} admin panel UX trends"
   - "enterprise {도메인} features comparison"
3. WebFetch로 주요 벤더 기능 페이지 분석 (--vendors 지정 시 해당 벤더만)
4. 벤더별 기능 매트릭스 작성
5. UX 베스트 프랙티스 정리
6. 기술 트렌드 정리 (AI, 자동화, 실시간 등)
7. benchmark 문서 저장

gap (Gap 분석)

0. --source 시: 요청 추적 도구에서 작업 조회 → 기획 컨텍스트로 활용
0-1. requirement 확인 (--req-doc 공통 로직)
   → 있으면: requirement 기반 우선순위 조정
1. audit 문서 확인 (--audit-doc 또는 자동 탐색, 없으면 audit 자동 실행)
2. benchmark 문서 확인 (--benchmark-doc 또는 자동 탐색, 없으면 benchmark 자동 실행)
3. Gap 매트릭스 작성 (기능 Gap, UX Gap, 기술 Gap)
4. 레이더 차트 데이터 생성 (5차원 현행 vs 목표)
5. 우선순위 매트릭스 (Impact x Effort)
   - Quick Win: High Impact + Low Effort
   - Strategic: High Impact + High Effort
   - Fill-in: Low Impact + Low Effort
   - Deprioritize: Low Impact + High Effort
6. gap 문서 저장

improve (통합 고도화 기획 + 화면 기획)

0. --source 시: 요청 추적 도구에서 작업 조회 → 기획 컨텍스트로 활용
1. 파이프라인 자동 실행
   - requirement 결과 확인/실행 (없으면 require 자동 실행)
   - audit 결과 확인/실행
   - benchmark 결과 확인/실행
   - gap 결과 확인/실행
2. 개선안 도출 (Gap 매트릭스 기반, 각 항목별: 현행 → 목표 → 구현 방향)
3. 화면 기획 (화면 변경 수반 항목)
   - Playwright로 현행 화면 스크린샷 캡처
   - benchmark 베스트 프랙티스 참조하여 개선 화면 설계
   - 레이아웃, 주요 변경점, 인터랙션 정의
4. 비즈니스 가치 분석 (운영 효율, 사용자 만족도, 데이터 활용도)
5. Phase 로드맵 제안
   - Phase 1 (Quick Win): 1-2주 내 구현 가능
   - Phase 2 (Core): 1-2개월 핵심 개선
   - Phase 3 (Advanced): 3-6개월 고도화
6. --scope / --priority 지정 시: 해당 필터 적용
7. improve 문서 저장
8. --prototype 시: 프로토타입 생성 스킬/도구에 위임

파이프라인 흐름도

graph TD
    A["/system-planner {서브커맨드}"] --> B{서브커맨드?}
    B -->|require| R[요구사항 수집]
    B -->|audit| C[Playwright 화면 분석]
    B -->|benchmark| D[WebSearch/WebFetch 리서치]
    B -->|gap| E{audit/benchmark 문서 존재?}
    B -->|improve| F[파이프라인 자동 실행]

    R --> R1{입력 소스?}
    R1 -->|--source| R2[요청 추적 도구에서 추출]
    R1 -->|--file| R3[파일에서 임포트]
    R1 -->|기본| R4[사용자 텍스트 정리]
    R2 --> R5[요구사항 구조화]
    R3 --> R5
    R4 --> R5
    R5 --> R6[requirement 문서 저장]

    C --> C0{requirement 존재?}
    C0 -->|있음| C0a[해당 영역 심층 분석]
    C0 -->|없음| C0b[전체 분석]
    C0a --> C1[--deep: 코드베이스 분석]
    C0b --> C1
    C1 --> C2[5차원 평가]
    C2 --> C3[audit 문서 저장]

    D --> D0{requirement 존재?}
    D0 -->|있음| D0a[요구사항 키워드 기반 초점]
    D0 -->|없음| D0b[전체 도메인 조사]
    D0a --> D1[벤더별 기능 분석]
    D0b --> D1
    D1 --> D2[UX/기술 트렌드 정리]
    D2 --> D3[benchmark 문서 저장]

    E -->|있음| E1[문서 로드]
    E -->|없음| E2[audit/benchmark 자동 실행]
    E1 --> E3[Gap 매트릭스 작성]
    E2 --> E3
    E3 --> E4[우선순위 매트릭스]
    E4 --> E5[gap 문서 저장]

    F --> F0[requirement 확인/실행]
    F0 --> F1[audit 확인/실행]
    F1 --> F2[benchmark 확인/실행]
    F2 --> F3[gap 확인/실행]
    F3 --> F4[개선안 도출]
    F4 --> F5[화면 기획]
    F5 --> F6[Phase 로드맵]
    F6 --> F7[improve 문서 저장]
    F7 --> F8{--prototype?}
    F8 -->|있음| F9[프로토타입 생성 스킬 호출]
    F8 -->|없음| F10[완료]

문서 저장 위치

{출력 디렉토리}/
├── requirement/
│   └── {YYYY-MM-DD}-{시스템}-{scope}-requirement.md
├── audit/
│   └── {YYYY-MM-DD}-{시스템}-{scope}-audit.md
├── benchmark/
│   └── {YYYY-MM-DD}-{도메인}-benchmark.md
├── gap/
│   └── {YYYY-MM-DD}-{시스템}-{scope}-gap.md
├── improve/
│   ├── {YYYY-MM-DD}-{시스템}-{scope}-improve.md
│   └── assets/
│       └── {YYYY-MM-DD}-{시스템}-{화면명}-screenshot.png
└── prototype/              ← 프로토타입 생성 스킬이 생성
    └── {시스템}-{scope}.html

출력 디렉토리는 사용자가 지정하거나, 프로젝트 설정에서 정의한다.

출력 템플릿

각 서브커맨드의 출력 템플릿은 references/templates.md 참조.

피드백 루프

프로토타입 공유 후 이해관계자 피드백 처리, 동기화 규칙, 검증 체크리스트는 references/feedback-loop.md 참조.

주의사항

• WebSearch/WebFetch를 통한 글로벌 리서치가 핵심 차별점 — 반드시 실행할 것
• audit 시 코드베이스 분석 없이 기획하지 말 것 (—deep 시 반드시 현행 코드 기반으로 분석)
• 기존 audit/benchmark 문서가 있으면 재사용하여 중복 작업 방지
• 프로토타입 생성은 별도 스킬/도구에 위임할 것 (--prototype 옵션 참조)

연관 스킬

• proto-generator — --prototype 옵션 사용 시 프로토타입 생성을 위임