c24165b8bc
에이전트 8종(대화형/프로그래머 C·S/디자이너/설계자/기획자/QA/PD/PM)에게 [공통 기본 능력 + 롤별 Specialty] 2층으로 지식을 주입하기 위한 재분류. 문서 내용·포맷은 무수정, 폴더 이동만 (6,372개 문서 수 보존 확인). - Topic_Programming → Domain_Programming (내부 구조 보존) - Topic_Graphic → Domain_Design - Topic_Business → Domain_Product - Topic_General → Domain_General - _Common 신설: Math(구 Topic_Math_Specialty), Reasoning(구 General/From_Thinking & Reasoning), Reasoning_Creativity(구 General/From_창의성), Communication(Poetic_Blog_Writing + From_writing) - 타 도메인의 From_* 폴더는 유지 (출처 표기일 뿐, 이미 도메인에 맞게 분류된 문서) - 빈 폴더 정리 (memory/procedures) - 에이전트→폴더 매핑은 workspace의 .astra/agent-knowledge-map.json (9개 에이전트) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
3.6 KiB
3.6 KiB
id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack
| id | title | category | status | canonical_id | aliases | duplicate_of | source_trust_level | confidence_score | verification_status | tags | raw_sources | last_reinforced | github_commit | tech_stack | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| wiki-2026-0508-interaction-to-next-paint-inp | Interaction to Next Paint (INP) | 10_Wiki/Topics | verified | self |
|
none | A | 0.95 | applied |
|
2026-05-10 | pending |
|
Interaction to Next Paint (INP)
매 한 줄
"매 user input → 매 next visible paint 의 latency". 2024-03 의 의 의 FID 의 replace. 매 Core Web Vitals member. 매 < 200ms 'good', < 500ms 'needs improvement'.
매 핵심
매 measurement
- 매 매 page session 의 of 의 모든 interaction 의 worst (P98).
- 매 input delay + processing + presentation delay.
매 응용
- SEO (Google ranking).
- UX.
- Form / button responsiveness.
💻 패턴
Measure
import { onINP } from 'web-vitals';
onINP(({ value, rating }) => {
analytics.track('INP', { value, rating }); // 매 rating: 'good' | 'needs-improvement' | 'poor'
});
Optimize: yield to main thread
button.addEventListener('click', async () => {
await scheduler.yield(); // 매 modern API
// 매 매 chunk 의 의 의 yield
for (let i = 0; i < items.length; i++) {
if (i % 100 === 0) await scheduler.yield();
process(items[i]);
}
});
Web Worker (heavy work)
const worker = new Worker('heavy.js');
button.addEventListener('click', () => {
worker.postMessage(data);
});
worker.onmessage = e => updateUI(e.data);
Debounce / throttle
function debounce(fn, ms) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), ms);
};
}
input.addEventListener('input', debounce(handleSearch, 300));
React 18 useDeferredValue
function Search({ query }) {
const deferredQuery = useDeferredValue(query);
const results = expensiveCompute(deferredQuery);
return <Results items={results} />;
}
Long Animation Frames API (debug)
new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (entry.duration > 50) {
console.warn('Long task', entry);
}
}
}).observe({ type: 'long-animation-frame', buffered: true });
Code splitting
const HeavyComponent = lazy(() => import('./HeavyComponent'));
// 매 only loaded on demand
매 결정 기준
| 상황 | Approach |
|---|---|
| Heavy compute | Worker |
| Long task | scheduler.yield |
| Search input | Debounce + useDeferredValue |
| Initial bundle | Code split |
기본값: 매 measure with web-vitals + 매 yield + 매 worker for heavy + 매 < 200ms target.
🔗 Graph
- 부모: Core Web Vitals Optimization (INP, LCP, CLS) · Google-Page-Experience-2025-Update
- 응용: GPU Acceleration (Compositing) · E-commerce-Optimization
- Adjacent: Core Web Vitals Optimization (INP, LCP, CLS)
🤖 LLM 활용
언제: 매 web product. 매 SEO. 언제 X: 매 backend.
❌ 안티패턴
- Synchronous heavy work on main thread: 매 INP 폭발.
- No measurement: 매 invisible.
- setTimeout(0) only: 매 still on main.
🧪 검증 / 중복
- Verified (web.dev, web-vitals.js docs).
- 신뢰도 A.
🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — INP + 매 yield / worker / debounce / React code |