이것은 대규모 프로젝트 진행시 매우 중요한 해결해야할 과제입니다.

2개월간 대규모 프로젝트를 진행한 현재 직면하고 있는 문제

클로드 데스크톱(Claude Desktop)에서 shrimp task manager MCP와 filesystem MCP를 사용하여 코딩 중이시고, C:/aiforu/frontend/index.html 파일이 aiforu.kr의 프론트 페이지로 호출되는 상황에서, index.html 파일 크기가 160KB를 초과할 경우 클로드 데스크톱이 불필요한 토큰을 소비하며 프로젝트의 핵심에서 벗어난 코딩을 한다는 문제로 이해했습니다.

문제의 원인 분석:

이러한 현상은 AI 코드 생성 도구, 특히 대규모 언어 모델(LLM) 기반 도구에서 흔히 발생할 수 있는 문제입니다. 몇 가지 가능한 원인과 해결 방안을 제시해 드리겠습니다.

1. 컨텍스트 윈도우 한계 및 정보 과부하:
   • AI 모델은 제한된 ‘컨텍스트 윈도우’ 내에서만 정보를 처리할 수 있습니다. 160KB에 달하는 HTML 파일은 코드량이 상당하며, 이 모든 내용을 AI의 컨텍스트 윈도우에 한 번에 담기 어렵거나, 담더라도 다른 중요한 정보(예: 프로젝트 목표, 이전 대화 내용, 특정 요구사항)를 밀어내어 ‘노이즈’로 작용할 수 있습니다.
   • AI는 제공된 모든 텍스트를 분석하여 다음 토큰을 예측하므로, 파일 크기가 커질수록 관련 없는 정보나 불필요한 세부 사항에 집중하여 엉뚱한 코드를 생성할 가능성이 높아집니다.
2. ‘촛점’ 유지의 어려움 (Goal Drift):
   • AI는 명확하고 구체적인 지시가 없으면 ‘주제 이탈’ (Goal Drift) 현상을 겪기 쉽습니다. 특히 파일이 크면 “이 파일을 수정해줘”라는 단순한 요청만으로는 AI가 어떤 부분을 수정해야 하는지, 어떤 목표에 집중해야 하는지 명확히 파악하기 어렵습니다.
   • shrimp task manager MCP와 filesystem MCP라는 특정 프레임워크나 구조에 대한 이해가 부족하거나, 해당 MCP들이 index.html의 특정 부분과 어떻게 연관되는지 AI가 충분히 인지하지 못할 경우, AI는 일반적인 웹 개발 패턴이나 임의의 수정 사항을 제안할 수 있습니다.
3. 토큰 소비 효율성 문제:
   • AI 모델은 입력된 모든 토큰에 대해 비용을 지불하고 처리합니다. 파일 크기가 커지면 더 많은 토큰이 소비되므로, 불필요한 코드를 생성하는 경우 토큰 낭비가 심해집니다.
   • AI가 파일을 전체적으로 이해하려다가 필요한 부분만 처리하는 대신 불필요한 부분까지 분석하고 코드를 생성하려 할 수 있습니다.
4. HTML 파일의 구조적 복잡성:
   • 160KB HTML 파일은 단순히 마크업만 있는 것이 아니라, 인라인 JavaScript, CSS, 복잡한 DOM 구조 등을 포함할 수 있습니다. 이러한 복잡성은 AI가 파일의 전체적인 의도를 파악하고 특정 목적에 맞게 수정하는 것을 더욱 어렵게 만듭니다.

해결책 : 2주를 헛고생하고 알아낸 해결책

• 코드 분리 및 모듈화 (Best Practice): 이 부분은 PRD.md에 넣어서 시스템적으로 해결하도록 해주세요.
  • HTML, CSS, JavaScript 분리: index.html 파일 안에 모든 JavaScript와 CSS가 인라인으로 포함되어 있다면, 이를 별도의 .js 파일과 .css 파일로 분리하세요.
    • index.html (마크업만)
    • style.css (스타일)
    • script.js (스크립트)
  • 이렇게 분리하면 index.html의 크기가 줄어들 뿐만 아니라, AI에게 특정 스크립트 파일이나 스타일 파일에 대한 수정 요청을 할 때도 훨씬 명확한 컨텍스트를 제공할 수 있습니다.
  • 컴포넌트 기반 개발: 만약 가능하다면, shrimp task manager MCP와 filesystem MCP가 지원하는 컴포넌트 기반 프레임워크(예: Vue.js, React, Svelte 등)를 사용하여 UI를 작은 재사용 가능한 컴

PRD.md에 아래와 같이 추가해주세요.

