ImageMagick으로 88x31 버튼 책 만들기

Making a 88x31 button book using ImageMagick

k.sosnierz.me ▲ 158 댓글 31 birdculture

요약

ImageMagick으로 88x31 버튼 하나에 『모비 딕』 전권을 담은 19시간짜리 GIF를 만들었습니다.

개인 블로그 k.sosnierz.me에 2024년 올라온 글입니다. 88x31 버튼(옛 웹사이트에 붙던 가로 88, 세로 31픽셀짜리 작은 배너)의 애니메이션은 보통 몇 단어로 끝납니다. 글쓴이는 여기에 책 한 권을 통째로 넣어 보기로 했습니다.

왜 중요한가

  • 따로 프로그램을 짜지 않고 유닉스 기본 명령과 ImageMagick 몇 줄로 책 한 권을 애니메이션으로 바꿀 수 있음을 보여 줍니다.
  • GIF 형식에는 프레임 수 제한이 없습니다. 이 점을 이용해 손톱만 한 버튼에도 장편소설 분량을 담을 수 있음을 직접 확인했습니다.

핵심 내용

  • 완성본은 용량 4.2MB, 재생 시간이 19시간을 넘는 GIF 하나에 책 전체를 담았습니다.
  • 한 화면에 11단어쯤만 들어가는 Arial 대신 글자 하나가 5x3픽셀인 고정폭 글꼴 TomThumb을 골랐습니다.
  • 프로젝트 구텐베르크의 텍스트를 받아 fold로 한 줄 22자에 맞춰 접고, 굽은 따옴표 같은 특수 문자는 sed와 grep으로 정리했습니다.
  • ImageMagick으로 쪽마다 프레임을 만든 뒤, 아래에 생긴 8픽셀 여백을 잘라 내고 프레임마다 6초씩 보이게 했습니다.
  • 짧은 파이썬 스크립트로 줄마다 왼쪽 여백을 계산해 글을 가운데 정렬한 판도 만들었습니다.

HN 반응

  • 쓸모는 없지만 사람이 직접 쓴 글과 코드라 반갑다는 칭찬이 많았고, 제목이 성과를 너무 낮춰 말한다는 평도 나왔습니다.
  • 명령 첫머리의 cat이 불필요하다는 지적에, 왼쪽에서 오른쪽으로 읽히고 고치기 쉬워 오히려 낫다는 반론이 맞섰습니다.

댓글

