refactor(topics): 멀티 에이전트용 지식 재편 — _Common(공통 기본기) + Domain_* 구조
에이전트 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>
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,141 @@
|
||||
---
|
||||
id: frontend-image-optimization
|
||||
title: Image Optimization — WebP / AVIF / srcset / lazy
|
||||
category: Coding
|
||||
status: draft
|
||||
source_trust_level: B
|
||||
verification_status: conceptual
|
||||
created_at: 2026-05-09
|
||||
updated_at: 2026-05-09
|
||||
tags: [frontend, image, performance, web, vibe-coding]
|
||||
tech_stack: { language: "TS / React / Next.js", applicable_to: ["Web"] }
|
||||
applied_in: []
|
||||
aliases: [next/image, srcset, sizes, AVIF, lazy load, LCP, blurhash]
|
||||
---
|
||||
|
||||
# Image Optimization
|
||||
|
||||
> 페이지 무게의 60% = 이미지. **WebP/AVIF + responsive (srcset/sizes) + lazy + LCP preload** 4종. Next.js `<Image>` / Cloudinary / imgix / @vercel/og 가 자동 처리.
|
||||
|
||||
## 📖 핵심 개념
|
||||
- LCP (Largest Contentful Paint): 보통 hero image. 빨리 로드 = SEO + UX.
|
||||
- Format: AVIF (최신, 작음) → WebP → JPEG. PNG 는 투명 / 도형.
|
||||
- srcset: 화면 / DPR 별 이미지.
|
||||
- sizes: layout 기반 어떤 크기 선택할지 hint.
|
||||
|
||||
## 💻 코드 패턴
|
||||
|
||||
### Next.js `<Image>`
|
||||
```tsx
|
||||
import Image from 'next/image';
|
||||
|
||||
<Image
|
||||
src="/hero.jpg"
|
||||
alt="hero"
|
||||
width={1200}
|
||||
height={600}
|
||||
priority // LCP — preload
|
||||
placeholder="blur"
|
||||
blurDataURL="data:image/jpeg;base64,..."
|
||||
sizes="(min-width: 1024px) 1200px, 100vw"
|
||||
/>
|
||||
```
|
||||
|
||||
### 일반 HTML
|
||||
```html
|
||||
<picture>
|
||||
<source type="image/avif" srcset="hero-800.avif 800w, hero-1600.avif 1600w" sizes="100vw">
|
||||
<source type="image/webp" srcset="hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw">
|
||||
<img src="hero-800.jpg" srcset="hero-800.jpg 800w, hero-1600.jpg 1600w"
|
||||
sizes="100vw" loading="lazy" decoding="async" width="1600" height="900" alt="hero">
|
||||
</picture>
|
||||
```
|
||||
|
||||
### Cloudinary (URL 기반 변환)
|
||||
```ts
|
||||
const url = `https://res.cloudinary.com/x/image/upload/w_800,f_auto,q_auto/hero.jpg`;
|
||||
// f_auto: 브라우저에 맞는 포맷 자동
|
||||
// q_auto: 압축 자동
|
||||
```
|
||||
|
||||
### Lazy load (native)
|
||||
```html
|
||||
<img loading="lazy" decoding="async" src="..." />
|
||||
<!-- LCP 는 lazy 금지! -->
|
||||
```
|
||||
|
||||
### Blurhash placeholder
|
||||
```tsx
|
||||
import { Blurhash } from 'react-blurhash';
|
||||
|
||||
<div className="relative">
|
||||
{!loaded && <Blurhash hash={item.blurhash} width={400} height={300} />}
|
||||
<img onLoad={() => setLoaded(true)} src={...} />
|
||||
</div>
|
||||
```
|
||||
|
||||
### React Native — FastImage (cache + priority)
|
||||
```tsx
|
||||
import FastImage from 'react-native-fast-image';
|
||||
|
||||
<FastImage
|
||||
source={{ uri, priority: FastImage.priority.high, cache: FastImage.cacheControl.immutable }}
|
||||
style={{ width: 200, height: 200 }}
|
||||
/>
|
||||
```
|
||||
|
||||
### Bitmap subsample (Android)
|
||||
```kotlin
|
||||
val opts = BitmapFactory.Options().apply { inSampleSize = 2 } // 1/2 크기
|
||||
val bmp = BitmapFactory.decodeFile(path, opts)
|
||||
```
|
||||
|
||||
### iOS — UIImage downsampling
|
||||
```swift
|
||||
func downsample(url: URL, to size: CGSize, scale: CGFloat) -> UIImage? {
|
||||
let opts = [kCGImageSourceShouldCache: false] as CFDictionary
|
||||
guard let src = CGImageSourceCreateWithURL(url as CFURL, opts) else { return nil }
|
||||
let pixel = max(size.width, size.height) * scale
|
||||
let dsOpts = [
|
||||
kCGImageSourceCreateThumbnailFromImageAlways: true,
|
||||
kCGImageSourceShouldCacheImmediately: true,
|
||||
kCGImageSourceCreateThumbnailWithTransform: true,
|
||||
kCGImageSourceThumbnailMaxPixelSize: pixel,
|
||||
] as CFDictionary
|
||||
guard let cg = CGImageSourceCreateThumbnailAtIndex(src, 0, dsOpts) else { return nil }
|
||||
return UIImage(cgImage: cg)
|
||||
}
|
||||
```
|
||||
|
||||
### LCP preload
|
||||
```html
|
||||
<link rel="preload" as="image" href="/hero.avif" type="image/avif"
|
||||
imagesrcset="/hero-800.avif 800w, /hero-1600.avif 1600w" imagesizes="100vw">
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준
|
||||
| 상황 | 추천 |
|
||||
|---|---|
|
||||
| Next.js | `<Image>` |
|
||||
| 정적 사이트 | `<picture>` + AVIF/WebP |
|
||||
| 동적 변환 / CDN | Cloudinary / imgix / Imgproxy |
|
||||
| LCP hero | priority + preload + placeholder |
|
||||
| 무한 스크롤 | lazy + blurhash |
|
||||
| 모바일 native | FastImage / Glide / Coil |
|
||||
| 사용자 업로드 | server 에서 resize + format |
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **JPEG only**: WebP/AVIF 가 30~50% 작음.
|
||||
- **원본 표시**: 1080p 4MB → 200kB 압축 가능.
|
||||
- **Width/height 누락**: layout shift.
|
||||
- **Lazy LCP**: 첫 paint 느려짐. priority + preload.
|
||||
- **Fixed sizes 큰 이미지**: srcset 필수.
|
||||
- **Decoding sync**: paint 블록. `decoding="async"`.
|
||||
- **이미지 안에 텍스트**: SEO 안 됨, 번역 안 됨.
|
||||
|
||||
## 🤖 LLM 활용 힌트
|
||||
- AVIF/WebP + srcset + sizes + lazy(LCP 제외) + blur placeholder.
|
||||
- Native = FastImage / Coil / Glide + downsample.
|
||||
|
||||
## 🔗 관련 문서
|
||||
- [[Native_Memory_Profiling]]
|
||||
Reference in New Issue
Block a user