블로그에 코드 붙일 때마다 아쉬워서 만든 Snippet Shot 📸

개발 블로그 쓰다 보면 코드 스크린샷이 늘 애매합니다. 에디터를 그냥 캡처하면 주변 UI가 지저분하게 딸려 오고, 코드 블록 그대로 올리면 SNS에서는 밋밋하고. carbon 같은 해외 서비스를 한동안 쓰다가, 어 이거 그냥 내가 만들면 되겠는데? 싶어서 만들었습니다. Snippet Shot입니다.

코드를 붙여넣으면 맥OS 윈도우 느낌 카드(빨강·노랑·초록 신호등 포함)에 그라데이션 배경을 깔아서 이미지로 만들어줍니다. 2x 고해상도 PNG로 다운로드도 되고 클립보드로 바로 복사도 돼요. 저는 복사 쪽을 더 자주 씁니다. 블로그 에디터에 바로 붙여넣으면 되니까요.

문법 하이라이트는 Prism 기반으로 13개 언어(JS, TS, Python, Java, Go, Rust, SQL 등등) 지원하고, 배경 그라데이션은 8종 중에 고릅니다. 패딩이랑 폰트 크기 슬라이더, 줄번호 토글, 둥근 모서리, 그림자, 다크/라이트 코드 테마... 처음엔 옵션이 서너 개였는데 쓰다 보니 "이것도 조절하고 싶은데"가 계속 나와서 자꾸 늘었습니다. 토이 프로젝트가 늘 그렇듯이요. 설정이랑 코드는 localStorage에 저장돼서 다음에 와도 그대로입니다.

기술적으로는 Next.js(App Router) + TypeScript + Tailwind v4에, 이미지 변환은 html-to-image가 다 해줍니다. DOM을 그대로 PNG로 떠주는 라이브러리라 캔버스에 직접 그리는 코드를 안 짜도 됐어요. 첫 화면에 샘플 코드가 미리 채워져 있어서 들어오자마자 결과물부터 구경할 수 있게 해뒀습니다.

하나 강조하고 싶은 건, 이거 100% 클라이언트에서 돕니다. 서버도 API도 없어서 붙여넣은 코드가 어디로도 안 나가요. 회사 코드 넣어도 됩니다. 사실 이것 때문에 직접 만든 것도 커요. 외부 서비스에 사내 코드 붙여넣는 게 늘 좀 찜찜했거든요.

폰트 얘기를 안 했네요. 코드 이미지는 결국 폰트가 절반이라, 고정폭 폰트가 흐릿하게 나오는 문제를 잡는 데 시간을 좀 썼습니다. 2x 해상도로 뽑는 것도 그래서예요. 트위터에 올리면 이미지가 한 번 압축되는데, 1x로 뽑으면 코드가 뭉개져서 읽기 힘들더라고요. 2x면 압축을 거쳐도 글자가 살아남습니다.

요즘 제 블로그의 코드 이미지는 전부 이걸로 만듭니다. 발표자료 만들 때도 쓰고요. 코드 이미지 자주 만드시는 분들은 북마크해두시면 은근 자주 손이 갈 겁니다.

• 라이브 데모: https://snippet-shot.vercel.app
• GitHub: https://github.com/seokjinjeong-cod/snippet-shot

덧. 만들고 나서 알았는데 이런 코드 이미지 도구들을 통틀어 code beautifier라고 부르더라고요. 저는 그냥 '코드 예쁘게 찍는 거'라고 불렀는데 말이죠. 뭐라고 부르든 결과물이 예쁘면 됐습니다. 여러분의 코드도 예쁘게 찍혀 나가길 바랍니다.