1. 벡터 그래픽 (Vector Graphic) 이란?
ㅇ 선과 모양을 수학적 계산에 의해 화면상에 표현하는 기술
- 수학적 계산을 통해, 점,선,도형 등 기하학적 도형을 화면에 표현하는 그래픽 기술
- 주로, 크기 조절(확대/축소)에 따른 화질 손실 없이 선명한 이미지를 유지할 수 있는 장점 있음
- 대표적으로, 일러스트레이션, 로고 디자인, 아이콘 제작 등에 많이 사용됨
- 특히, 애니메이션, 인터랙티브 기능, 반응형 디자인 등에 활용 적합
2. 벡터 그래픽의 특징
ㅇ (기하학적 구성)
- 대상 이미지를 점, 선, 곡선, 다각형 등으로 표현하며,
. 이들의 위치,방향,길이 등은 수학적 계산식(벡터 값)으로 표현됨
ㅇ (확장성)
- 이미지의 확대 또는 축소 시에도 이미지 왜곡 없이 품질 유지가 가능
ㅇ (파일 용량 효율성)
- 복잡한 이미지가 아닌 이상, 같은 정보를 더 적은 데이터로 표현 가능해 상대적으로 용량 작음
ㅇ (편집 용이성)
- 구성 요소(도형,색상 등)를 개별적으로 쉽게 수정 가능하여 작업에 효율적
ㅇ 한편, 이와는 달리, 픽셀 단위로 구성되는 Raster Graphic (비트맵 기반) 기술은,
- 더이상 쪼갤 수 없는 최소 단위인 픽셀 각각에 대한 지정 및 색상 정보를 가지고,
- 그래픽 이미지를 표현하는 기술임 (BMP,JPG,GIF 등)
3. 벡터 그래픽 (Vector Graphic) 및 래스터 그래픽 (Raster Graphic) 비교
※ [범례 : ① 벡터 그래픽, ② 래스터 그래픽]
ㅇ (구성 단위) : ① 점,선,도형 등 수학적 표현, ② 픽셀
ㅇ (해상도 의존성) : ① 해상도 독립적, ② 해상도에 따라 품질 변화
ㅇ (대표 포맷) : ① SVG, AI, EPS 등, ② JPG, PNG, BMP, GIF 등
ㅇ (주요 용도) : ① 로고, 아이콘, 일러스트 등, ② 사진, 복잡한 이미지 등
ㅇ (편집 방식) : ① 요소별 독립적 편집, ② 픽셀 단위 편집
4. 대표적인 벡터 그래픽 기술 및 툴
ㅇ 2D 벡터 그래픽
- SVG (Scalable Vector Graphic)
. W3C에서 제정한 XML 기반의 벡터 그래픽 포맷 표준
.. 2D 벡터 그래픽을 XML으로 표현하는 일종의 마크업 언어
. 웹 호환성 우수
.. 자바스크립트와 DOM을 사용하여 그래픽을 동적으로 생성,조작 가능
.. 벡터 그래픽 중 웹 표준에 가장 적합한 포맷이며, 크로스 브라우징이 가능한 장점이 있음
. 픽셀에 의존함 없이,
.. 점,선,곡선,도형 등을 명령어로 그리는 방식
- Adobe社의 일러스트레이터(Illustrator)
. Adobe社의 대표적인 벡터 그래픽 디자인 툴
. 다양한 포맷 지원 및 고급 디자인 기능 제공
- Flash (과거 사용)
. Adobe(구 Macromedia)社 제품으로 벡터 기반 애니메이션 플랫폼
. HTML5의 부상으로 현재는 거의 사용되지 않음
ㅇ 3D 벡터 그래픽
- 3ds Max
. Autodesk社의 3D 모델링 및 애니메이션 소프트웨어
. 벡터 기반 도형을 활용한 3차원 객체 구성 및 렌더링
5. [참고사항] 웹 브라우저에서 벡터 이미지 사용 방법 例)
ㅇ HTML 방식 : img 요소 사용
- 例) <img src="path/vector.svg" width="500" height="500">
ㅇ CSS 방식 : background 속성 사용
- 例) .vector { background:url(path/vector.svg); }
ㅇ SVG 코드 직접 삽입
- 例) <svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>