CodeShot: 3D 효과가 있는 코드 스크린샷

코드샷: 스타일리시한 코드 스크린샷을 만드는 웹 도구

CodeShot은 오픈소스 웹 서비스로, 코드와 텍스트를 시각적으로 강렬한 이미지로 변환하는 도구입니다. 고급 변형 컨트롤을 통해 완성도 높은 출력물을 생성하며, 브라우저 내에서만 작동합니다. Canvas API를 활용하고 설정 정보는 localStorage에 저장되며, LLM(Claude)의 도움을 받아 카본이나 유료 대안에서 겪는 한계를 극복했습니다.

이 도구는 구문 강조된 코드와 일반 텍스트 모두 지원합니다. 주요 기능으로는 3D 효과(기울기, 회전, 원근감), 사용자 정의 블러, 필터, 그림자, 개별 색상으로 선택적 강조 등이 있습니다.

핵심 맞춤형 기능

도구는 시각 요소에 대해 세밀한 제어를 제공합니다. 전체 기능 목록:

• 콘텐츠 지원: 구문 강조 코드(테마 포함) 또는 일반 텍스트(표준 폰트).
• 타이포그래피: 글꼴 크기, 줄 간격, 텍스트 정렬.
• 윈도우 및 패딩: 윈도우 스타일 프레임, 패딩, 테두리 반경, 줄 번호.
• 배경 및 투명도: 그라디언트, 단색, 윈도우 투명도 조절.
• 변형: 회전, 3D 기울기(수직/수평), 원근감(모서리 압축).
• 효과: 블러(방향, 강도), 그림자, 광원 위치.
• 필터: 인스타그램 스타일(따뜻함, 차가움 등)로 강도 조절 가능.
• 강조 표시: 선택한 텍스트 범위에 대한 색상과 투명도 지정.
• 내보내기: 브라우저에서 직접 PNG/SVG 다운로드.

모든 변경 사항은 localStorage를 통해 지속되며, 반복 작업이 빠르고 자연스럽습니다.

기술적 구현

순수 자바스크립트 + Canvas2D로 구현되었습니다. 초기 렌더러(~1,000줄)는 LLM이 생성했으며, 이후 VS Code에서 Copilot 지원 하에 수작업으로 최적화했습니다.

해결한 주요 과제:

• 3D 원근감: 기울기와 모서리 확대를 위한 커스텀 투영 행렬.
• 구문 강조: Prism.js를 참고한 하이라이트 기능, 테마 지원.
• 필터: 픽셀 조작을 통한 CSS filter() 에뮬레이션(블러는 컨볼루션 처리).
• 성능: 미리보기용 오프스크린 캔버스, 리사이즈 타이밍 제한.

코드는 가독성을 우선하지 않으며, 기능 중심으로 설계되었습니다. 공개 저장소는 기여를 환영합니다.

예시 변환: 상좌측 40° 기울기, 깊이 30°, 따뜻한 필터 + 오른쪽 페이드. 출력물은 DALL-E나 Stable Diffusion보다 텍스트 렌더링 정확도에서 우수합니다.

대안과 비교

| 도구 | 3D 기울기 | 사용자 정의 블러 | 필터 | 강조 색상 | 무료 |

|------|--------|-------------|---------|-----------------|------|

| Carbon | 아니요 | 아니요 | 기본 | 아니요 | 예 |

| Ray.so | 아니요 | 아니요 | 예 | 아니요 | 유료 |

| CodeShot | 예 | 예 | 예 | 예 | 예 |

CodeShot은 구독 없이도 최고의 맞춤형 옵션을 제공합니다. 단점은 서버 측 렌더링 없이 클라이언트 전용이라는 점입니다.

주니어 개발자부터 시니어까지: 내부에서는 행렬 변환(아핀 + 원근), 캔버스 컴포지팅을 통한 프래그먼트 쉐이더를 활용합니다. 중급 GPU에서도 4K 해상도까지 부드럽게 확장됩니다.

왜 중요한가?

• 완전히 클라이언트 사이드 처리: 백엔드 없이 즉각적인 미리보기.
• 고급 3D 기하학: WebGL 없이도 기울기/원근감 구현.
• 설정 지속성 + 공유 가능한 URL(쿼리 파라미터 기반).
• 오픈소스: 깃허브 저장소에서 포크 및 개선 가능.
• LLM 지원: Claude가 3회 내에 약 80%의 코드를 생성.

— Editorial Team