피드로 돌아가기
I built a VS Code extension to capture terminal output as styled screenshots
Dev.toDev.to
Frontend

터미널 스크롤 출력 전체를 Carbon 스타일 스크린샷으로 — Cmd+Shift+S만 누르세요

I built a VS Code extension to capture terminal output as styled screenshots

Kushak Zohaad Jafry2026년 4월 1일2beginner

Context

복사-붙여넣기 시 터미널 테이블의 열 정렬과 box-drawing 문자가 깨지는 문제가 발생한다. 플랫폼 스크린샷 도구는 뷰포트 밖의 긴 출력을 캡처하지 못한다.

Technical Solution

  • VS Code 터미널 → 선택된 텍스트 감지
  • Carbon 이미지 렌더링 방식 적용
  • 11개 내장 테마(Dracula, Tokyo Night, Nord 등) 제공
  • 커스텀 테마 설정을 VS Code settings.json에서 정의
  • 실시간 미리보기 패널에서 폰트 크기, 패딩, 줄 번호, 창 테두리 조정 가능

Impact

숏컷 하나로 뷰포트 크기에 무관하게 수백 줄 출력 전체 캡처

Key Takeaway

복사-붙여넣기의 서식 손실 문제를 스크린샷 렌더링으로 우회하여 터미널 출력 공유의 근본적 한계를 해결했다


터미널 테이블, ASCII 아트, CLI 로그(kubectl, docker)를 공유할 때 Carbon 스타일 스크린샷으로 변환하면 가독성과 일관된 서식을 확보할 수 있다

원문 읽기