ANSI 스피너, 프로그레스 바, 데코레이션 — 모두 사라짐

Source: Dev.to

ANSI 애니메이션이란?

npm install 같은 명령을 실행하면 회전하는 점이나 부드럽게 업데이트되는 진행 바를 볼 수 있습니다. 이것이 ANSI 애니메이션—커서 이동 이스케이프 시퀀스를 사용해 같은 줄을 여러 번 다시 그리는 방식입니다. 터미널에는 하나의 애니메이션된 줄만 보이지만, 실제 출력은 커서 이동 코드가 섞인 수백 줄로 이루어져 있습니다.

스피너 작동 방식

스피너는 프레임을 반복해서 출력하고, 커서를 줄의 시작으로 이동한 뒤 다음 프레임을 출력합니다.

Print ⠋ Loading...
Move cursor to start of line (\x1b[G)
Print ⠙ Loading...
Move cursor to start of line
Repeat 200 times

터미널에는 하나의 부드러운 애니메이션이 보이지만, 실제 출력에는 커서 이동 코드와 섞인 200줄의 텍스트가 포함됩니다.

진행 바 예시

진행 바는 훨씬 더 많은 이스케이프 시퀀스를 생성합니다:

\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨░░░░░░░░░░░░░░░░░░░░⸩ 5%
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨█░░░░░░░░░░░░░░░░░░⸩ 10%
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨██░░░░░░░░░░░░░░░░░░⸩ 15%
... (17 more updates)
\x1b[2K\x1b[1A\x1b[2K\x1b[G⸨████████████████████⸩ 100%

각 업데이트마다 30바이트 이상의 이스케이프 코드가 추가되어, AI가 처리해야 할 중복된 줄이 많이 생깁니다.

단순 ANSI 제거만으로는 부족한 이유

ANSI 코드를 제거하면 시각적인 장식은 사라지지만, 중복된 줄은 그대로 남아 토큰 공간을 낭비합니다. 진정한 압축을 위해서는 커서 이동 코드에 의해 덮어쓰기된 줄을 collapse하여 각 줄의 최종 상태만 남겨야 합니다.

예시:

added 847 packages in 12s
💾 contextzip: 12,847 → 142 chars (99% saved)

이렇게 하면 애니메이션이 많은 출력에서 **최대 99 %**까지 절감할 수 있습니다.

ContextZip을 사용해 ANSI 출력 압축하기

contextzip은 이러한 애니메이션을 자동으로 collapse 할 수 있습니다:

cargo install contextzip
eval "$(contextzip init)"

또는 npx 로 실행할 수도 있습니다:

npx contextzip

Links

• GitHub repository:
• npm package: