Lobsters

Making a 88x31 button book using ImageMagick

ImageMagick으로 88x31 버튼에 책 한 권 담기

ImageMagick과 작은 글꼴을 이용해 88x31 픽셀짜리 애니메이션 GIF에 『모비 딕』 전문을 담는 방법입니다. 텍스트를 22자씩 줄바꿈하고 프레임마다 표시해 4.2MB, 재생 시간 19시간이 넘는 버튼을 만듭니다.

에디터 노트

이 프로젝트의 재미는 책을 버튼에 담는 발상과 실제 제작 절차가 맞물린 데 있습니다. `fold`로 글줄을 나누고 ImageMagick으로 프레임을 만든 뒤 여백을 잘라내는 흐름은 작고 재현 가능한 텍스트 처리 작업입니다. 저자가 제시한 4.2MB와 19시간 이상의 재생 시간은 결과물의 규모를 보여줍니다. 댓글은 파일 크기 최적화라는 별도 쟁점을 더합니다. 한 댓글은 ImageMagick이 만든 GIF를 `gifsicle -O3`로 처리해 약 132KB 줄였다고 보고했지만, 이는 전체 파일 크기를 크게 바꾸는 수준은 아닙니다. 다른 형식으로 변환한 결과도 도구와 설정에 따라 달라졌고 AVIF 결과는 무손실 여부를 확인하지 않았습니다. 따라서 이 글은 최소 용량을 찾는 안내서라기보다, 작은 화면과 간단한 명령줄 도구로 긴 텍스트를 애니메이션으로 표현하는 제작 기록으로 읽는 편이 정확합니다.

AI 요약

작은 웹(Small Web)에서 흔히 보이는 88x31 버튼에 긴 글을 담는 방법을 설명합니다. 『모비 딕』 전문을 한 화면에 표시하는 대신, 텍스트를 여러 프레임으로 나눈 애니메이션 GIF로 만듭니다.

텍스트 준비

저자는 글자 크기 6인 TomThumb 글꼴을 사용합니다. 글자 하나가 간격을 포함해 6x4 픽셀이라면 88x31 화면에 22자씩 다섯 줄을 배치할 수 있습니다. ImageMagick의 텍스트 배치 기능에 맡기기보다 tr로 줄바꿈을 공백으로 바꾸고 fold -s -w 22로 단어가 끊기지 않게 줄을 나눕니다. 다중 바이트 문자는 fold에서 깨질 수 있어 grep -P -n '[^\x00-\x7F]'로 비 ASCII 문자를 찾고 sed로 바꾸거나 제거합니다. 장 사이에 공백을 추가하는 등 원문에 맞춘 서식 조정도 할 수 있습니다.

GIF 만들기

convert에 텍스트를 표준 입력으로 전달해 GIF 프레임을 만듭니다. ImageMagick이 이미지 아래쪽에 여백을 넣기 때문에 먼저 88x39 크기로 생성한 뒤 -crop 88x31+0+0으로 잘라냅니다. -set delay 600은 프레임마다 600센티초, 즉 6초를 표시하도록 설정합니다. 저자는 별도의 파이썬 스크립트로 각 줄 앞에 공백을 더해 텍스트를 가운데 정렬합니다. 완성된 GIF는 4.2MB이며 재생 시간은 19시간이 넘습니다.

Lobsters 반응

  • @FRIGN — Shrek 영화 전체를 적당한 크기의 GIF 하나에 넣을 수도 있다는 이야기가 떠오릅니다.
    • @sloane — 특별한 날을 위해 Bee Movie 전체를 담은 GIF를 가지고 있습니다.
    • @FRIGN — 행운을 빕니다.
    • @joemi — 이게 만들어진 뒷이야기가 있나요?
    • @jaculabilis — 아마 "Shrek을 GIF 하나에 넣을 수 있을까" 정도였을 겁니다. Morbius가 나왔을 때 GIF 하나에 영화를 담는 유행이 있었던 것 같습니다.
  • @chrismorgan — 『모비 딕』 텍스트는 약 120만 자이고 GIF는 4,198,301바이트입니다. 문자당 약 3.5바이트, 프레임당 334바이트입니다. 프레임은 12,565개입니다. 나쁘진 않지만 더 줄일 수 있지 않을까요? convert full.gif full.apng로 바꾸니 파일이 29,286,609바이트가 됐습니다. 제가 쓰는 도구 중 APNG를 제대로 최적화하는 도구는 없는 듯합니다. optipng는 최적화를 끄고 advpng와 zopflipng는 애니메이션을 없애 버립니다. GIF나 PNG는 gzip이나 zstd로 8% 넘게 줄지 않았지만 원문 텍스트는 각각 40%, 33% 크기로 줄었습니다. PNG에서 프레임 간 압축이 되는지, 더 나은 방법이 있는지는 모르겠습니다. WebP와 AVIF 애니메이션을 다루는 도구에도 익숙하지 않습니다. convert로 만든 WebP는 19,225,738바이트, AVIF는 3,219,347바이트였습니다. AVIF가 더 작긴 하지만 무손실인지는 확인하지 않았습니다. 이제 이만 살펴보겠습니다. 제가 궁금증에 끌려온 건지 다른 사람을 끌어들인 건지, 둘 다인지 모르겠습니다.
    • @Internet_Janitor — ImageMagick은 보통 파일 크기를 최소화하지 않습니다. 원본 GIF를 gifsicle -O3로 처리하니 형식을 바꾸지 않고 131,833바이트를 줄여 4,066,468바이트가 됐습니다.
  • @gnafuthegreat — 제목만 보고 ImageMagick으로 만든 88x31 버튼 모음 전자책인 줄 알았습니다. 실제 내용은 더 재미있네요.
  • @novedevo — 아주 엉뚱하고 재미있네요. 웹사이트에 "멋 부리기 활성화" 버튼이 더 많았으면 합니다. 눌러 보면 재미있잖아요.

원문: 개인 블로그 / 번역·요약: Trawling

원문 보기 ↗토론 보기 ↗