벡터 그래픽: SVG

핵심 개념

아무리 크게 키워도 깨지지 않는 선명한 그림을 그려요. 코드로 그림을 설명하는 방식이라서 아주 가벼워요.

코드 분석

HTML5📋 코드 (4줄)

<svg width='100' height='100'>
  <circle cx='50' cy='50' r='40' stroke='green' stroke-width='4' fill='yellow' />
</svg>
<p>확대해도 깨지지 않는 원입니다.</p>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 SVG 코드의 viewBox, preserveAspectRatio,
접근성(title/desc), 성능 문제를 찾아
인라인·외부파일 모두 대응하게 개선해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

SVG로 만든 아이콘·로고를
네이버·토스·당근에서 어떻게 쓰는지
실전 패턴을 비교해서 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 SVG 파일들의 전체 코드를 분석해서
파일 크기 최적화(SVGO), 중복 path,
접근성을 종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년 디자인 시스템에서
SVG vs 아이콘 폰트 vs PNG 스프라이트가
어떻게 정리되었는지 트렌드를 솔직하게 알려줘.

⭐ 이것만 기억하세요

벡터 그래픽: SVG는 이 3가지만 확실히 잡으세요

1.래스터 이미지(PNG, JPG)는 확대하면 깨지지만, SVG를 모르면 아이콘과 로고를 선명하게 표현할 방법이 없습니다

2.SVG는 XML 기반 벡터라서 크기를 아무리 키워도 선명하고, CSS로 색상·크기를 자유롭게 바꿀 수 있습니다

3.다음 챕터에서 브라우저가 사용자의 실제 위치를 가져오는 Geolocation API를 배웁니다

진행도 15 / 33