래스터 이미지와 비트맵 그리고 벡터 이미지

안녕하세요🐶

 

이번 시간에는 래스터 이미지와 비트맵, 그리고 벡터 이미지에 대해 간단하게 알아보려고 합니다.

 

저는 개발자이기 때문에 원리와 장단점 위주로 이해하고,  

XCode 에서는 무엇을 사용하는게 나을지 판단하기 위해서 공부했어요.

 

글에서 주제와 관련된 키워드가 나오니 자세한 내용은 따로 검색을 해보시는 것도 좋을 것 같습니다.

 

그럼 시작할게요!!🔥

---

 

3줄 요약

1. 래스터, 비트맵은 점으로 이미지를 표현, 고정 해상도을 가지고 있다

2. 벡터는 점, 선, 면을 수학공식으로 표현해서 표현, 해상도로부터 자유롭다

3. 상황에 맞게 사용해야 한다

---

 

래스터 이미지

래스터 이미지는 인쇄와 관련된 용어 이고, 비트맵 이미지와 유사한 의미를 가지고 있습니다.

 

작은 점을 무수히 여러 번 찍어 만들어낸 이미지를 가리킵니다.

 

선과 면으로 채우는 대신 점을 사용하는 이유는 적은 물감으로 최대한 완성도 높은 이미지를 표현하기 위함이라고 합니다.

 

출처: 위키백과

 

래스터 이미지에는 해상도의 개념이 들어갑니다.

 

하나의 점은 닷(dot) 이라는 용어로 표현합니다.

---

 

비트맵 이미지

인쇄에서 사용하던 래스터의 개념이 디지털 화면으로 넘어온 것입니다.

 

디지털에서는 하나의 점은 픽셀 (pixel) 이라는 용어로 표현합니다.

 

여기서 궁금해지는 것이, 애플에서는 포인트(point) 라는 개념도 있단말이죠...??

이 부분은 따로 공부해봐야 할 것 같습니다.....😢

 

비트맵은 각 픽셀에 저장된 비트 정보들의 집합이라고 보면 됩니다.

 

픽셀은 다시 RGB의 서브픽셀로 이루어져 있다고 합니다.

 

이 RGB 의 각각의 비트의 조합으로 하나의 색이 결정됩니다.

 

https://spoqa.github.io/2012/06/13/bitmap-vector.html

 

모니터도 종이와 같이 픽셀의 배열로 구성되어 해상도를 가지고 있습니다.

 

예를 들어 제 모니터의 크기는 3,440 x 1,440 (WQHD) 해상도를 가지고 있는데,

34인치 모니터의 화면을 4,953,600 개의 픽셀로 표현하고 있습니다.

 

추가적으로 PPI (Pixel Per Inch) 는

1제곱인치에 해당하는 공간을 몇 개의 픽셀로 표현할지 나타내는 화면 밀도를 가리키는 용어입니다.

 

예를 들어 720 PPI는 1제곱인치의 공간을 720개의 픽셀으로 표현한 것이고, 600 PPI 는 600개의 픽셀로 표현한 것입니다.

 

주어진 해상도의 픽셀들을 어떤 색으로 채워넣을지에 따라 다른 결과가 나옵니다.

 

도트 그래픽은 비트맵 이미지의 좋은 예 입니다.

 

https://m.inven.co.kr/webzine/wznews.php?idx=138464

---

 

래스터/ 비트맵 이미지의 장단점

장점👍🏻

그래픽 이미지 보다는 사진을 표현하는데 더 효율적입니다.

 

보통 제한된 정보를 가지고 정보를 압축하여 표현하기 때문에 용량에서의 이점이 있습니다.

압축률과 이미지 퀄리티 보존의 조율은 디자이너의 몫

 

웹사이트를 제작할 때, 이미지 하나의 용량은 로딩속도에 큰 영향을 주기 때문에 위 사실은 중요합니다.

 

앱 설치 시간도 사용자 경험에 중요한 요소이므로, 앱 리소스로 큰 이미지를 포함할때는  고려해야할 점이 있습니다.

 

그리고 스큐어 모피즘의 시대에는 비트맵이 대세였다고 합니다.

:: #스큐어모피즘 #플랫디자인 #머터리얼디자인 #뉴모피즘

:: 관련 키워드들은 궁금하면 검색해보세요!

https://namu.wiki/w/스큐어모피즘

 

단점👎🏻

비트맵 이미지는  항상 해상도의 영향을 받습니다.

 

해상도가 고정되어 있기 때문에, 확대하면 이미지 퀄리티에 큰 훼손이 갑니다.

 

또한 축소나 회전 등의 변현 시에도 안티-앨리어싱 작업이 중복되어 역시 퀄리티에 손상이 간다고 합니다.

 

따라서 이미 만들어진 비트맵 이미지를 재편집 하는 것은 한계가 있습니다.

 

TMI 로 웹사이트 등을 통해서 저장한 이미지는 다시 한번 압축이 되기 때문에,

업로드와 저장을 여러 번 반복할 경우 '디지털 풍화'라고 불리는 현상을 볼 수 있습니다.

 

 

화질구지

 

---

 

벡터 이미지

비트맵 방식은 비트 즉 점으로만 이미지를 표현한다면, 벡터는 점 선 면으로 이미지를 구성합니다.

 

또한 각각의 선은 두께 값, 색상 값, 곡률 값을 가질 수 있다고 합니다.

 

그리고 이런 정보를 가지고 있는 그래픽들의 형태를 수학적인 공식으로 표현합니다.

벡터 방식은 따라서 고정된 비트맵을 그리지 않고,

수학공식으로 이루어진 그래픽들이 해상도에 따라 그때 그때 비트맵화 되기 때문에 항상 선명한 이미지를 그려냅니다.

 

또한 위의 이유 떄문에 벡터 이미지를 원하는 해상도의 비트맵으로 export 하는 것도 항상 가능하다고 합니다.

 

아래와 같은 스타일의 이미지를 만들어내기 좋습니다.

 

구글의 머터리얼 디자인

---

 

Xcode 에서 사용할수 없는 .svg 😡

벡터 형식(.svg)이 가능하다면 싱글 스케일로 사용하면 되서 편할 것 같은데, 직접 삽입해서 사용하는 것은 불가능했습니다.

 

관련 블로그의 내용들도 그렇고, iOS 개발자 톡방에서 보니 보통 pdf 형식으로 변환해서 사용하는 것 같습니다.

 

---

 

벡터 이미지의 장단점

장점👍🏻

해상도와 관련없이 항상 선명한 이미지를 얻을 수 있다.

 

단점👎🏻

비트맵보다 상대적으로 큰 용량을 가지고 있다.

 

사진과 같은 이미지를 표현하는데에는 비트맵방식 보다 비효율적이다.

 

 

 

끝!

---

🤖🟢[우짱의 iOS 블로그]🔵💻

iOS를 공부하면서 배운 내용을 기록하고 있습니다.

 

참고 1: https://spoqa.github.io/2012/06/13/bitmap-vector.html

참고 2: http://blog.wishket.com/해상도의-이해-래스터-이미지란/