ImageMagick으로 88x31 버튼에 책 담기

88x31 픽셀 애니메이션 GIF에 책의 텍스트를 여러 프레임으로 나눠 담아, 작은 웹 버튼에서 《Moby Dick》을 읽을 수 있게 만듦

• 초소형 글꼴
  TomThumb을 사용하면 버튼 하나에 22자씩 5줄을 넣을 수 있어, 일반 글꼴보다 좁은 공간을 활용하기 좋음
• POSIX 도구
  cat, tr, fold로 본문을 22자 너비로 정리한 뒤, ImageMagick으로 텍스트를 프레임별 이미지로 변환함
• ImageMagick이 넣는 하단 여백을 처리하기 위해
  88x39로 생성한 뒤 88x31로 자르고, 프레임 간격은 제작자가 읽기 적당하다고 느낀 6초로 설정함
• 첫 장만 담은 예제 외에
  책 전체를 담은 GIF도 공개했으며, 파일 크기는 4.2MB이고 재생 시간은 19시간이 넘음

88x31 버튼에 책을 넣는 발상

• Small Web 등에서 쓰이는
  88x31 버튼은 정적 이미지뿐 아니라 애니메이션으로도 만들 수 있음
• 다양한 버튼 사례의 애니메이션은 주로 시선을 끌거나 단어 몇 개를 순서대로 표시하는 데 쓰이지만, 여기서는
  《Moby Dick》 전체를 표시하는 용도로 확장함
• GIF의 프레임 수에는 제한이 없는 것으로 보이며, 최대 해상도는 2^16 × 2^16, 약 4,295메가픽셀임
• 실제 사용할 공간은
  88x31 픽셀, 약 0.003메가픽셀에 불과함
• Arial은 높이가 최소 10픽셀 정도 되어야 읽을 만해 보이며, 이 크기로는 한 번에 약 11단어를 표시할 수 있음

초소형 글꼴과 원문 준비

• 아주 작은 크기에서도 읽을 수 있도록 설계한 글꼴 중에는
  3x3 크기도 있지만, 이번 제작에서는 TomThumb을 절충안으로 선택함
• 책은
  일반 텍스트로 준비해야 하며, 확보한 형식에 따라 방법이 달라짐
• 이번 작업에서는 내려받은 파일의 앞뒤 라이선스 문구와
  첫 장 이전의 내용을 제거함

POSIX 도구로 22자 너비 맞추기

• TomThumb은 간격을 포함해 세로 6픽셀, 가로 4픽셀을 차지하므로, 88x31 버튼에
  22자씩 5줄을 넣을 수 있음
• ImageMagick의 텍스트 배치 기능이 충분하지 않아
  cat, tr, fold로 줄바꿈을 먼저 처리함

cat input.txt | tr '\n' ' ' | tr -d '\r' | fold -s -w 22 > 22w.txt

cat

으로 본문을 전달하고, tr

로 줄바꿈을 공백으로 바꾸고 캐리지 리턴을 제거한 뒤, fold

로 최대 22자 너비의 줄을 만듦
-s

는 가능한 한 단어 중간을 자르지 않도록 함

• fold는
  멀티바이트 문자를 잘 처리하지 못해, 이번 원문에서는 일부 문자가 흐트러졌음
• 아래 명령으로 비ASCII 문자를 찾은 뒤
  sed

로 제거하거나 치환함
sed -i

는 파일을 직접 수정함

grep -P -n '[^\x00-\x7F]' input.txt

• 서식은 작품에 맞춰 조정할 수 있으며, 이번에는
  장 사이 여백을 늘리기 위해 다음 치환을 사용함
• 다른 작품은 장 표기가 다르거나 장 구분 자체가 없을 수 있음

sed -i 's/CHAPTER /\n\n\nCHAPTER /g' input.txt

ImageMagick으로 GIF 생성과 자르기

• ImageMagick을 설치하고 현재 작업 디렉터리에
  tom.ttf

를 둔 뒤, 정리한 텍스트를 GIF로 변환함

cat 22w.txt | convert -page 88x39+0+0 -background white -fill black -font tom.ttf -pointsize 6 text:- high.gif

convert

는 표준 입력의 텍스트를 받아 프레임별 이미지로 만듦

• 하단 여백을 강제로 넣는 것으로 보여, 목표보다 8픽셀 높은
  88x39 이미지로 먼저 생성한 뒤 아래쪽을 잘라냄

convert high.gif -set delay 600 -coalesce -repage 0x0 -crop 88x31+0+0 +repage good.gif

• 최종 크기는
  88x31이며, -set delay 600

으로 프레임 간격을 6초로 설정함

• 6초는 제작자가 직접 읽어보며 적당하다고 느낀 값임

Python으로 가운데 정렬하기

• 왼쪽에 붙은 텍스트를
  가운데 정렬하려면, 각 줄의 앞뒤 공백을 제거한 길이와 22자의 차이를 이용해 왼쪽 공백을 추가함

#!/usr/bin/python3
from math import floor
with open("22w.txt") as file:
for line in file:
i = (22-len(line.strip()))/2
o = " "*floor(i)+line.strip()
print(o)

• 스크립트를 실행 가능하게 만든 뒤
  출력을 파일로 저장하고, 그 파일로 GIF를 다시 생성함

책 전체를 담은 결과물