NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

해상도의 이해, 래스터 이미지란?

래스터 이미지는 작은 점을 무수히 여러 번 찍어 만들어낸 이미지를 말합니다. 우리가 일반적으로 비트맵 이미지라고 말하는 것과 비슷한 의미인데요. 이런 래스터/비트맵 이미지를 이해하려면, 무엇보다 해상도에 대한 이해가 중요합니다.

래스터 이미지는 원래 인쇄의 개념을 다룰 때 사용되는 용어입니다. 그래서 이미지를 만들어낼 때, 종이 해상도의 개념이 들어갑니다. 그래서 A4 사이즈라던가, A2 사이즈 같은 가로, 세로 해상도의 개념을 갖고 있죠. 그리고 이런 해상도에 맞춰, 표현할 수 있는 범위가 정해집니다. 그림을 그릴 때 캔버스를 펼치듯 그 안을 어떤 밀도의 점으로 채우는지에 따라 전혀 다른 이미지가 만들어집니다.

 

그래서 인쇄를 할 때나, 이미지를 저장할 때는 항상 해상도 개념을 사용합니다. 이런 해상도는 픽셀이나, 인치, 그리고 화면 밀도까지 총 세 가지를 사용합니다.

 

  • 인치: 실제 물리적인 세상에서의 크기
  • 화면 밀도: 주어진 해상도 속에 얼마나 많은 점이 들어가는지
  • 픽셀: 비트맵 이미지의 기준으로 가로, 세로 해상도의 크기

인쇄에서 래스터 방식을 쓰는 이유는, 최대한 효율적으로 물감을 사용하기 위해서입니다. 실제 사진을 인쇄할 때, 더 적은 물감으로도 최대한 완성도 높은 이미지를 표현해야 하기 때문이죠. 그래서 대부분의 인쇄물들은 돋보기나 현미경으로 확대해보면, 아주 작은 점들이 빼곡하게 겹쳐 있습니다. 이것을 사람의 눈은 각각의 점이 아니라, 뭉쳐진 덩어리로 인식합니다. 

 

 

컴퓨터를 통해 바라본 비트맵 이미지

래스터 이미지의 표현방식은 디지털 화면으로 넘어와 비트맵 형식의 파일이 되었습니다. 래스터와 비트맵 모두 방식은 비슷합니다. 종이나 화면 해상도가 있고, 그 안에서 어떤 색상의 블록이 어떻게 쌓아 올려지는지에 따라 다른 결과가 나옵니다. 그 대표적인 사례가 도트 그래픽입니다.

개별 LED 화소로 해상도를 표현하는 모니터도 이와 비슷한 방식을 사용합니다. 우리가 보고 있는 대부분의 화면들도 자세히 확대해보면, 모두 작은 LED 조명으로 이뤄져 있습니다. 모니터 역시도 종이와 같이 해상도의 개념을 갖고 있고, 그 크기에 따라 표현할 수 있는 범위가 달라지죠. 

 

비트맵 이미지를 코드로 뜯어보면, 실제 해상도 정보와 무수히 많은 숫자들이 등장합니다. 이런 숫자들이 각자 색상 값을 갖고 있고, 이것을 컴퓨터가 읽어내어 실제 이미지를 표현해주는 것입니다. 그러니 아무리 복잡한 이미지라도, 더 많은 칸들과 숫자를 통해 표현이 가능한 것이죠.

 

 

벡터 방식으로 대체할 수 없는 영역

래스터/비트맵 방식이 외에도 이미지를 표현하는 법이 있습니다. 바로 벡터 방식인데요. 벡터 방식은 비트맵과는 달리 선과 점, 면으로 이뤄져 있습니다. 그래서 해상도가 커져도 항상 선명한 이미지를 보여줄 수 있습니다. 그렇다면 우리는 어째서 래스터/비트맵 방식을 사용하는 걸까요?

벡터 방식은 영역이 정확히 나뉘는 깔끔한 그래픽에서는 아주 적합합니다. 그러나 사진 이미지처럼 다양한 색상을 갖고 있는 이미지에서는 약한 모습을 보입니다. 우리가 생각하는 것보다 사진 하나에 들어가는 무수히 많은 색상 정보를 점, 선 면으로 표현하려면, 비트맵 방식보다 더 많은 용량과 위치정보를 갖고 있어야 합니다. 또한 이런 정보를 컴퓨터가 계산한 뒤에 표현해야 하니 단순한 이미지가 아니라면 효율이 떨어집니다.

 

 

래스터/비트맵 방식은 효율적이고, 용량도 적다

래스터 이미지의 특징은 효율이 매우 좋다는 것입니다. 물감의 양을 덜 쓰면서 최대한의 효율을 내려고 했던 것처럼 비트맵 이미지 역시 제한된 정보로 사진과 최대한 비슷한 이미지를 표현해줄 수 있습니다. 

