Skill Gallery
← スキル一覧に戻る

app-modify-workflow

stravinest / house-hold-account

⭐ 0🍴 0📅 2026年1月19日

앱 수정 워크플로우를 시작합니다. 현황 분석 -> UI/UX 검토 -> 엣지 케이스 확인 -> 사용자 질문 -> 계획 수립 -> 구현 -> 코드 리뷰 반복 순서로 체계적인 앱 수정을 진행합니다. "/app-modify-workflow", "앱 수정 워크플로우", "수정 워크플로우로" 등의 명령으로 활성화됩니다.

read, write, edit, grep, glob, bash, task, todowrite, skill, askuserquestion, enterplanmode, exitplanmode, mcp__mobile-mcp__mobile_take_screenshot, mcp__mobile-mcp__mobile_list_elements_on_screen, mcp__mobile-mcp__mobile_click_on_screen_at_coordinates, mcp__mobile-mcp__mobile_launch_app, mcp__mobile-mcp__mobile_list_available_devices

SKILL.md

---
name: app-modify-workflow
description: 앱 수정 워크플로우를 시작합니다. 현황 분석 -> UI/UX 검토 -> 엣지 케이스 확인 -> 사용자 질문 -> 계획 수립 -> 구현 -> 코드 리뷰 반복 순서로 체계적인 앱 수정을 진행합니다. "/app-modify-workflow", "앱 수정 워크플로우", "수정 워크플로우로" 등의 명령으로 활성화됩니다.
allowed-tools: Read, Write, Edit, Grep, Glob, Bash, Task, TodoWrite, Skill, AskUserQuestion, EnterPlanMode, ExitPlanMode, mcp__mobile-mcp__mobile_take_screenshot, mcp__mobile-mcp__mobile_list_elements_on_screen, mcp__mobile-mcp__mobile_click_on_screen_at_coordinates, mcp__mobile-mcp__mobile_launch_app, mcp__mobile-mcp__mobile_list_available_devices
---

# 앱 수정 워크플로우 (App Modify Workflow)

기존 앱 기능을 수정/개선할 때 사용하는 체계적인 6단계 워크플로우입니다.
새 기능 개발이 아닌 **기존 기능의 변경, 버그 수정, UI/UX 개선**에 특화되어 있습니다.

## 활성화 방법

다음 명령어로 워크플로우를 시작합니다:

- `앱 수정 워크플로우` 또는 `수정 워크플로우로 진행해줘`
- `/app-modify-workflow`
- `앱 수정으로 [요청 내용]`

### 예시

```
사용자: 앱 수정 워크플로우로 결제수단 관리 화면을 개선해줘
사용자: /app-modify-workflow 카테고리 선택 UI 수정
사용자: 수정 워크플로우로 거래 입력 폼의 UX 개선해줘
```

---

## 워크플로우 개요

```
[요청 접수]
    |
    v
[Phase 1: 현황 분석] ─────────────────────────────────
    |  - 수정 대상 코드 분석
    |  - UI/UX 현황 파악
    |  - 엣지 케이스 식별
    v
[Phase 2: 요구사항 명확화] ───────────────────────────
    |  - AskUserQuestion으로 질문
    |  - 답변 기반 요구사항 정리
    v
[Phase 3: 계획 수립] ─────────────────────────────────
    |  - plan 모드로 상세 계획 작성
    |  - 사용자 승인
    v
[Phase 4: 구현] ──────────────────────────────────────
    |  - modify-todo.md 생성 및 실행
    |  - Agent 분담 작업
    v
[Phase 5: 코드 리뷰 및 반복] ─────────────────────────
    |  - code-reviewer 실행
    +──[결함 발견]──> [modify-todo.md 업데이트] ──> [Phase 4]
    |
    v
[Phase 6: 완료] ──────────────────────────────────────
    - 테스트 검증
    - 결과 보고
    - 아카이브
```

---

## Phase 1: 현황 분석

### 1.1 수정 대상 코드 분석

수정 대상 기능과 관련된 코드를 심층 분석합니다.