### 🎨 프론트엔드 모듈화 아키텍처 원칙
```
#### 페이지별 분리 전략의 핵심 장점
**AI for you(AI for U) 프론트엔드 진화 전략**

**🎯 모듈성 (Modularity)**
- 각 기능이 독립적인 파일로 완전 분리
- 단일 책임 원칙(SRP) 적용으로 기능별 명확한 경계
- 독립적 테스트 및 디버깅 가능

**⚡ 효율성 (Efficiency)**
- 특정 기능 수정 시 해당 파일만 작업
- 토큰 사용량 최적화로 개발 비용 절감
- 부분 수정으로 전체 파일 처리 불필요

**🚀 성능 (Performance)**
- 페이지별 필요한 리소스만 로딩
- 초기 로딩 속도 개선 및 메모리 사용량 최적화
- 지연 로딩(Lazy Loading) 적용 가능

**📈 확장성 (Scalability)**
- 새 기능 추가 시 기존 코드 영향 최소화
- 팀 협업 시 파일 충돌 방지
- 기능별 독립적 배포 가능

#### 🎨 모듈화 우선 원칙
✅ 하나의 파일 = 하나의 주요 기능
✅ 공통 코드는 별도 파일로 분리
✅ 재사용 가능한 컴포넌트 중심 설계
❌ 거대한 단일 파일에 모든 기능 집약

#### 🗂️ 디렉토리 구조 원칙 : 이 부분은 각자의 프로젝트에 따라 변경됩니다. 
프로젝트/
├── index.html (메인 랜딩)
├── pages/
│   ├── goal-setting.html
│   ├── goal-achievement.html
│   ├── prd-system-demo.html
│   └── workflow-demo.html
├── shared/
│   ├── styles.css
│   ├── common.js
│   └── api-client.js
└── assets/
├── images/
└── fonts/

#### ⚡ 성능 최적화 원칙
✅ 페이지별 필요한 리소스만 로딩
✅ 공통 컴포넌트 캐싱 활용
✅ 지연 로딩 적용
✅ GPU 가속 애니메이션 활용
❌ 사용하지 않는 리소스 로딩 금지

#### 🔄 개발 효율성 원칙
✅ 기능별 독립 개발 가능
✅ 부분 수정 시 해당 파일만 작업
✅ 토큰 사용량 최적화
✅ 모듈 간 명확한 인터페이스 정의
❌ 전체 파일 재작업 방식 금지

#### **💡 핵심 프론트엔드 파일 분리 원칙**
클라이언트(AI)의 효율적인 컨텍스트 처리 및 개발 생산성 극대화를 위해, 프론트엔드 파일은 다음 원칙에 따라 철저히 분리하고 모듈화한다.

**1. HTML, CSS, JavaScript의 엄격한 분리:**
* **`index.html` (마크업 전용):** HTML 구조와 콘텐츠 마크업에만 집중하며, `<style>` 태그 내 인라인 CSS와 `<script>` 태그 내 인라인 JavaScript 사용을 **최소화하거나 금지**한다. 외부 `style.css` 및 `script.js` 파일을 `<link>` 및 `<script src="...">` 태그를 사용하여 참조한다.
* **`style.css` (스타일 전용):** 모든 CSS 규칙을 별도 파일로 분리하여 관리한다. 재사용 가능한 컴포넌트 스타일 및 글로벌 스타일을 포함한다.
* **`script.js` (스크립트 전용):** 모든 동적인 상호작용, 비즈니스 로직, 데이터 처리 스크립트를 별도 파일로 분리한다. 필요한 경우 웹 컴포넌트 또는 프레임워크 기반 컴포넌트로 세분화한다.

**2. 컴포넌트 기반 개발 적극 활용:**
* `shrimp task manager MCP`와 `filesystem MCP`의 UI 요소가 재사용 가능한 컴포넌트 형태로 설계 및 구현되도록 권장한다.
* Vue.js, React, Svelte 등 컴포넌트 기반 프레임워크를 활용하여 UI를 더욱 작고 독립적인 단위로 분리한다. 각 컴포넌트는 단일 책임을 가지며, 특정 기능 또는 UI 블록만을 담당하도록 하여 AI가 개별 컴포넌트 파일에 대한 수정 요청 시 효율적으로 작업할 수 있도록 한다.

**3. 목표:** 파일 분리를 통해 `index.html` 및 기타 핵심 프론트엔드 파일의 크기를 최적화하고, AI(클로드 데스크톱)가 불필요한 컨텍스트 과부하 없이 특정 코드 영역에 집중하여 효율적으로 코드를 생성하고 수정할 수 있는 환경을 조성한다.

• 명확하고 구체적인 지시 (Prompt Engineering):
  • 작은 단위로 분할하여 작업 지시: 160KB 파일을 한 번에 처리하려 하지 말고, “이 HTML 파일에서 div id='main-content' 내부의 특정 기능만 추가해줘”와 같이 매우 구체적인 범위를 지정하세요.
  • 목표를 명확히 제시: “Shrimp Task Manager의 최신 상태를 이 div에 반영하는 코드를 추가해줘”와 같이 궁극적인 목표와 연관 지어 설명합니다.
  • 불필요한 부분은 제거하거나 주석 처리 후 요청: AI에게 작업 요청 시 해당 파일에서 당장 관련 없는 부분은 임시로 제거하거나 주석 처리하여 컨텍스트 노이즈를 줄이는 것도 방법입니다.
  • 수정할 부분만 발췌하여 제공: 가장 좋은 방법은 AI에게 HTML 파일 전체를 넘겨주지 않고, 수정하고자 하는 특정 섹션(예: <div id="task-list">...</div>와 같이)만 잘라서 제공하고, 해당 섹션에 대한 작업 지시를 내리는 것입니다. 작업 완료 후 생성된 코드를 원본 파일에 수동으로 붙여넣습니다.

1. 수정할 부분을 대충 클릭한후 검사를 선택합니다.
2. Elements를 움직이며 수정을 원하는정확한 위치를 찾아낸후 [Copy element]를 한후 이것을 AI에게 알려주고 어떻게 수정해주세요.
   그러면 AI는 div 의 id나 class를 가지고 관련 파일들을 찾아내고 정확히 프로그래며가 원하는대로 수정할 수 있게 됩니다.

<div class="goal-detection-alert" id="goalDetectionAlert" style="display: block;">
            <div class="goal-alert-header">
                <span style="font-size: 24px;">🎯</span>
                <div>
                    <div class="goal-alert-title">목표가 감지되었습니다!</div>
                    <div class="goal-alert-subtitle">Educational Goal Achievement (학업 목표) - 신뢰도: 95%</div>
                </div>
            </div>
            
            <div class="workflow-progress">
                <div class="workflow-header" id="workflowHeader">
                    🧠 AI for U 분석 시작! (PARSLEVDCUQGPIR 워크플로우 적용)
                </div>
                <div class="workflow-steps" id="workflowSteps">
                <div class="workflow-step">
                    <div class="step-icon step-completed">
                        ✓
                    </div>
                    <div class="step-content">
                        <div class="step-name">Plan - 계획작업</div>
                        <div class="step-desc">작업을 계획하거나 복잡한 기능을 구축할 때 사용</div>
                        <div class="step-result">✅ 완료: 목표 분석 및 계획 수립 완료</div>
                        
                    </div>
                </div>
            
                <div class="workflow-step">
                    <div class="step-icon step-running">
                        A
                    </div>
                    <div class="step-content">
                        <div class="step-name">Analyze - 분석작업</div>
                        <div class="step-desc">작업 요구사항을 심층적으로 분석하고 기술적 실행 가능성 평가</div>
                        
                        <div class="step-result">🔄 진행중: 상세 분석 및 전략 수립 중...</div>
                    </div>
                </div>
            
                <div class="workflow-step">
                    <div class="step-icon step-pending">
                        S
                    </div>
                    <div class="step-content">
                        <div class="step-name">Split - 분할작업</div>
                        <div class="step-desc">복잡한 작업을 독립적인 하위 작업으로 분할하고 종속성과 우선순위 설정</div>
                        
                        
                    </div>
                </div>
            
                <div class="workflow-step">
                    <div class="step-icon step-pending">
                        L
                    </div>
                    <div class="step-content">
                        <div class="step-name">List - 목록작업</div>
                        <div class="step-desc">전체 상태 추적, 우선순위 및 종속성을 포함한 구조화된 작업 목록 생성</div>
                        
                        
                    </div>
                </div>
            
                <div class="workflow-step">
                    <div class="step-icon step-pending">
                        E
                    </div>
                    <div class="step-content">
                        <div class="step-name">Execute - 실행작업</div>
                        <div class="step-desc">특정 작업에 대한 지침서를 가져와서 단계별 실행 지침 제공</div>
                        
                        
                    </div>
                </div>
            
                <div class="workflow-step">
                    <div class="step-icon step-pending">
                        V
                    </div>
                    <div class="step-content">
                        <div class="step-name">Verify - 확인작업</div>
                        <div class="step-desc">검증 기준에 따라 종합적으로 확인하고 점수를 매겨 품질 보증</div>
                        
                        
                    </div>
                </div>
            
                <div class="workflow-step">
                    <div class="step-icon step-pending">
                        P2
                    </div>
                    <div class="step-content">
                        <div class="step-name">Process - 프로세스생각</div>
                        <div class="step-desc">유연하고 진화 가능한 사고 과정을 수행하여 효과적 해결책 도출</div>
                        
                        
                    </div>
                </div>
            </div>
            </div>
        </div>

요약하자면, 핵심은 AI에게 너무 많은 정보를 한 번에 주지 않고, 작업의 범위를 최대한 좁혀서 명확한 목표를 제시하는 것입니다. index.html 파일이 비대해지는 것은 근본적으로 웹 개발 모범 사례(HTML, CSS, JS 분리)에서 벗어난 것일 수 있으므로, 파일 분리를 우선적으로 고려해 보시는 것을 강력히 추천합니다.