바탕을 지웠는데 분홍 띠가 남았다

2026년 10월 25일 · 그림·소리 · English

마젠타 바탕에 그린 그림에서 바탕을 지우고 게임에 넣었더니, 작은 크기에서는 괜찮았지만 아이콘처럼 크게 보이는 곳에서 그림 가장자리에 분홍 테두리가 보였다. 솔리테어 카드 그림에서 처음 눈에 띄었다. 구름 점프의 그림을 만들 때는 이 문제를 미리 알고 있었는데도 한 번에 끝나지 않았다.

이 글에 나오는 도구들은 Swift 로 짠 스크립트다. Swift 는 애플이 만든 프로그래밍 언어이고, 맥에 개발 도구를 설치하면 swift 파일.swift 로 스크립트처럼 바로 실행할 수 있다. 이미지를 읽고 쓰는 기능은 맥에 기본으로 들어 있는 것을 쓰므로 따로 설치할 라이브러리가 없다. 바탕을 지우는 방법은 앞 글에서 적었다. 여기서는 지운 뒤에 남은 띠만 다룬다.

바탕과 그림이 닿는 경계의 화소는 두 색이 섞여 있다. 병아리의 짙은 테두리 바깥은 선명한 마젠타도, 선명한 병아리 색도 아닌 중간 색이다. 바탕색과 얼마나 비슷한지를 기준으로 지우면 선명한 마젠타는 지워지지만, 섞인 중간 색은 허용 차이 밖이라 남는다. 이것이 가장자리를 따라 2~3px 의 띠가 된다.

띠를 지우면 그림이 깎이므로 지우지 않는다. 대신 띠의 색을 바꾼다. 색상(hue)이 바탕색 계열인 가장자리 화소를 찾아, 안쪽에 있는 이웃 화소의 색으로 덮는다. 투명도는 그대로 둔다. 모양은 변하지 않고, 분홍이던 가장자리가 바로 안쪽의 그림 색이 된다.

swift tools/art/defringe.swift --hue 280-330 sprite.png

마젠타 바탕이면 색상 280~330 도를 대상으로 한다. 초록 바탕에 그린 그림이면 95~165 를 준다. 파일은 그 자리에 덮어쓴다. 구름 점프의 모든 칸에 이 도구를 돌렸고 대부분의 분홍 띠가 사라졌다.

파란 구름의 바람 줄은 안 빠졌다

그런데 파란 구름에서 문제가 남았다. 파란 구름에는 움직이는 구름이라는 표시로 흰 가는 선(바람 줄)이 붙어 있다. 이 흰 가는 선 가장자리의 밝은 연분홍은 앞의 도구로는 빠지지 않았다.

그래서 이 그림만을 위한 도구를 따로 만들었다(unpink.swift). 밝은 연분홍을 흰색으로 바꾸고, 테두리 바깥의 어두운 보라는 테두리의 남색으로 바꾼다. 오른쪽 아래에 떨어져 나가 있던 바람 줄 조각은 거의 분홍이라 지웠다. 하루 사이에 이 파란 구름만 두 번 더 손을 봤다. 처음에는 연분홍과 보라를 고치고, 이어서 오른쪽 아래에 남은 보라를 마저 고쳤다.

다른 프레임에도 테두리 바깥에 보라가 조금 남아 있었다. 같은 도구를 한꺼번에 돌릴까 했지만 그러지 않았다. 빨간 풍선과 용수철은 그림 자체의 색이 같은 기준에 걸려서, 돌리면 제 색까지 바뀌었다. 그래서 조금 남은 채로 두었다. 모든 그림에 같은 기준을 쓸 수는 없다는 것을 이 일로 알았다.

바탕을 지운 직후 확대해서 보면 대부분 문제가 없어 보이지만, 아이콘처럼 크게 쓰이거나 어두운 배경 위에 얹으면 띠가 드러난다. 바탕을 지우는 단계 뒤에 가장자리 색을 안쪽 색으로 덮는 단계를 하나 더 두면 대부분 해결된다. 그래도 가는 선처럼 안쪽 색이 애매한 그림은 따로 손을 봐야 한다.

참고한 문서

• Wikipedia, Alpha compositing (경계 화소의 색 섞임): https://en.wikipedia.org/wiki/Alpha_compositing
• Wikipedia, HSL and HSV (색상 hue): https://en.wikipedia.org/wiki/HSL_and_HSV

이 글과 관련된 게임

구름 점프구름을 밟고 통통 튀어 하늘 높이 올라가세요. 회색 구름은 밟으면 흩어지고, 천둥구름은 위에서 밟아야 해요! 해 보기