🔧변경내용🔨

제목	날짜	내용
발행일	23.03.27

📌들어가기에 앞서

해당 포스트는 문자열과 그래픽에 대해 학습한 내용을 정리하며 기록한 것입니다.

---

그래픽

비트맵(Bitmap)과 벡터(Vector)는 디지털 이미지의 종류

디지털 이미지, 또는 이미지라고 불리는 용어는 디지털 카메라를 이용하여 현실세계의 사물을 촬영하거나 스캐너를 이용하여 사진이나 그림을 디지털 형태로 받아들인 것

서로 상반된 방식으로 이미지를 표현하기 때문에 비트맵(Bitmap)과 벡터(Vector)는 큰 차이가 있다.

---

비트맵

비트맵(Bitmap)은 웹 상에서 디지털 이미지를 저장하는 데에 가장 많이 쓰이는 이미지 파일 포맷 형식

일반적으로는 래스터 그래픽(점 방식)이라고 한다.

이미지의 각 점들을 격자형의 픽셀 단위로 구성

한 지역을 차지하는 셀은 위치에 따라 다른 값을 갖는다.

이런 비트맵은 사각의 픽셀 형태로 모여 있기 때문에 확대를 하면 ‘계단현상’ 또는 ‘깨짐 현상’이 발생

경계가 뚜렷하지 않다는 특징이 있다.

픽셀 단위로 이미지를 표현하는 방식은 컴퓨터에게 부담을 덜 주는 구조로 되어 있다.

픽셀 하나 당 모두 색상 값을 가지고 있다.

따라서 이미지의 사이즈가 커질수록 용량 또한 무거워진다는 특징이 있다.

---

벡터

벡터(Vector)는 비트맵과는 완전히 다른 방식으로 이미지를 표현

비트맵이 격자형의 픽셀 단위로 이미지를 구성한다면 벡터는 이미지를 수학적인 공식으로 표현

점과 점을 연결해 선을 표현하고 선과 선을 연결해 면을 표현하는 식의 수학적 원리로 그림을 그리기 때문에 비트맵과는 달리 아무리 확대를 해도 ‘계단현상’ 또는 ‘깨짐 현상’이 발생하지 않는다.

그러나 그렇기 때문에 벡터 방식으로 이미지를 표현하는 것은 비트맵에 비해 컴퓨터에게 부담을 가하는 방식

주로 도형, 글자 등을 그리는 작업에 사용

수학적인 연산으로 만들어진 이미지이기 때문에 사이즈를 키워도 용량에는 변화가 없다는 특징 또한 있다.

---

비트맵(래스터)과 벡터 이미지의 차이점

[표] 비트맵(래스터) 이미지와 벡터 이미지의 차이점

제목	비트맵(래스터)	벡터
기반 기술	픽셀 기반	수학적으로 계산된 Shape 기반
특징	사진과 같이 색상의 조합이 다양한 이미지에 적합	로고, 일러스트와 같이 제품에 적용되는 이미지에 적합
확대	확대에 적합하지 않음, 보다 큰 사이즈의 이미지가 필요할 때 사용하려는 크기 이상으로 생성하거나 스캔해야 함	품질 저하 없이 모든 크기로 확대 가능하며, 해상도의 영향을 받지 않음
크기(dimension)에 따른 파일 용량(file size)	큰 크기의 이미지는, 큰 파일 사이즈를 가짐	큰 크기의 벡터 그래픽은 작은 파일 사이즈를 유지할 수 있음
상호 변환	이미지의 복잡도에 따라 벡터로 변환하는 것에 오랜 시간이 걸림	쉽게 래스터 이미지로 변환 가능
대표적인 파일 포맷	jpg, gif, png, bmp, psd	svg, ai
웹에서의 사용성	jpg, gif, png 등이 널리 쓰임	svg 포맷은 현대의 브라우저에서 대부분 지원

---

📚 레퍼런스

코드스테이츠 수업자료