픽셀 대신 글자로 3D를 그린다 - 브라우저에서 돌아가는 아스키 렌더링 엔진

화면을 글자로 채워서 3D를 그린다고?

옛날 도스(DOS) 시절 컴퓨터를 써본 분들은 '아스키 아트'를 기억할 거예요. @, #, *, . 같은 글자들을 촘촘하게 배치해서 그림을 표현하던 거죠. 그런데 이번 프로젝트는 거기서 한참 더 나아갔어요. 정지된 그림이 아니라, 빙글빙글 돌아가는 진짜 3D 입체 그래픽을 오로지 글자만으로 실시간 렌더링하는 엔진이거든요. 그것도 별도 프로그램 설치 없이 그냥 웹 브라우저에서요.

어떻게 글자로 입체를 표현할까

3D 그래픽이 화면에 그려지는 원리를 아주 간단히 짚고 갈게요. 보통 3D 렌더링은 이런 단계를 거쳐요. 먼저 입체 모델은 수많은 삼각형(정점, vertex의 집합)으로 이루어져 있어요. 이 3차원 좌표들을 2차원 화면 좌표로 '투영(projection)'하고, 그 안을 색으로 채우는(rasterization, 래스터화) 과정을 거치죠. 여기까지는 게임이든 영화든 똑같아요.

이 엔진이 특별한 건 마지막 단계예요. 보통은 각 픽셀에 '색깔'을 칠하잖아요? 그런데 여기서는 픽셀 하나하나에 '글자'를 배치해요. 핵심 트릭은 밝기를 글자의 빽빽함으로 바꾸는 거예요. 이게 뭐냐면, 어두운 부분은 공백이나 점(.)처럼 듬성듬성한 글자로, 밝은 부분은 @나 # 처럼 빽빽하고 진한 글자로 표현하는 거죠. 멀리서 보면 우리 눈이 이 글자들의 농도 차이를 명암으로 읽어내서, 마치 진짜 입체처럼 느껴져요.

그래서 보통 .:-=+*#%@ 이런 식으로 '연한 글자 → 진한 글자' 순서로 늘어놓은 문자 팔레트를 미리 만들어두고, 계산된 밝기 값에 맞춰 글자를 골라 화면에 찍는 거예요.

CSS로 만들었다는 점

이름이 글리프 CSS(Glyph CSS)인 데서 짐작되듯, 이 프로젝트는 글자들을 그리는 데 웹 기술인 CSS를 적극 활용했어요. 보통 이런 작업은 캔버스(canvas, 그림판처럼 자유롭게 그릴 수 있는 웹 요소)에 직접 그리거나 WebGL(브라우저용 그래픽 가속 기술)을 쓰는데, 여기서는 글자 그 자체를 화면 요소로 다루면서 스타일을 입힌 거죠. 그래서 결과물이 '진짜 텍스트'예요. 마우스로 드래그하면 글자가 선택되는, 그런 텍스트요.

매 프레임마다 수천 개의 글자를 다시 계산하고 갱신해야 하니 성능 최적화가 관건이에요. 정점 변환과 밝기 계산을 효율적으로 돌리고, 화면 갱신을 매끄럽게 유지하는 게 이 엔진의 진짜 기술적 도전이죠.

업계 맥락에서

사실 아스키로 3D를 그리는 시도는 역사가 깊어요. 유명한 'donut.c'라는 코드가 있는데, C언어 단 몇 줄로 회전하는 도넛을 아스키로 그려내는 전설적인 데모예요. 또 영화 매트릭스의 떨어지는 초록 글자들도 비슷한 미학이고요. three.js 같은 본격 3D 라이브러리에도 아스키 효과 필터가 따로 있을 정도예요.

이런 프로젝트들의 공통된 매력은 '제약 속의 창의성'이에요. 수백만 색을 쓸 수 있는데도 일부러 글자 몇 개로만 표현하겠다는 제약을 거니까, 오히려 독특한 질감과 향수를 자극하는 분위기가 나오는 거죠.

한국 개발자에게

당장 업무에 쓸 일은 드물겠지만, 배울 점은 분명해요. 첫째, 3D 렌더링 파이프라인의 기본기를 아주 단순한 형태로 직접 구현해볼 수 있어요. 비싼 GPU 가속 없이 '정점 → 투영 → 명암 계산'이라는 본질만 떼어내서 공부하기에 딱이거든요. 그래픽스가 막연하게 어렵게 느껴졌던 분이라면, 이런 미니멀한 구현부터 따라가 보는 게 큰 도움이 돼요.

둘째, 포트폴리오나 사이드 프로젝트에서 '재미와 개성'을 보여주는 좋은 소재예요. 똑같은 기능도 이런 독특한 표현으로 감싸면 사람들의 시선을 확 끌거든요. 터미널 기반 도구나 로딩 애니메이션에 살짝 적용해도 멋지고요.

정리하면, 색을 버리고 글자만 남겼더니 오히려 더 인상적인 3D가 나온, '제약이 만든 아름다움'을 보여주는 프로젝트예요.

여러분은 '일부러 제약을 걸어서' 더 멋진 결과를 만들어본 경험이 있으세요?