29개 표시 · 전체 31개
  1. ninjalanternshk HN

    제목이 이 성과를 너무 낮춰 부르고 있다고 생각해요.

    『모비 딕』 전문이 통째로 스크롤되는 움직이는 버튼 gif를 만든 거잖아요.

    4.2MB에 재생 시간은 19시간이고요.

    최고 수준의 쓸모없는 개념 증명입니다. 10점 만점에 10점.

  2. coldpie HN

    와, 올해 초에 『모비 딕』을 읽고 나서만큼 제가 교양 없는 속물처럼 느껴진 적이 없었어요. 책은 많이 읽는 편인데 스스로를 "문학 하는 사람"이라고 생각해 본 적은 없었고, 『모비 딕』이 그걸 확실히 못 박아 줬죠. 끝까지 읽긴 했지만 정말 끔찍한 독서였어요. 처음부터 끝까지 지독하게 지루했거든요. 중간쯤부터는 군더더기 묘사랑 20페이지씩 이어지는 알아먹을 수 없는 연설을 몇 페이지고 몇 페이지고 건너뛰었어요. 진짜 싫었고, 끝까지 억지로 읽어 낸 책 중에서도 최악 축에 들어요.

    물론 "제 문제"겠죠. 문학이나 분석을 좋아하는 사람들은 얻는 게 많을 테니까요. 하지만 앞으로는 사람들이 알아들을 수 있는 문장으로 말하고 뭔가 펑펑 터지는 제 단순한 SF 소설이나 계속 읽을래요, ㅋㅋ

  3. selfsimilar HN

    취향은 사람마다 다르니까, 그게 안 맞으셨다면 너무 신경 쓰지 않으셔도 될 것 같아요. 다만 "문학"이 자기 취향인지 아직 확신이 없는 상태라면 『모비 딕』은 입문작으로 좋은 예가 아닐 수 있어요. 대부분 워낙 길어서요. 이탈로 칼비노의 『우주 만화』나 스타니스와프 렘의 『사이버리아드』를 한번 권해 드려요. 가볍게 들락날락하며 읽기 쉽고, 겉으로는 "SF"이면서도 "문학"이라 할 만한 구석이 있거든요. 렘과 칼비노를 읽다 보면 보르헤스나 PKD, 어슐러 K. 르 귄, 차이나 미에빌로 이어질 수도 있을 거예요. 싸구려 통속물 이상을 지향한다고 할 만한 장르 작가들이죠.

  4. sloum HN

    모두가 좋아할 책이 아니라는 건 충분히 이해해요. 그래도 저는 『모비 딕』이 정말, 정말 좋아요. 얼마나 웃긴데요! 아내가 특히 초반부는 코미디나 유머로 보라고 미리 귀띔해 줬는데, 그런 시선으로 읽으니 확실히 도움이 됐어요. 언어가 꽤 오래된 탓에 작가가 농담하고 있다는 걸 가끔은 알아채야 하긴 하지만, 분명히 농담이 있어요. 고래에 관한 정보도 전부 정말 좋았어요... 사실이 아닌데도요. 당시에도 사실로 여겨지지 않았고요.

  5. NetMageSCW HN

    그렇다면 알렉상드르 뒤마는 확실히 멀리하시는 게 좋겠네요.

  6. emil-lp HN

    그럼 내일 할 일이 정해졌네요!

    19시간입니다. 눈 깜빡이지 마세요.

  7. Zobat HN

    맞아요, 그런데 이건 거의 "쥬라기 공원"급으로 밀어붙였다고 봐야죠.

  8. unleaded HN

    고전 "P Diddy Calls Bjork"가 생각나네요. https://www.negrophonic.com/wp-content/uploads/2007/02/bjorkdiddy.gif

  9. Jakob HN

    정말 좋은 글입니다. 한 줄짜리 명령어와 재미 삼아 한 프로젝트를 보니 기분이 상쾌해지네요. 웹사이트의 글래머 모드도 훌륭하고요.

    다만 전통에 따라, cat의 쓸데없는 사용(UUOC) 사례는 반드시 짚고 넘어가야 합니다. 훨씬 효율적인 방법은 당연히 이렇습니다.

      tr '\n' ' ' < input.txt | tr -d '\r' | fold …
    
  10. coldpie HN

    이런 cat 사용은 쓸데없지 않습니다.

    가독성이 좋아지니까요. 셸 명령어는 왼쪽에서 오른쪽으로 읽으면서 파이프라인의 각 단계 논리를 하나씩 따라갑니다. 파일에서 시작해서 명령 1로 넘기고, 그걸 명령 2로 넘기는 식이 자연스럽습니다. 명령 1에 파일을 넣고, 파일보다 앞에 있는 명령 1의 출력을 가져다 명령 2에 넣는 식은 덜 자연스럽습니다.

    나중에 수정하기도 쉬워집니다. 명령 1의 입력을 바꾸고 싶다면 명령 1 왼쪽 부분만 고치면 됩니다. 그렇지 않으면 중간 어딘가에 박혀 있는 <를 찾아서, 그게 파일인지 다른 명령의 출력인지에 따라 지우고 어차피 왼쪽 어딘가에 다른 걸 넣어야 하니까요.

    파이프라인의 첫 단계로 cat을 쓰는 건 거의 항상 옳은 선택입니다!

  11. ktpsns HN
       <input.txt tr '\n' ' ' | tr -d '\r' | fold …
    

    이것도 유효한 bash이고 cat input.txt | tr ...과 똑같이 동작합니다.

  12. aarmot HN

    그러면 이제 멘토가 나타나서 글자 하나만 바꿔서 input*.txt 파일을 전부 소스로 쓰라고 하겠죠.

  13. cedilla HN

    cat 호출 한 번을 피하는 게 어떻게 "훨씬" 효율적이라는 거죠?

    뭔가 짚고 넘어가야 한다면, 의견을 보편 법칙으로 착각하는 쪽이라고 생각해요.

  14. lifestyleguru HN

    tr '\n' ' ' < input.txt | tr -d '\r' | fold …

    저는 요즘 누군가의 AI 에이전트가 만들어 낸 결과물을 읽는 것보다 이런 한 줄짜리 명령어를 찾아내고 해독하는 게 훨씬 즐거워요.

  15. lubujackson HN

    대부분 쓸모는 없지만 기발한, 사람이 손으로 쓴 글과 코드입니다.

    정말, 정말 상쾌하고 마음에 들어요.

  16. sodimel HN

    정말 훌륭한 글이에요! 간단한 도구 호출을 보여 주면서도 아주 짧아서(읽어야 할 긴 글 더미가 없어요) 좋아요. 감사합니다!

  17. noufalibrahim HN

    흥미롭고, 빠르고, 완전히 쓸모없기까지 하다니 이 얼마나 멋진 조합인가요. 아름답네요.

  18. tarsierscripter HN

    이거 정말 마음에 들어요! 88x31 버튼이란 말은 들어 본 적도 없었는데, 몇 개를 보자마자 어린 시절 "옛날 웹"에 대한 향수가 확 밀려왔어요.

    또 나이 얘기가 나오는 것 같지만, 저라면 이 글에서 Arial을 썼을 거예요. 최종적으로 고른 비트맵 글꼴보다 훨씬 읽기 편하거든요. 페이지당 11단어밖에 못 담는 만큼 애니메이션 속도를 높이면 전체를 적당한 시간 안에 끝낼 수 있었을 텐데요(19시간이 적당하게 느껴지신다면 모르겠지만요).

  19. skyyler HN

    Arial을 글자당 가로 3픽셀, 세로 5픽셀로 쓰면 보기 안 좋지 않을까요?

  20. tarsierscripter HN

    11단어밖에 안 들어가던 Arial 예시가 훨씬 읽기 쉬웠어요. 최종 결과물은 해상도 낮은 비트맵 글꼴로 된 작은 네 줄이라 거의 알아볼 수가 없었다고요!

  21. K2h HN

    글 맨 아래의 링크를 누르면 『모비 딕』 전체를 GIF 하나로 불러옵니다. iOS에서 재생하려면 길게 눌러서 '애니메이션 재생'을 선택하세요.

    ImageMagick은 1987년 존 크리스티(Cristy라고도 불림)가 듀폰에서 일하던 중에 C로 만들었습니다. https://en.wikipedia.org/wiki/ImageMagick

  22. wartywhoa23 HN

    글래머 모드를 켜 보시길 권해요. 좋은 의미로 정말 웃기거든요 :)

  23. jaffa2 HN

    마음에 드네요. 모든 웹페이지에 쓸 수 있는 범용 글래머 모드 플러그인은 없을까요?

  24. anthk HN

    영상으로 만들어 보세요.

       ffmpeg -i book.gif book.mpv
    
  25. Theodores HN

    저는 이 과제에서 꼼수를 쓰고 싶습니다. 책 전체를 HTML foreignObject로 담은 SVG 파일이 특유의 방식으로 스크롤되게 만들고, 그 SVG 파일 이름을 그냥 GIF라고 붙이는 거죠. 브라우저는 확장자를 무시하고 파일 헤더만 읽는다는 점을 이용해서요.

    제 꼼수 과제는 사람들을 속일 겁니다. SVG를 GIF 바이너리라고 믿을 테니까요.

    파일 크기는 훨씬 작아질 거고요.

    이렇게 속이고도 뻔뻔하게 거짓말을 밀어붙일 수 있는 재주라면 정부, 빅테크, 자동차, 아니면 '우주' 분야의 최고위직에 딱이겠죠.

  26. tdhz77 HN

    wasm으로 1kv 클럽에 도전했던 제 시도가 떠오르네요. 모든 면에서 끔찍한 선택이었어요.

  27. vladde HN

    빠질 수 없는 추천입니다. "The 88x31 GIF Collection: Part 1" https://cyber.dabamos.de/88x31/

  28. jwilk HN

    (2024)

  29. murni_ie HN

    브라보

Hacker News에서 보기 ↗