렌더링 미리보기
스타일 설정
클라우드 프리셋 확인 중…
코드를 공유용 이미지로 만드는 방법
Snippet Studio는 코드 블록을 PNG나 SVG로 저장할 수 있는 스타일 카드로 렌더링하고, JavaScript·TypeScript·JSX·Python·CSS·JSON·YAML·CSV 문법을 강조해 줍니다. 카드는 브라우저 탭에서 벡터로 그려지므로 코드가 기기를 떠나지 않고, 내보낸 SVG는 어떤 크기에서도 글자가 선명합니다.
네 단계로 코드 이미지 만들기
- 코드 붙여넣고 언어 선택소스 패널에 입력하거나 붙여넣고 언어를 골라 강조 표시를 맞춥니다. 언어마다 넣어볼 수 있는 샘플이 있고, 이미 쓴 코드를 대체할 때는 먼저 확인을 받습니다.
- 카드 스타일 지정에디터 테마와 배경 프리셋을 고르고, 창 장식을 macOS·Windows·없음 중에서 정합니다. 제목 표시줄에 파일명을 넣을 수도 있습니다.
- 타이포그래피와 테두리 조정글꼴, 글자 크기, 여백, 모서리 반경을 정하고 줄 번호를 켜거나 끕니다. 조절할 때마다 미리보기가 다시 그려지며, 스크립트를 실행할 수 없는 샌드박스 프레임 안에서 표시됩니다.
- PNG 또는 SVG로 내보내기PNG는 메신저·발표 자료·이슈 트래커에 적합합니다. SVG는 어떤 화면에서도 선명하고 나중에 색이나 크기를 바꿀 수 있습니다. 카드에서 소스 코드를 다시 복사할 수도 있습니다.
Snippet Studio를 쓰는 상황
- 코드 리뷰나 버그 리포트에 첨부들여쓰기가 깨지는 맨 붙여넣기 대신, 논의 중인 정확한 줄을 강조된 이미지로 읽기 좋게 첨부합니다.
- 발표 자료와 문서 도판 만들기SVG로 내보내면 발표 화면에 띄우거나 문서를 인쇄할 때 스크린샷처럼 흐려지지 않고 선명하게 남습니다.
- 다른 도구의 포맷 결과 보여주기Data Formatter에서 포맷한 JSON·YAML·CSV를 그대로 이어받아, 한 단계로 카드 형태로 꾸밉니다.
Snippet Studio 자주 묻는 질문
- 코드가 어디로 업로드되나요?
- 아니요. 강조 표시와 렌더링이 브라우저 탭에서 실행되고, 프리셋을 저장하기로 선택한 경우에만 시각 스타일 설정이 동기화됩니다. 소스 코드·파일명·렌더된 이미지·클립보드 내용은 로컬에 남습니다.
- 어떤 언어가 문법 강조를 지원하나요?
- JavaScript, TypeScript, JSX, Python, CSS, JSON, YAML, CSV입니다. 그 밖의 언어도 실패하지 않고 일반 강조로 대체되어 카드로 렌더링됩니다.
- PNG와 SVG 중 무엇을 골라야 하나요?
- 이미지를 그대로 붙여넣는 곳에는 PNG가 안전합니다. SVG는 벡터라 확대해도, 인쇄해도 선명하고 파일 안에서 글자가 실제 텍스트로 남습니다.
- 이게 코드 편집기인가요?
- 아니요. 표현용 도구라 자동 완성, 린트, 코드 실행이 없습니다. 코드는 평소 쓰는 곳에서 작성하고, 이미지를 만들 때 여기에 붙여넣으세요.
- 이미지를 소셜 네트워크에 바로 올릴 수 있나요?
- 안 됩니다. Snippet Studio는 파일이나 클립보드 이미지를 만드는 데까지만 합니다. 공유는 직접 하며, 덕분에 내보내기의 부수 효과로 무언가 공개되는 일이 없습니다.
- 새로고침하면 작업 중인 내용은 어떻게 되나요?
- 이 기기에 로컬 초안이 복원되므로 새로고침으로 스니펫을 잃지 않고, 세션 중 편집은 되돌리기와 다시 실행으로 다룰 수 있습니다.