코드 스크린샷, 이왕이면 예쁘게 — Snippet Shot 만들었어요 📸
코드를 붙여넣으면 맥OS 윈도우 풍 카드 + 화사한 그라데이션 배경 이미지로 변신! PNG 저장·클립보드 복사까지 전부 브라우저에서 끝나는 코드 이미지 메이커예요.
자랑 포인트
- 100% 클라이언트 전용 — 서버·DB·외부 API 없이 브라우저 안에서만 처리돼 코드가 어디로도 새어나가지 않아요.
- html-to-image로 2x 고해상도 PNG 저장 + 클립보드 이미지 복사까지 한 번에 끝나요.
- Prism 문법 하이라이트 13종 + 그라데이션 배경 8종 + 맥OS 윈도우 카드로 코드가 작품이 돼요.
발표 자료나 블로그, 트위터에 코드를 그냥 붙이면 좀 밋밋하잖아요? 그래서 코드를 붙여넣기만 하면 자랑하고 싶어지는 예쁜 이미지로 만들어주는 Snippet Shot 을 만들어 봤어요. 코드를 넣으면 맥OS 윈도우 느낌의 깔끔한 카드 + 화사한 그라데이션 배경으로 단장해서, PNG로 저장하거나 바로 클립보드에 복사할 수 있답니다.
주요 기능
- 붙여넣고 바로 시작 — 큰 코드 입력창에 첫 화면부터 보기 좋은 샘플 코드가 채워져 있어서, 처음 들어와도 바로 결과물을 구경할 수 있어요.
- 문법 하이라이트 13종 — Prism 기반으로 JS·TS·JSX·TSX·Python·Java·Go·Rust·HTML·CSS·JSON·SQL·Bash까지 골라서 색을 입혀요.
- 맥OS 윈도우 카드 — 빨강·노랑·초록 신호등 점, 둥근 모서리, 은은한 그림자까지 들어간 그 감성 그대로예요.
- 그라데이션 배경 8종 — 선셋·오션·그레이프·라임·피치·캔디·미드나잇·오로라 중에서 취향껏 골라 화사하게.
- 세밀한 조절 — 여백(패딩)·폰트 크기 슬라이더, 줄번호·둥근 모서리·그림자 토글까지 손끝으로 만져가며 딱 맞게.
- 다크 / 라이트 코드 테마 — 블로그용은 라이트, 트위터용은 다크 이런 식으로 분위기 맞추기 좋아요.
- 2x 고해상도 PNG 다운로드 + 클립보드 이미지 복사 — html-to-image로 선명하게 뽑아서 저장하거나 그대로 붙여넣기.
- 자동 저장 — 설정이랑 코드는 localStorage에 저장돼서 다음에 와도 그대로예요.
기술 이야기
프레임워크는 Next.js(App Router) + TypeScript 로 잡았고, 스타일은 막 나온 Tailwind CSS v4 로 깔끔하게 처리했어요. 문법 하이라이트는 검증된 react-syntax-highlighter(Prism) 를 그대로 활용했고, 화면을 진짜 이미지로 바꾸는 핵심은 html-to-image 가 담당해요 — DOM을 그대로 PNG/Blob으로 떠주니까 별도 캔버스 그리기 코드 없이 깔끔하게 끝나더라고요.
무엇보다 신경 쓴 건 100% 클라이언트 전용 이라는 점이에요. 서버도 DB도 외부 API도 안 써요. 그래서 여러분이 붙여넣은 코드가 어디로도 새어나가지 않고, 전부 브라우저 안에서만 처리돼요. 사내 코드나 민감한 스니펫도 마음 편히 넣어보세요.
가볍게 만들기 시작했는데 만들수록 욕심이 생겨서 토글이랑 슬라이더가 점점 늘어났네요 😅 한번 써보시고 예쁜 코드 이미지 많이 만들어 가세요!
🔗 라이브 데모: https://snippet-shot.vercel.app
💻 GitHub: https://github.com/seokjinjeong-cod/snippet-shot