```
Task(
  subagent_type: "feature-dev:code-explorer",
  prompt: "[수정 대상 기능]의 현재 구현을 분석해주세요.
  - 관련 파일 목록
  - 실행 경로 추적
  - 의존성 맵핑
  - 현재 아키텍처 패턴"
)
```

### 1.2 UI/UX 현황 파악

현재 UI/UX 상태를 분석하고 개선점을 식별합니다.

#### 분석 항목

| 항목 | 확인 사항 |
|------|----------|
| 레이아웃 | 요소 배치, 간격, 정렬 |
| 색상 | 일관성, 접근성, 다크모드 지원 |
| 폰트 | 크기, 가독성, 계층 구조 |
| 인터랙션 | 터치 영역, 피드백, 애니메이션 |
| 상태 표시 | 로딩, 에러, 빈 상태 처리 |
| 반응성 | 다양한 화면 크기 대응 |

#### 스크린샷 분석 (선택사항)

```
# 현재 화면 캡처
mcp__mobile-mcp__mobile_take_screenshot

# UI 요소 분석
mcp__mobile-mcp__mobile_list_elements_on_screen
```

### 1.3 엣지 케이스 식별

수정 시 고려해야 할 엣지 케이스를 식별합니다.

#### 공통 엣지 케이스 체크리스트

| 카테고리 | 엣지 케이스 |
|----------|-----------|
| 데이터 | 빈 데이터, 대량 데이터, 특수 문자, 긴 텍스트 |
| 네트워크 | 오프라인, 느린 연결, 타임아웃 |
| 사용자 입력 | 유효하지 않은 입력, 빠른 연속 클릭, 동시 요청 |
| 권한 | 권한 없음, 읽기 전용, 만료된 세션 |
| 디바이스 | 작은 화면, 큰 화면, 접근성 설정 |
| 상태 | 초기 상태, 중간 상태, 에러 복구 |

### 1.4 분석 결과 저장

분석 결과를 파일로 저장합니다.

```markdown
# 현황 분석 결과

## 수정 대상: [기능명]

### 관련 파일
- lib/features/[feature]/presentation/pages/xxx_page.dart
- lib/features/[feature]/presentation/widgets/xxx_widget.dart
- ...

### 현재 UI/UX 상태
- 강점: ...
- 개선점: ...

### 식별된 엣지 케이스
1. [엣지 케이스 1]
2. [엣지 케이스 2]
3. ...

### 의존성
- Provider: ...
- Repository: ...
```

저장 위치: `.workflow/context/analysis-result.md`

---

## Phase 2: 요구사항 명확화

### 2.1 사용자 질문

분석 결과를 바탕으로 사용자에게 구체적인 질문을 합니다.

```
AskUserQuestion(
  questions: [
    {
      "question": "UI 개선 방향을 선택해주세요",
      "header": "UI 방향",
      "options": [
        {"label": "레이아웃 재구성", "description": "요소 배치와 구조를 변경"},
        {"label": "스타일 개선", "description": "색상, 폰트, 간격 조정"},
        {"label": "인터랙션 개선", "description": "애니메이션, 피드백 추가"},
        {"label": "전면 리디자인", "description": "전체적으로 새롭게 설계"}
      ],
      "multiSelect": false
    },
    {
      "question": "우선 처리할 엣지 케이스를 선택해주세요",
      "header": "엣지 케이스",
      "options": [
        {"label": "데이터 관련", "description": "빈 데이터, 대량 데이터 처리"},
        {"label": "에러 처리", "description": "네트워크 오류, 타임아웃"},
        {"label": "입력 검증", "description": "유효하지 않은 입력 처리"},
        {"label": "모든 케이스", "description": "전부 처리"}
      ],
      "multiSelect": true
    }
  ]
)
```

### 2.2 질문 카테고리

| 카테고리 | 질문 예시 |
|----------|----------|
| 범위 | 어떤 부분까지 수정할까요? (특정 컴포넌트 / 전체 화면) |
| 우선순위 | 가장 중요한 개선 사항은 무엇인가요? |
| 제약사항 | 유지해야 할 기존 동작이 있나요? |
| 호환성 | 이전 버전과의 호환성이 필요한가요? |
| 테스트 | 어떤 시나리오를 반드시 테스트해야 하나요? |

