(수정) "유니티에서는"어째서 PNG보다는 TGA가 더 쓸모있는 파일 포맷인가?

(수정)"유니티엔진에서는" 어째서 PNG보다는 TGA가 더 쓸모있는 파일 포맷인가?로 정정합니다. 

 

-> 그럼에도 불구하고 유니티에서 왜 PNG가 왜 좋은가?? 로 이어집니다.

 

 

알파가 있고 퀄리티가 좋은 텍스쳐를 제작할 때 주로 쓰는 파일 포맷이 TGA와 PNG 입니다.

물론 어떤 포맷을 써도 상관 없지요. 유니티를 포함한 요즘 엔진은 텍스쳐 파일을 자동 변환하니까요! 

심지어 PSD를 써도 아무 문제 없습니다만.. 

PSD를 쓰면 이런 문제가 있을 수 있겠지요. 

- 빌드 용량이야 자동 압축되니 별 문제 없겠지만, 프로젝트 자체의 용량은 PSD의 어마어마한 용량때문에 어마어마해져서 작업하는 프로젝트 자체가 무거워진다. 

- 프로그래머나 디자이너(기획자) 가 포토샵이 없으면 그 파일을 확인하기 쉽지 않다 

그리고 그래서 TGA 혹은 PNG를 쓰기도 합니다만, 그래픽 아티스트나 디자이너는 PNG를 선호하곤 합니다. 

TGA는 다음과 같은 불편함이 있는데, 

 - 포토샵에서 알파 채널을 따로 만들어 관리해야 한다. 필요 없으면 알파 채널을 직접 날려야 한다는 것. 실수가 있을 수 있다. 

 - 윈도우 자체 기능으로 이미지 내용이 보이지 않는다. 

 - 뷰어를 깔면 되지만, 몇몇 뷰어는 회사에서는 유료이기도 하고 클릭해서 뷰어가 실행되어서 이미지를 보는 과정 자체가 귀찮다

 - 윈도우 섬네일로 tga를 볼 수 있게 해주는 프로그램도 있지만, 역시 귀찮고 왠지 불안하다 

PNG는 그리고  TGA의 단점들을 훌륭히 극복하였습니다. 
 - 포토샵에서 반투명한 상태로 그림을 그리고 저장하면 되기 때문에 알파 채널을 직접 관리하지 않아도 된다. 직관적인다 

- 윈도우 자체 기능으로 이미지가 보인다 

- 용량도 크지 않고, 사용하기도 편하고 이미지 퀄리티도 좋다

뭐 그런 이유로... PNG가 각광받기 시작했습니다. 알파채널도 있고, 윈도우에서 섬네일로 잘 보이기도 해서 관리도 쉬우니까요. 

그렇지만 PNG의 치명적인 단점을 말씀드릴 수 밖에 없겠네요 ... 

바로 "알파 채널을 따로 컨트롤 할 수 없다" 라는 점인데요 

이런 문제가 발생합니다. 

아래 이미지와 같은 이미지를 만들었다 치지요. 

투명한 배경에 어두운 원 이미지입니다. 

이게 보통 PNG로 저장할때의 모습이지요. 문제 없습니다. 네. 

그리고 PNG로 저장해 보겠습니다. 

PNG로 저장되었습니다. 훌륭합니다. 

섬네일도 투명부분이 제대로 반영되어 보입니다. 아주 훌륭한 결과물로 보이는군요. 

하지만 저게 정말로 투명으로 저장된 것일까요? RGBA 중 A 가 0여서 투명한건 알겠습니다만, 그럼 픽셀이 반드시 가지고 있어야 하는 RGB는 현재 어떤 형태로 있는 것일까요? 

이럴 경우에는 이미지 뷰어로 보면 알 수 있습니다. 

짜잔... 

흰 색으로 채워져 있습니다!???? 

즉 저 부분은 1,1,1,0 이란 뜻입니다. 

PNG는 투명한 부분을 자동으로 흰 색으로 채워줍니다??!!!??!

그럼 엔진에 올리면 어떻게 인식할까요? 

유니티 엔진으로 PNG 파일을 가져와 봤습니다. 

두 갭니다? 하나는 사각형???!?!? 

네 이건 사실 같은 PNG 파일을 두 가지 옵션으로 저장한 겁니다. 

Untitled -1 은 포토샵의  Export 옵션으로 저장한 PNG이고, 

Untitled -2 는 포토샵에서 Save As로 저장한 PNG입니다. 

