PNG & GIF 저장 시
테두리 하얗게 뜨는 문제 해결방법
작업을 하다보면 투명도를 사용하기 위해서 PNG 나 GIF로 작업하는 경우가 있습니다.
저도 마찬가지로 사용 중 이미지 테두리 부분이 하얖게 저장되는걸 확인할 수 있었습니다.
이 문제때문에 한참 고민하다가 방법을 찾았습니다.
먼저 하얗게 뜬다는게 어떤걸 말하는지 이미지 첨부하겠습니다.
이런식으로 하얗게 변했습니다.
해결하기위해서는 포토샵에서 저장 할때 옵션을 변경해주어야 합니다.
먼저 제가 저장한건 PNG8 그리고 GIF 였습니다.
모두 투명도를 사용하기위해서는 위 2가지 확장자를 사용한다는 것은 다들 알고 있을겁니다.
하지만 위와같은 문제가 없다면 상관없지만 그렇지 않고 위와같은 문제가 발생되었을 때 해결방법에
대해서 알려드리겠습니다.
기본적으로 투명도가 있는 확장자는 PNG와 GIF로 알고 계시는게 맞습니다.
모두 알고 계시겠지만 포토샵에서 웹용으로 사용하기 위해서는 웹 용으로 저장이라는
부분을 사용합니다.
먼저 GIF 설정입니다.
모두들 아시리라 생각하고 넘어가겠습니다.
그렇지만 여기서 PNG는 2가지로 구분됩니다.
바로 PNG-8과 PNG-24 입니다.
이렇게 두가지로 구분할 수 있는데 무슨 차이가 있을까요?
간단하게 아래 표로 설명하겠습니다.
종류 |
칼라 |
투명도 |
이미지 압축손실 |
웹지원 |
애니메이션 |
레이어,채널 |
PNG-8 |
256이하 |
O |
O |
O |
X |
X |
PNG-24 |
트루칼라 |
O |
X |
O |
X |
X |
간단하게 설명하면 PNG-8은 이미지를 압축시킵니다.
하지만 PNG-24는 이미지를 압축하지 않고 PNG-8보다 보다 많은 트루칼라
즉, 1천 6백만개(1,600,000개) 이상의 색을 표현합니다.
* 트루칼라 : 컴퓨터 모니터는 색을 표현할 때 가법 삼원색(red, green, blue)를 각각 28(8bit)인 256단계로 표현한다. 이는 각 색이 8비트를 표현하므로 8×3=24비트이며 256×256×256=16,777,216가지의 색, 즉 1천 6백만개 이상의 색을 표현 할 수 있다. 1천 6백만개의 색은 무지개와 같이 나열했을 때 인간의 눈으로 색의 경계선을 구별하지 못한다고 하여 실제칼라(true color)라고 부른다.
[네이버 지식백과] 트루 칼라 [true color] (만화애니메이션사전, 2008. 12. 30., 한국만화영상진흥원)
이 차이로 인해서 테두리에 표현되는 색의 차이가 줄어들고 사람눈 혹은 모니터 픽셀단위에서 표현을 못하고 깨끗하게 보이게 되는것이죠.
처럼 이미지 테두리에 하얗게 경계선이 보이시는분들은 사용하기시기에 문제가 없다면 괜찮지만
문제가 된다면 PNG-24로 변경해서 사용하시기 바랍니다.