### 2.3 요구사항 정리

사용자 답변을 바탕으로 요구사항을 정리합니다.

```markdown
# 수정 요구사항

## 기능: [기능명]

### 사용자 요청 요약
- [핵심 요청 내용]

### UI/UX 요구사항
- [ ] [UI 요구사항 1]
- [ ] [UI 요구사항 2]

### 기능 요구사항
- [ ] [기능 요구사항 1]
- [ ] [기능 요구사항 2]

### 엣지 케이스 처리
- [ ] [엣지 케이스 1]
- [ ] [엣지 케이스 2]

### 제약사항
- [유지해야 할 동작]
- [호환성 요구사항]
```

저장 위치: `.workflow/modify-requirements.md`

---

## Phase 3: 계획 수립

### 3.1 Plan 모드 진입

요구사항을 바탕으로 상세 구현 계획을 수립합니다.

```
EnterPlanMode()
```

### 3.2 계획 작성 가이드

Plan 모드에서 다음 내용을 포함하여 계획을 작성합니다:

```markdown
# 수정 계획: [기능명]

## 변경 범위

### 수정할 파일
| 파일 | 변경 유형 | 변경 내용 |
|------|----------|----------|
| xxx_page.dart | 수정 | 레이아웃 구조 변경 |
| xxx_widget.dart | 신규 | 새 위젯 추가 |
| xxx_provider.dart | 수정 | 상태 로직 개선 |

### 영향받는 영역
- 직접 영향: [영향받는 기능 1], [영향받는 기능 2]
- 간접 영향: [관련 기능]

## 구현 단계

### 1단계: [제목]
- 작업 내용
- 예상 변경 사항

### 2단계: [제목]
- 작업 내용
- 예상 변경 사항

## 테스트 계획

### 단위 테스트
- [ ] [테스트 케이스 1]
- [ ] [테스트 케이스 2]

### 통합 테스트
- [ ] [시나리오 1]
- [ ] [시나리오 2]

### 엣지 케이스 테스트
- [ ] [엣지 케이스 1]
- [ ] [엣지 케이스 2]

## 리스크 및 대응

| 리스크 | 대응 방안 |
|--------|----------|
| [리스크 1] | [대응 1] |
| [리스크 2] | [대응 2] |
```

### 3.3 사용자 승인

계획 완료 후 승인을 요청합니다.

```
ExitPlanMode()
```

---

## Phase 4: 구현

### 4.1 modify-todo.md 생성

```markdown
# Modify Todo: [작업명]

## 메타 정보
- 생성일: YYYY-MM-DD HH:MM
- 현재 Phase: 4 (구현)
- 상태: 진행중
- 리뷰 반복 횟수: 0

## 관련 문서
- 분석 결과: .workflow/context/analysis-result.md
- 요구사항: .workflow/modify-requirements.md

---

## 작업 목록

### 1. 준비 단계
| 번호 | 작업 | 담당 Agent | 상태 | 결과 |
|------|------|-----------|------|------|
| 1.1 | 기존 코드 백업 확인 | - | 대기 | - |
| 1.2 | 의존성 확인 | Explore | 대기 | - |

### 2. 구현 단계
| 번호 | 작업 | 담당 Agent | 상태 | 결과 |
|------|------|-----------|------|------|
| 2.1 | [수정 작업 1] | tdd-developer | 대기 | - |
| 2.2 | [수정 작업 2] | general-purpose | 대기 | - |
| 2.3 | [UI 수정] | general-purpose | 대기 | - |

### 3. 엣지 케이스 처리
| 번호 | 작업 | 담당 Agent | 상태 | 결과 |
|------|------|-----------|------|------|
| 3.1 | [엣지 케이스 1] | tdd-developer | 대기 | - |
| 3.2 | [엣지 케이스 2] | tdd-developer | 대기 | - |

### 4. 검증 단계
| 번호 | 작업 | 담당 Agent | 상태 | 결과 |
|------|------|-----------|------|------|
| 4.1 | 코드 리뷰 | code-reviewer | 대기 | - |
| 4.2 | 테스트 작성 | test-writer | 대기 | - |

---

## 리뷰 피드백 히스토리

---

## 변경 로그
- YYYY-MM-DD HH:MM: 초기 생성
```

