TRANSPARENTFY

열어보기 · transparentfy.vercel.app

TRANSPARENTFY는?

이미지를 던지면 배경이 사라지는 웹 도구다. 정확히는, 남의 야간 근무를 대신 서다가 정신이 헤까닥한 상태로 만든 배경 제거기다.

왜 만들었나

배경 제거기는 세상에 이미 백 개쯤 있다. 그걸 알면서 만들었다.

검사 시스템을 납품한 곳에서 부탁이 와서, 밤 10시부터 아침 10시까지 중형 셀 검사기 모니터링을 대신 봐주는 야간 알바를 했다. 하는 일은 반복 사이클을 돌리고 화면이 잘 도는지 지켜보는 것이다. 즉 12시간 중 대부분은 아무 일도 일어나지 않는다.

새벽 세 시쯤 되면 사람은 뭐라도 만들기 시작한다. 교대하고 나올 때쯤엔 배포가 끝나 있었다.

정직한 고백

이 도구에서 어려운 부분은 내가 안 짰다.

배경을 실제로 지우는 건 브라우저에서 도는 오픈소스 모델(@imgly/background-removal)이고, 내 코드에서 그건 함수 호출 한 줄이다. 그 위에 내가 얹은 것은 냥캣이 날아가는 로딩바, "AI IS COOKING...", 이미지가 아닌 파일을 넣었을 때 뜨는 "bro thats not an image.", 그리고 밈 24마리다.

이걸 감출까 하다가 그만뒀다. 열어보면 3초면 들키는 걸 숨기면, 옆에 있는 다른 문서들까지 의심받는다.

다만 처음부터 모델을 쓴 건 아니다. 원래는 색을 찍어서 비슷한 색을 지우는 방식이었고, 그건 사촌 프로젝트인 txtfy소품txtfy글자가 날아와 캐릭터가 되고 그대로 움직인다.에서 이미 짜본 것이었다. 거기서는 잘 됐다. 여기서는 안 됐다. 들어오는 그림을 내가 정할 수 없으면 색 기반은 무너진다. 그걸 확인하고 통째로 갈아엎었다.

그래도 되는 건 된다

이미지가 서버로 안 간다. 업로드가 아니라 브라우저 안에서 전부 처리된다. 처음 한 번 모델을 내려받을 때 로딩바에 "DOWNLOADING A BRAIN (1st time)..."이라고 뜨는데, 이건 농담이 아니라 진짜로 뇌를 받고 있는 중이라 그렇게 적었다.

밈은 손으로 배치했다. 주소 뒤에 ?edit을 붙이면 관리자 모드가 열린다. 밈을 끌어다 놓고 크기와 각도를 맞추면 그 좌표가 layout.json으로 떨어지고, 그 파일을 커밋하면 배포된다. 밈 하나 옮기자고 코드를 고치는 일은 없다.

기술 스택

• 전부: index.html 한 장 (771줄). 빌드 없음, 프레임워크 없음, 의존성은 CDN에서 불러오는 모델 하나
• 화면: Canvas 2D · CSS 애니메이션
• 배포: Vercel

이 문서에 대하여

포트폴리오에 올릴 물건은 아니다. 여기 있는 이유는 이게 대단해서가 아니라, 이런 것도 결국 남이 열 수 있는 주소까지 간다는 게 나에 대한 사실 하나이기 때문이다.