웹 페이지용 움직이는 ASCII 아트

요약

웹 페이지에 넣을 수 있는 움직이는 ASCII 아트 191점이 MIT 라이선스로 공개됐습니다.

ascii.rest는 개발자 bas3line이 만든 오픈소스 라이브러리입니다. 풍경, 프로그래밍 언어 로고, 리눅스 배포판 로고, 물리 시뮬레이션 등 14개 분류의 애니메이션을 의존성 없는 TypeScript 모듈로 담았습니다.

왜 중요한가

태그 하나만 넣으면 설치나 빌드 없이 장식용 애니메이션을 페이지에 붙일 수 있습니다.
화면에 보일 때만 재생하고 동작 줄이기 설정을 따르게 해서, 장식 효과가 주는 성능·접근성 부담을 줄였습니다.

핵심 내용

스크립트 태그 하나와 ascii-art 요소만으로 쓸 수 있고, 따로 설치하거나 빌드할 필요가 없습니다.
React와 Next.js 앱 라우터에서는 컴포넌트로 쓰고, Astro에서는 첫 프레임을 서버에서 그린 뒤 재생합니다.
동작 줄이기(운영체제의 애니메이션 최소화 설정)를 켠 사용자에게는 첫 프레임만 멈춘 채 보여 줍니다.
컬러 작품은 캔버스에, 나머지는 텍스트 요소에 그리며, 재생을 멈추는 함수도 돌려줍니다.
컬러 풍경 13점, 언어 로고 27점, 배포판 로고 22점 외에 3D 도형, 프랙털, 차트 등이 있습니다.

HN 반응

크기가 다른 점과 색에 기대는 작품이 많아 ASCII 아트보다 셰이더에 가깝다는 지적이 많았고, 줄리아 집합처럼 진짜 ASCII 작품도 있다는 반론이 나왔습니다.
동작 줄이기 설정 탓에 움직임이 안 보인다는 이용자가 있어 작성자가 재생 버튼을 달았지만, 안내 문구가 더 눈에 띄어야 한다는 요청이 이어졌습니다.

30개 표시 · 전체 75개

burmask2일 전 HN

