웹페이지에 넣는 애니메이션 ASCII 아트

AI 요약

ascii.rest는 웹페이지용 애니메이션 아트 196종을 모은 라이브러리입니다. 컬러 장면 13종과 로더, 차트, 글자, 언어별 로고 27종, Linux 배포판 22종, 3D 도형과 생물 표현 등이 포함됩니다. 각 요소는 의존성 없는 TypeScript 모듈로 제공하며 MIT 라이선스로 자유롭게 사용하고 수정할 수 있습니다.

웹페이지에 넣는 방법

일반 HTML에서는 ascii.js를 불러온 뒤 <ascii-art piece="donut"></ascii-art>를 작성하면 됩니다. 설치나 빌드 과정이 필요 없습니다. 스크립트가 커스텀 요소를 등록하고 필요한 장면을 가져옵니다. 화면에 보이는 동안 재생하며, 동작 줄이기 설정을 선호하는 사용자는 첫 프레임을 보게 됩니다.

React와 Next.js에서는 컴포넌트를 가져와 사용하거나 이름을 전달해 컴포넌트가 마운트될 때 장면을 불러올 수 있습니다. Astro는 서버에서 첫 프레임을 렌더링한 다음 스크립트가 준비되면 애니메이션을 재생합니다. TypeScript에서는 mount 함수로 <pre> 또는 컬러 장면용 <canvas>에 재생을 연결하고, 반환된 함수로 재생을 멈춥니다. 장면과 옵션, 프레임에는 타입이 지정돼 있습니다.

Hacker News 반응

• @lordkrandel — 정말 멋집니다.
• @kirth_gersen — 아름답습니다. 그런데 장면이 움직이지 않네요. 제가 뭔가 놓치고 있나요?
  • @crisnoble — 화면에 보이는 동안 재생하고, 동작 줄이기를 선호하는 사람에게는 첫 프레임을 보여준다고 합니다.
  • @herpdyderp — 강제로 재생하는 방법도 있으면 좋겠습니다.
  • @mapshog — 모바일에서만 되나요? Mac에서 Chrome, Safari, Firefox로 봤는데 움직이지 않습니다. 오류나 누락된 리소스도 없고 페이지는 다 불러왔습니다. 처음엔 흑백으로 보이다가 색이 빠르게 나타날 뿐입니다. 모바일에서는 정말 아름다운데 아쉽네요.
  • @bas3line — 죄송합니다. 지금 확인하고 있습니다.
  • @mapshog — 고쳐졌네요! 감사합니다.
• @robbomacrae — 정말 멋집니다. Claude Code와 Pi가 얼마나 작업 중인지 보여주는 작은 도구를 만든 적이 있습니다. 이 ASCII 아트를 보니 SSH로 접속하는 서버마다 장면을 넣어 현재 위치를 기억하고 싶었던 생각이 납니다. 지금은 서버에 SSH로 접속하지 않지만, 그랬다면 이 장면을 터미널용으로 다시 만들고 싶었을 겁니다.
  • @robbomacrae — PR은 언제든 환영합니다. 장면을 쉽게 추가하도록 만들었습니다. MIT 라이선스이니 가져다 쓰셔도 됩니다.
• @boguscoder — 보기에는 좋지만 이게 ASCII 아트인가요? 크기가 다른 점들이 보이는데 ASCII 문자는 아니지 않나요? 유니코드 아트라고 해야 하는 것 아닌가요?
  • @elevaet — 제대로 된 ASCII 작품도 많습니다. 예를 들어 julia-set 페이지를 확인해 보세요.
• @BugsJustFindMe — 시스템에서 동작 줄이기를 설정해서 애니메이션이 보이지 않습니다. 배려는 좋지만 데모 페이지에서 이유를 더 분명히 알려주면 좋겠습니다.
  • @BugsJustFindMe — 버튼을 추가해주셔서 감사합니다. 그래도 사용자가 왜 작동하지 않는지, 버튼을 눌러야 하는지 알 수 있게 이미지 바로 위나 아래에 눈에 띄는 안내문이 필요합니다. 첫 프레임을 보여준다는 설명은 묻혀 있고, 저도 설정이 켜져 있는지 몰랐습니다.
• @gavmor — 멋지고 인상적이지만, 기술적 제약을 받아들이지 않고 제약된 매체의 신뢰성만 빌려오는 장식처럼 느껴집니다. 예쁘긴 하지만 테슬라를 시트로엥 2CV처럼 보이게 개조하는 것과 비슷합니다.
  • @graypegg — ‘문자 기호로 만들어졌다’는 건 ASCII 아트의 느슨한 정의입니다. 색 대비에 기대는 모습은 세 종류의 문자로 입력을 점처럼 양자화하는 셰이더에 더 가까워 보입니다.
• @burmask — 계속 스크롤할수록 만든 사람이 얼마나 즐겁게 작업했을지 느껴져 더 놀랐습니다. Split-flap 장면도 멋지고, 자연 장면을 보니 디지털 액자에 띄워두고 싶어졌습니다. 편안한 분위기를 주는 아트입니다.

원문: Hacker News / 번역·요약: Trawling