글자로 그림을 그린다는 것
ASCII 아트는 다들 한 번쯤 보셨을 거예요. 키보드에 있는 @, #, *, . 같은 기호를 조합해서 그림을 그리는 방식인데요. 그래픽을 마음껏 쓰기 어렵던 인터넷 초창기에는 게시판, 이메일 서명, 프로그램 시작 화면 같은 곳에서 정말 많이 쓰였어요. 그런데 요즘 이게 웹에서 다시 자주 보이거든요.
ascii.rest는 이 ASCII 아트를 움직이는 애니메이션으로 만들어서 웹 페이지에 넣을 수 있게 해주는 도구예요. “그냥 GIF나 동영상을 넣으면 되지, 왜 굳이 글자로 해요?” 싶으실 수도 있어요. 그런데 막상 들여다보면 글자로 그리는 방식에만 있는 장점이 꽤 있어요. 오늘은 ASCII 애니메이션이 어떻게 동작하는지, 그리고 웹에 넣을 때 무엇을 챙겨야 하는지 같이 살펴볼게요.
이미지가 글자로 바뀌는 원리
ASCII 아트 변환의 핵심은 생각보다 단순해요. 한마디로 밝기를 글자로 바꾸는 것이거든요.
이미지를 바둑판처럼 작은 칸(셀)으로 나눈다고 생각해보세요. 칸마다 평균 밝기를 구하고, 그 밝기에 맞는 글자를 하나씩 골라 넣는 거예요. 칸을 많이 채우는 @나 #은 진한 칸이 되고, 거의 비어 보이는 .이나 공백은 옅은 칸이 되는 식이죠. 이렇게 진하기 순서대로 늘어놓은 글자 목록을 흔히 램프(ramp)라고 불러요. 코드로 보면 이 정도예요.
const ramp = ' .:-=+*#%@';
const ch = ramp[Math.floor(brightness * (ramp.length - 1))];
brightness는 0에서 1 사이의 값이에요. 이 예시는 검은 배경에 밝은 글자를 쓰는 경우라서 밝은 칸일수록 진한 글자가 나와요. 흰 배경을 쓴다면 램프 순서만 뒤집으면 돼요.
애니메이션은 이 작업을 프레임마다 반복하는 거예요. 영상이나 3D 장면을 한 장씩 렌더링하고, 그걸 글자 격자로 바꿔서 화면에 계속 갈아 끼우는 거죠. 어릴 때 공책 모서리에 그리던 플립북이랑 원리가 똑같아요.
웹에서는 어떻게 그릴까
웹에서 ASCII 애니메이션을 보여주는 방법은 크게 두 가지예요.
첫 번째는 <pre> 태그에 텍스트를 넣는 방식이에요. <pre>는 공백과 줄바꿈을 그대로 보여주는 HTML 태그라서, 고정폭 글꼴(모든 글자가 같은 너비를 차지하는 글꼴)과 같이 쓰면 격자가 딱 맞아요. 프레임마다 내용을 바꿔주면 그대로 애니메이션이 되고요. 진짜 텍스트라서 드래그해서 복사할 수 있고, 확대해도 깨지지 않아요.
두 번째는 <canvas>에 글자를 직접 그리는 방식이에요. 화면에 그릴 글자가 수천 개로 늘어나면 프레임마다 DOM 텍스트를 바꾸는 게 부담이 될 수 있거든요. 그래서 캔버스에 글자를 찍거나, 아예 WebGL 셰이더(GPU에서 돌아가는 작은 그리기 프로그램)로 처리하기도 해요. 훨씬 빠르지만, 대신 텍스트를 선택하거나 복사할 수는 없어요.
직접 만들어보실 분들은 이것 하나 꼭 기억해두세요. 글자는 보통 가로보다 세로가 길잖아요? 그래서 이미지를 정사각형 칸으로 나눠 변환하면 결과물이 세로로 쭉 늘어나 보여요. 대부분의 변환 도구가 셀 비율을 대략 1:2 정도로 잡는 게 바로 이 왜곡을 보정하기 위해서예요.
왜 하필 지금 ASCII일까
요즘 개발자 도구나 AI 서비스의 랜딩 페이지를 보면 터미널 느낌의 디자인이 정말 많아요. 검은 배경에 고정폭 글꼴, 깜빡이는 커서, ASCII로 그린 로고나 빙글빙글 도는 3D 오브젝트 같은 것들이요. 개발자를 상대로 하는 제품이라면 “우리도 당신처럼 터미널에서 일하는 사람들이에요”라는 메시지를 전하기 좋은 스타일이거든요.
기술적인 장점도 확실해요. 텍스트 기반이라 고화질 동영상보다 훨씬 가볍고, 글자색과 배경색을 CSS로 바로 바꿀 수 있어서 다크 모드에 맞추기도 쉬워요. 화면 해상도가 어떻든 선명하게 보이는 것도 장점이고요.
이런 도구가 이전에 없었던 건 아니에요. 3D 그래픽 라이브러리 Three.js에는 장면을 ASCII로 출력하는 AsciiEffect가 예제로 들어 있고, 터미널에서 동영상을 ASCII로 재생하는 프로그램도 오래전부터 있었죠. 다만 대부분은 코드를 직접 짜서 붙여야 했어요. ascii.rest 같은 도구는 이 과정을 웹 페이지에 바로 붙일 수 있는 형태로 만들어서 시작하기 쉽게 해줬다는 데 의미가 있어요.
한국 개발자가 써먹을 수 있는 곳
당장 써볼 만한 곳은 생각보다 많아요. 무거운 히어로 영상 대신 ASCII 애니메이션을 넣은 사이드 프로젝트 랜딩 페이지, 사용자가 잠깐 머무는 404 페이지나 로딩 화면, 직접 만든 CLI 도구의 소개 페이지 같은 곳이요. 터미널 도구라면 웹사이트도 같은 톤으로 맞췄을 때 통일감이 확 살아나요.
다만 챙겨야 할 것도 있어요.
- 접근성: 스크린 리더(시각장애인이 쓰는 화면 읽기 프로그램)가 ASCII 아트를 만나면 기호를 하나하나 다 읽어버릴 수 있어요. 장식용이라면
aria-hidden속성으로 숨기고, 의미가 있는 그림이라면 대체 설명을 따로 달아주세요. - 움직임 줄이기 설정: OS에서 ‘동작 줄이기’를 켜둔 사용자를 위해 CSS의
prefers-reduced-motion미디어 쿼리로 애니메이션을 멈춰주는 게 좋아요. - 모바일 대응: 화면 폭이 좁으면 줄바꿈이 생기면서 격자가 무너지기 쉬워요. 화면 크기에 맞춰 글자 크기나 열 개수를 조절해야 해요.
- 한글 주의: 한글은 고정폭 글꼴에서도 보통 영문 두 칸 너비를 차지해요. ASCII 아트 안에 한글을 섞으면 줄이 쉽게 어긋나니까, 그림은 영문 기호로만 만들고 한글 설명은 그림 밖에 두는 게 안전해요.
마무리
한 줄로 정리하면, ASCII 애니메이션은 ‘밝기를 글자로 바꾼다’는 단순한 원리로 가볍고 개성 있는 웹 비주얼을 만드는 방법이에요. 그냥 레트로 감성으로 보고 넘기기엔 실용적인 장점이 꽤 커요.
여러분은 어떠세요? 서비스 페이지에 이런 터미널 느낌의 디자인을 써본 적 있으신가요? 아니면 개발자 대상 제품에서만 잠깐 통하는 유행이라고 보시나요? 의견 들려주세요!
🔗 출처: Hacker News