psd 렌더링 중 하얀선

안녕하세요!

답변을 상세히 준비하느라 시간이 다소 걸렸습니다.

양해 부탁드립니다.

이 문제는 "RGBA 방식과 이미지 리사이징 및 안티앨리어싱 과정에서 발생하는 문제"와 "SAI 툴의 문제"가 겹쳐서 발생한 것으로 보입니다.

이 문제를 해결하는 방법만 설명하기에는, 원인을 알지 못한 상태에서는 다시 겪기 쉽기 때문에 간략이 문제의 원인을 먼저 설명하고, 이어서 상세한 해결 방법을 설명드리고자 합니다.

(이미지를 클릭하면 큰 화면으로 보실 수 있습니다.)

먼저 문제의 원인입니다.

예제 이미지는 "투명한 배경"에 "푸른색 원 이미지"가 그려진 것입니다.

(1) 경계 부분에서 어떻게 데이터가 저장되어 있는지 확인해봅시다. 데이터는 RGB+Alpha로 저장되어 있다고 가정하고 설명드리겠습니다.

(2) 푸른색 원은 불투명하므로 Alpha 채널의 값은 255이며, RGB는 각각 (0, 128, 255)입니다.

(3) 문제는 투명한 부분입니다. Alpha 채널의 값은 0이지만 RGB 의 값을 알 수 없습니다. 투명하므로 RGB는 중요하지 않기 때문입니다.

근데 이 무의미한 RGB에 의해서 경계에서의 차이가 발생합니다.

(4) 만약 투명한 부분의 RGBA가 푸른색 원의 색상을 반영하여 (0, 128, 255, 0)이라면 아주 괜찮은 안티앨리어싱이 적용된 경계로 렌더링 될 것입니다.

(5) 그렇지만 투명한 부분에 "흰색"을 적용하여 (255, 255, 255, 0)의 색상값이 기록된 상태라면, 흰색이 묻어난 경계 색상을 볼 수 있습니다.

이 "흰색이 묻어난 상태"가 이 이슈의 원인입니다. (4) 이미지와 비교해보세요.

그리고 테스트를 해보니, 안타깝게도 SAI 툴은 투명한 영역을 "투명한 흰색 (255, 255, 255, 0)"으로 모두 저장한 것으로 보입니다.

따라서 필연적으로 이 문제가 발생할 수 밖에 없는 상황입니다.

이 문제의 몇가지 상황과 해결 방법에 대해서 하나씩 설명드리겠습니다.

첫번째 해결 방법은 AnyPortrait에서 제공하는 기능을 이용하는 것입니다.

AnyPortrait의 PSD 임포트 툴에는 "Fix Border Problem" 옵션이 있습니다.

이 옵션은 이러한 문제를 줄이는데 효과적입니다.

SAI 툴을 이용하여 간단한 예제를 만들어보았습니다.

(1) 캔버스의 크기는 1000x1000이며, 같은 색상의 두개의 레이어가 있습니다.

(2) 큰 삼각형 이미지 안쪽에 둥근 이미지를 겹쳐두었습니다. 색상이 같으므로 현재는 구분하기가 어렵습니다.

AnyPortrait에서 PSD 파일을 열어봅시다.

(1) 일단 이미지 축소를 하지 않기 위해 Atlas 크기를 넉넉하게 설정합니다.

(2) 덕분에 Scale Percent를 100%로 설정할 수 있습니다.

(3) 테스트를 위해서 "Fix Border Problem"을 꺼봅시다.

AnyPortrait에 PSD 파일을 로드한 상태입니다.

자세히 보시면 같은 색상이어서 구분되지 않아야할 두개의 레이어가 "흰색선"으로 인하여 구분이 됩니다. (이미지를 클릭하면 뚜렷한 흰색 선을 보실 수 있습니다.)

경계선에서 문제가 발생한 것입니다.

이제 문제를 해결하기 위해 다시 PSD 파일을 로드해봅시다.

처음으로 돌아와서, 이번에는 (1) Fix Border Problem 옵션을 켜서 PSD 파일을 임포트를 합니다.

이 옵션은 가장자리에 육안으로 판별하기 힘든 약한 블러를 가하여 "투명한 흰색"을 줄이는 역할을 하기 때문에 이 문제를 해결하는데 좋습니다.

임포트된 결과입니다.

이제 두개의 흰색 경계선이 사라져서 두개의 레이어를 구분할 수 없게 되었습니다.

Fix Border Problem 옵션만 적용한 것으로 이정도의 효과를 얻을 수 있습니다.

하지만, Fix Border Problem 옵션은 한계점을 가지고 있습니다.

"원본 이미지가 매우 커서 임포트시 축소가 되는 경우"엔 이 옵션이 큰 효과를 발휘하지 못합니다.

다시 예제를 준비해보았습니다.

같은 방식으로 두개의 같은색을 가진 레이어를 만들되, 이번에는 5000x5000의 매우 큰 이미지로 준비해보았습니다.