문제는 이건 그냥 뷰어에서 보면 둘 다 

이렇게 보인다는 거죠 ... -_- ;;; 

뭔가 혼란합니다. 혼란하다 혼란해!! 

어쨌거나 그럼 이 이미지는 알파 채널이 있기 때문에 투명도를 줘서 만들면 어떻게 될까요??

 

이렇게 됩니다. 왼쪽이 Untitled -1 , 오른쪽이 Untitled -2 입니다. 

왼쪽은 검은 배경이 묻어나왔고, 오른쪽은 흰 배경이 묻어나왔습니다. 

뭘로 저장을 하건 어쩔 수 없이 외각의 색이 묻어 나와서 아티펙트가 생기게 되는 겁니다! 

뭐 캐릭터라고 한다면 그냥 무시할 수도 있고, 작은 이미지라고 한다면 역시 무시할 수도 있겠습니다만...

연출이나 UI 등에서 이러면 아무래도 곤란하지 않겠습니까? 큰 일러스트가 나오는 화면이라면??? 

게다가 게임에서는 필요에 의해 옵션으로 해상도를 줄이는 경우도 있다는걸 알고 계신다면, 다음 화면을 보시면 더욱 놀라겠죠 

옵션을 줄인 겁니다... 텍스쳐를 절반 사이즈로 줄인 거예요.

아까 묻어나던 색이 더욱 더 강해졌습니다. 당연하게도 해상도가 줄면서 주변색이 더 묻어나올 수 밖에 없게 되니까요. 

이것이 PNG의 치명적 약점입니다. 알파를 제어할 수 없고, 외각의 색을 제어할 수 없어서 필연적인 경계선의 찌꺼기 (아티펙트) 가 나타나게 됩니다. 

즉 깔끔한 이미지를 위해서는 PNG는 사실상 피해야 한다고 말할 수 있는거죠. 

그럼 어떻게 하느냐... 뭐 간단합니다. TGA를 쓰는 겁니다. 

일단 이미지를 그리고 알파 채널을 생성합니다. 

그 다음 이미지를 확장시킵니다. 알파 채널은 당연히 그대로 둬야죠. 

minimum 필터를 이용해도 되고, 블러를 준 이미지를 여러 장 켭쳐서 그리는 것도 한 방법입니다. 

TGA로 저장합니다. 
배경을 아예 붉은 계열 색으로 다 채우는 것도 좋은 방법이겠지요. 지금처럼 투명으로 두지 말고요. 

제일 좋은건 외각선의 칼라로 확장시키는 것입니다. 

그럼 엔진에는 이렇게 좀 더 확장된 모양의 이미지가 들어가게 됩니다. 

외각선이 흰색이지만 뭐 상관 없죠 

이미 알파보다는 하아아안참 큰 이미지가 들어간 상태니까요 

그럼 엔진에서 직접 게임에 적용하면 이렇게 됩니다. 

왼쪽은 아까 PNG 검은 배경이고, 오른쪽이 TGA 이번에 만든 확장된 이미지 버전입니다. 

두 이미지 모두 압축한 텍스쳐이므로 RGBA ETC2 . 85kb

차이가 큽니다! 용량이 같은데;;

왼쪽의 PNG는, 옆에 있던 검은 색상과 함께 영향을 받아 압축하느라고 아티펙트가 상당히 보이는 것을 알 수 있습니다. 

그렇지만 오른쪽의 TGA는 어차피 옆에 있는 색도 같은 붉은 색이므로 압축해도 거의 아티펙트(찌꺼기) 가 보이지 않습니다. 색 침범도 없고요 

사이즈를 줄여보면 이 효과는 더욱 더 극명해집니다. 

절반으로 줄인 이미지입니다. 

그러므로 퀄리티를 위해서는 TGA를 쓰는 것이 PNG보다 낫습니다 ! 

ps. @whrhkdxod 님의 말씀으로 실험해 봐서 추가적인 내용을 알게 되었습니다. 

언리얼에서는 PNG의 외각 색을 특정 색으로 채우지 않고 외각 색을 확장하는 방식으로 불러들여오는군요. 

이렇게 된다면 아무 문제 없이 사용 가능할 것 같습니다. 즉 이 문제는 언리얼에서는 일어나지 않는다는거군요! 

@whrhkdxod 님께 감사의 말씀 드립니다! 

 

 

 

-> 그럼에도 불구하고 유니티에서 왜 PNG가 왜 좋은가?? 로 이어집니다.