HTML6 Games설치없는 무료 웹 게임 / devlog

설치 없이, 지금 바로 플레이

브라우저에서 즐기는 무료 미니게임 모음. 로그인하면 기록이 계정에 저장되어 어느 기기에서든 이어서 볼 수 있어요.

게임 목록
게임 목록
모든 개발 이야기

투명 바탕을 못 주는 AI 그림에서 바탕 지우기

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

구름 점프의 병아리와 구름 그림은 이미지 생성 도구로 만들었다. 게임에 넣으려면 바탕이 투명해야 하는데, 쓰던 도구는 투명 바탕을 주지 못했다. 그래서 바탕을 직접 지우는 과정이 필요했다.

게임 그림은 이미지 생성 모델(Gemini)로 만들었다. 이 모델은 글로 설명하면 그림을 그려 주지만, 바탕이 투명한 그림을 직접 주지는 못했다. 아래의 도구들은 Swift 로 짠 스크립트다. Swift 는 애플의 프로그래밍 언어이고, 맥에 개발 도구를 설치하면 swift 파일.swift 로 스크립트처럼 실행할 수 있다.

먼저 바탕을 단색으로 그리게 한다. 그림에 거의 쓰지 않는 색이어야 하므로 마젠타(#FF00FF)를 골랐다. 한 장에 여러 프레임을 담는 시트도 같다. 병아리의 날개를 든 모습, 떨어지는 모습 같은 프레임을 2×2 칸에 마젠타 바탕으로 그리게 하고, 시트를 칸별로 자르는 도구가 같은 방식으로 바탕을 지운다.

단순히 마젠타와 비슷한 모든 픽셀을 지우면 안 된다. 그림 안에 같은 계열의 색이 있으면 함께 지워지기 때문이다. 그래서 그림의 네 테두리에서 시작한다. 테두리에서 가장 흔한 색을 바탕색으로 보고, 그 색과 비슷한 픽셀을 바깥에서부터 이어서 투명하게 만든다. 이어져 있지 않은 같은 색은 그림의 일부이므로 남는다.

아이콘처럼 한 장짜리 그림은 바탕만 지우는 별도 도구를 쓴다.

swift tools/art/remove-bg.swift input.png output.png 40 256

세 번째 인자(40)가 바탕색과 얼마나 비슷하면 지울지의 허용 차이다. 지운 뒤에는 큰 그림과 떨어져 있는 작은 덩어리도 지운다. 생성 도구가 모서리에 남기는 작은 표시가 대표적이다. 마지막으로 그림 영역에 맞춰 정사각형으로 잘라 크기를 맞춘다.

가장자리에서 이어지지 않는 바탕은 이 방법으로 지워지지 않는다. 그물의 칸이나 고리의 안쪽처럼 바탕이 그림 안에 갇힌 모양이 그렇다. 이때는 바탕색을 그림 전체에서 지우는 옵션(--all)을 쓴다. 이 옵션은 그림이 바탕색을 쓰지 않을 때만 안전하다. 또 다른 방법은 색 대신 macOS 의 피사체 인식(Vision, 사진에서 사람이나 물체를 오려 내는 기능)으로 그림을 따는 것이다. 이 방법은 로컬에서 돌아가므로 설치나 요금이 없고, 갇힌 바탕과 JPEG 얼룩에도 강하다.

마젠타 바탕에 그린 고리 모양 그림에서 가장자리부터 바탕을 지우면 고리 안쪽 구멍의 마젠타는 남고, 갇힌 바탕까지 지우면 구멍도 투명해지는 세 단계

이렇게 해도 가장자리에는 마젠타가 조금 남는다. 이 띠를 없애는 방법은 다른 글에 적었다.

참고한 문서

이 글과 관련된 게임

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

다른 글

홈 화면에 추가하기

  1. 화면 아래(아이패드는 위)의 공유 버튼을 누르세요. 네모에서 화살표가 위로 나온 모양이에요.
  2. 목록을 내려 "홈 화면에 추가"를 누르세요.
  3. 오른쪽 위 "추가"를 누르면 홈 화면에 HTML6 Games 아이콘이 생겨요.

Safari 에서만 추가할 수 있어요. 홈 화면에서 열면 주소창 없이 앱처럼 보이고, 인터넷이 끊겨도 열립니다.