웹사이트를 만들 경우, 이미지 하나의 용량은 로딩 속도에 큰 영향을 줍니다. 고해상도의 비트맵 이미지를 많이 사용하는 경우, 이 용량 하나하나가 쌓여 로딩 속도를 크게 낮추게 됩니다. 여기에 수십, 수백만 명이 접속하게 된다면, 그 과정에서 서버 과부하로 서버가 멈춰버릴 수도 있습니다. 그래서 웹 디자이너들은 대부분 이미지의 용량을 최대한 낮추면서, 이미지의 퀄리티가 손상되지 않는 중간 지점을 찾아내곤 합니다.

 

 

래스터/비트맵 해상도의 한계

래스터/비트맵 방식은 항상 해상도의 영향을 받습니다. 그래서 복잡한 이미지를 작은 해상도에 표현할 경우엔 이미지가 뭉개지거나, 형체를 알아볼 수 없게 됩니다. 

또한 이미 만들어진 래스터/비트맵 이미지는 인쇄물이나 디지털 이미지나 원본에 비해 손상된 상태가 됩니다. 그래서 웹사이트에 올려놓은 이미지를 다시 저장하고, 업로드하는 과정을 몇 번만 거치면서 빠르게 망가지게 되죠. 그래서 인터넷 커뮤니티나 짤방 같은 이미지들을 검색하다 보면 원본에 비해 흐릿해진 이미지들을 쉽게 찾아볼 수 있습니다.

 

또한 래스터 이미지나 비트맵 이미지는 재편집을 하기가 어렵습니다. 래스터 방식으로 인쇄된 결과물을 스캔해 사용할 경우 작은 반점들이 눈에 띄게 보이게 되고, 비트맵 이미지 역시 손상된 해상도가 눈에 들어옵니다. 그러나 벡터 이미지의 경우 수학 공식을 통해 만들어진 그림이기 때문에, 얼마든지 편집을 통해 재사용을 할 수 있습니다.

 

 

JPEG, PNG, 그리고 Webp

JPEG나 PNG 같은 이미지들은 한 장의 이미지를 표현하는 이미지 규격입니다. 그리고 모두 원본에 비해 손상된 상태고, 용량을 줄이기 위한 목적이 더 우선이죠. 파일 규격이 만들어진지도 굉장히 오래되었습니다. JPEG 규격은 1992년도에 만들어졌고. PNG의 경우 1995년도에 만들어졌죠. 이런 기술들은 모두 이미지를 압축해, 용량을 줄이면서 해상도는 최대한 유지하는 데이터 압축기술로 만들어진 것입니다. 

그래서 수학이 발전하고 기술이 새롭게 만들어지면서 또 다른 이미지 규격들도 등장하게 됩니다. 대표적인 사례가 Webp 규격으로 구글이 만들어낸 이미지 방식입니다. Webp는 일반적인 PNG보다 손상률이 적으면서, 5분의 1수준의 용량을 차지합니다. 또한 연속되는 이미지를 표현하는 GIF처럼 애니메이션을 포함할 수도 있습니다. 

 

시간이 흐름에 따라 기술은 계속해서 발전하고 있고, 여전히 빠른 속도가 중요합니다. 그래서 이미지 압축방식이나, 새로운 규격들도 계속해서 등장하고 있습니다. 지금은 JPEG를 대체할 규격이 없지만, 시간이 지나다 보면 언젠가는 더 가볍고, 빠른 압축 이미지 기술이 나올지도 모릅니다. 

 

마지막으로 래스터/비트맵에 대해 알아본 내용을 정리하면 다음과 같습니다.

 

  • 래스터 방식은 인쇄를 위해 만들어진 개념이다.
  • 래스터 방식을 디지털 세계로 가져온 것이 비트맵 방식이다.
  • 비트맵은 해상도에 따라 용량, 화면 크기, 밀도가 정해진다.
  • 비트맵은 사진과 같이 다양한 색상 정보를 가진 이미지를 표현할 때 효율적이다.
  • 그러나 해상도에 따라 데이터가 손상되고, 여러 번 저장, 편집할 경우 손상이 더 심해진다.
  • 이미지가 손상되지 않는 벡터 방식과 함께 사용된다.
  • JPEG나 PNG 같은 규격을 넘어 webp와 같은 새로운 규격이 등장하고 있다.

 

지금까지 래스터/비트맵 이미지의 개념에 대해 알아보았습니다. 좀 더 다양한 정보가 알고 싶다면, 다음 링크를 참조해보세요.

 

<참고자료>

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

댓글 0

리플러스

웹개발과 UI를 연구하는 리플러스입니다. 현재 UD LAB이라는 채널을 운영하고있고, 디자이너를 위한 개발 공부법을 만들고 있습니다.

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.