txtfy

열어보기 · txtfy.vercel.app

txtfy는?

글자를 입력하면 그 글자들이 화면 사방에서 날아와 캐릭터 모양으로 조립되고, 그대로 살아 움직이는 웹 도구다. 결과물은 GIF로 내려받을 수 있다.

어떻게 글자가 캐릭터가 되나

원리는 단순하다. 그림을 아주 작게 줄여서, 어두운 픽셀이 있던 자리에 글자를 하나씩 놓는다.

핵심은 다섯 번째다. 프레임이 바뀔 때마다 픽셀을 다시 훑어서 글자 자리를 새로 잡는다. 그래서 캐릭터가 뛰면 글자도 같이 뛴다.

해상도를 낮추는 게 품질 개선인 경우

이 도구에서 제일 마음에 드는 판단이다.

샘플링 격자는 PC에서 70x70인데, 화면이 좁으면 40x40으로 낮춘다. 보통 해상도를 낮추면 품질이 떨어지지만 여기선 반대다. 격자가 촘촘할수록 글자 하나가 차지할 칸이 작아지고, 결국 글자가 안 읽힌다.

이 도구의 결과물은 그림이 아니라 글자다. 캐릭터 윤곽이 조금 뭉개져도 글자가 읽히는 쪽이 맞다. 그래서 좁은 화면에서는 일부러 성기게 찍는다.

배경 제거를 직접 짰다

배경을 걷어내야 글자를 어디에 놓을지 정할 수 있다. 그래서 세 가지 모드를 만들었다.

• 알파: a < 128이면 배경. 투명 배경 GIF용이고, 프리셋 대부분이 이걸 쓴다
• 자동 감지: 네 모서리 픽셀을 배경색으로 보고, 거기서 색 거리가 가까우면 배경. 단색 배경용
• 밝기: 0.299R + 0.587G + 0.114B가 임계값 이상이면 배경. 검은 실루엣용

셋 다 열 줄 남짓이고, 셋 다 잘 돈다. 입력이 정해져 있기 때문이다. 여기 들어오는 건 배경이 단순한 캐릭터 GIF고, 목적도 "예쁘게 오려내기"가 아니라 "글자 자리 정하기"다. 윤곽이 몇 픽셀 틀려도 아무도 모른다.

기술 스택

• 전부: index.html 한 장 (740줄) + gif.js 워커 스크립트. 빌드 없음, 프레임워크 없음
• 렌더: Canvas 2D · getImageData() · fillText() · requestAnimationFrame
• 애니메이션: 목표 좌표로 프레임당 8% 보간 + easeOutCubic + 글자별 등장 딜레이
• GIF: 읽기는 gifuct-js(브라우저), 쓰기는 gif.js 워커 2개
• 배포: Vercel (정적)

고지

프리셋 캐릭터는 나가노(ちいかわ)의 것이다. 팬메이드이자 비상업 목적이고, 사이트 상단에 원작자 크레딧과 링크를 걸어뒀다. 직접 만든 것은 코드와 변환 방식이고, 캐릭터는 내 것이 아니다.