저장 위치: `.workflow/modify-todo.md`

### 4.2 Agent 할당 테이블

| 작업 유형 | 담당 Agent | 설명 |
|----------|-----------|------|
| 코드 분석 | `Explore` | 기존 코드 구조 파악 |
| 로직 수정 | `tdd-developer` | 테스트 우선 개발로 안전한 수정 |
| UI 수정 | `general-purpose` | 위젯, 레이아웃 변경 |
| 테스트 | `test-writer` | 테스트 코드 작성 |
| 리뷰 | `feature-dev:code-reviewer` | 코드 품질 검토 |

### 4.3 실행 규칙

1. **순차 실행**: 의존성 있는 작업은 순차 실행
2. **병렬 실행**: 독립적인 UI 작업은 병렬 가능
3. **상태 업데이트**: 작업 완료 시 즉시 modify-todo.md 업데이트
4. **결과 기록**: 변경된 파일과 주요 내용 기록

---

## Phase 5: 코드 리뷰 및 반복

### 5.1 리뷰 실행

```
Task(
  subagent_type: "feature-dev:code-reviewer",
  prompt: "수정된 코드를 리뷰해주세요.

  확인 항목:
  1. 버그: 로직 오류, 예외 처리 누락
  2. 보안: 취약점, 데이터 노출
  3. 성능: 불필요한 렌더링, 메모리 누수
  4. 품질: 코드 스타일, 가독성
  5. 호환성: 기존 기능 영향

  변경된 파일: [파일 목록]"
)
```

### 5.2 리뷰 결과 처리

#### 결함 발견 시

1. modify-todo.md의 "리뷰 피드백 히스토리" 섹션에 피드백 추가
2. 해당 작업의 상태를 `재작업`으로 변경
3. "리뷰 반복 횟수" 증가
4. 담당 Agent에게 재할당하여 Phase 4 재실행

```markdown
## 리뷰 피드백 히스토리

### 1차 리뷰 (YYYY-MM-DD)
- [x] xxx_page.dart: dispose에서 리소스 해제 누락 -> 재작업 완료
- [x] xxx_widget.dart: 에러 상태 UI 미구현 -> 재작업 완료
```

#### 결함 없음

1. 모든 작업 상태를 `완료`로 변경
2. Phase 6으로 진행

### 5.3 반복 제한

- **최대 3회**까지 리뷰 반복
- 초과 시 사용자에게 확인 요청

```
3회 이상 리뷰가 반복되었습니다.
현재 남은 이슈:
- [이슈 1]
- [이슈 2]

계속 진행하시겠습니까? (Y/n)
```

---

## Phase 6: 완료

### 6.1 테스트 검증

```bash
# 단위 테스트
flutter test test/features/[feature]/

# 전체 분석
flutter analyze

# 빌드 검증
flutter build apk --debug
```

### 6.2 앱 테스트 (선택사항)

```
# 앱 실행 및 수정 사항 확인
mcp__mobile-mcp__mobile_launch_app
mcp__mobile-mcp__mobile_take_screenshot
```

### 6.3 결과 보고

```markdown
## 앱 수정 워크플로우 완료

### 작업 요약
- 수정 대상: [기능명]
- 총 작업 수: [N]개
- 리뷰 반복: [N]회

### 변경된 파일
| 파일 | 변경 유형 | 주요 변경 내용 |
|------|----------|--------------|
| xxx_page.dart | 수정 | 레이아웃 개선 |
| xxx_widget.dart | 신규 | 에러 상태 위젯 추가 |

### 해결된 엣지 케이스
- [x] [엣지 케이스 1]
- [x] [엣지 케이스 2]

### 테스트 결과
- 단위 테스트: 통과 (N/N tests)
- 분석: 통과 (0 issues)
- 빌드: 성공

### 다음 단계
- [ ] 실제 디바이스 테스트
- [ ] PR 생성
- [ ] QA 검토
```

