WebGL와 GitHub Copilot을 사용한 레트로 CRT 터미널 웹사이트 구축 (Claude Opus 4.5)

Source: Dev.to

Introduction

휴일 동안 cool-retro-term이라는 오픈소스 터미널을 발견했는데, 이는 오래된 캐소드‑레인 튜브(CRT) 디스플레이의 모습을 흉내냅니다. 레트로 SF 분위기가 Alien과 Fallout 세계를 떠올리게 했고, 개인 웹사이트에도 비슷한 느낌을 주고 싶었습니다.

원본 프로젝트는 제가 익숙하지 않은 QML과 C++로 작성되어 있습니다. WebGL이나 Emscripten을 이용해 웹 기술로 포팅할 수 있을지 궁금했죠. GitHub Copilot은 기술적 난이도가 낮아 보인다는 이유로 WebGL 경로를 제안했습니다.

Approach

Three.js를 다뤄본 경험이 있어, 먼저 Claude에게 Three.js로 정적 CRT 프레임을 구현하도록 요청했습니다. 터미널 에뮬레이션은 일단 제외하고, 복잡성을 최소화한 튼튼한 기반을 마련했습니다.

Adding Text

그 다음 Claude에게 Three.js 씬 안에 레트로 폰트를 사용해 하드코딩된 파일의 기본 텍스트를 렌더링하도록 지시했습니다.

Visual Effects

원본 OpenGL 셰이더에서 시각 효과를 WebGL로 마이그레이션했습니다. 포함된 효과는 다음과 같습니다:

• Bloom – 밝은 영역이 주변 픽셀로 번지는 발광 효과
• Brightness – 전체 밝기 조절
• Chroma Color – 형광 특성을 모방하는 색상 틴팅
• RGB Shift – CRT 색상 정렬 오류를 흉내내는 색채 채널 약간의 분리
• Screen Curvature – 곡면 유리 모니터를 시뮬레이션하기 위한 이미지 왜곡
• Burn‑In – 화면에 정적인 이미지가 오래 남아 형광이 타는 현상 시뮬레이션
• Flickering – 실제 CRT 디스플레이와 같은 미세한 밝기 변동
• Glowing Line – 화면을 가로지르는 스캔 빔 효과
• Horizontal Sync – 이미지 왜곡을 일으키는 수평 동기화 문제 시뮬레이션
• Jitter – 신호 불안정을 흉내내는 작은 무작위 움직임
• Rasterization – CRT 특유의 스캔 라인 표시
• Static Noise – 애니메이션 노이즈/그레인

이 단계에서 화면 반사 위치 오류와 같은 시각 버그가 발생했습니다. Claude와 반복적인 시도·오류 과정을 통해 새로운 문제를 만들지 않으면서 해결했습니다.

Terminal Emulation

프레임과 효과가 정상 동작하게 되면, 하드코딩된 텍스트를 Xterm.js의 출력으로 교체했습니다. Xterm.js는 Visual Studio Code와 같은 도구에서 사용되는 웹 기반 터미널 프론트엔드입니다. 실제 백엔드 터미널은 필요 없었으므로, Claude에게 clear, ls, cd, cat 같은 기본 명령을 지원하는 간단한 에뮬레이터를 만들도록 요청했습니다.

Games

터미널이 완성되자, 텍스트 기반 게임을 추가해 경험을 확장했습니다:

• Pong
• Tetris
• Snake
• Minesweeper
• Space Invaders
• Arkanoid

대부분의 게임은 첫 시도에서 바로 정상 동작했으며, 몇몇은 작은 시각적 결함이 있었지만 Claude에게 문제를 설명하면 빠르게 수정되었습니다.

Audio and Video Support

터미널에서 ffplay처럼 오디오·비디오 파일을 재생하고 싶었습니다. Claude는 이전에 만든 모든 CRT 효과를 적용해 비디오를 렌더링하는 ffplay 명령을 구현했습니다.

Refactoring and Publishing

마지막 단계에서는 코드를 다음과 같이 분리했습니다:

• Library code – WebGL 레트로 터미널 렌더러
• Application code – 터미널 에뮬레이터와 게임

Claude는 렌더러를 독립적인 npm 모듈로 리팩터링했으며, 한 번의 시도로 작업을 마무리했습니다.

Results and Cost

• 전체 구현 시간: 10–15 시간
• LLM 없이 진행했다면 몇 주가 걸렸을 것임.
• Copilot 사용량: 월간 Business 토큰 할당량의 약 50 % (월 $21), 전체 프로젝트 비용은 대략 $10.50.
• 비용 절감과 속도는 특히 셰이더 프로그래밍 같은 익숙하지 않은 기술을 다룰 때 LLM이 개발 도구로서 얼마나 강력한지를 보여줍니다.

Links

• Live demo:
• Source code: