Hacker News웹 · 프론트엔드

Moby Dick을 88x31 픽셀 GIF 버튼으로 만들기

원제 Making a 88x31 button book using ImageMagick

112 포인트댓글 18
Key Point

초저해상도 웹 배너 제약 속에서 전체 소설을 애니메이션으로 담는 창의적 기술 구현과 실제 작업 과정을 보여주며, 텍스트 처리부터 이미지 생성까지 실용적인 도구 활용법을 배울 수 있다.

핵심 요약

  • 88x31 픽셀은 초저해상도 웹 배너의 고전적인 크기인데, 이 공간에 전체 Moby Dick 소설을 애니메이션 GIF로 담은 프로젝트다.
  • GIF는 이론상 65536x65536 픽셀까지 지원하고 프레임 수 제한도 없으므로, 88x31 영역에 여러 프레임으로 텍스트를 표시할 수 있다.
  • 88x31 버튼에 글자를 넣으려면 초저해상도용 폰트가 필수인데, 저자는 6x4 크기의 TomThumb 폰트를 선택해 한 화면에 5줄 22자씩 표시했다.
  • 텍스트 전처리는 cat, tr, fold 같은 POSIX 도구로 했는데, tr로 줄바꿈을 공백으로 바꾸고 fold로 22자 폭에 맞춰 자동 정렬했다.
  • 멀티바이트 문자 처리 문제를 sed로 해결했고, 챕터 사이에 공백을 추가하는 등 포매팅을 정리한 후 ImageMagick으로 GIF를 생성했다.
  • ImageMagick의 convert 명령이 프레임마다 텍스트를 렌더링하는데, 아래쪽에 불필요한 여백이 생겨 crop으로 8픽셀을 제거했다.
  • 프레임 간 지연시간을 6초로 설정했으며, Python 스크립트로 텍스트 중앙 정렬을 구현했다.
  • 완성된 Moby Dick 버튼은 4.2 MB 크기, 19시간 이상 재생 길이의 애니메이션 GIF가 되었다.
AI 요약 안내

AI가 한국어로 정리한 내용입니다. 정확한 정보는 원문을 확인해 주세요.

요약 원칙 ↗