계속 스크롤을 내리는데, 만든 분이 이 라이브러리를 만들면서 얼마나 재미있었을지가 보여서 점점 더 감탄하게 됐습니다. Split-flap [ https://ascii.rest/split-flap/ ] 은 정말 훌륭하고요. 자연 테마 [ https://ascii.rest/fern/ ] 를 보고는 이걸 띄워 놓을 디지털 액자가 필요하겠다는 생각이 들었습니다. 멋진 벽 장식이 되겠어요. 이 ASCII들은 편안한 분위기를 줍니다. 다만 @ZeWaka 님의 그 덜덜 떨리는 스피너 페이지만 빼고요 :). 기여해 주셔서 감사합니다, 작성자님!
robbomacrae2일 전 HN

멋지네요! 저도 비슷한 걸 (훨씬 작은 규모로) 만들었어요. Claude Code/Pi가 얼마나 열심히 일하고 있는지 보여 주는 거예요. https://github.com/robdmac/flow

그런데 이 ASCII 아트를 보니 원래 하고 싶었던 게 생각나네요. SSH로 접속하는 서버마다 뭔가를 달아서, 내가 지금 어디에 있는지 머릿속 지도를 그리는 데 도움을 받고 싶었거든요. 지금은 서버에 SSH로 접속하는 일이 없지만, 아직 그랬다면 터미널에서 이 장면들을 다시 만들어 보려고 난리를 쳤을 거예요!

conesus2일 전 HN

Flow는 정말 멋지고 이 ASCII 아트 테마와 아주 잘 어울립니다. 설치해 봤는데 바꾸고 싶은 게 많아요. PR을 받아 주시나요, 아니면 업스트림에 반영될 거라 기대하지 말고 제 포크를 따로 운영할까요?

바꾸고 싶은 점의 예시입니다.

    1. I want a decay on the flame, so on every state change, the flame slowly works its way back down to a base rate, say at 2 minutes. That would imply that a strong fire is a recently changed state, while a decayed flame is a stale state that hasn't changed in a while.
    2. Automatic choosing of a different animation on every open. I run half a dozen to a dozen agents on a single terminal window (full screened on a 27" monitor) and I already built a way to distinguish sessions from other other with my pre-plugin psuedoterminal crabigator and I'd like to do the same for these animations. Basically a way to distinguish sessions from other other.
    3. More so than just changing animations, I'd like to have a random palette chosen per-animation, so there's multiple flames, but there's the purple-esque flames, the blue-esque flames, the red ones, the orange ones, the yellow ones, and so on.
    4. I'd like a way to integrate the plugin into crabigator so its takes a single section instead of being full width.

아무튼 아주 멋진 모드입니다. 어릴 때 좋아했던 90년대 초중반 MUD 해킹 같은 느낌이 나서 반가웠고, 당장 제 작업 흐름에 훔쳐다 끼워 넣을 생각입니다.

참고로 저도 예전에는 서버마다 다른 ASCII 아트 이미지를 걸어 뒀습니다. 몇 개 골라 보면 이렇습니다.

https://github.com/samuelclay/NewsBlur/blob/main/ansible/roles/base/files/motd.db.txt https://github.com/samuelclay/NewsBlur/blob/main/ansible/roles/base/files/motd.app.txt https://github.com/samuelclay/NewsBlur/blob/main/ansible/roles/base/files/motd.task.txt

robbomacrae2일 전 HN
감사합니다! 서버 아트를 만드셨다니 정말 좋네요!

PR은 얼마든지 환영입니다. 직접 장면을 쉽게 추가할 수 있게 만들려고 했어요. MIT 라이선스이기도 하니 마음껏 가져다 쓰세요.
1. 네, 맞는 말씀이에요. 단계 진행은 거의 손을 못 봤고 손볼 데가 정말 많습니다. 로켓 테마는 지금은 끝날 때까지 일직선으로만 진행되는데, 말하자면 울퉁불퉁한 비행 가능성도 주고 싶어요.
2. 네, 물론이죠. 원래 서버 아이디어로 돌아가 보면, 세션마다 특정 장면(또는 무작위 장면)을 지정하는 설정은 오히려 꼭 필요할 것 같아요.
3. 좋아요! 마침 색상 팔레트를 생각하고 있었어요. 회사나 국기 색 같은 거요.
4. https://github.com/samuelclay/crabigator https://drinkcrabigator.com 저처럼 다른 분들이 찾아보는 수고를 덜도록 적어 둡니다. 멋져 보이네요, 해 보세요!
진행 중인 다른 기능들도 있으니 이것들은 PR로 올려 주셔도 좋습니다. 안 그러면 언젠가 제가 설정이나 색상 팔레트 쪽을 하게 될 수도 있고요.

감사합니다!
gavmor2일 전 HN

멋지고 인상적이고 잘 만들었습니다만,

제 눈에는 기술적 절제를 흉내 낸 것처럼 보입니다. 제약이 있는 매체의 신뢰도만 빌려 왔을 뿐, 그 제약을 받아들이지는 않았다는 거죠.

다시 말하지만 정말 예쁩니다. 그래도 테슬라를 Citroën 2CV처럼 보이게 개조해 놓은 느낌이에요.
dspillett1일 전 HN

동감합니다. 색을 아예 허용하더라도 사람들이 흔히 떠올리는 건 6가지 색의 밝고 어두운 두 단계에 검정, 흰색, 회색 2개를 더한 정도의 제한인데, 이건 훨씬 자유로운 색을 쓰고 있는 것 같습니다. 게다가 애니메이션 효과를 내려고 이렇게 화면 가득한 텍스트를 통째로 계속 갱신하면, 그 시대의 하드웨어 상당수에서는 꽤 깜빡거렸을 겁니다(요즘 일부 콘솔·터미널 앱에서도 마찬가지고요).

그래도 이건 여전히 아주 예쁩니다. 위에서 말한 점에도 불구하고, 충분히 복고풍 느낌이 나서 기분 좋은 향수를 불러일으킨다고 생각합니다.
graypegg2일 전 HN

와, 저도 같은 생각이었는데 훨씬 더 맛깔나게 표현하셨네요.

'텍스트 문자로 만들었다'는 건 ASCII 아트를 아주 느슨하게 정의한 겁니다. 시각적으로 흥미롭지 않다는 얘기는 아니고, 사람들이 'ASCII 아트' 하면 떠올리는 것의 분포로 보면 아주 끄트머리에 있다는 뜻이에요.

개인적으로는 명암을 색에 의존한다는 점 때문에, ASCII 아트라기보다 입력을 작은 점으로 양자화하는 셰이더인데 그 점이 하필 세 가지 문자 중 하나일 뿐인 것 같습니다. 그것과 ASCII 셰이더, 그리고 ASCII 아트 사이의 경계는 모호하지만, 그 봉우리들 사이에는 분명히 잴 수 있는 거리가 있어요.
wuliwong2일 전 HN

그럼 뭐라고 불렀어야 한다고 보세요? 낯선 용어를 썼다면 거의 아무도 링크를 누르지 않았을 테고, 그러면 HN 상위권에도 못 올랐을 테고, 우리 중 누구도 이게 있는지조차 몰랐을 거예요. 이 페이지를 볼 수 있다면 ASCII 아트를 느슨하게 정의하는 정도는 받아들일 수 있을 것 같아요.

(=ᵔᗜᵔ=)
graypegg2일 전 HN

아뇨, 새 용어까지는 필요 없어요. 그냥 그 용어가 가리키는 범위의 가장자리에 있다는 거죠.

저라면 'ASCII 아트에서 영감을 받은 셰이더'라고 부르겠지만, 어떤 사람들은 보자마자 헷갈리지 않고 'ASCII 아트'라고 부를 거고, 또 어떤 사람들은 'ASCII 아트에서 영감을 받았다'는 말조차 코웃음 칠 거예요.

이 작은 프로젝트에 불만이 있는 건 아니라는 점은 말씀드려야겠네요! 제 생각에도 이건 ASCII 아트의 한계를 슬쩍 암시할 뿐 실제로 그 한계 안에서 작업한 건 아니라고, 윗 댓글에 동의하는 것뿐입니다. 예술을 감상하는 데는 예술을 곰곰이 생각해 보는 게 중요한 단계니까요.
ghurtado2일 전 HN

그러니까 홍보하려면 실제와 다르게 포장해도 괜찮고, 솔직하게 말하면 아무도 관심을 안 가질 테니까 그래도 된다는 말씀이세요?
frabia2일 전 HN

동의합니다. 요즘 UI 디자인 트렌드가 그렇기도 하고요. 말씀하신 대로 목적은 딱 그겁니다. 예전에는 이런 시각 요소가 가졌던 가치(느리게 공들이는 장인정신, 노력 같은 것)를 오늘날의 제품에 투영해 보려는 거죠.
boguscoder2일 전 HN

보기엔 예쁜데, 이건 ASCII 아트가 아닌 것 같은데요? ASCII가 어디 있죠? 저 크기가 제각각인 점들은 ASCII 문자가 아니잖아요. 유니코드 아트라면 모를까요?
elevaet2일 전 HN

진짜 ASCII로 된 것도 많이 있습니다. 예를 들면 https://ascii.rest/julia-set/ 를 보세요.
moralestapia2일 전 HN

말씀하신 점은 맞습니다. 다만 ASCII에도 크기가 다른 점 같은 문자가 이미 있으니, 이것들을 ASCII 버전으로 만드는 건 별로 어렵지 않을 거라는 점만 덧붙입니다.
ghurtado2일 전 HN

문제는 그렇게 말씀하시면 더는 'ASCII 아트'의 쓸모 있는 정의가 아니라는 겁니다. 그건 그냥 '점으로 그린 그림'이죠. '기술적으로는' ASCII라는 사실은 감흥도 없고 중요하지도 않습니다.

'ASCII 아트'를 솔직하게 정의하면 '제한된 ASCII 문자만 쓴 아트'입니다.
mynameisvlad2일 전 HN

그럼 어서 직접 trueascii.rest를 만들어서 다 같이 보게 해 주시죠.
ghurtado2일 전 HN

그렇게까지 원하신다면요.

https://github.com/garciahurtado/ascii-art-studio

그쪽 건 어디 있습니까?
nomel2일 전 HN

이것도 ASCII 아트가 아니에요. 정보 대부분이 색에 들어 있잖아요. 이런 건 예전에 ANSI 아트라고 불렀죠 [1].

[1] https://en.wikipedia.org/wiki/ANSI_art
ghurtado2일 전 HN

엄밀히 말하면 PETSCII 아트입니다. 다만 모델은 어떤 비트맵 문자셋으로든 학습시킬 수 있어요. 그러니 ATARIART든 SPECCYART든 뭐든 만들 수 있습니다.

그리고 정보 대부분이 색에 있다는 말은 맞지 않습니다.

README에 설명이 있는지는 기억이 안 나는데, 다른 변환기와 다른 점은 원본 이미지의 1비트 8x8 블록을 가장 잘 맞는 문자에 대응시켜서 출력 이미지의 체감 해상도를 높인다는 것입니다.

심심풀이로 구현해 보고 싶었던 시시한 아이디어이고, 비슷한 도구들보다 낫지도 못하지도 않습니다. 하지만 제가 아는 한 접근법은 새롭습니다. 직접 학습시킨 NN을 써서 빠르고, 결과물도 사람 작가가 손으로 만든 것 같은 독특한 모습이거든요.
econ2일 전 HN

딱히 이유는 없지만, 제가 제일 좋아하는 작품을 하나 공유할게요. 작가는 알 수 없습니다.

\o/__/__

제목은 Help shark예요.
emmelaich2일 전 HN
프랭크 자파의 앨범 "Ship_Arriving_Too_Late_to_Save_a_Drowning_Witch"가 떠오르네요.
```
    ---7
       /
      /
     /        /\
    /________/  \__
```
https://en.wikipedia.org/wiki/Ship_Arriving_Too_Late_to_Save_a_Drowning_Witch

위키백과 문서에서 가져온 링크입니다: https://en.wikipedia.org/wiki/Droodles 흥미롭네요!
ktm5j2일 전 HN

이런 상황에 이렇게 준비가 되어 있었다니, 정말 마음에 드네요.
nomel2일 전 HN

불가능한 걸 요구하시네요!
bredren2일 전 HN

멋지네요. 제가 처음 온라인에 한 기여 중 일부가 동네 전화 접속 BBS에 올린 것이었습니다. 게시판 테마에 맞춘 움직이는 ASCII 시퀀스를 만드느라 며칠씩 통째로 보내곤 했죠.
arikwald2일 전 HN

아름답네요! 알고리즘으로 숫자를 예술로 바꾼다는 게 바로 이런 거죠. 코드를 살펴봤는데 정말 인상적이었습니다. 궁금한 건, 모든 값이 이미 들어 있는 "비트맵 같은" 파일을 미리 정의해 두고, 그걸 불러온 다음 특정 변형·애니메이션 알고리즘을 적용해서 이런 독특한 효과를 만들어 내신 건가 하는 점입니다. 80년대 컴퓨터의 매혹적인 게임 그래픽이 떠오르네요 :). 그 시절에도 이런 그래픽에 푹 빠졌었는데, 지금도 그렇습니다 :)
smusamashah2일 전 HN

이걸 보니 또 다른 멋진, 진짜 ASCII 애니메이션 라이브러리가 생각나네요. https://play.ertdfgcvb.xyz/
thih92일 전 HN

'장면(Scenes)'은 디더링을 에둘러 시도한 것처럼 보여서 기대했던 것과는 달랐어요.

나머지도 지나치게 화려하고 장식적입니다. 애니메이션으로는 좋지만 UI나 TUI의 일부로 쓰고 싶지는 않아요.
melicerte1일 전 HN

https://ascii.rest/#ui
5-02일 전 HN

요즘 젊은 분들이나 처음 접하는 분들은 늙다리들이 왜 이렇게 깐깐하게 구는지 궁금하실 텐데요, 옛날에 "ASCII 아트"는 바로 이런 걸 뜻했습니다: https://asciiarena.se
kirth_gersen2일 전 HN

아름답네요. 그런데 작품들이 움직이는 게 안 보여요. 제가 뭔가 놓친 걸까요?

Hacker News에서 보기 ↗