PSD 파일을 임포트해봅시다.

(1) Fix Border Problem을 켭니다.

(2) 이번에는 원본 이미지가 매우 큰 상태여서, AnyPortrait로 가져올 때는 Scale Percent가 15%로 매우 축소된 상태입니다.

임포트를 하고 AnyPortrait 에디터에서 확인해봅시다.

Fix Border Problem을 켰음에도 불구하고, 이미지 축소 과정에서 "투명한 흰색"이 반영되기 때문에 다시 흰색의 경계선에 보이고 있습니다.

이 문제를 해결하는 간단한 방법은, 사용하시는 페인팅 프로그램(SAI 툴)에서 미리 이미지를 축소하는 것입니다.

다시 SAI 툴을 열고 이미지를 적절하게 축소합니다.

PSD를 임포트합니다.

이번엔 미리 축소를 했으므로, Scale Percent가 100%인 상태입니다.

AnyPortrait에서 확인해봅시다.

일단 흰색의 경계선은 사라진 것으로 보입니다.

하지만 자세히보면 이전보다는 옅어져서 잘 보이진 않지만, 반대로 검은색의 경계선이 보이고 있습니다.

이것은 SAI 툴의 이미지 축소 과정에서 검은색이 반영된 것으로 추측됩니다.

이미지 프로그램마다 축소 처리 방식이 다르므로, 사용하시는 프로그램에 따라서 다른 결과를 보여줍니다.

이미지를 미리 축소하지 않고도 이 문제를 해결하는 가장 효과적인 방법은 "Fix Border Problem" 옵션에서 사용되었던 개념을 직접 이미지 툴에서 시도해보는 것입니다.

즉, 이미지 가장자리에 미세한 블러를 추가하는 것입니다.

하지만 안타깝게도 SAI 툴에서는 블러 필터가 없는 것으로 보여서, 저희는 대신 다른 무료 프로그램인 "Krita"를 이용해보겠습니다.

프로그램마다 사용법이 다르므로, 여기서는 기능에 대한 자세한 설명은 하지 않고, 대략적인 해결 방법만 설명하겠습니다.

문제가 되었던 5000x5000 크기의 이미지를 Krita로 불러왔습니다.

(1) 경계선을 없애고자 하는 "Layer2"를 복제하여 아래에 배치합니다.

(2) 보기 쉬운 설명을 위해 첫번째 레이어는 숨겨두었습니다.

(1) 복제된 사본 레이어를 선택합니다.

(2) 가우시안 블러 또는 가우시안 흐림 필터를 적용합니다.

해당 이미지의 가장자리가 부드럽게 바뀐 것을 볼 수 있습니다.

(1) 블러가 적용된 사본 레이어의 투명도를 50% 이하로 줄입니다.

(2) 원본인 Layer2와 병합합니다.

이제 블러 효과로 인하여 이미지의 가장자리에는 "투명한 흰색" 데이터가 없어졌을 것입니다.

PSD 파일을 AnyPortrait로 임포트해봅시다.

Krita에서 이미지를 축소하지 않았기 때문에, AnyPortrait에서 임포트할 때 이미지를 축소해야합니다.

AnyPortrait에서 확인해봅시다.

큰 이미지를 축소하여 가져왔음에도 불구하고 완벽하게 경계선이 사라진 것을 볼 수 있습니다.

이 방식은 가장 완벽하며, 저희가 추천해드리고자 하지만, 프로그램에 따라서 이 과정은 다소 번거롭거나 불가능할 수 있습니다.

따라서 가능하면 원본 이미지의 크기를 적절하게 설정한 상태로 Fix Border Problem 옵션을 이용해보시는 것을 권장합니다.

추가적으로, SAI 툴에서 이 문제가 유독 크게 보여지는데, 저희가 다른 프로그램으로도 테스트를 해보았습니다.

포토샵에서 동일한 조건의 1000x1000 크기의 이미지를 만들어보았습니다.

안티 앨리어싱이나 블러는 적용하지 않은 상태입니다.

"Fix Border Problem을 적용하지 않은 상태"로 이미지를 가져와보았습니다.

육안으로 경계를 구분하기가 어려운 것을 볼 수 있습니다.

페인팅 프로그램들의 "투명한 영역 처리 방식"에 따라서 위와 같이 서로 다른 결과가 나타날 수 있음을 볼 수 있습니다.

위 설명을 읽고 해당하는 해결 방법을 적용해보세요.

만약 문제가 해결되지 않는다면 댓글을 남겨주시길 바랍니다.

감사합니다!

Eng)

Q. White color appears on the edges when importing a PSD image

A. If the image program you are using stores (255, 255, 255, 0) in the "transparent area", the above issue will occur.

- Try using AnyPortrait's "Fix Border Problem" option.

- Reduce the image size appropriately in advance.

- Apply a little Blur Filter to the edges.