### 6.4 아카이브

```bash
mkdir -p .workflow/archived
mv .workflow/modify-todo.md .workflow/archived/YYYY-MM-DD_[작업명]_modify.md
```

---

## 체크포인트 시스템

### 파일 구조

```
.workflow/
├── modify-todo.md           # 작업 목록 + 상태 추적
├── modify-requirements.md   # 요구사항 정의
├── checkpoint.md            # 현재 체크포인트
├── context/
│   ├── analysis-result.md   # Phase 1 분석 결과
│   ├── questions-result.md  # Phase 2 질문 결과
│   └── plan-result.md       # Phase 3 계획
├── results/
│   └── task-X.X.md          # Agent 작업 결과
└── archived/
```

### checkpoint.md 형식

```markdown
# Modify Workflow Checkpoint

## 현재 상태
- 작업명: [작업명]
- 현재 Phase: [1-6]
- 현재 작업: [작업 번호]
- 마지막 업데이트: YYYY-MM-DD HH:MM

## 다음 단계
- 다음 Phase: [Phase 번호]
- 다음 작업: [작업 설명]
- 담당 Agent: [Agent 타입]

## 재개 명령어
앱 수정 워크플로우 재개

## 컨텍스트 파일 참조
- modify-todo.md: .workflow/modify-todo.md
- 분석 결과: .workflow/context/analysis-result.md
```

### 워크플로우 재개

```
앱 수정 워크플로우 재개
/app-modify-workflow resume
```

---

## 주의사항

1. **기존 기능 보존**: 수정 시 기존 동작이 깨지지 않도록 주의
2. **테스트 필수**: 수정 전후 테스트로 회귀 방지
3. **에러 처리 원칙 준수**: CLAUDE.md의 에러 처리 원칙 (rethrow 등)
4. **단일 modify-todo.md**: 동시에 하나의 수정 작업만 진행
5. **리뷰 반복 제한**: 최대 3회 (초과 시 사용자 확인)
6. **사용자 확인**: Phase 2, 3에서 반드시 사용자 승인 필요
7. **엣지 케이스 처리**: 식별된 엣지 케이스는 반드시 처리

---

## 전체 흐름 예시

### 사용자 요청

```
사용자: 앱 수정 워크플로우로 결제수단 관리 화면의 UX를 개선해줘
```

### 실행 과정

```
[Phase 1] 현황 분석
   -> 코드 분석: PaymentMethodManagementPage, 관련 위젯 분석
   -> UI/UX 파악: 현재 레이아웃, 인터랙션 분석
   -> 엣지 케이스: 빈 목록, 긴 이름, 삭제 확인 등 식별

[Phase 2] 요구사항 명확화
   -> 질문: "UI 개선 방향은?", "우선 엣지 케이스는?"
   -> 사용자 답변: "레이아웃 재구성", "에러 처리 우선"
   -> 요구사항 정리: modify-requirements.md 생성

[Phase 3] 계획 수립
   -> EnterPlanMode 진입
   -> 상세 계획 작성 (파일별 변경 사항, 단계별 작업)
   -> ExitPlanMode로 사용자 승인

[Phase 4] 구현
   -> modify-todo.md 생성: 8개 작업 정의
   -> 1.1 Explore -> 완료: "의존성 확인"
   -> 2.1 tdd-developer -> 완료: "리스트 구조 변경"
   -> 2.2 general-purpose -> 완료: "UI 개선"
   -> 3.1 tdd-developer -> 완료: "빈 상태 처리"

[Phase 5] 코드 리뷰 반복
   -> 1차 리뷰: "에러 메시지 개선 필요"
   -> 재작업: 에러 UI 수정
   -> 2차 리뷰: 통과

[Phase 6] 완료
   -> flutter test: 통과
   -> flutter analyze: 통과
   -> 결과 보고
   -> modify-todo.md 아카이브
```