디자이너가 사용하는 이미지 확장자 정리

 

다양한 이미지 확장자는 분야와 성격에 맞게 사용하는것이 중요합니다. 어떤 요소에 해당 확장자를 사용해야 적절하게 사용할 수 있을지 정리했습니다. 주로 그래픽에 사용되는 이미지들을 나열했어요 

---

 

 

.RAW 

태초의 이미지 형태, 디지털 카메라로 사진을 찍을 때 해당 확장자 명으로 저장되며, 이는 모든 정보를 담아놓은 원본(날것)의 총칭으로 잘게 쪼개서 원하는 이미지 형식, bmp,png,gif,jpg등등의 확장자 명으로 저장할 수 있습니다. 마치 커피의 다양한 음료를 만드는 에스프레소와 같은 존재라 생각할 수 있습니다. 

[사용빈도] 스튜디오에서 제공하는 사진의 원본, 원본 이미지의 느낌 ​

 

 

 

.bmp 

초기 컴퓨터를 이용하시는분들이라면 자주 보셨을 이 확장자는 무손실압축으로 이미지 자체에 정보를 모두 담고 있으며 그로 인해 용량을 많이 차지한다는 단점이 있었습니다. 웹디자인작업시 용량이 많은건 어디서든 환영받지 못하기에 압축을 해서 사용해야 한다는 다수의 이용자들에 의해 jpg라는 압축기법을 이용해 온라인 상에서 사용하게 됩니다. 디지털 카메라로 사진을 찍어 내려받는 원본 정보의 확장자 RAW와 같은 성질을 띄고 있을 정도로 원본 그대로의 이미지 정보를 담고 있습니다. 

[사용빈도] X

 

 

 

.jpg 

제일 널리 보급된 이미지 확장자로 손실압축이라는 타이틀에 비해 고효율 압축을 했을시 원래 이미지와 차이가 없을정도로 용량만 줄어드는 획기적인 방식으로 1세대~3세대 웹디자인 시장 부터 작업자들의 열렬한 환영을 받은 이미지 확장자입니다 ​ 단 포토샵등 이미지 프로그램에서 60%이하의 극단적 압축을 할 경우 픽셀이 깨지는 이미지 깨짐 현상이 발생하기 때문에 주의가 필요합니다. ​ 

 

이제는 jpg자체도 용량이 크다는 다수 이용자들에 의해 jpg안에서도 고효율 압축기법으로 용량만 줄이는 획기적인 방법도 등장했는데요 포토샵에서 이미지 환경설정과 누끼작업(채널저장)등 각종 환경 정보까지 포함 할 수 있어 사랑받는 이미지 확장자입니다 

[사용빈도] 전달용 일반적 그래픽 이미지, 배포에 사용되는 이미지, 3세대 이전 웹디자인 확장자

 

반응형

 

.gif 

적은용량과 함께 애니메이션 효과를 줄 수 있는 프레임효과가 가능하기 때문에 움직이는 이미지라고 불리며, jpg보다도 낮은 용량으로 이미지를 업로드 하고 다운받을 수 있어 홈페이지에 업로드 하거나 빠른 전송을 위한 목적으로 쓰입니다. 온라인에 이미지로 설명해야하는 경우 gif만큼의 고 효율을 낼 수 있는 이미지도 없습니다. (용량 때문) 단, 표현하는 컬러가 jpg보다 작아(256색) 사진같은 다양한 컬러를 사용시 뭉개지는 현상이 있어 주의가 필요합니다. 주로 로고 같은 단색 표현에 적합합니다. 

[사용빈도] 단색으로 표현될 수 있는 로고이미지, 웹과 앱의 로딩이미지, 단색 일러스트를 활용한 도표들의 웹 구성

 

 

 

.png 

배경을 투명으로 할 수 있는 것은 물론, 반투명 이미지로 처리 할 수 있는 유일한 이미지로 일명 스티커 이미지라고 불립니다. gif에서 발전한 트루컬러 타입으로, 투명이미지 = png라는 공식이 널리 알려져 있으며, 다양하고 선명한 컬러효과 + 투명이미지, 적은용량의 장점으로 웹,앱  할 것 없이 다양한 매체에 쓰입니다. jpg보다 용량이 적은것은 물론 프로토타입툴(figma,zeplin등등..)을 통한 4세대 웹,앱디자인 방식으로 다양한 해상도를 만족시키는 이미지의 적용방식이 jpg에서 png로 옮겨가는 추세입니다. 

[사용빈도] 반응형 홈페이지 디자인, 하이브리드형(앱+앱)앱 ​

 

 

 

 

.ai 

어도비 일러스트를 이용해 만든 파일의 확장자명. 좌표로 점의 위치를 기억해 연결된 점들을 기반으로 면을 구성하는 타입이며, 수치값으로 점과 점을 이어서 이미지를 만드는 만큼 사이즈를 늘려도 깨지지 않는 파일을 만들 수 있다. 인쇄를 위해서는 픽셀이 아닌 벡터방식의 그래픽을 이용해야하고 컬러타입도 빛의 삼원색 (빨강,녹색,파랑)이 아닌 인쇄의 4원색 (사이안,마젠타,옐로우,검정)을 이용해 작업해야함

 

 

 

.eps 

일러스트파일로 이뤄진 인쇄파일을 일컫는말. ai파일을 이용해 인쇄도 할 수 있지만 별도의 eps파일을 인식하는 기계를 위한 별도저장 eps = 인쇄를 위해 ai파일을 한번 더 별도 저장한 의미

 

 

 

.svg

웹디자인에서 하나의 이미지만을 업로드했었던 기존의 방식을 벗어나 다양한 크기의 스크린에 대응하기 위해 고안된 타입으로​ ai의 기능적인 부분을 온라인상으로 옮겨 벡터 타입으로 이미지를 자유롭게 변환저장해 대응하기 위한 이미지 타입 픽셀타입과는 다른 수치값을 점으로 저장하는 기능 때문에 포토샵이 아닌 벡터방식의 프로그램 (adobe ai,XD) 등으로 대응이 필요

 

 

👏 정리

• 원본개념의 bmp를 초기에 사용하다 웹이 발달하면서 용량의 문제로 jpg,png,gif등을 발전시킴 
• 디지털카메라등의 이미지 가공 발전으로 태초의 이미지 RAW확장자를 손 쉽게 얻을 수 있다 
• RAW의 태초파일을 가공해  jpg,png,gif등을 원하는대로 다양하게 파생시킬 수 있다. 
• jpg는 웹,앱등 일반적, png는 앱과앱, gif는 움직이는 이미지에 사용 
• jpg를 사용하다 현재는 프로토타입툴의 발달로 다양한 해상도 및 웹과 앱 모두를 만족시키는 png를 빈번하게 사용하게 된다. 
• 깨지지 않는 ai,eps파일로 인쇄를 이용하다가 다양한 크기에 대처하는 온라인화 된 벡터 타입의 svg파일을 사용

 

[이미지 도움] icons made by Freepik and distributed by Flaticon